Using HTML and XHTML to Format Web Pages

HTML Document Structure

The proper HTML document begins with a prolog just like an XML document. This prolog consists of the Document Type Declaration and comes in three versions. Each of these may limit or increase the usage of particular markup. Original versions of HTML used some markup that has become deprecated (outdated or revised) or obsolete. Any of these deprecated elements used in this chapter are so noted.

HTML and XHTML documents must have a root element to make them well formed. This root element may have attributes to further define the document. Browsers may render the page differently based upon these attributes. The version attribute specifies the version listed in the DOCTYPE. The lang attribute can list the base language of the page. The dir attribute works with the lang attribute to specify the direction of the language as it is read natively. The values of the dir attributes can be left to right (LTR) or right to left (RTL). The element has been deprecated.

>

The HEAD Element

Basic HTML documents have two elements,> and>. The portion of this type of document can define the document and contain information about it that may not be displayed in the browser. Search engines often use the contents of the markup in the . Also contained in the element are references to other documents and objects that may be used in the document but not contained in the . The following shows the basic elements of the element:

The Main BODY of the HTML Document

The document that you see in a web browser or on a mobile telephone is formatted by the elements in the . The BODY element contains several attributes and is never empty if you want something to display. Some of these elements have been deprecated (are no longer used) but are listed for reference.

background	An image resource or path to an image to be displayed behind all other items on the page. The image will be displayed with a tiling effect. It will first appear in the upper-left corner and repeat down and to the right. If you make the image sufficiently wide, this effect will not be shown unless the user scrolls past the first repeat. It is also possible to create a small image with repeating patterns that appear to be one big graphic. This attribute has been deprecated for use with XHTML and XML, so use stylesheets to specify a background image.
bgcolor	The background color of the body of the web page. By default, the browser may display white or gray if no background color is specified in this element. This attribute is a solid color and does not have the tiling effect of background. Both attributes may be used, but the background may completely obscure a bgcolor. It may still be useful if an image cannot be found. While not deprecated, this attribute may also be specified in a stylesheet.
text	The color of the text on the page, also called the foreground color. If you use a bgcolor of black, you would specify white or another light color for the text, for example. This attribute is also deprecated and often specified in a stylesheet. The default foreground color or the text of the page is black if you do not specify one.
link	Hypertext links have a default of blue underline if you place them in a web page. Once they have been selected and visited, they change color. Your browser can override the defaults, or you can specify the color (or none) by using this deprecated attribute. vlink is the color of visited links and alink is the color of the selected links. These attributes can work together or separately with link, and all have been deprecated.

Other attributes for are id (must be unique in any document), class, lang, title, style, onload, onunload, onclick, ondblclick, onmousedown, onmouseover, onmouseup, onmousemove, onmouseout, onkeypress, onkeydown, and onkeyup. The most common attribute is the onload attribute. As the document loads into the window of the browser, the element can perform a script. An example usage for preloading images for animation effects is shown in the code below. This is calling the script preloadImageJS for the two images next.gif and prev.gif including the relative path to these images.

The element contains the elements that compose the page. These are text, tables, lists, blocks, anchors, images, objects, and forms. Each of these elements will be described in this chapter.