| Incorrect | Correct |
<TAG A> <TAG B><TAG A><TAG B> |
<TAG A><TAG B><TAG B> <TAG A> |
All HTML files follow the same basic design and content rules. They are made up of Tags which are used to describe the text or images on the page so that the browser knows how to display your page.
Most Tags come in pairs and describe the contained object. These tags do not function correctly if 'overlapped', although pairs of tags can contain other pairs.
| Incorrect | Correct |
| <TAG A><TAG B><TAG A> <TAG B> |
<TAG A><TAG B><TAG B> <TAG A> |
All HTML documents should contain this tag to signify the document type to the server. It occurs at the beginning and end of the document and may only be preceded by a comment string which identifies the version of HTML used in the document.
The document itself is divided up into two parts, the head and body, although, in a frames document, the body tag is replaced by the frames tag (see later).
<HEAD>...</HEAD>
The only required tag within the head is the <TITLE>...</TITLE> tag which can only contain the text which apears in the title bar of the browser window.
e.g. <TITLE>Basic HTML</TITLE> for this document.
<BODY>...</BODY>
Only one body tag is allowed and is the first tag after the head tag and the last tag before the closing html tag. Within it is contained the text which appears in the main browser window.
Attributes include:
| BACKGROUND="image.gif" | An image to be used as the document background. The image is tiled if smaller than the full-screen area. |
| BGCOLOR="#rrggbb" | Background colour for the document. This color is displayed before the background image (if specified) is loaded, but is replaced by the image. |
| TEXT="#rrggbb" | Colour of normal body text. |
| LINK="#rrggbb" | Colour of a 'normal' link. |
| VLINK="#rrggbb" | Colour of a 'visited' link. |
| ALINK="#rrggbb" | Colour of an active link. |
The Basic HTML Document
These four tags are the used in nearly every HTML document you are likely to create.
<HTML>
<HEAD>
<TITLE>This is a basic HTML document template</TITLE>
</HEAD>
<BODY>
[This is the text of the document.]
</BODY>
</HTML>
This
produces an HTML page like this...
For giving extra emphasis to certain text, the heading tags can be used. These allow the specified text to be displayed more prominently and aligned separately to the remaining body text.
A paragraph break is inserted before and after the tag. 'n' can have any value between 1 and 6, with 1 giving the largest text. When using headers, a header should never be more than one size smaller than the previous one. i.e.<H3> should follow <H4>. When <H1> or any header 'higher' than the previous one is used, that signifies an end to the previous sequence.
Heading One |
<H1>...</H1> |
Heading Four |
<H4>...</H4> |
Heading Two |
<H2>...</H2> |
Heading Five |
<H5>...</H5> |
Heading Three |
<H3>...</H3> |
Heading Six |
<H6>...</H6> |
(Attributes)
Horizontal Bars with the <HR> tag.
One of the most commonly seen objects on a page is the horizontal divider bar.
Attributes include:
| SIZE=x | Thickness in pixels (default = 2). |
| WIDTH=x | Horizontal width in pixels or as percentage of window. |
| ALIGN="left/right/center" | Alignment of bar if narrower than window. |
| NOSHADE | Creates a solid bar, with no 3D shading. |
Lists
There are town main types of lists in common use, numbered and bulleted lists. If the list items have an order, then the numbered list is used, otherwise bullets are used.
Each list item is specified by the <LI> tag (the end </LI> tag is optional).
Unordered (bulleted) lists.
The basic tag is <UL TYPE="x"> where 'x' = disc, circle or square (default = disc).
Note : the TYPE attribute for unordered lists only works in Netscape browsers.
|
Source |
Output |
Output |
Output |
| <UL TYPE="x"> <LI>Oranges <LI>Lemons <LI>Bananas </UL> |
|
|
|
Ordered Lists
The basic tag is <OL TYPE="x"> where 'x' = I, i, 1, A or a (default = 1).
| Type | I | i | 1 | A | a |
| Output |
|
|
|
|
|