HTTP Basics

Last Wednesday, 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

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

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 Aug 30, 2020 (yesterday).

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.

Standard XHTML 1.1 Document Structure

XML declarations:

<?xml version ="1.0" encoding="utf-8" ?>
<!-- as not supported by some old 
   browsers validators doesn't usually check this -->

SGML DOCTYPE. This says which Document Type Definition will be used:

<!DOCTYPE html  PUBLIC "-//W3C//DTD XHTML 1.1//EN"
 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

The XHTML document:

<html xmlns="http://www.w3.org/1999/xhtml" >
		<!-- might have namespaces for other things like SVG -->
<head>
	<title>name of my document</title></head>
<body><!--actually page stuff--></body>
</html>

Minimal HTML 5 Document

In HTML 5 a lot of the syntax which is hard for humans to remember has been stripped-away.

Notice the !DOCTYPE is much simpler, and notice how we specify the character set:

<!DOCTYPE html>
<html>
    <head>
        <title>Simple HTML</title>
        <meta charset="utf-8" />
    </head>
    <body>
    <h1>Example HTML 5 document.</h1>
    <p>Example paragraph.</p>
    </body>
</html>

This basic structure will also work for XHTML 5 -- we just need to follow XML conventions for closing tags when we start to add content.

Quiz

Which of the following statements is true?

192.57.126.255 is a fully qualified domain name.
A MIME type was originally used to declare the type of an attached document to an email.
HTTP/1.1 is discontinued and no one uses it any more now that HTTP/2 is available and HTTP/3 is coming online.

Where to Edit HTML

You can create and edit an HTML document in any text editor.
You should avoid editors though which will insert formatting characters that you don't see. For example, it is sub-optimal to use Word to make an HTML document from scratch.
Saving a document as HTML from a word processor such as Word usually produces poor quality HTML: lots of redundant tags and styles. Further, the result is often non-standards conforming.
You can usually get by with the editors in your favorite IDE, although I find some IDEs such as Eclipse to be too slow and intrusive for web development. For PHP there is the IDE PHPStorm which is reasonably good.
I am suggesting people to use Atom, because it is available for Mac, Windows, and Linux. It is small and fast, it lets you see special characters, and it supports code highlighting.
Make sure if you are on a Windows system to set folder preferences so as to be able to see file extensions. That way, you don't think you are saving a file as MyGreatHtml.html and ending up really saving MyGreatHtml.html.txt

How to "run" your HTML

Dragging an HTML page into your favorite browser's window will show you what your HTML page looks like somewhat correctly:
- The URL your browser will use in this case will be: file://file-system-path-to-your-html-file.
- Relative paths and absolute paths for links and images will often be broken by doing this.
- Media types like video and audio will not work if they require a streaming server.
- If the page has any server-side script, directives they will not run.
It is better to put your HTML documents somewhere under the document root of a web server such as Apache. Make sure your web server and any other needed servers such as Mysql are running. In XAMPP, MAMP, WAMP, etc., there is a control panel for this. Then point your browser to the url corresponding to your web server.

What does it mean for your HTML to "work"?

The organization that you are coding for will often have guidelines as to which browsers your HTML needs to work on and to what degree it needs to be able to work. They might have different tiers of "working" based on browser version, with older browsers not needing to be supported to the same degree as newer ones.
For this class, you can do the initial development of your HTML using one browser of your choice... however...
You should then test and get your code to work on all of the major browsers: Internet Explorer, Edge, Firefox, Safari, Chrome, Opera, and Brave.
It should work on current as well as three year old versions of these browsers.
It should work on Desktop and mobile devices.
Most likely, you won't have to change anything, but you should still check.
You should make sure your code conforms to the HTML spec you are using by testing it on the W3C Validator Service.
You should make sure your code passes an automated test of accessibility (so that it would work in a screen reader) such as the WAVE Webaim Accessibility Tool.

XHTML and HTML 5

Outline