HTML/XHTML

On Monday, we introduced HTTP, the protocol above TCP/IP for retrieving hypertext documents. I.e., web pages. We now describe the language used to make web pages: HTML.

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.1 has become a candidate W3C recommendation as of June, 2016.
The WHAT WG also maintains a "living standard version" of HTML which was last updated August 31, 2016 (seems to be updated daily).

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 simple, 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.

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 Gedit, 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, and Opera.
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.

Let's build something...

If you haven't already done so, sign up for an account on https://yioop.com/.
Then join the class CS 174 Fall 2016 discussion group.
Next I'd like you to make a simple HTML 5 page based on the example we just did but you replace the title and h1 tags with the name of a short joke, wand where you replace the body with a family friendly joke.
Once you are done, copy and paste your code to the Aug 31 Class Thread, and I'll try to look at it and give some feedback in class. To make text appear preserve formatting in a thread, put a single space in front of each line.

XHTML and HTML 5

Outline