Roger's Page

HTML Guide

An HTML document is a text file, written with any text editor, containing the document's subject. A series of formatting commands inserted into the text control the document's appearance. These formatting commands or tags tell the browser how to display the pages. Tags appear within angled brackets, most are used in pairs with a forward slash (/) indicating the final tag.

For example, the tag for emphasising text (which is usually rendered in italics) is <em>..</em>. Applying this to the sentence "This is emphasis." requires the following HTML tags and text:

Four tags define the basic structure of a document:

<HTML>...</HTML> mark the beginning and end of the document. <HEAD>...</HEAD> denote the header and usually contains <TITLE>...</TITLE> tags. Text within these is displayed in the window's title bar. <BODY>...</BODY> tags mark the main portion of the document that is displayed to the user.

Here is an example of a basic HTML document:

<HTML>
<HEAD>
<TITLE>The Window Title</TITLE>
</HEAD>
<BODY>
Main document text
</BODY>
</HTML>

Headings

There are six sizes of heading text for formatting headings and sub-headings in a document. Their respective tags are: <H1>..</H1>, <H2>..</H2>, <H3>..</H3> etc.

Headings

Text Attributes

The two most commonly used text attributes are strong <strong>..</strong>, and emphasis <em>..</em>.

Seperators

Browsers ignore line breaks and carriage returns in the HTML file. Text seperation is controlled by single tags, a closing tag is not required:

Lists

Items in an unordered list are bulleted. The list is enclosed by <UL>..</UL> tags and each list item in <LI>..</LI> tags.

Example unordered list
<UL>
<LI>First list item </LI>
<LI>Second list item</LI>
<LI>Third list item</LI>
</UL>
  • First list item
  • Second list item
  • Third list item

Ordered lists are numbered and specified by the tags <OL>..</OL>.

Example ordered list
<OL>
<LI>First item on the list</LI>
<LI>Second item on the list</LI>
<LI>Third item on the list</LI>
</OL>
  1. First item on the list
  2. Second item on the list
  3. Third item on the list

Descriptive lists are indented:

Example descriptive list
<DL>
<DT>Description Title</DT>
<DD>Definition<DD>
<DT>Another Title</DT>
<DD>Another Definition</DD>
</DL>
Definition Title
Definition
Another Title
Another Definition

Anchors

An anchor specifies a clickable hypertext link. The link can be:

Examples of Anchors

Graphics

An image file can be displayed in the document using inline graphic commands. The file, usually in .GIF or .JPG format, is external and displayed in the document's text by the browser. The image is inserted into the document by <IMG SRC="mypic.gif">

In the above example the file is in the same directory as the HTML file, otherwise the path and filename are needed: </PICTURES/IMG SRC="mypic.gif">

An example of an inline image. Example of an inline image My cat Felix.

The <IMG> tag has various attributes that control the way an image is displayed.

Tables

A table has three main components rows, data cells and header cells. It is defined by <TABLE>..</TABLE> tags which must enclose all other tags.

Table Attributes

Table Examples

Table with border
This is a cell 1 This is cell 2

Table without border
This is a cell 1 This is cell 2

Cellpadding
Cell 1 Cell 2

Cellspacing
Cell 1 Cell 2

Backgrounds

If a background is not specified in a HTML document the browser uses its own default colour as a background to the document. This behaviour can be modifed by attributes used in the opening <BODY> tag. Generally there are two choices of background; a bitmap (usually a GIF or JPG file) using the BACKGROUND attribute, or a plain colour defined by the BGCOLOR attribute.

The bit map background is tiled by the browser so that it fills the browser window:

<BODY BACKGROUND="backpic.gif">

or a plain coloured background is set by the BGCOLOR attribute:

<BODY BGCOLOR="colour">

Where "colour" is either one of the sixteen named system colours (red, blue, green etc.) or a hexadecimal number denoting the red-green-blue colour value, e.g. <BODY BGCOLOR="#0000FF">

Colour

Colour in an HTML document is specified by the colour name (sixteen named colours are available) or colour value. Hexadecimal colour values range from #000000 (black) to #FFFFFF (white), with 216 colours available from a palette of 256 (40 are reserved).

If a page specifies a RGB colour that is not available from the 256 colour palette, the browser uses the closest match it can find. In practice colours are best specified from the hexadecimal pairs 00, 33, 66, 99, CC and FF, otherwise they may not display correctly on some systems.

The 16 named colours

Other Tags

Other common HTML tags include:

<!-..-> : Comment - A comment by the author of the file, the text between the tags is ignored by the browser.