HTTP Basics

On Monday, we introduced HTTP, the protocol above TCP/IP for retrieving hypertext documents. I.e., web pages. We start today by going over in a little more detail how it works, and then switch to talking about HTML, the language that web pages are written in.

As most of the messages used by HTTP 2 and HTTP 3 are the same as HTTP 1.1 and typing text is easier for humans than binary, I will focus the rest of the discussion on HTTP 1.0 and HTTP 1.1.
For these protocols, HTTP consists of two phases, the request and the response.

A request has the format:

HTTP method  path part of URL  HTTP version
Header fields
Blank line
Message Body

For example, at a Unix prompt trying typing:

For example, at a Unix prompt trying typing:
telnet www.cs.sjsu.edu 80  
GET / HTTP/1.0
<blank line>

More HTTP

The most commonly used HTTP requests are:

GET --- request contents of specified document
HEAD --- request header contents of specified document
POST --- Executes the specified document, using the enclosed data
PUT --- replaces the specified document with the  enclosed data
DELETE ---deletes the specified document.

Of these, GET and POST are the most common.

Header Fields

After the first line of the HTTP request one can have any number of header fields.
There are four kinds of headers: general, those used in the request, those used in the response, and entity headers which are used in both.
Two common headers are:
- Accept: says what MIME types the browser can handle
- Host: (required in HTTP/1.1) Says the name of the host that you are trying to contact. Host is useful because www.widgets.com, www.sprockets.com might be hosted on the same machine (virtual hosting). This says which one you are trying to contact.

As an example:

GET /respond.html HTTP/1.1
Host: blanca.uccs.edu
Accept: text/*
Accept: image/gif

Response Phase

An HTTP response has the following format:

Status line
Response header fields
Blank line
Response body

An example status line might be:
```
HTTP/1.1   200   OK
```
In general, one will have a 3-digit status code and a message. The codes come in one of five categories: 1 - information, 2 success, 3 - redirection, 4 - client error, 5 - server error.

An example response header

HTTP/1.1 200 OK
Date: Mon, 28 Aug 2006 19:09:45 GMT
Server: Apache/2.2.2 (Fedora)
Accept-Ranges: bytes
Connection: close
Content-Type: text/html

Message Body

In the above, Date:, Server:, Accept-Ranges:, etc are all response fields. The minimal response consists of just the status line.
Lines are terminated with CRLF for both the request and response

In-Class Exercise

I have already created an account on the class discussion board for you and added you to the class discussion group. Your login is your surname followed by the first two letters of your personal name. For example, for me: pollettch . Your password has been initially set to changeme123 .
I'd like you to go to the Spring 2021 CS 174 Class Discussion and Sign-In.
Next I'd like you to open a shell on your computer and try to determine your IP address on the school LAN. Use the command ipconfig (DOS) or ifconfig (Mac, Linux). Note your machine might have several network interfaces, so choose the wireless one.
Knowing your IP address means you can join the same network on your phone and test how your web apps on your laptop will behave on your phone.
Once you are done, copy and paste your shell session transcript and your answer to the Feb 3 Class Thread.
To get the insurance point, you need to post your solution before the Monday class.

HTML/XHTML

HTML was original specified in the Standard Generalized Markup Language (SGML) which is an ISO standard for specifying text-formatting languages.
HTML was designed to specify content rather than how it was formatted (presentation).
The reason was to allow it to be displayed in as many different kinds of computers and browsers as possible.
As a specification language for simple tag-based languages, SGML is severe overkill, so a stripped-down specification language called XML was developed in the late 90's.
XHTML is HTML specified using XML.

HTML Variants

The most common variant of HTML today are:

ISO HTML (HTML 4.01) which is specified using SGML a
XHTML 1.0 Transitional
XHTML 1.0 STRICT
XHTML 1.1
HTML 5/XHTML 5
HTML LS

XHTML 2.0 was under development for several years, but was eventually abandoned.
HTML 5/XHTML 5 have been stable W3C recommendations since October 2014.
HTML 5.2 has become a candidate W3C recommendation as of December, 2017.
The WHAT WG also maintains a "living standard version" of HTML which was last updated Feb 3, 2021 (today).

Basic Syntax

The fundamental structural unit of HTML is a pair of tags.
For example, a paragraph might be specified with: <p>The quick brown fox..</p>
Here <p> is called the open tag and </p> is called the close tag. The quick brown fox is the content of the tag.
XHTML documents are case sensitive -- tags must be lower case for the document to validate. HTML documents can be case insensitive.
To be a legal XHTML document, every open tag must be closed. Further, the nesting must be legal.
In HTML 5, some tags do not need to be closed: area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source, track, wbr .

Here are some examples:

<img src="my_picture.png" ></img> 
    <!-- this is okay in an XHTML document (not in HTML 5). 
    BTW, this is an example HTML comment -->
<img src="my_picture.png" /> 
    <!--this is okay for both XHTML and HTML 5 and 
is an abbreviation for the line above -->
<img src="my_picture.png" >  
  <!--okay only in HTML 5, but don't use for this class -->
<P>old style paragraph</P> 
   <!--okay only in HTML 5, but don't use for this class -->
<p><i>Hello</i></p> <!--okay -->
<p><i>Hello</p></i> <!--not okay -->

Open tags may have attributes. For example, src in the image tag above. The value of an attribute must be given in double quotes or single quotes for XHTML. Quotes are optional for HTML 5.

For this class, I want you to use XHTML syntax because it will work in the HTML case and gives your documents greater flexibility and makes it easier to find bugs.

HTML

Outline