CS 200
Lecture 05 TheWeb (HTML, CGIs, & CSS)
CS 200 Spring 2019 1 The Web
Miscellaneous Notes
Abbreviations
aka Also Known As
CSS Cascading Style Sheets CWS Course Web Site
Reading
The Non-Designer’s Design Book, by Robin Williams: • Chapters 1 – 6
• Pages 117 – 120 on Web Sites
Optional Background Reading
Learning Web Design (2/e, library reserve)
Extracts from HTML & XHTML (5/e) — The Definitive Guide, Chapter 8 on Cascading Style Sheets
also available online from the University at http://safari.ora.com > MY BOOKSHELF – Book 27
Western Civilization’s tutorial on CSS properties (for reference)
http://www.westciv.com/style_master/academy/css_tutorial/introduction/css_intro.html
Sitepoint’s CSS Introduction and Documentation (for reference)
http://reference.sitepoint.com/css
The “Cascading Style Sheet Properties Quick Reference” (for reference)
in HTML & XHTML (5/e) The Definitive Guide, available online at http://proquest.safaribooksonline.com/ Book 27
CSS Pocket Reference (3/e), by Eric Meyer, O’Reilly & Associates (book store)
CS 200 Spring 2019
2
TheWeb
Administrivia
Please read and high-light, before lab:
• Assignment 5
• This week’s slides
There are hyper-text commented source files for many of the web pages used in this lecture
• Handouts / Commented HTML on the CWS
Major topics today
• read and recall pearl
• the client-server paradigm
• putting HTML in context
• relative vs absolute URLs
• tables as a layout tool
• forms
• styles in HTML (especially cascading style sheets – CSS)
Today’s lecture assumes an elementary understanding of HTML tags & attributes (eg. from CS 100)
• if you lack it, see Learning Web Design, or https://www.codecademy.com/courses/web-beginner-en-
HZA3b/0/1
CS 200 Spring 2019
3
TheWeb
New applications for this week
•
•
•
•
• • •
TextWrangler
a text editor
EditiX
a cross-platform XML editor
StyleMaster
a cross-platform CSS editor
Road Map
You can use any text editor you’d like, though some are nicer than others for various reasons This week’s lecture builds on the preceding weeks’ material:
tables styles graphics
CS 200 Spring 2019
4
TheWeb
Dialogs and Menus
• Menus
• Dialogs
• Toolbars & Palettes
Documentation
• The user manual
• Online help
• Online tutorials
The Read ‘n Recall Pearl
CS 200 Spring 2019
5
TheWeb
Assumptions
You have an understanding of: • Tables
• Styles
• Indirection
CS 200 Spring 2019
6
TheWeb
Things to Think About
• How does the manipulation of data objects differ from other applications?
• Is there more than one way to manipulate a data object?
CS 200 Spring 2019
7
TheWeb
Client-Server File Sharing
EG the AppleShare file Server on a local Mac Server
• your lab Mac is the “client”: slower, cheaper, smaller disks
• student.cs is the “server machine”: faster, more expensive, bigger disks
• AppleShare is the “server application,” running on the server machine
• “share points” are folders on the server that are made available over the network
• “network disks”
• “mounting” a share point (use the Finder’s Go > Connect to Server… menu item)
creates a “network disk” on your client machine
• an icon appears on the desktop, just as for a local disk
• use a network disk just like a local disk, although it’s a bit slower
• “network folders”
• these are subfolders (aka subdirectories) of a network disk
• unlike the other terms on this slide, “network folder” is a CS200-invented term As distinct from “peer-to-peer” file sharing
CS 200 Spring 2019
8
TheWeb
The Web (like file-sharing) has a client-server model
200 request .html
Exp .html
Schedule .html
oscar.cs.uwaterloo.ca (Server)
Web Server
Many of the machines on the Internet are “web servers”
• any machine (“client”) on the web can ask them for data
• actually, they’re asking a particular application
running on that machine for data
(which is identified by a “port”)
The client uses a “browser” to request & display web pages
• eg. Firefox, Safari, Chrome, Explorer, Opera, …
• browsers decide how to render the HTML, based on • HTML tags found in the document
• what kind of display is available
• user preferences
Lab Macintoshes (Clients)
•• •
The default Mac OS X web server application (Apache) is at /usr/sbin/httpd;
the default web document root folder is at /Library/ WebServer/Documents/.
• browsers are often (but not always) consistent in how they do this
For security
• a web server can only return files in the “server subtree”
• sometimes that’s rooted in the folder holding the server app
• usually this “web root folder” can be set
when the web server is started
CS 200 Spring 2019
9
TheWeb
Data Returned By Web Servers
The files returned can be
• web pages
• pictures
• other stuff…
A “web page” is a TEXT file containing
• text to be displayed (text “elements”)
• “tags”
• eg and
that control presentation of the text—they’re really styles • “links” containing “URLs” (eg and )
• to other web pages
• to graphics, for display on the page
• to sounds, to be played when the page is viewed
• etc—add post-install “plugins” to handle new file types
(/Library/Internet Plug-Ins/ or ~/Library/Internet Plug-Ins/ on Macs)
• URL = Uniform Resource Locator (eg “www.student.cs.uwaterloo.ca/~cs200/index.html”)
(aka URI = Uniform Resource Indicator—yuck)
CS 200 Spring 2019
10
TheWeb
Formatting Tags in WordPerfect
What you see here are “property tags”
but they could equally well be (named) style tags
Strip out all the formatting codes
to get a “text” or “ascii” file
T
CS 200 Spring 2019
11
TheWeb
The HTML for this web page
A Toy Web Page
Welcome to my Web page
Warning! This is not my real home page. It’s just a little something I made up for the occasion. But just in case you’re interested, I’ll tell you a bit about me.
Places I’ve Lived
- Akron, OH
- Hudson, OH
- Sourth Bend, IN
- Boston, MA
(Adapted from “Designing for the Web – Getting Started in a New Medium” by Jennifer Niederst and Edie Freedman.)
Yuck!
Recall that browsers ignore
• multiple blanks
• carriage returns
• blank lines
Use these to make your HTML more readable!
• You’ll lose marks in CS 200 if you don’t
• You’ll make your life difficult if you don’t
• It will be very difficult for anyone else to read and use your code if you don’t
CS 200 Spring 2019
12
TheWeb
The HTML for our Toy Web Page, Readably Formatted
Welcome to my Web page
Warning! This is not my real home page. It’s just a little something I made up for the occasion.
But just in case you’re interested, I’ll tell you a bit about me.
Places I’ve Lived
- Akron, OH
- Hudson, OH
- South Bend, IN
- Boston, MA
(Adapted from “Designing for the Web – Getting Started in a New Medium”
by Jennifer Niederst and Edie Freedman.)
CS 200 Spring 2019
13
TheWeb
HTML is stored in “[ASCII] text files”
HTML tags as (named) styles
• whose definitions are supplied by the browser
• same web page, different browser,
generally similar (but not identical) appearance…
Always use closing tags (eg
• otherwise the browser must guess their location
• be prepared for XHTML, XML & CSS
…
• does not mean “header”
• … contain information about the page
• eg.
• eg.
• eg.
… shows up in most browsers’ title bar browsers use … to label bookmarks
index engines give words in … extra weight
… contain info displayed in the page CS 200 Spring 2019
Chrome 54
Discussion Points
Safari 9.1.1
14
TheWeb
Firefox 48.0.1
More Discussion Points
Browsers also ignore tags they don’t recognize
• eg. tags you misspell
• this is actually a feature
• so newly invented tags don’t screw up old browsers
• so IE-specific tags don’t screw up Chrome, & vice-versa • etc
• but it makes debugging HTML harder
• therefore… when a tag doesn’t seem to have any effect
• suspect misspelling
• Validation – see the assignment for details
• that’s what the magic incantation is for (see next slide)
https://www.w3schools.com/tags/tag_doctype.asp
Upper case vs lower case
• who cares?
• HTML is case-insensitive:
• XML is case-sensitive
• suggestion: use lower case CS 200 Spring 2019
15
TheWeb
A Simple HTML Table
Top CS200 Marks
ID Number | Final Grade |
---|---|
94010203 | 81% |
98102030 | 75% |
96000123 | 67% |
CS 200 Spring 2019
For a list of valid doctypes, see
http://www.w3.org/QA/2002/04/valid-dtd-list.html
16
TheWeb
surround the entire table
surround a table row
surround a table (cell) definition
By default
a table and its cells are as wide as they need to be
For details, see
• HTML The Definitive Guide (library reserve) • PageSpinner Help
Tables as a (deprecated) all-purpose layout tool in HTML
• (Hmm. Are tables a useful layout tool in word processors?)
HTML Tables can be nested
and HTML cells can be “merged” • horizontally (colspan=”n”)
and/or
• vertically (rowspan=”n”)
• no L-shaped regions, however
HTML Table Tags
Mark Twain
Samuel Langhorne Clemens (November 30, 1835 – April 21, 1910), better known by his pen name Mark Twain, was an American humorist, satirist, novelist, writer, and lecturer.
Although Twain was confounded by financial and business affairs, his humor and wit were keen, and he enjoyed immense public popularity. At his peak, he was probably the most popular American celebrity of his time. In 1907, crowds at the Jamestown Exposition thronged just to get a glimpse of him. He had dozens of famous friends, including William Dean Howells, Booker T. Washington, Nikola Tesla, Helen Keller, and Henry Huttleston Rogers. Fellow American author William Faulkner is credited with writing that Twain was “the first truly American writer, and all of us since are his heirs.” Twain died in 1910 and is buried in Elmira, New York.
Pen Names
Clemens maintained that his primary pen name, “Mark Twain,” came from his years working on Mississippi riverboats, where two fathoms (12 feet, approximately 3.7 meters) or “safe water” was measured on the sounding line. The riverboatman’s cry was “mark twain” or, more fully, “by the mark twain” (“twain” is an archaic term for two). “By the mark twain” meant “according to the mark [on the line], [the depth is] two fathoms”. Clemens provides a footnote to Chapter 8 (“Perplexing Lessons”) of Life on the Mississippi where he explains “mark
CS 200 Spring 2019
17
TheWeb
Previewing your Webpage
• Save your work in the text editor
• Open the same file up in a web browser
• Every time you save the text file, refresh the webpage • For example…
Text Wrangler Chrome
• Some text editors or in browser text editors allow you to preview your page within the app
• It’s recommended to also preview it in common web browsers to make sure it works where others will see it
CS 200 Spring 2019
18
TheWeb
Chrome’s Inspect
Most browsers allow you to view the page source, which will help you with debugging your own webpages.
CS 200 Spring 2019
19
TheWeb
Safari’s > Show Inspector
CS 200 Spring 2019
20
TheWeb
URLs — Uniform Resource Locators
For search ,
(equivalent to search )
• http
• jcbServer
• cs.uwaterloo.ca
• jcbServer.cs.uwaterloo.ca
• 80
• /cs200/search/search.html
is the “protocol”
is the server’s “local name”
is the “domain” in which the server is located
is the server’s “host domain name”
is the “port” on which jcbServer’s web server application is listening is the “absolute path” from the server’s web root folder to the file
CS 200 Spring 2019
21
TheWeb
Another example:
Another Example URL
John C Beatty
fragments/bio/biography.html
• is a “relative path” to the target file
• starting in the folder containing the page holding the link
• (note the LACK of an initial “/” and host domain name)
works the same way CS 200 Spring 2019
22
TheWeb
The web root folder
• a web server can only return files in the “server subtree”
• sometimes that’s rooted in the folder holding the server app
• sometimes this “web root folder” can be set elsewhere
W ebRoot
1st Year 2nd Year
•
Relative vs. Absolute Paths (1)
1st Year
CS100 CS120 CS134
2nd Year
CS200 CS212 CS230
CS120
CS100
•
CS200
CS200.html hBook.html hPage.html
•
• ••
CS 200 Spring 2019
23
TheWeb
CS120.html CS100.html
• • • •
Relative vs. Absolute Paths (2)
A link in CS100.html to CS200.html could be written as
• CS200
• Note the initial slash
• This is an “absolute path”
• The host domain name is implicit
• ie the same as the referencing web page
Or as
• CS200
• Note the initial “••/••/”
• This is a “relative path”
• •• / means “go up one level to the parent folder”
• ••/••/ means “go up two levels,” etc
• note: for security reasons, the web server application will
prevent the path from rising above the web root folder!
• Note that cs200/cs200.html is also a relative path
Or using an explicit host domain name
AND an absolute path
W ebRoot
1st Year 2nd Year
• •
1st Year
CS100 CS120 CS134
2nd Year
CS200 CS212 CS230
• ••
CS120 CS100
CS100.html CS120.html •
• • • •
•
CS200
CS200.html hBook.html hPage.html
• •
• CS200 It makes no sense to combine a host domain name and a relative path
—what folder would the path be relative to? CS 200 Spring 2019
24
TheWeb
When to use relative vs. absolute paths
Absolute paths
• always start at the web root folder
• are necessary between machines
• if a host domain name is present, the path is necessarily absolute
Relative paths
• start at the document containing the link
• make it MUCH easier to move web pages around as a group
eg. if all the cs200 pages use relative URLs amongst themselves
then I can move the cs200 subtree somewhere else (like to another server)
without breaking the links between the cs200 pages
• but if a file in the group links to a file on the same machine not in the group
it must use an absolute file path (or the group can’t be moved w/o breaking that link)
IMPORTANT
• you MUST write “%20” instead of a space in URLs
• and look out for trailing blanks
So within a web site…
• use a relative path when the two files are more likely to be moved together (eg. a page & an image in it)
• use an absolute path when the two files are more likely to be moved separately
CS 200 Spring 2019
25
TheWeb
An HTML form is a web page
with “[interface] widgets” for supplying data:
• text edit boxes
• check boxes
• radio buttons
• pop-up menus
Forms
CS 200 Spring 2019
26
TheWeb
Forms and CGIs
Web Servers can’t know in advance:
• what data will be sent to them from forms
• what should be done with it
So there’s a convention (the “Common Gateway Interface”):
• for identifying the particular application
• to which form data should be sent for processing
A Lab Macintosh
jcbServer (Server)
TheWeb
Actually, the CGI scheme is more general than this:
•
When the submit button is pressed
• the data is sent to a web server
• the web server forwards the data
to a “cgi” (a separate program)
• the cgi processes the data &
returns a web page to the server
• the server passes that response
on to the browser
Plug-ins
CS 200 Spring 2019
network connection
a web server can run any application
and return its output
ReportMarks.cgi
University4
Students Register
Assignments Marks
Root .html
Implementation .html
ï
Apache — the web server app
Sybase
File Maker
27
mac6001 (Client)
Safari
The CS 200 Request Marks Form (simplified)
T
To retrieve your marks to date in CS 200, please enter your last name (case doesn’t matter) and student ID in the boxes shown below.
Then click on the Fetch Marks button – ordinarily it shouldn’t take more than thirty seconds or so for your marks to come back. (Please be patient – I’m only a Mac IIfx!)
If you find a discrepancy, please notify the course tutor as soon as possible.
Note the use of a “hidden parameter” that the user never sees so that forms for different courses can use the same cgi.
CS 200 Spring 2019
28
TheWeb
What Gets Sent to the Server (GET)
T
GET ../ReportMarks.cgi?course=cs200&surname=Daly&idnumber=00000000 HTTP/1.0 Connection: Keep-Alive
User-Agent: Mozilla/4.06 (Macintosh; U; PPC, Nav)
Host: jcbServer.cs.uwaterloo.ca
Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, image/png, */*
Accept-Encoding: gzip Accept-Language: en Accept-Charset: iso-8859-1,*,utf-8
The rules for this stuff are part of the
“http protocol.”
What comes back
../ReportMarks.cgi locates the program (a “cgi”) to which the server forwards the form’s data Notice
• that the URL from which a web page came always appears in the location bar • that the forms data is encoded in the URL
• how that URL appears in what’s sent to the server
• why the path to the cgi had better not contain a question mark!
CS 200 Spring 2019
29
TheWeb
POST Actions
The request marks form could have said