one | link list | examples | lecture notes home | csci e...

CSCI E‐12 Fundamentals ofWebsite Development

Table of Contents | All‐in‐One | Link List | Examples | Lecture Notes Home | CSCI E‐12 Home

A form for lecture feedback is available from the course web site. Please take two minutes to fill it out after you haveseen the lecture.

April 14, 2010

Harvard UniversityExtension School

Course Web Site: http://cscie12.dce.harvard.edu/

Instructor email: [email protected] staff email: [email protected]

Image created at wordle.net

CSCI E-12 - April 14, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100414/handout.html

1 of 77 4/14/2010 4:57 PM


2 of 77 4/14/2010 4:57 PM

GET /

view plain print ?

$ telnet www.npr.org 80 1.Trying 216.35.221.84... 2.Connected to www.npr.org. 3.Escape character is '^]'. 4.GET / HTTP/1.1 5.Host: www.npr.org 6. 7.HTTP/1.1 200 OK 8.Date: Tue, 21 Jul 2009 18:14:39 GMT 9.Server: Apache/2.2.4 (Unix) 10.Set-Cookie: v1st=E7C603597016F190; path=/; expires=Wed, 19 Feb 2020 14:28:00 GMT; domain=.n11.Set-Cookie: v1st=E7C603597016F190; path=/; expires=Wed, 19 Feb 2020 14:28:00 GMT; domain=.n12.Last-Modified: Tue, 21 Jul 2009 18:09:41 GMT 13.ETag: "11672-288e2340" 14.Accept-Ranges: bytes 15.Content-Length: 71282 16.Cache-Control: max-age=300 17.Expires: Tue, 21 Jul 2009 18:19:39 GMT 18.Vary: Accept-Encoding 19.Content-Type: text/html 20. 21.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 22. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 23.<html xmlns="http://www.w3.org/1999/xhtml"> 24. <head> 25. <title>NPR : National Public Radio : News & Analysis, World, US, Music & Art26. <style type="text/css" media="screen">@import "/templates/css/mainstyles.css";</style> 27. <style type="text/css" media="screen">@import "/templates/css/hp.css";</style> 28. <link rel="stylesheet" type="text/css" media="print" href="/templates/css/print_hp.css" />

29.

<link rel="alternate" type="application/rss+xml" title="NPR News" href="/rss/rss.php?id=1001" />

30.

<link rel="alternate" type="application/rss+xml" title="NPR Music" href="/rss/rss.php?id=1039" />

31.

 32. 33.


3 of 77 4/14/2010 4:57 PM

TCP/IP: Transmission Control Protocol/Internet Protocol

IP Addresses and Hostnames

E.g. the name cscie12.dce.harvard.edu resolves to the IP address of 140.247.197.241.

DNS: Domain Name System


4 of 77 4/14/2010 4:57 PM

Hosts. Over 732 million Internet hosts as of January 2010, ISC Internet Domain Survey

Web Sites. Over 206 million Web sites in March 2010, Netcraft Web Server Survey.


5 of 77 4/14/2010 4:57 PM

Name ("A" record): morpheus.dce.harvard.edu

IP Address: 140.247.197.241

Aliases (CNAME):

cscie12.dce.harvard.edu


cscis12.dce.harvard.edu

Domain Name System (DNS)

A hierarchical, distributed naming system.

Resolving: cscie12.dce.harvard.edu

Request from User Machine to User's Primary DNS Server1.Request from User's Primary DNS to Root Server2.Request to Root Server for ".edu" namespace (or .com, .gov, .net, .uk, .jp, etc.)3.Request to Primary "harvard.edu" DNS Server4.Request to Primary "dce.harvard.edu" DNS Server5.


6 of 77 4/14/2010 4:57 PM

TLDs are managed by the Internet Assigned Numbers Authority (IANA) A sample listing is below:

.com

.org

.edu

.gov

.mil

.net

2‐Letter Country Codes

.us

.de

.uk

complete list

More Top Level Domains.

.aero

.biz

.coop

.info

.museum

.name

.pro

List of all Generic Top Level Domains


7 of 77 4/14/2010 4:57 PM

Domain Name

Buy the domain through a "registrar"

Provide name servers

About $10/yr

1.

Hosting

Shared ($7‐15/mo)

Private

Virtual Private

2.

A very short list of hosting companies that I've done business with.

DreamHost

Go Daddy

Web.com


8 of 77 4/14/2010 4:57 PM

Domain Name: HARVARD.EDU

Registrant: Harvard University Network Operations Center 60 Oxford Street Cambridge, MA 02138 UNITED STATES

Administrative Contact: Jay Tumas Network Operations Manager Harvard University Network Operations Center 60 Oxford Street Cambridge, MA 02138 UNITED STATES (617) 496-8500 [email protected]

Technical Contact: Jay Tumas Network Operations Manager Harvard University Network Operations Center 60 Oxford Street Cambridge, MA 02138 UNITED STATES (617) 496-8500 [email protected]

Name Servers: EXTERNALDNS-C1.HARVARD.EDU 128.103.200.35 EXTERNALDNS-C2.HARVARD.EDU 128.103.200.51

Domain record activated: 27-Jun-1985Domain record last updated: 06-Apr-2010Domain expires: 31-Jul-2010


9 of 77 4/14/2010 4:57 PM

client‐server computingThe interaction between two programs when they communicate across a network. A program at one site sends a requestto a program at another site and awaits a response. The requesting program is called a client; the program satisfying therequest is called the server. (definition from The Internet Book, 2nd edition by Douglas E. Comer)

Application Layer of Network

HTTP (default port 80)

FTP (port 21)

SMTP (port 25)

POP

IMAP

telnet (port 23)

ssh (port 22)


10 of 77 4/14/2010 4:57 PM

Specifies the grammar of a conversation between an HTTP‐client (Web Browser) and an HTTP‐server (Web Server) is totake place.

view plain print ?

$ telnet www.npr.org 80 1.Trying 216.35.221.84... 2.Connected to www.npr.org. 3.Escape character is '^]'. 4.GET / HTTP/1.1 5.Host: www.npr.org 6. 7.HTTP/1.1 200 OK 8.Date: Tue, 21 Jul 2009 18:14:39 GMT 9.Server: Apache/2.2.4 (Unix) 10.Set-Cookie: v1st=E7C603597016F190; path=/; expires=Wed, 19 Feb 2020 14:28:00 GMT; domain=.n11.Set-Cookie: v1st=E7C603597016F190; path=/; expires=Wed, 19 Feb 2020 14:28:00 GMT; domain=.n12.Last-Modified: Tue, 21 Jul 2009 18:09:41 GMT 13.ETag: "11672-288e2340" 14.Accept-Ranges: bytes 15.Content-Length: 71282 16.Cache-Control: max-age=300 17.Expires: Tue, 21 Jul 2009 18:19:39 GMT 18.Vary: Accept-Encoding 19.Content-Type: text/html 20. 21.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 22. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 23.<html xmlns="http://www.w3.org/1999/xhtml"> 24. <head> 25. <title>NPR : National Public Radio : News & Analysis, World, US, Music & Art26. <style type="text/css" media="screen">@import "/templates/css/mainstyles.css";</style> 27. <style type="text/css" media="screen">@import "/templates/css/hp.css";</style> 28. <link rel="stylesheet" type="text/css" media="print" href="/templates/css/print_hp.css" />

29.

<link rel="alternate" type="application/rss+xml" title="NPR News" href="/rss/rss.php?id=1001" />

30.

<link rel="alternate" type="application/rss+xml" title="NPR Music" href="/rss/rss.php?id=1039" />

31.

 32. 33.


11 of 77 4/14/2010 4:57 PM

HTTP is Stateless

Each requested resource is a separate, independent, request to the server ‐‐ it is a stateless protocol.

HTTP Versions

W3C and Internet Engineering Task Force (IETF) oversees the Hypertext Transfer Protocol.

HTTP 1.0 (1996)

HTTP 1.1 (1999)

Extensions to HTTP

WebDAV

An HTTP Conversation

Client Request

METHOD Resource HTTP Version

Client Generated Headers

Request Body

Server Response

Status Line

Server Generated Headers

Data

HTTP 1.1 Methods

GET

POST

HEAD

PUT

DELETE

TRACE

OPTIONS


12 of 77 4/14/2010 4:57 PM

HTTP 1.1 status codes commonly seen

200 OK

301 Moved permanently

302 Moved temporarily

304 Not modified

401 Unauthorized

403 Forbidden

404 Not found

500 Internal server error

The complete list:

100 Continue101 Switching protocols200 OK201 Created202 Accepted203 Non-authoritative information204 No content205 Reset content206 Partial content300 Multiple choices301 Moved permanently302 Moved temporarily303 See other304 Not modified305 Use proxy400 Bad request401 Unauthorized402 Payment required403 Forbidden404 Not found405 Method not allowed406 Not acceptable407 Proxy authentication required408 Request timeout409 Conflict410 Gone411 Length required412 Precondition failed413 Request entity too large414 Request-URI too long415 Unsupported media type500 Internal server error501 Not implemented502 Bad gateway503 Service unavailable504 Gateway timeout505 HTTP version not supported


13 of 77 4/14/2010 4:57 PM

Simple form with one field named "email".

GET

view plain print ?

GET /cgi-bin/echo.cgi?email=me%40example.com HTTP/1.1 1.Host: morpheus.dce.harvard.edu 2.User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.2.3) Gecko/20100401 Fire/3.6.3 (.NET CLR 3.5.30729)

3.

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 4.Accept-Language: en-us,en;q=0.5 5.Accept-Encoding: gzip,deflate 6.Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 7.Keep-Alive: 115 8.Connection: keep-alive 9.

POST

view plain print ?

POST /cgi-bin/echo.cgi HTTP/1.1 1.Host: morpheus.dce.harvard.edu 2.User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.2.3) Gecko/20100401 Fire/3.6.3 (.NET CLR 3.5.30729)

3.

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 4.Accept-Language: en-us,en;q=0.5 5.Accept-Encoding: gzip,deflate 6.Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 7.Keep-Alive: 115 8.Connection: keep-alive 9.Referer: http://cscie12.dce.harvard.edu/lecture_notes/2010/20100210/example2.shtml 10.Cache-Control: max-age=0 11.Content-Type: application/x-www-form-urlencoded 12.Content-Length: 22 13.email=me%40example.com 14.


14 of 77 4/14/2010 4:57 PM

view plain print ?

HEAD /http/raspberry.gif HTTP/1.1 1.Host: cscis12.dce.harvard.edu 2. 3.HTTP/1.1 200 OK 4.Date: Tue, 10 Apr 2008 20:23:14 GMT 5.Server: Apache/2.2 (Fedora) 6.Last-Modified: Wed, 06 Apr 2005 19:30:42 GMT 7.ETag: "461fb8-348c-a0f67c80" 8.Accept-Ranges: bytes 9.Content-Length: 13452 10.Connection: close 11.Content-Type: image/gif 12. 13.Connection closed by foreign host. 14. 15.


15 of 77 4/14/2010 4:57 PM

Request (Browser)

Host

User‐Agent

Referer

Accept

Accept‐Language

Accept‐Encoding

Accept‐Charset

Cookie

If‐Modified‐Since

Response (Server)

Last‐Modified

Content‐Length

Content‐Type

Connection


16 of 77 4/14/2010 4:57 PM

View some of the Headers your browser is sending to the server

view plain print ?

Host: cscie12.dce.harvard.edu 1.User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.2.3) Gecko/20100401 Fire/3.6.3 (.NET CLR 3.5.30729)

2.

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 3.Accept-Language: en-us,en;q=0.5 4.Accept-Encoding: gzip,deflate 5.Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 6.Keep-Alive: 115 7.Connection: keep-alive 8.Referer: http://cscie12.dce.harvard.edu/lecture_notes/2010/20100414/slide12.html 9.Cookie: __utma=125837960.815626235.1271215648.1271215648.9999944619.172; _csuid=X7463AABCDE(direct)|utmccn=(direct)|utmcmd=(none); __utmb=125837960.11.10.1271299999; __utmc=125899999

10.

If-Modified-Since: Wed, 14 Apr 2010 11:51:54 GMT 11.Cache-Control: max-age=0 12.


17 of 77 4/14/2010 4:57 PM

Viewing HTTP Request and Response Headers

Firefox Extension ‐ Firebug

Firefox Extension ‐ Live HTTP Headers


18 of 77 4/14/2010 4:57 PM

Command Line

telnet

lwp‐requestDocumentation:

morpheus% man lwp-request

morpheus% lwp-request -hAn example:

morpheus% lwp-request -USed http://www.harvard.edu/


19 of 77 4/14/2010 4:57 PM

Problem: "Infinite" domain names; finite IP addresses.

Solution: "Virtual Hosts"

Example: all of the following names map to 140.247.197.241

morpheus.dce.harvard.edu



cscisl.dce.harvard.edu

cscis12.dce.harvard.edu

csci12.dce.harvard.edu

Host Header

This is required for HTTP 1.1 requests.

view plain print ?

HEAD /http/raspberry.gif HTTP/1.1 1.Host: cscis12.dce.harvard.edu 2. 3.HTTP/1.1 200 OK 4.Date: Tue, 10 Apr 2008 20:23:14 GMT 5.Server: Apache/2.2 (Fedora) 6.Last-Modified: Wed, 06 Apr 2005 19:30:42 GMT 7.ETag: "461fb8-348c-a0f67c80" 8.Accept-Ranges: bytes 9.Content-Length: 13452 10.Connection: close 11.Content-Type: image/gif 12. 13.Connection closed by foreign host. 14. 15.


20 of 77 4/14/2010 4:57 PM

String that identifies browser (vendor, version, OS).

Firefox 3.5 on WindowsMozilla/5.0 (Windows; U; Windows NT 5.1; en‐US; rv:1.9.2.3) Gecko/20100401 Firefox/3.6.3 (.NET CLR 3.5.30729)

Google Chrome 4 on WindowsMozilla/5.0 (Windows; U; Windows NT 5.1; en‐US) AppleWebKit/532.5 (KHTML, like Gecko) Chrome/4.1.249.1045Safari/532.5

Safari on iPadMozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en‐us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4Mobile/7B367 Safari/531.21.10

Safari on iPadMozilla/5.0 (iPhone; U; CPU iPhone OS 3_1_2 like Mac OS X; en‐us) AppleWebKit/528.18 (KHTML, like Gecko)Version/4.0 Mobile/7D11 Safari/528.16

Yahoo! Search Engine CrawlerMozilla/5.0 (compatible; Yahoo! Slurp/3.0; http://help.yahoo.com/help/us/ysearch/slurp)

Googlebot Search CrawlerMozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)


21 of 77 4/14/2010 4:57 PM

The URL of the referring page.

This semester, the top Google search from which users came to cscie12.dce.harvard.edu is "rundle/phark"

Referer field:http://www.google.com/search?q=rundle%2Fphark


22 of 77 4/14/2010 4:57 PM

How a Browser Knows What Kind of File it is Getting

Multipurpose Internet Mail Extensions (media types). Server will return a media type to client. Client will handle themedia appropriately. Some common media types are:

text/html

text/css

image/jpeg

image/png

image/gif

application/pdf

application/msword

application/vnd.ms‐excel

All media types listed in /etc/mime.types on morpheus

More information about MIME Types is available.

Questions:

How does the server know the media type?

How does the client know the media type?

How does the client know "what to do with" the file?


23 of 77 4/14/2010 4:57 PM

Resource can be in multiple formats and languages. Client preferences can determine which resource is returned.

Apache Documentation: Content Negotiation

Content Negotiation: MIME Types

Files:

morpheus% ls -l raspberry* 1.16 -rw-r--r-- 1 s12 s12 13452 Apr 6 15:30 raspberry.gif 2.16 -rw-r--r-- 1 s12 s12 16255 Apr 6 15:30 raspberry.jpg 3.12 -rw-r--r-- 1 s12 s12 8899 Apr 6 15:30 raspberry.png 4.

raspberry.gif

raspberry.jpg

raspberry.png

raspberry

The HTTP Transaction:

view plain print ?

HEAD /http/raspberry HTTP/1.1 1.Host: cscis12.dce.harvard.edu 2. 3.HTTP/1.1 200 OK 4.Date: Tue, 10 Apr 2008 20:39:20 GMT 5.Server: Apache/2.2 (Fedora) 6.Content-Location: raspberry.png 7.Vary: negotiate,accept 8.TCN: choice 9.Last-Modified: Wed, 06 Apr 2005 19:30:42 GMT 10.ETag: "461fba-22c3-a0f67c80;4edcb400" 11.Accept-Ranges: bytes 12.Content-Length: 8899 13.Connection: close 14.Content-Type: image/png 15. 16.Connection closed by foreign host. 17.


24 of 77 4/14/2010 4:57 PM

Client specifies MIME Types it accepts through HTTP "Accept" header.

view plain print ?

HEAD /http/raspberry HTTP/1.1 1.Host: cscis12.dce.harvard.edu 2.Connection: close 3.Accept: image/jpeg 4. 5.HTTP/1.1 200 OK 6.Date: Tue, 10 Apr 2008 20:40:17 GMT 7.Server: Apache/2.2 (Fedora) 8.Content-Location: raspberry.jpg 9.Vary: negotiate,accept 10.TCN: choice 11.Last-Modified: Wed, 06 Apr 2005 19:30:42 GMT 12.ETag: "461fb9-3f7f-a0f67c80;4edcb400" 13.Accept-Ranges: bytes 14.Content-Length: 16255 15.Connection: close 16.Content-Type: image/jpeg 17.


25 of 77 4/14/2010 4:57 PM

lang.html

English Version

French Version

German Version

A file listing:

morpheus% ls -l lang* 1.-rw-r--r-- 1 s12 s12 191 Apr 6 15:30 lang.html.de 2.-rw-r--r-- 1 s12 s12 193 Apr 6 15:30 lang.html.en 3.-rw-r--r-- 1 s12 s12 191 Apr 6 15:30 lang.html.fr 4.

HTTP Transaction:

view plain print ?

HEAD /http/lang HTTP/1.1 1.Host: cscis12.dce.harvard.edu 2.Connection: close 3. 4.HTTP/1.1 200 OK 5.Date: Tue, 10 Apr 2008 20:41:02 GMT 6.Server: Apache/2.2 (Fedora) 7.Content-Location: lang.html.en 8.Vary: negotiate,accept-language 9.TCN: choice 10.Accept-Ranges: bytes 11.Content-Length: 193 12.Connection: close 13.Content-Type: text/html; charset=UTF-8 14.Content-Language: en 15. 16.Connection closed by foreign host. 17.


26 of 77 4/14/2010 4:57 PM

view plain print ?

HEAD /http/lang HTTP/1.1 1.Host: cscis12.dce.harvard.edu 2.Connection: close 3.Accept-Language: de 4. 5.HTTP/1.1 200 OK 6.Date: Tue, 10 Apr 2008 20:44:16 GMT 7.Server: Apache/2.2 (Fedora) 8.Content-Location: lang.html.de 9.Vary: negotiate,accept-language 10.TCN: choice 11.Accept-Ranges: bytes 12.Content-Length: 191 13.Connection: close 14.Content-Type: text/html; charset=UTF-8 15.Content-Language: de 16. 17.Connection closed by foreign 18.

Content Negotiation: Gotcha

Permissions must be set to rwxr-xr-x on directories.Why?


27 of 77 4/14/2010 4:57 PM

Local cache and proxy‐server cache.

If‐Modified‐Since

Age

Expires

Last‐Modified

Cache‐Control

ETag

Proxy Servers


28 of 77 4/14/2010 4:57 PM

A request for the Apache Software Foundation logo

Initial request:

view plain print ?

GET /images/asf_logo.gif HTTP/1.1 1.Host: www.apache.org 2. 3.HTTP/1.1 200 OK 4.Date: Wed, 7 Apr 2010 13:29:51 GMT 5.Server: Apache/2.2.12 (Unix) mod_ssl/2.2.12 OpenSSL/0.9.7d mod_wsgi/3.2 Python/2.6.5rc2 6.Last-Modified: Sun, 19 Dec 2004 16:00:12 GMT 7.Etag: "12b2a10-1c6f-3eb9a194b7b00" 8.Accept-Ranges: bytes 9.Content-Length: 7279 10.Cache-Control: max-age=86400 11.Expires: Thu, 8 Apr 2010 13:29:51 GMT 12.Keep-Alive: timeout=5, max=100 13.Connection: Keep-Alive 14.Content-Type: image/gif 15.

After expiration, if still located in local cache, browser will make a conditional request:

view plain print ?

GET /images/asf_logo.gif HTTP/1.1 1.Host: www.apache.org 2.If-Modified-Since: Sun, 19 Dec 2004 16:00:12 GMT 3. 4.HTTP/1.x 304 Not Modified 5.Date: Wed, 14 Apr 2010 13:32:39 GMT 6.Server: Apache/2.2.12 (Unix) mod_ssl/2.2.12 OpenSSL/0.9.7d mod_wsgi/3.2 Python/2.6.5rc2 7.Last-Modified: Sun, 19 Dec 2004 16:00:12 GMT 8.Etag: "12b2a10-1c6f-3eb9a194b7b00" 9.Accept-Ranges: bytes 10.Content-Length: 7279 11.Cache-Control: max-age=86400 12.Expires: Thu, 15 Apr 2010 13:32:39 GMT 13.Content-Type: image/gif 14.


29 of 77 4/14/2010 4:57 PM

404 Not Found

Sometimes a file is not there...

view plain print ?

HEAD /http/blueberry.gif HTTP/1.1 1.Host: cscis12.dce.harvard.edu 2. 3.HTTP/1.1 404 Not Found 4.Date: Tue, 10 Apr 2008 20:24:27 GMT 5.Server: Apache/2.2 (Fedora) 6.Connection: close 7.Content-Type: text/html; charset=iso-8859-1 8. 9.Connection closed by foreign host. 10. 11.

Redirect

http://www.fas.harvard.edu/

http://www.fas.harvard.edu/home/

view plain print ?

HEAD / HTTP/1.1 1.Host: www.fas.harvard.edu 2. 3.HTTP/1.1 301 Moved Permanently 4.Date: Wed, 14 Apr 2010 13:50:59 GMT 5.Server: Apache/2.2.8 (Unix) mod_ssl/2.2.8 OpenSSL/0.9.7a DAV/2 mod_perl/2.0.4 Perl/v5.8.5

6.

Location: http://www.fas.harvard.edu/home/ 7.Content-Length: 240 8.Keep-Alive: timeout=5, max=100 9.Connection: Keep-Alive 10.Content-Type: text/html; charset=iso-8859-1 11. 12. 13.


30 of 77 4/14/2010 4:57 PM

Allows multiple HTTP requests to be made over the same TCP/IP connection.

view plain print ?

HEAD /home/ HTTP/1.1 1.Host: www.fas.harvard.edu 2.Connection: keep-alive 3. 4.HTTP/1.1 200 OK 5.Date: Tue, 13 Apr 2008 19:24:16 GMT 6.Server: Apache/1.3.26 (Unix) mod_ssl/2.8.10 OpenSSL/0.9.6g mod_perl/1.24 7.Keep-Alive: timeout=15, max=100 8.Connection: Keep-Alive 9.Content-Type: text/html 10. 11.HEAD /home/images/ HTTP/1.1 12.Host: www.fas.harvard.edu 13.Connection: close 14. 15.HTTP/1.1 200 OK 16.Date: Tue, 13 Apr 2008 19:24:34 GMT 17.Server: Apache 18.Connection: close 19.Content-Type: text/html 20. 21.Connection closed by foreign host. 22.


31 of 77 4/14/2010 4:57 PM

HTTP is a stateless protocol. Cookies provide a mechanism to "maintain state".

Cookie Central: The Unofficial Cookie FAQhttp://www.cookiecentral.com/faq/http://www.cookiecentral.com/

Maintaining State with Cookies

HTTP State Management Mechanismhttp://www.ics.uci.edu/pub/ietf/http/rfc2109.txt

Cookie Central: The Unofficial Cookie FAQhttp://www.cookiecentral.com/faq/http://www.cookiecentral.com/

Persistent Client State HTTP Cookieshttp://www.netscape.com/newsref/std/cookie_spec.html


32 of 77 4/14/2010 4:57 PM

Server returns cookie to HTTP client ("Set‐Cookie" response header)

HTTP client returns cookie to server ("Cookie" request header)

view plain print ?

morpheus% lwp-request -USed http://espn.go.com/ 1.User-Agent: lwp-request/2.07 2. 3.GET http://espn.go.com/ --> 200 OK 4. 5.Cache-Control: no-cache 6.Date: Tue, 10 Apr 2008 03:20:58 GMT 7.Pragma: no-cache 8.From: SPORTBARWEB08 9.Accept-Ranges: bytes 10.ETag: "802e571f7bc71:1762" 11.Server: Microsoft-IIS/5.0 12.Vary: Accept-Encoding 13.Content-Length: 122217 14.Content-Type: text/html; charset=iso-8859-1 15.Content-Type: text/html; charset=windows-1252 16.Last-Modified: Tue, 10 Apr 2008 03:19:21 GMT 17.Cache-Expires: Tue, 10 Apr 2008 03:24:22 GMT 18.Client-Date: Tue, 10 Apr 2008 03:21:02 GMT 19.Client-Peer: 198.105.193.43:80 20.Client-Response-Num: 1 21.P3P: CP="CAO DSP COR CURa ADMa DEVa TAIa PSAa PSDa IVAi IVDi CONi OUR SAMo OTRo BUS PHY ONL22.Refresh: 3600 23.Set-Cookie: SWID=C8F9AF31-F170-42BF-9471-50A95DA24C17; path=/; expires=Tue, 10-Apr-2027 03:20:59 GMT; domain=.go.com;

24.

Set-Cookie: DE2=dXNhO21hO2NhbWJyaWRnZTt0MTs1OzQ7NDs1MDY7MDQyLjM4MDstMDcxLjEzNTs4NDA7MjI7ODg25. 26.

ESPN Cookies

Set‐Cookie:

SWID=C8F9AF31‐F170‐42BF‐9471‐50A95DA24C17;

path=/;

expires=Tue, 10‐Apr‐2027 03:20:59 GMT;

domain=.go.com;

Set‐Cookie:

DE2=dXNhO21hO2NhbWJyaWRnZTt0MTs1OzQ7NDs1MDY7MDQyLjM4MDstMDcxLjEzNTs4NDA7MjI7ODg5OzY7

path=/;

expires=Tue, 17 Apr 2008 03:00:00 GMT;

domain=.go.com


33 of 77 4/14/2010 4:57 PM

name

expires

domain

path

secure

HTTP State Management Mechanism, RFC 2965

RFC 2109, February 1997RFC 2965, October 2000

name

comment

comment URL

discard

domain

max‐age

path

port

secure

version

Additional Cookie Notes

Client: 300 total cookies

4 kb per cookie

20 cookies per server or domain


34 of 77 4/14/2010 4:57 PM

Form that will set a Cookie:http://cscis12.dce.harvard.edu/http/cookie.cgi

Set‐Cookie HTTP Response Header:

Set-Cookie: YourName=David%20P.%20Heitmeyer; domain=cscis12.dce.harvard.edu; path=/http/;expires=Fri, 13-May-2008 18:05:04 GMT

view plain print ?

GET /http/cookie.cgi?name=David%20P.%20Heitmeyer HTTP/1.1 1.Host: cscis12.dce.harvard.edu 2.Connection: close 3. 4.HTTP/1.1 200 OK 5.Connection: close 6.Date: Wed, 13 Apr 2008 18:05:04 GMT 7.Server: Apache/2.2 (Fedora) 8.Content-Type: text/html; charset=ISO-8859-1 9.Client-Date: Wed, 13 Apr 2008 18:05:04 GMT 10.Client-Peer: 140.247.197.241:80 11.Client-Response-Num: 1 12.Client-Transfer-Encoding: chunked 13.Set-Cookie: YourName=David%20P.%20Heitmeyer; \ 14. domain=cscis12.dce.harvard.edu; \ 15. path=/http/; \ 16. expires=Fri, 13-May-2008 18:05:04 GMT 17. 18.<?xml version="1.0" encoding="iso-8859-1"?> 19.<!DOCTYPE html 20. PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 21. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 22.<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US"><head><title>Form</title>

23.

</head><body> 24.<h1>Hello, David P. Heitmeyer</h1> 25.</body></html> 26.Connection closed by foreign host. 27. 28.


35 of 77 4/14/2010 4:57 PM

Form that will set a Cookie:http://cscis12.dce.harvard.edu/http/cookie.cgi

view plain print ?

GET /http/cookie.cgi HTTP/1.1 1.Cookie: YourName=David%20P.%20Heitmeyer 2.Host: cscis12.dce.harvard.edu 3.Connection: close 4. 5.HTTP/1.1 200 OK 6.Connection: close 7.Date: Wed, 13 Apr 2008 18:11:40 GMT 8.Server: Apache/2.2 (Fedora) 9.Content-Type: text/html; charset=ISO-8859-1 10.Client-Date: Wed, 13 Apr 2008 18:11:40 GMT 11.Client-Peer: 140.247.197.241:80 12.Client-Response-Num: 1 13.Client-Transfer-Encoding: chunked 14. 15.<?xml version="1.0" encoding="iso-8859-1"?> 16.<!DOCTYPE html 17. PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 18. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 19.<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US"> 20.<head><title>Form</title></head><body> 21.<h1>Hello, David P. Heitmeyer</h1> 22. 23.


36 of 77 4/14/2010 4:57 PM

Firefox Webdeveloper Toolbar has a "Cookies" section.

Mozilla Cookie Manager


37 of 77 4/14/2010 4:57 PM

A UserID or SessionID (a long character/number string that is uniquely assigned) is often stored in cookie. The SessionIDis used as the key or identifier when storing information about the user or session.

For example, a user logs in to a site. If the username and password match, the server sets a cookie ("Set‐Cookie") in thebrowser that contains a session id; the server also makes an entry in website database that maps the session id to theusername. When the cookie is returned, the session id is read and the username is looked up in the database.


38 of 77 4/14/2010 4:57 PM

Web‐based Distributed Authoring and Versioning

WebDAV Resourceshttp://www.webdav.org/

From the WebDAV Resources :

WebDAV stands for "Web‐based Distributed Authoring and Versioning". It is a set of extensions to theHTTP protocol which allows users to collaboratively edit and manage files on remote web servers.


39 of 77 4/14/2010 4:57 PM

HTTP : the definitive guide, by David Gourley and Brian Totty

W3C HTTP


40 of 77 4/14/2010 4:57 PM

Apache HTTP Server

Microsoft IIS

Other

nginx

Google (Google Sites)

lighttpd

Web Server Market Share

Netcraft Web Server Survey


41 of 77 4/14/2010 4:57 PM

Apache Software Foundation

Apache HTTP Server Project

Apache 1.3

Apache 2.x

Apache Modules

PHP

Perl

Python

many, many others


42 of 77 4/14/2010 4:57 PM

Custom Error Documents

Redirect

Rewrite

Setting HTTP Expires Headers

Compressing content before delivery

Directory Index


43 of 77 4/14/2010 4:57 PM

Server Configuration (httpd.conf)Unless you are the server administrator, you generally will not have access to this account. On the DCE systems,you do not have read or write access to this file. Server configuration is read at server start or restart.

Per Directory (.htaccess)Certain configuration directives for Apache can be placed within per‐directory .htaccess files. .htaccess fileis read on a per request basis.


44 of 77 4/14/2010 4:57 PM

document root: /home/s12/htdocsfilename: .htaccesslocation: /home/s12/htdocs/apache/.htaccesscontents:

ErrorDocument 404 status404.html 1.

filename: status404.htmllocation: /home/e12/htdocs/apache/status404.html

http://cscie12.dce.harvard.edu/apache/ZZZ.html

Apache Default 404 document:

Custom 404 document:


45 of 77 4/14/2010 4:57 PM

Directives within .htaccess files apply to the directory that contains the .htaccess file and all its descendants.

Directives within the file,/home/courses/j/h/jharvard/public_html/.htaccess

would apply to all files within and "under" the public_html directory for the user jharvard.

Directives within the file,/home/courses/j/h/jharvard/books/.htaccess

would apply to all files within and "under" the public_html/books directory for the user jharvard.


46 of 77 4/14/2010 4:57 PM

Internal Server Error

Can't "see" the file

Incorrect Permissions


47 of 77 4/14/2010 4:57 PM

500 Internal Server ErrorIf you see begin seeing 500 Internal Server Error responses from the server after you have created or edited an.htaccess file, the most likely cause of the problem is incorrect permissions and/or an error in the directive syntax.

Permissions on the .htaccess file are not set correctly. Just like HTML and image files, the server must be ableto read the .htaccess file. The simplest way to allow that is to make your .htaccess file readable by "other".

morpheus% pwd 1./home/courses/j/h/jharvard/public_html 2.morpheus% ls -l .htaccess 3.-rw------- 1 jharvard founder 349 Nov 27 00:03 .htaccess 4.morpheus% chmod o+r .htaccess 5.morpheus% ls -l ~/public_html/.htaccess 6.-rw----r-- 1 jharvard founder 349 Nov 27 00:03 .htaccess 7.

Syntax Error. An error in the syntax of a directive the .htaccess file will result in a 500 Internal Server Error. Inaddition, correct usage of a directive that is not allowed in the .htaccess file will result in a 500 status code.Whether or not a directive is allowed depends upon the server configuration file (httpd.conf; AllowOverride) andthe directive itself.


48 of 77 4/14/2010 4:57 PM

You can't "see" your .htaccess file.

HTTPThe web server is typically configured to deny requests for .htaccess files. For example, the file correspondingto the URL, http://cscie12.dce.harvard.edu/.htaccess exists and is readable by the Web server, but if we try tofollow the link, we get a 403 Forbidden response.

UNIXThe ls command will not list files or directories that begin with a '.' (dot). In order to see the .htaccess filewhen you do a directory listing, use the ‐a (all) option:

SFTPSometimes your SFTP program will hide the "dot" files unless explicitly told to show them.


49 of 77 4/14/2010 4:57 PM

Configuration directives can be limited by using "sections", such as

Directory

Location

Files

VirtualHost

DirectoryMatch

LocationMatch

FilesMatch

Within .htaccess

Note that only Files and FilesMatch can be used within .htaccess files.

Examples:

<Files .htaccess> 1. Order allow,deny 2. Deny from all 3.</Files> 4.

Examples:

# deny access to any tilde backup files 1.<Files *~> 2. Order allow,deny 3. Deny from all 4.</Files> 5.


50 of 77 4/14/2010 4:57 PM

.htaccess

ErrorDocument 401 /~jharvard/error/status401.html 1.ErrorDocument 403 /~jharvard/error/status403.html 2.ErrorDocument 404 /~jharvard/error/status404.html 3.

ErrorDocument directive

Custom Error Responses


51 of 77 4/14/2010 4:57 PM

Publish "clean" URLs, and redirect

Site reorganization changes URL ‐‐ redirect old to new

Redirect

Rewrite

Meta http‐equiv refresh

Redirecting Requests

HTTP Status Codes:301 Moved permanently302 Moved temporarily

Redirecting client requests can be very useful:

URL moves to a new locationDo your part to Fight Linkrot! (Jakob Nielson's Alertbox, http://www.useit.com/alertbox/980614.html )

resource removed

site structure is reorganized

Provide "friendly" URLs to advertise, publish, or refer to foot‐long URLs.


52 of 77 4/14/2010 4:57 PM

Redirect directive

.htaccess

Redirect 302 /apache/dce.html http://www.dce.harvard.edu 1.Redirect 301 /apache/church_st http://map.harvard.edu/level3.cfm?mapname=camb_allston&tile=F7&quadrant=A&series=W

2.

Redirect 302 /dropbox http://isites.harvard.edu/icb/icb.do?keyword=cscie12-2010&pageid=icb.page328094&pageContentId=icb.pagecontent671970&state=maximize&login=yes

3.

Try it:

http://cscie12.dce.harvard.edu/dropbox

http://cscie12.dce.harvard.edu/apache/church_st

HTTP response is 302 and the location.

view plain print ?

GET /apache/dce.html HTTP/1.1 1.Host: cscis12.dce.harvard.edu 2.Connection: close 3. 4.HTTP/1.1 302 Found 5.Date: Wed, 13 Apr 2008 20:03:10 GMT 6.Server: Apache/2.2.49 (Fedora) 7.Location: http://www.dce.harvard.edu/ 8.Content-Length: 302 9.Connection: close 10.Content-Type: text/html; charset=iso-8859-1 11.

Most HTTP clients will automatically make a request for the new location:

view plain print ?

morpheus% lwp-request -USed http://cscis12.dce.harvard.edu/apache/dce.html 1.GET http://www.dce.harvard.edu/ 2.User-Agent: lwp-request/2.06 3. 4.GET http://cscis12.dce.harvard.edu/apache/dce.html --> 302 Found 5.GET http://www.dce.harvard.edu/ --> 200 OK 6.Connection: Close 7.Date: Wed, 13 Apr 2008 20:01:26 GMT 8.Accept-Ranges: bytes 9.Server: Orion/2.0.6 10.Content-Length: 3619 11.Content-Type: text/html 12.Content-Type: text/html; charset=iso-8859-1 13.Last-Modified: Wed, 27 Oct 2007 18:45:00 GMT 14.Client-Date: Wed, 13 Apr 2008 20:01:49 GMT 15.Client-Peer: 140.247.198.100:80 16.Client-Response-Num: 1 17.


53 of 77 4/14/2010 4:57 PM

mod_rewrite uses regular expressions to match on a pattern and rewrite incoming URLs to a new URL location.

Apache mod_rewrite

mod_rewrite reference

Using mod_rewrite from within .htaccess

If you use RewriteRule from within an .htaccess files, you must use the RewriteBase directive.See: http://httpd.apache.org/docs/2.2/mod/mod_rewrite.html#rewritebase


54 of 77 4/14/2010 4:57 PM

Note: redirection may also be achieved on some browsers by using the http-equiv attribute of the <meta> element.The recommended method is to do it at the server level.

In html head element:

view plain print ?

 1. 2.<meta http-equiv="Refresh" content="10; URL=http://www.harvard.edu/"/> 3.


55 of 77 4/14/2010 4:57 PM

Module mod_expires

.htaccess

ExpiresActive On 1. 2.ExpiresByType text/html A3600 3.# HTML expires in 1 hour 4. 5.ExpiresByType image/gif A2592000 6.# GIF expires in 30 days 7. 8.ExpiresByType image/jpeg A2592000 9.# JPEG expires in 30 days 10. 11.ExpiresByType image/png A2592000 12.# PNG expires in 30 days 13. 14.# types not specified 15.ExpiresDefault "now plus 1 day" 16.# expires in 1 day 17.

Or, expire based upon modification time of document:ExpiresActive On 1.ExpiresByType text/html M86400 2.# HTML expires 1 day after it was last modified 3.ExpiresDefault M86400 4.


56 of 77 4/14/2010 4:57 PM

If you do not want your page cached, set these HTTP response headers:

view plain print ?

Cache-control: no-cache 1.Pragma: no-cache 2.Expires: <set to now> 3.

In .htaccess in Apache, this would translate to:

ExpiresDefault "now" 1.Header set Pragma "no-cache" 2.


57 of 77 4/14/2010 4:57 PM

mod_deflate compresses content before sending to web browser.

Simple use:

AddOutputFilterByType DEFLATE text/html 1.AddOutputFilterByType DEFLATE text/css 2.AddOutputFilterByType DEFLATE text/plain 3.AddOutputFilterByType DEFLATE text/xml 4.AddOutputFilterByType DEFLATE text/css 5.AddOutputFilterByType DEFLATE application/x-javascript 6.


58 of 77 4/14/2010 4:57 PM

70 to 75% reduction for text files (markup, CSS, non‐minified JS)

50% reduction for 'minified' JS

Harvard Summer School CSCI Course Listing

70% smaller for compressed files

27% smaller for total page weight


59 of 77 4/14/2010 4:57 PM


60 of 77 4/14/2010 4:57 PM

Note: Remember the difference between a directory having rwx-----x and rwx---r-x permissions?

DirectoryIndexWould you prefer main.html or overview.html to be the default files returned when a directory isrequested?

mod_autoindexProvides for automatic indexing of a directory.

DirectoryIndex

DirectoryIndex index.html main.html overview.html slide1.html 1.


61 of 77 4/14/2010 4:57 PM

mod_autoindex

Basic

Custom

The details:


62 of 77 4/14/2010 4:57 PM

morpheus% pwd /home/courses/c/s/cscis12/public_html/autoindex/ex2 1.morpheus% ls -la 2.total 28 3.drwxr-xr-x 2 csci12 courses 8192 Nov 27 13:28 . 4.drwxr-xr-x 6 csci12 courses 8192 Nov 27 13:11 .. 5.-rw-r--r-- 1 csci12 courses 207 Nov 27 13:12 .htaccess 6.-rw-r--r-- 1 csci12 courses 147 Nov 27 13:09 HEADER.html 7.-rw-r--r-- 1 csci12 courses 66 Nov 27 13:09 README.html 8.-rw-r--r-- 1 csci12 courses 4168 Nov 27 12:58 client-server.gif 9.-rw-r--r-- 1 csci12 courses 906 Nov 27 12:58 slide1.html 10.-rw-r--r-- 1 csci12 courses 743 Nov 27 12:58 slide2.html 11.-rw-r--r-- 1 csci12 courses 1208 Nov 27 12:58 slide3.html 12.morpheus% cat .htaccess 13.IndexOptions FancyIndexing 14.IndexOptions IconsAreLinks IconHeight=22 IconWidth=20 \ 15. NameWidth=* ScanHTMLTitles SuppressLastModified \ 16. SuppressSize SuppressColumnSorting \ 17. SuppressHTMLPreamble 18.IndexIgnore *.gif .. 19.morpheus% 20.

Example with Course Lecture Notes


63 of 77 4/14/2010 4:57 PM

Context: can these directives be in .htaccess files?

AllowOverride: is the server configured to allow this group of directives to be overriden in this location?

Is the required module loaded?


64 of 77 4/14/2010 4:57 PM

Certain Apache directives are legal within .htaccess files. Some are not.See the Apache Documentation for details. Specifically, look at the Context line that is given for the directive in question.

Apache Core Featureshttp://www.apache.org/docs/2.2/mod/core.html

Apache Module Listhttp://www.apache.org/docs/2.2/mod/

standard Apache Directives

The following is an excerpt from the Apache HTTP Server Version 2.2 documentation


Syntax: ErrorDocument error‐code documentContext: server config, virtual host, directory, .htaccessStatus: coreOverride: FileInfoCompatibility: The directory and .htaccess contexts are only available in Apache 1.1 and later.

Also, the "a" indicator on the Apache Quick Reference Card indicates that the directive is valid within an .htaccessfile.


65 of 77 4/14/2010 4:57 PM

Users are allowed to override certain aspects of the main server configuration.The main server configuration file (httpd.conf) contains an AllowOverride directive that determines which directiveswithin .htaccess files Apache will process. The Override line that is given for each directive in the Apachedocumentation indicates which configuration directive must be active in order to use that directive with an .htaccessfile.

For the FAS system, the main server configuration file has the following directive in place for users' public_htmldirectories:

AllowOverride FileInfo AuthConfig Limit Indexes Options 1. 2.


Syntax: ErrorDocument error‐code documentContext: server config, virtual host, directory, .htaccessStatus: coreOverride: FileInfoCompatibility: The directory and .htaccess contexts are only available in Apache 1.1 and later.


66 of 77 4/14/2010 4:57 PM

Apache is distributed with several modules. These modules may or may not be active within the Apache server withwhich you are working. The Core features will always be available.

For example, if the Rewrite Module (mod_rewrite) has not been activated, none of the Rewrite directives will beavailable to use.

Refer to the Status and Module lines in the documentation for each directive and to the documentation for the specificApache installation you are using.


67 of 77 4/14/2010 4:57 PM


68 of 77 4/14/2010 4:57 PM


69 of 77 4/14/2010 4:57 PM


70 of 77 4/14/2010 4:57 PM

Data Collection

Email

Database


71 of 77 4/14/2010 4:57 PM

FormMail Documentation. Note that this script can be used to send email only to addresses ending with .harvard.edu

action

http://morpheus.dce.harvard.edu/cgi‐bin/FormMail

parameters

recipient

subject

email

redirect

required

sort

env_report

print_config

print_blank_fields

...see documentation for complete list


72 of 77 4/14/2010 4:57 PM

Example 11.1 ‐ Server Program: FormMail ‐ View example by itself

view plain print ?

<form action="http://morpheus.dce.harvard.edu/cgi-bin/FormMail" method="get" enctype="application/x-www-form-urlencoded">

1.

<div>Your Email Address: 2. <input type="text" name="email"/></div> 3. <div>Your Name: 4. <input type="text" name="realname"/></div> 5. <div>Subject: 6. <select name="subject"> 7. <option value="Lecture Question">Lecture Question</option> 8. <option value="Assignment Question">Assignment Question</option> 9. <option value="Syllabus Question">Syllabus Question</option> 10. <option value="Website Question">Website Question</option> 11. </select> </div> 12. <div>Message: 13. <br/> 14. <textarea rows="10" cols="60" name="message">Please type message here... 15. </textarea> </div> 16. <div> 17. <input type="hidden" name="recipient" value="[email protected]"/> 18. </div> 19. <div> 20. <input type="submit" value="Send Email"/> 21. </div> 22.</form> 23.

Your Email Address:

Your Name:

Subject: Message:

Markup Display


73 of 77 4/14/2010 4:57 PM


74 of 77 4/14/2010 4:57 PM

Redirect user to a "Thank you" page with the "redirect" parameter.

Example 11.2 ‐ FormMail with 'redirect' page ‐ View example by itself

view plain print ?

<form action="http://morpheus.dce.harvard.edu/cgi-bin/FormMail" method="get" enctype="application/x-www-form-urlencoded">

1.

<div>Your Email Address: 2. <input type="text" name="email"/></div> 3. <div>Your Name: 4. <input type="text" name="realname"/></div> 5. <div> 6. <input type="hidden" name="subject" value="Favorite Ice Cream"/> What ice 7. cream do you like? 8. <br/> 9. <input type="checkbox" name="icecream" value="chocolate"/>Chocolate 10. <br/> 11. <input type="checkbox" name="icecream" value="vanilla"/>Vanilla 12. <br/> 13. <input type="checkbox" name="icecream" value="strawberry"/>Strawberry 14. <br/> 15. <input type="hidden" name="recipient" value="[email protected]"/> 16. <input type="hidden" name="redirect" value="http://www.herrells.com/"/> 17. <input type="hidden" name="required" value="icecream,realname"/> </div> 18. <div> 19. <input type="submit" value="Send Email"/> 20. </div> 21.</form> 22.

Your Email Address:

Your Name:

What ice cream do you like?

Chocolate

Vanilla

Markup Display


75 of 77 4/14/2010 4:57 PM

Strawberry


76 of 77 4/14/2010 4:57 PM

Copyright © 1998‐2010 David P. Heitmeyer

FAS IT offers a Data Collection Tool that allows you to send data submitted via an HTML form to a database. The data canbe viewed online (in HTML) or downloaded in an Excel file. Note that a Harvard HUID and PIN are required to use thistool.

Example 11.3 ‐ Data Collection Tool from FAS IT ‐ View example by itself

view plain print ?

<form method="post" action="https://www.datacollection.fas.harvard.edu/cgi-bin/form2db.cgi" enctype="application/x-www-form-urlencoded">

1.

<div> 2. <input type="hidden" name="form2db" value="cscie12_test"/> 3.  4. What ice cream do you like? 5. <br/> 6. <input type="checkbox" name="icecream" id="ic_chocolate" value="chocolate"/> 7. <label for="ic_chocolate">Chocolate</label> 8. <br/> 9. <input type="checkbox" name="icecream" id="ic_hcp" value="herrell's chocolate pudding"/> 10. <label for="ic_hcp">Herrell's Chocolate Pudding</label> 11. <br/> 12. <input type="checkbox" name="icecream" id="ic_cpb" value="chocolate peanut butter"/> 13. <label for="ic_cpb">Chocolate Peanut Butter</label> 14. <br/> 15. <input type="checkbox" name="icecream" id="ic_vanilla" value="vanilla"/> 16. <label for="ic_vanilla">Vanilla</label> 17. <br/> 18. <input type="checkbox" name="icecream" id="ic_strawberry" value="strawberry"/> 19. <label for="ic_strawberry">Strawberry</label> 20. <br/> 21. <input type="submit"/> </div> 22.</form> 23.

What ice cream do you like?

Chocolate

Herrell's Chocolate Pudding

Chocolate Peanut Butter

Vanilla

Strawberry

Table of Contents | All‐in‐One | Link List | Examples | Lecture Notes Home | CSCI E‐12 Home

Markup Display


77 of 77 4/14/2010 4:57 PM