SDSU CS 596 Client-Server Programming
HTML and HTTP

[To Lecture Notes Index]
San Diego State University -- This page last updated March 21, 1996
----------

References
Hypertext Transfer Protocol - HTTP/1.0, Berners-Lee, Fielding, Nielson,
URL:http://www.ics.uci.edu/pub/ietf/http/draft-fielding-http-spec-01.txt

Uniform Resource Locators (URL), Berners-Lee, Masinter, McCahill; RFC 1738


URL


URL = Uniform Resource Locator
gopher://gopher.yoyodyne.com/
news:rec.gardening
http://www.yoyodyne.com/pub/foobar.html
http://www.yoyodyne.com/pub/foobar.html?roger



Common Internet Scheme Syntax
URL schemes that involve the direct use of an IP-based protocol to a specified host on the Internet use a common syntax for the scheme-specific data:
//<user>:<password>@<host>:<port>/<url-path>

gopher
gopher://<host>:<port>/<gopher-path>
http
http://<host>:<port>/<path>?<searchpart>
mail
mailto:<rfc822-addr-spec>
news
news:<newsgroup-name>
news:<message-id>

prospero
prospero://<host>:<port>/<hsoname><field>=<value&t;
telnet
telnet://[<user>:<password>]@<host>[:<port>/]
wais
wais://<host>:<port>/<database>
wais://<host>:<port>/<database>?<search>
wais://<host>:<port>/<database>/<wtype>/<wpath>

HTML

Some Buzz Words

WWW
World Wide Web (or Web, for short)
SGML
Standard Generalized Markup Language
this is a standard for describing markup languages


DTD
Document Type Definition
this is a specific markup language, written using SGML
HTML
HyperText Markup Language
HTML is a SGML DTD.
HTML uses markup tags to tell the Web browser how to display the text

What is HTML?

HTML is a language for describing structured documents

HTML does not describe page layout

This language is used by Web browsers to render the document and display it to a user

See
http://www.ics.uci.edu/pub/ietf/html/
or
http://www.w3.org/hypertext/WWW/MarkUp/#specs
For more information on versions of HTML


Learning HTML

Netscape has a "Document Source" menu which displays the html of the page you are viewing



HTML Basics

Tags are used to mark a document
Some Tags
Tags are not case sensitive Except for <pre> </pre> tags extra white spaces between tags is ignored
<h1> </h1><html> </html><ol> </ol><hr>
<h2> </h2><head> </head><ul> </ul><br>
<h3> </h3><base><em> </em>
<h4> </h4><link><li>
<h5> </h5><title> </title><code> </code>
<h6> </h6><p> </p><a> </a>
The following are equivalent
<TITLE>This is a Title</TITLE>

<TITLE>
This is a Title
</title>

<tiTLe>
This                is

 
a                                                                         Title
</title>

Basic HTML Document
<HTML>
<HEAD>
<TITLE>Sample HTML Document</TITLE>
</HEAD>

<BODY>
This is a document
</BODY>
</HTML>
Some Basic Tags

<CENTER> center </CENTER>
<B> bold text </B>
<CENTER><B> center </B></CENTER>
<I> italic text </I>
<TT> typewriter text, </TT>

<CITE> for titles of books, films, etc. </CITE>
<CODE> for snippets of computer code.</CODE>
<STRONG> for strong emphasis</STRONG>

<HR> tag produces a horizontal line

Old paragraph style<P>

<P> New paragraph style
uses start and end tags
</P>
HTML Example
HTML Source

<!DOCTYPE HTML SYSTEM "html.dtd">
<HTML>
<HEAD>
    <TITLE>The simplest HTML example</TITLE>
</HEAD>
<BODY>
<H1>This is a level-one heading</H1>
<P>Welcome to the world of HTML. 
This is one paragraph.</P>
<P>And this is a second.</P>
</BODY>
</HTML>


As Displayed by Web browser


This is a level one heading

Welcome to the world of HTML. This is one paragraph.

And this is a second.
Links
Simple

In document Foo.html create a link to document fancy.html

<a href="fancy.html#MyLink">Click On Me</a>

In document fancy.html indicate the link by
<a name="MyLink">You end up here</a>


General Link

Link to a document on another machine
<A HREF="http://www.racal.com/rfc.html">
Internet RFCs
</A>


Link to an image
<A HREF="http://www.racal.com/rfc.gif">
Great Picture of Internet RFCs
</A>


Type of Files for Links

<A HREF="http://host/fileName.extensions">
Great Stuff Found Here
</A>

File Type	Extension 
Plain text 	.txt 
HTML document 	.html 
GIF image 	.gif 
TIFF image 	.tiff 
XBM bitmap image 	.xbm 
JPEG image 	.jpg or .jpeg 
PostScript file 	.ps 
AIFF sound 	.aiff 
AU sound 	.au 
QuickTime movie 	.mov 
MPEG movie 	.mpeg or .mpg 

Sample Document
<!DOCTYPE HTML SYSTEM "html.dtd">
<HTML><HEAD>
<TITLE>CS-596: Assignments</TITLE></HEAD>
<BODY>
<H2><IMG SRC="http://www.sdsu.edu/graphics/sdsu_logo_3.gif" ALIGN="BOTTOM" ALT="SDSU" HSPACE=20>
CS-596: Client-Server Programming<br>
<center>
CS-596: Assignments
</center>
</H2>
<CENTER>
<A HREF="../index.html">[To Course Home Page]</a><br>
San Diego State University<I> -- This page last updated March 19, 1996</I>
</CENTER>
<IMG SRC="http://www.sdsu.edu/graphics/divider_red.gif" WIDTH=100% HEIGHT=6
ALT="----------------------------------------------------------------------"><P>
<UL>
<LI><A HREF="as1.html">Assignment 1: Some Java Programs </A></LI>   Due 2/15/96
<LI><A HREF="as2.html">Assignment 2: Grade Reporter</A></LI>   Due Date: March 19
<LI><A HREF="as1Grading.html">Grading Assginment 1: Some Java Programs</A></LI>   Due Feb 29
<LI><A HREF="as3.html">Assignment 3: First Server</A></LI>   Due March 5
<LI><A HREF="as4.html">Assignment 4: First Client</A></LI>   Due March 12
<LI><A HREF="as5.html">Assignment 5: First Network Server</A></LI>   Due March 14
<LI><A HREF="as4Grading.html">Grading Assignment 2: Grade Reporter </A></LI>   Due March 26

</UL>
<IMG SRC="http://www.sdsu.edu/graphics/divider_red.gif" WIDTH=100% HEIGHT=6 ALT="------------------------------------------------------------------">
<center>
<img src=http://www.sdsu.edu/cgi-bin/nph-counter?url=http://cs.sdsu.edu:8080/~whitney/courses/spring96/cs596/assignments/index.html&width=5>
</center>

</BODY></HTML>

HTTP



HyperText Transfer Protocol

stateless, object-oriented protocol

The typing and negotiation of data representation, allows systems to be built independently of the data being transferred

Assigned port 80

Basic Server-Client Interaction

Client: Open connection

Server: Accept/Reject connection

Client: Send request

Server: Send response to request

Connection closed
Augmented BNF


"literal"
Quotation marks surround literal text. Unless stated otherwise, the text is case-insensitive.

rule1 | rule2
Elements separated by a bar ("|") are alternatives,

(rule1 rule2)
Elements enclosed in parentheses are treated as a single element.
(elem (foo | bar) elem) =
elem foo elem |
elem bar elem".

*rule
"*" preceding an element indicates repetition

<n>*<m>element
at least <n> and at most <m> occurrences of element
"1*3element" allows one or two or three elements
Default values n =0 and m = infinity

[rule]
Square brackets enclose optional elements;

<n>(element)
exactly <n> occurrences of (element)
2DIGIT is a 2-digit number

<n>#<m>element
at least <n> and at most <m> elements, each separated by one or more commas (",") and optional linear white space (LWS).

; comment
A semi-colon, set off some distance to the right of rule text, starts a comment that continues to the end of line.

OCTET = <any 8-bit character>
CHAR = <any US-ASCII character (octets 0 - 127)>
UPALPHA = <uppercase letter "A".."Z">
LOALPHA = <lowercase letter "a".."z">
ALPHA = UPALPHA | LOALPHA
DIGIT = <"0".."9">
CTL = <control character (octets 0 - 31) and DEL>
CR = <carriage return (13)>
LF = <linefeed (10)>
SP = <space (32)>
HTAB = <horizontal-tab (9)>
<"> = <double-quote mark>
LWS = [CRLF] ( SP | HTAB )

HTTP Message Format



HTTP-message   =	Simple-Request	; 	HTTP/0.9 messages
	| Simple-Response
	| Full-Request	; 	HTTP/1.0 messages
	| Full-Response


Full-Request   =	Request-Line 
	*( General-Header   | Request-Header  | Entity-Header ) 
	CRLF
	[ Entity-Body ]


Full-Response  = 	Status-Line      
	*( General-Header   | Request-Header   | Entity-Header ) 
	CRLF
	[ Entity-Body ]


HTTP-header	= field-name ":" [ field-value ] CRLF

Entity-Body	= *OCTET


Client Request

Request    = Simple-Request | Full-Request
Simple-Request = "GET" SP Request-URI CRLF

Simple-Request Example

telnet: saturn 8080
Server: accepts connection
Telnet: GET /~whitney/index.html <CRLF>
Server:
<!DOCTYPE HTML SYSTEM "html.dtd">
<HTML><HEAD><TITLE>
Roger Whitney
</TITLE></HEAD>
<BODY>
<CENTER><H2>
Roger Whitney<br>
Computer Science
</H2>
<A HREF="http://cs.sdsu.edu:8080/cs/">[To Computer Science Home Page]</a><br>
stuff removed to save space
</BODY>
<HTML>
Connection closed by foreign host.

Full-Request
Full-Request   =	Request-Line 
	*( General-Header   | Request-Header   | Entity-Header ) 
	CRLF
	[ Entity-Body ]

Request-Line = Method SP URI SP HTTP-Version CRLF

Telnet: saturn 8080
Server: accepts connection
Telnet: GET /~whitney/index.html HTTP/1.0 <CRLF>
Telnet: <CRLF>
Server:
HTTP/1.0 200 Document follows
MIME-Version: 1.0
Server: CERN/3.0
Date: Thursday, 21-Mar-96 17:00:45 GMT
Content-Type: text/html
Content-Length: 2686
Last-Modified: Tuesday, 27-Feb-96 05:34:12 GMT
<!DOCTYPE HTML SYSTEM "html.dtd">
<HTML><HEAD><TITLE>
Roger Whitney
</TITLE></HEAD>
<BODY>
even more stuff removed
</BODY>
<HTML>
Connection closed by foreign host.

Server Response



Response = Simple-Response | Full-Response

Simple-Response= [Entity-Body]
Full-Response  = Status-Line
	*( General-Header | Response-Header | Entity-Header )
	CRLF
	[ Entity-Body ]


Simple response is sent only in response to HTTP/0.9 simple request

Sample Full-response
HTTP/1.0 200 Document follows
MIME-Version: 1.0
Server: CERN/3.0
Date: Thursday, 21-Mar-96 17:00:45 GMT
Content-Type: text/html
Content-Length: 2686
Last-Modified: Tuesday, 27-Feb-96 05:34:12 GMT

Status-Line

Status-Line = HTTP-Version SP 
	Status-Code SP Reason-Phrase CRLF

Status-Code = 3DIGIT

Reason-Phrase = token *( SP token )


Example:

HTTP/1.0 200 Document follows

Current Status Codes

1xx: Not used, but reserved for future use

2xx: Success - The requested action was successfully received and understood
200 ; OK201 ; Created202 ; Accepted204 ; No Content

3xx: Redirection - Further action must be taken in order to complete the request

4xx: Client Error - The request contains bad syntax or is inherently impossible to fulfill

5xx: Server Error - The server could not fulfill the request

Header Fields


HTTP-header	= field-name ":" [ field-value ] CRLF


field-name	= 1*<any CHAR, excluding CTLs, SP, and ":">


field-value 	 = *( field-content | comment | LWS )


field-content  = <the OCTETs making up the field-value
	and consisting of either *text or combinations
	of token, tspecials, and quoted-string>

Examples


Date: Wednesday, 22-Feb-95 19:48:55 GMT

Content-Type: text/html

Content-Length: 1831
Server Response

Example Full-response
HTTP/1.0 200 Document follows
MIME-Version: 1.0
Server: CERN/3.0
Date: Thursday, 21-Mar-96 17:00:45 GMT
Content-Type: text/html
Content-Length: 2686
Last-Modified: Tuesday, 27-Feb-96 05:34:12 GMT

field-namefield-value
MIME-Version:1.0
Server:CERN/3.0
Date:Thursday, 21-Mar-96 17:00:45 GMT
Content-Type:text/html
Content-Length:2686
Last-Modified:Tuesday, 27-Feb-96 05:34:12 GMT

What is the big Deal?



What are the data fields in this?
1.0; CERN/3.0; Thursday, 21-Mar-96 17:00:45 GMT; text/html; 2686; Tuesday, 27-Feb-96 05:34:12 GMT

What are the data fields in this?
MIME-Version: 1.0
Server: CERN/3.0
Date: Thursday, 21-Mar-96 17:00:45 GMT
Content-Type: text/html
Content-Length: 2686
Last-Modified: Tuesday, 27-Feb-96 05:34:12 GMT

Which is Safer?
Which is Easier to Parse?

Name -Value Pairs are Good


Does Order Matter?

MIME-Version: 1.0
Server: CERN/3.0
Date: Thursday, 21-Mar-96 17:00:45 GMT
Content-Type: text/html
Content-Length: 2686
Last-Modified: Tuesday, 27-Feb-96 05:34:12 GMT

Server: CERN/3.0
Content-Type: text/html
MIME-Version: 1.0
Content-Length: 2686
Last-Modified: Tuesday, 27-Feb-96 05:34:12 GMT
Date: Thursday, 21-Mar-96 17:00:45 GMT


Extending Protocols

MIME-Version: 1.0
Server: CERN/3.0
Date: Thursday, 21-Mar-96 17:00:45 GMT
Content-Type: text/html
Forwarded: by http://rohan.sdsu.edu/ for cs.sdsu.edu
Content-Length: 2686
WhitneyInfo: Hi Mom
Last-Modified: Tuesday, 27-Feb-96 05:34:12 GMT

Name -Value Pairs are Everywhere

Data Files

Which is easier for a program to parse?
Which is safer?

Allen, Sally	87	92	85	55	74	10
Battista, Joe	92	98	98	55	78	10
Biag, Sam	83	91	78	51	72	8
Chen, Pete	89	92	89	57	79	10
Chen, Roger	74	68	59	61	55	10

namecoursehworkexam1exam2finalas1
Allen, Sally879285557410
Battista, Joe929898557810
Biag, Sam83917851728
Chen, Pete899289577910
Chen, Roger746859615510


lastName:Allen, lastName:Sally, course:87, hwork:92, exam1:85, exam2:55, final:74, as1:10
lastName:Battista, lastName:Joe, course:92, hwork:98, exam1:98, exam2:55, final:78, as1:10
lastName:Baig, lastName:Sam, course:83, hwork:91, exam1:78, exam2:51, final:72, as1:8
lastName:Chen, lastName:Pete, course:89, hwork:92, exam1:89, exam2:57, final:79, as1:10
lastName:Chen, lastName:Roger, course:74, hwork:68, exam1:59, exam2:61, final:55, as1:10
Name -Value Pairs are Your Friends
Don't Program without them

----------