HTML/XHTML

HTML was originally specified in the Standard Generalized Markup Language (SGML) which is an ISO standard for specifying text-formatting languages.
RFC1866 for HTML 2 from 1995 is a representative example of these early specs in SGML that was widely used, but there were the earlier proposals titled HTML and HTML+ proposals from 1993 written by Tim-Berners Lee.
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 Aug 22, 2022.

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.

Quiz

Which of the following is true?

.htaccess is the protocol used by a browsers to request documents on the web.
Based on the description in the syllabus, it is possible to use none of the insurance points you acquire through in-class exercises, it is also possible to use all of them.
All versions of HTTP only use the TCP protocol to send data over the web.

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/HTML LS, 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 lang="en" >
    <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 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.
Many people also swear by Visual Studio Express.
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 (probably can drop support for), 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.

The head of an XHTML or HTML5 document

We have now looked at a simple HTML document. This consisted of a DOCTYPE declaration, an html tag pair with head and body tag pairs as its contents. The head has to have at least a title tag within it. Let's now examine what can go in the head and body tags pairs in detail, beginning by looking at the head tag:

At a minimum the head of an html document needs to have within it a <title></title>.
Additional allowable tags include:
link
used to associate another document with this current document. For example, it can be to associate a stylesheet with or to give a favicon.ico for the current document. One can also specify using prev and next the position of this document in a collection of documents.
```
Examples:
  <link rel="stylesheet" type="text/css"
            href="http://somewhere.com/css/search.css" />  
  <link rel="icon"   
    href="http://www.cs.sjsu.edu/faculty/pollett/favicon.ico" />
  <link rel="prev"   
    href="./?LecList.php" />
```
base
used to specify a base directory for all references on the page:
```
Example: 
  <base href="http://www.my.com/stuff/"  /> 
```
Now a link <a href="file.html" >file</a> would have the implicitly base address in front of it.
script and style
used to include Javascript or stylesheet files or blocks. These tags are allowed in both the head and body of the document. We'll talk about them more next week.

Kinds of Meta Information

Heads of documents can also have (but are not required to have) meta tags.

<meta name="author" content="who wrote the page" />
<meta name="generator" content="ChrisTextTool" /> 
   <!--What software was used to generate this html -->
<meta name="description" content="how I would like the search 
   engines to describe my page. " />
<meta name="keywords" content="cool site" /> 
   <!--Key terms search engines should index this site with. 
    Unfortunately, not really used by search engines anymore -->
<meta name="robots" content="comma separated list of 
   what would like crawler to do" /> 
   <!-- Example commands NOINDEX, NOFOLLOW, NOCACHE, NOSNIPPET, NOODP, NOYDIR . 
     Some of these commands can also be specified in a robots.txt file. ROBOTS
     and these values are case insensitive.-->

Rather than use robots in the above you can also give directives for specific robots.

In addition to the above meta tags, we will see later in the semester how aspects of how the screen renders in a mobile phone can be affected by meta tags.

The WHATWG Meta Extensions page contains a relatively complete list of values for the name and content attribute.

More Meta Information

You can also use meta tags to give the equivalent to http header fields:
```
<meta http-equiv="foo" content="bar" />
```
is treated by a browser as if the response header field:
```
foo: bar
```
was sent.

For example:

<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Expires" content="Wed, 30 Aug 2006 14:25:27" />
<meta http-equiv="refresh" content="10;url=http://www.cs.sjsu.edu/" />

HTML

Outline