


SPEED

| A | B | C | D | E | F | H | I |

| L | M | O | P | S | T | U | ? |

FINDER

Any comments: e-mail me, feedback or show your appreciation

The HTML Elements

`<a> anchor`

An anchor marks the beginning and/or end of a hypertext link.

name=text
This allows the anchor to be the destination of a link. This means you can direct a link to a specific chapter of a document.



<a name="Images">

href
Use this to tell the browser where you wish a link to lead. This can be used for links to elsewhere in the document (as defined using the name attribute), to remote locations, or to a destination within a remote document. The live area will be any text and images located between the tags.
This link takes you to the <a href="http://www.ctcc.gov.za/ccchome.html">Cape Town <img src="graphics/cape_sm.jpg"></a> home page. The border around the graphic indicates that it is a live link. <br> Check out this document's section on <a href="#image">Images.</a> <br> This link takes you to the <a href="sterolab.htm#facts">Facts</a> section of my Stereolab page.
This link takes you to the Cape Town home page. The border around the graphic indicates that it is a live link.
Check out this document's section on Images.
This link takes you to the Facts section of my Stereolab page.
href with mailto
You can also use the href attribute to to allow the reader to mail you.
Mail me at <a href="mailto:wcons@cix.compulink.co.uk">wcons@cix.compulink.co.uk</a>.
Mail me at wcons@cix.compulink.co.uk.

`<address>`

A logical style used when providing address information, often at the top or bottom of the document.



<address>


University of Bath<br>


Claverton Down<br>


Bath<br>


UK<br>


</address>

University of Bath
Claverton Down
Bath
UK

`<b> bold`

A physical style for displaying text in a bold font. See also <strong>.



Cars are <b>not</b> toys. They are 1 ton killing machines.

not

`<basefont>`

Used in conjunction with <font> to set a default font size. Always used with the size attribute.

size=value
Used to set the base font size. Valid from 1 to 7. The example shows how the same increment in font size will give a different size if the base font differs.

<basefont size=2> <font size=+1>Tottenham Hotspur</font> <basefont size=4> <font size=+1>Chelsea</font>
Tottenham Hotspur Chelsea

`<blink>`

Flashes text on and off.



Blinking flip: <blink>flip</blink>

flip

`<blockquote>`

Allows text quoted from another source to be rendered specially. Usually left and right indented. See also <cite>.



The best bit was when when Hamlet said,


<blockquote>


To be, or not to be.<br>


That is the question.<br>


</blockquote>


But then everyone knows that.

To be, or not to be.
That is the question.

`<body>`

The <body> element contains all the information which is part of the document, as opposed to information about the document, which should be in the <head>. The <body> tag should be placed directly after the closing head tag, </head>. The closing body tag, </body> should be placed as the pen-ultimate line of the document, directly before the </html> tag.



<html>


<head>


<title>A Shell Document</title>


</head>


<body>


The document in here


</body>


</html>

bgcolor=#hexcolour, text=#hexcolour, link=#hexcolour, vlink=#hexcolour, alink=#hexcolour
You can force a browser to display the text, links and background as specific colours. text controls the main body text, link controls unvisited links, vlink controls visited links and alink controls active links. All of these attributes are optional. The colours are described in hexidecimal.
This document should be displayed with a cream background, black text, blue unvisted links, red visited links and green active links. It was achieved as the following code:
<body bgcolor="#ffffd8" text="#000000" link="#0000ff" vlink="#ff0000" alink="#00a000">
background=URL
Instead of specifying a background colour, you can tile a background graphic by providing the URL for the graphic, which can be remote or local.
<body background="graphics/grstone" text="#FFFFFF">
Link to example.

`<br> break`

Forces a line break - similar to a hard return on a word processor.



This text is on one line.<br>


This text is on the next line.

clear=left|right|all
Use this attribute when wrapping text around graphics to make the new line start below an in-line graphic. The line break will expand vertically down until a clear left or right margin, or until both margins are clear of images.
<img align=right src="graphics/cliff.gif"> This text is on one line.<br clear="all"> This text is on the line below the graphic.
This text is on one line.

`<caption> table caption`

Click here to learn all about creating tables.

`<center>`

Center justifies text and puts tables, graphics, etc. in the centre of the page.



<center>

This text is in the middle of the line.

</center>

This text is in the middle of the line.

`<cite>`

A logical style for displaying a citation or quote. Usually displayed in italic. See also <blockquote>.



Listen to Radio 1's <cite>Evening Session</cite> for great new music.

Evening Session

`<code>`

A logical style for displaying examples of code. Usually displayed in a fixed-width font. See also <TT>and <PRE>.



The logical style <code>code</code> is used to display examples of programming code.

code

`<dd> definition list definition`

Described on a separate page dedicated to lists.

`<dir> directory list`

Described on a separate page dedicated to lists.

`<dl> definition list`

Described on a separate page dedicated to lists.

`<dt> definition list term`

Described on a separate page dedicated to lists.

`<em> emphasis`

A logical style used to give emphasis to a section of text. Usually rendered in italic. See also: <strong>.



Tricky is the <em>most original</em> artist currently on the British music scene.

most original

`<font>`

Used to change the look of the text.

size=value|+-value
Used to change text size. Can be used relatively (see basefont) or absolutely. Valid in the range 1-7.
Make the text <font size=+1>a bit bigger</font>, <font size=-1>a bit smaller</font>, <font size=7>huge</font> or <font size=1>tiny</font>.
Make the text a bit bigger, a bit smaller, huge or tiny.
color=#hexvalue|colourname
Used to change text colour (only in Netscape 2). Colours can be described in hexidecimal or by name.
<font color="#00FF00">green</font> <font color="purple">purple</font>
green
purple

`<form>`

Click here to learn all about creating forms.

`<h1>`,`<h2>`,`<h3>`,`<h4>`,`<h5>`,`<h6> heading style`

Renders text as a heading, the rendering depending on the level of heading selected. Headings are automatically spaced from the body text.



<h1>A Level 1 Heading</h1>


Some text.


<h2>A Level 2 Heading</h2>


Some more text.

A Level 1 Heading

A Level 2 Heading

`<head>`

The head element contains all the information about the document. It does not contain any text which is part of the document, this is in the body. The <head> would follow the <html> tag and precede the <body> element.
A shell document would therefore follow the following format:



<html>


<head>


<title>HTML Commands guide: A Shell Document</title>


</head>


<body>


The document in here


</body>


</html>

`<hr> horizontal rule`

This produces a horizontal line across the screen. By default the line will be narrow and span the screen within the current indents, eg. those created by a <blockquote> or list tag.

align=left|right|clear
Justifies the line left, right or centre (default).
size=value
Increases the vertical height (width) of the line, in pixels.
width=value|percent
Sets the horizontal length of the line in pixels or percent. Note: use <size> to set what most people would call the line width!
noshade
Turns off the bevelling effect added to lines by some browsers.
<hr align=right size=20 width=400 noshade>

`<html>`

Placed at the beginning and end of the document to declare the type of document. A shell document would therefore follow the following format:



<html>


<head>


<title>HTML Commands guide: A Shell Document</title>


</head>


<body>


The document in here


</body>


</html>

`<i> italic`

A physical style for displaying text in an italic or slanted font. See also <em>.



<i>Drilling?</i>, repeated Ginger, <i>How would I know how to drill? I'm a cat...</i>, he said.

Drilling?

How would I know how to drill? I'm a cat...

`<img> image`

Used to place an image or graphic on the screen.

src=URL
This attribute is always required and is used to state the source, ie. URL of the image.
align=left|right|middle|top|texttop|middle|absmiddle|baseline|bottom|absbottom
As you can see, Netscape have massively extended this attribute. The left and right are probably the most useful and create a new floating type graphic which finds the next available margin to allow text to wrap. The rest of the align options are an attempt to get graphics to do exactly what you want them to. Top aligns with the top of the tallest item in the line. Texttop aligns with the top of the tallest text in the line (not always the same as top). Middle aligns the middle of the image with the baseline of the current line. Absmiddle aligns the middle of the image with the middle of the current line. Baseline aligns the bottom of the image with the baseline of the current line. Bottom does exactly the same as baseline. Absbottom aligns the bottom of the image with the bottom of the current line.
You must use align if you wish to wrap text around the graphic, otherwise the image will behave as a character. Note: to place an image in the centre of the screen you must use <center>, however text will not wrap around the graphic in this case.
alt=text
This is used to add an alternative text for non-graphical browsers. The text is conventionaly provided inside square brackets for clarity.
border=value
When the image is included in a hypertext link, the default border which indicates a link can be resized in terms of pixels. Set border=0 to turn off the border.
height=value, width=value
The height and/or width of a graphic can be specified in pixels. If just one of these attributes is included, the other is automatically calculated to keep the original aspect ratio. Therefore to stretch or squash an image you must specify both width and height. Not all browsers support this attribute. It is very good idea to specify the width and height for every image you use, as browsers can then display text before the images have loaded, giving the effect of quicker downloads.
hspace=value
Specifies a horizontal space in pixels, to the left and right of the image.
vspace=value
Specifies a vertical space in pixels, to the top and bottom of the image.
<a href="http://adaweb.com/adaweb/influx/long/long0.html"> <img align="left" border="off" height=80 src="graphics/body1.gif" hspace=15 alt="[amorphous body]"> Armorphous body</a>
Armorphous body
ismap
Sets the graphic as an image map.

`<input> form input box`

Click here to learn all about creating forms.

`<li> bullet`

See lists.

`lists <ol>`, `<ul>`, `<li>`, `<dt>`, `<dd>`

There are many types of lists that can be created. For this reason, I have dedicated a separate page with full details of lists.

`<menu> menu list`

Described on a separate page dedicated to lists.

`<ol> ordered list`

Described on a separate page dedicated to lists.

`<option> form list item`

Click here to learn all about creating forms.

`<p> paragraph`

Used to indicate a new paragraph. Automatically inserts a blank line before the new paragraph.



A paragraph.


<p>The next paragraph.

The next paragraph.

`<pre> pre-formatted text`

The most useful application of this element is for displaying extracts of programming code as the text is rendered as a fixed-width font and the <br> tag is not necessary to cause a line-break. It is sometimes used to display text in a tabular or column format, as all spaces typed in the HTML code are displayed by the browser. Combined with the fixed-width font, this facilitates the alignment of text.

I do not recommend the use of <pre> for formatting a few words at a time, as unpredicable results are occasionly produced. Use <code> or <tt> as an alternative.



<pre>


FOR x=1 TO 10


PRINT "The square of ";x;" is ";x^2


NEXT x


</pre>


FOR x=1 TO 10

PRINT "The square of ";x;" is ";x^2

NEXT x

`<select> form list box`

Click here to learn all about creating forms.

`<strong>`

A logical style used to give strong emphasis to a section of text. Usually rendered in bold. See also: <em>.



<strong>Warning: <strong>


no entry without protection.

</pre>

Warning:

`<sub> subscript`

A physical style for displaying subscripted text.



Sulphuric acid, H<sub>2</sub>S0<sub>4</sub>.

₂

₄

`<sup> superscript`

A physical style for displaying superscripted text.



Equation of a circle: r<sup>2</sup> = x<sup>2</sup> + y<sup>2</sup>.

`<table>`

Click here to learn all about creating tables.

`<td> table data`

Click here to learn all about creating tables.

`<th> table heading`

Click here to learn all about creating tables.

`<title>`

The title element should contain a complete one-line summary of the document, ie. "Introduction" is not sufficient, but "HTML Commands Guide: Introduction" would suffice. The title of a loaded document appears at the top of a Netscape window. When coding, the title should be placed within the <head> tags.
A shell document would therefore follow the following format:



<html>


<head>


<title>HTML Commands Guide: A Shell Document</title>


</head>


<body>


The document in here


</body>


</html>

`<tr> table row`

Click here to learn all about creating tables.

`<tt> typewriter text`

A physical style for displaying text in a fixed-width font.



Courier is an example of a <tt>fixed-width font</tt>, as is MS LineDraw.

fixed-width font

`<ul> unordered list`

Described on a separate page dedicated to lists.

The HTML Elements

<a> anchor

<address>

<b> bold

<basefont>

<blink>

<blockquote>

<body>

<br> break

<caption> table caption

<center>

<cite>

<code>

<dd> definition list definition

<dir> directory list

<dl> definition list

<dt> definition list term

<em> emphasis

<font>

<form>

<h1>,<h2>,<h3>,<h4>,<h5>,<h6> heading style

A Level 1 Heading

A Level 2 Heading

<head>

<hr> horizontal rule

<html>

<i> italic

<img> image

<input> form input box

<li> bullet

lists <ol>, <ul>, <li>, <dt>, <dd>

<menu> menu list

<ol> ordered list

<option> form list item

<p> paragraph

<pre> pre-formatted text

<select> form list box

<strong>

<sub> subscript

<sup> superscript

<table>

<td> table data

<th> table heading

<title>

<tr> table row

<tt> typewriter text

<ul> unordered list

`<a> anchor`

`<address>`

`<b> bold`

`<basefont>`

`<blink>`

`<blockquote>`

`<body>`

`<br> break`

`<caption> table caption`

`<center>`

`<cite>`

`<code>`

`<dd> definition list definition`

`<dir> directory list`

`<dl> definition list`

`<dt> definition list term`

`<em> emphasis`

`<font>`

`<form>`

`<h1>`,`<h2>`,`<h3>`,`<h4>`,`<h5>`,`<h6> heading style`

`<head>`

`<hr> horizontal rule`

`<html>`

`<i> italic`

`<img> image`

`<input> form input box`

`<li> bullet`

`lists <ol>`, `<ul>`, `<li>`, `<dt>`, `<dd>`

`<menu> menu list`

`<ol> ordered list`

`<option> form list item`

`<p> paragraph`

`<pre> pre-formatted text`

`<select> form list box`

`<strong>`

`<sub> subscript`

`<sup> superscript`

`<table>`

`<td> table data`

`<th> table heading`

`<title>`

`<tr> table row`

`<tt> typewriter text`

`<ul> unordered list`