HTML Reference Guide

Index

Introduction

HTML (Hyper-Text Mark-up Language) is a language which uses universally agreed embedded codes to display text and pictures on any Web Browser. The most useful feature is "hypertext", words or sections of the text which are highlighted and, when clicked on with a mouse, automatically "jump" to another part of the page, a different page or another file on a different computer. It can be written using any word processor or a dedicated HTML editing program with shortcuts for the commonly used inputs. All the instructions to the browser to display text or pictures in a particular way are in the form of "tags", enclosed in angled brackets, for example, text can be emphasised using the tags for "bold", which would be typed as:

<B>bold</B>,  and appears in the browser window as:  bold

By convention, all HTML documents should begin and end with the <html> and </html> tags, whilst the headings should be enclosed in <head> and </head> tags and the main body of the file in <body> and </body>.

More importantly, every file should be given a title, enclosed in <title>, </title> tags, as this will appear in the bar at the top of the browser window and enable the document to be found by Web search engines.

Basic Text-Formatting Tags

Simple text like this will be reproduced by the browser as written, in the browser's default font, with lines wrapped to fit the browser window.

Some text-formatting commands are:

<B>bold</B> = bold
<I>italic</I> = italic
<U>underline</U> = underline [n.b. this doesn't work in all browsers]
<TT>typewriter-style fixed-width font</TT> = typewriter-style fixed-width font

There are also six different styles of heading, numbered H1 to H6. Each browser gives different styles, but H1 is the largest. To turn text into a heading, surround it with the heading tags:
<H1>This is a heading</H1>

Here is how the browser displays the different styles:

Heading Style 1

Heading Style 2

Heading Style 3

Heading Style 4

Heading Style 5
Heading Style 6

<HR> = draw a horizontal rule like this:
<BR> = line break
<P> = start a new paragraph

Note that none of the last three tags needs a closing tag.

Links

The beauty of hypertext is that you can embed codes in your document which will highlight some text and automatically link it to another part of the document, another document in the same directory or even one on another computer anywhere in the world. This is done by placing an "anchor" around your chosen text, and giving it a hypertext reference (HREF) which tells the browser where to look. The referred text must also have a name, either a normal file name or another anchor.

For instance, suppose you want to put a link in your document to another document called "page2.htm" in the same directory: type the text you wish to link, e.g. "Go to page 2", with the anchor around it as follows:-
<A HREF="page2.htm">Go to page 2</A>

This is displayed as the coloured link below - clicking on this link with the mouse will make the browser "jump" to the other page. In this case, there is no page 2!

Go to page 2

A link can be made to a page in another directory, in which case the hypertext reference must include the full path to the file, or to a page on another computer, when the URL of that page must be given, e.g. <A HREF="http://www.ftech.net/~harvest/bjh-home.htm"> would lead you to a particularly fine home page!

You can also put in links to another part of the same page, like the index in this document. To do this, the places you want to link to must first be named with their own anchors: place the cursor at the position you wish to jump to, and type the anchor tag, for example:-

<A NAME="jump point">

Then put in the hypertext link at the place you wish to jump from, in the form:-

<A HREF="#jump point">Go to jump point</A>

The # symbol tells the browser that the required anchor is within the current file.

Hypertext links can be put around pictures, as well, which are displayed with a coloured border and can be clicked on to link to another document or picture. This is done by embedding the image source tag within the hypertext reference. For example, to use a picture called link.gif as a clickable hypertext link to a file called file.htm would require the following tag:-

<A HREF="file.htm"><IMG SRC=link.gif></A>

Pictures

Web browsers can also display full-colour pictures. These generally need to be in CompuServe Graphics Interchange File (*.GIF) format, but some browsers also support JPEG images (*.JPG). To include a picture, you have to tell the browser the "image source".

To display a picture called pic.jpg, which is in the same directory as this file, type:
<IMG SRC="pic.jpg"> at the position you want the picture displayed. It is now displayed by your browser:

If the picture is not in the same directory as this file, the full path must be given for the image source, e.g <IMG SRC="C:\pictures\pic.jpg">

Pictures can require very large files and take ages to download, so they should be kept as small as possible both in physical size and in the number of colours used.

The picture can be given a caption, adding an "align" command to the tag to tell the browser whether to display the text at the top, middle or bottom of the picture, e.g.:-

<IMG SRC="pic.jpg" ALIGN=MIDDLE> Butterflies

Will display like this:-

Butterflies

Some browsers are text-only, or can switch off pictures to speed up download times, so it is helpful to include a brief description or "alternative" to the picture so that people know what they're missing! This involves adding an ALT command to the image tag:-

<IMG SRC="pic.jpg" ALT="Butterflies">

Forms

So far, the flow of information on our Web Site has been one-way, from the site designer to the browser. However, it is possible to get feedback from readers of the site, using forms. The simplest method is the "mailto" command, which is placed in a normal hypertext link, but pops up an e-mail message box with the correct address already filled out and a simple button to send. The format for this is:-

<A HREF="mailto:75337.1745@compuserve.com>e-mail the author</A>

which gives this link:-

e-mail the author

A more complex questionnaire containing buttons, selection lists and check boxes can also be set up on the page. The basic layout for a form is:-

<FORM ACTION="mailto:75337.1745@compuserve.com" METHOD="POST">

Please enter your name: <INPUT TYPE="TEXT" NAME="Reader Name">
<P>
Your address: <TEXTAREA NAME="Address" ROWS=5, COLS=25 ></TEXTAREA>
<P>
<INPUT TYPE="SUBMIT" VALUE="Send Now"> </FORM>

This gives the following form:-

Please enter your name:

Your address:

The "action" and "method" tags tell the browser what to do with the inputs, in this case send them by normal e-mail. The <INPUT TYPE> tags set up either text boxes, as in this case, or "radio buttons", <INPUT TYPE=RADIO>, for multiple-choice type questions or <CHECK> for checkboxes. For example:-

<FORM ACTION="mailto:75337.1745@compuserve.com" METHOD="POST">
Please enter your name: <INPUT TYPE="TEXT" NAME="Reader Name">
<P>
Your address: <TEXTAREA NAME="Address" ROWS=5 COLS=25></TEXTAREA>
<P>
Do you have a Web Browser?<BR>
<P>
<INPUT TYPE="RADIO" NAME="Browser" VALUE="Yes">Yes<BR>
<INPUT TYPE="RADIO" NAME="Browser" VALUE="No">No<BR>
<P>
<BR>
If yes, please select which one(s):<BR>
<P>
<INPUT TYPE="CHECKBOX" NAME="Mosaic">Mosaic<BR>
<INPUT TYPE="CHECKBOX" NAME="Explorer">MS Internet Explorer<BR>
<INPUT TYPE="CHECKBOX" NAME="Netscape 1">Netscape Navigator 1.x<BR>
<INPUT TYPE="CHECKBOX" NAME="Netscape 2">Netscape Navigator 2.0<BR>
<INPUT TYPE="CHECKBOX" NAME="Other">Other<BR>
<P>
<INPUT TYPE="SUBMIT" VALUE="Send Now">
</FORM>

This gives the following form:-

Please enter your name:

Your address:

Do you have a Web Browser?

Yes
No


If yes, please select which one(s):

Mosaic
MS Internet Explorer
Netscape Navigator 1.x
Netscape Navigator 2.0
Other

Finally, a selection list is a pop-up box containing a number of options:

Please select your operating system:-
<P>
<FORM>
<SELECT NAME="Platform">
<OPTION>Windows 3.1
<OPTION>Windows 95
<OPTION>UNIX
<OPTION>OS/2
</SELECT>
</FORM>

Giving this result:-

Please select your operating system:-

HTML Extensions

Up to now, all the HTML tags listed have been universally agreed as part of the HTML2 language. However, many browsers now use extensions to the language to provide more flexibility, and many of these will probably be implemented in the HTML3 standard due to be agreed soon. Some of these extended tags are as follows:-

<CENTER> and </CENTER> will centre any text, headings or images within the tags in the browser's window.

In standard HTML, pictures always appear on the left side of the window and text cannot be wrapped around them. Browsers which support HTML extensions can position images on the left, right or centre of the window and flow text around them. This is done by adding an "ALIGN" command to the image tag, e.g.

<IMG SRC="pic.gif" ALIGN=RIGHT> places the picture on the right of the window and any text will run down the left side of it until it reaches the bottom of the image. If you don't want the text to run alongside the picture, you can add a "clear" tag to a line break:

<BR CLEAR=LEFT> finds a clear left margin to start the text again,
<BR CLEAR=RIGHT> finds a clear right margin and
<BR CLEAR=ALL> goes down to where both margins are clear.

Other HTML extensions can specify an exact size for images, the width and thickness of horizontal rules, display background and text in different colours and draw up tables.

Colours

Some browsers allow you to specify the background colour of the page or of the text on it.

Background Colour
The default is usually grey, but you can change this by giving the browser a six-figure hexadecimal code for the colour you require, in the form:

<BODY BGCOLOR="#rrggbb">

where r, g and b hexadecimal numbers in the range 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F which specify the amount of red, green or blue in the colour. As each digit can stand for 16 different quantities, the total number of possibilities for each colour is 16 x 16 = 256.

For example, bright red would be "#FF0000" (maximum quantity of red, zero green or blue). This result can be seen on the page Different Colours

Text Colour
The colour of the text is changed in exactly the same way, except that the tag is:
<BODY TEXT="#rrggbb"> for normal text,
<BODY LINK="#rrggbb"> for hypertext links,
<BODY ALINK="#rrggbb"> for active links whilst they are clicked, or
<BODY VLINK="#rrggbb"> for previously visited links.

As an example, the Different Colours file shows white ("#FFFFFF") text on a red background with green ("#00FF00") links.

It is also possible with some browsers to change the colour of individual words or even letters, using the <FONT COLOR> tag. To get one red word in mainly black text, type:

<FONT COLOR="#FF0000">red text</FONT>

which will change the words you select to red. This can, of course, be taken to silly extremes!

As well as background colours, some Web pages use background images behind the text, although this must be done with care to keep the text legible. The browser repeats the image in a "tile" pattern to cover the whole window. The tag for this is simply:-

<BODY BACKGROUND="image.gif">

Tables

Another extension supported by some browsers is the facility to draw up tables of data. A basic table is laid out with the tags:-

<TABLE>
<TR><TD>row 1, cell 1</TD><TD>row 1, cell 2</TD><TD>row 1, cell 3</TD></TR>
<TR><TD>row 2, cell 1</TD><TD>row 2, cell 2</TD><TD>row 2, cell 3</TD></TR>
</TABLE>

Which gives the following result:-

row 1, cell 1row 1, cell 2row 1, cell 3
row 2, cell 1row 2, cell 2row 2, cell 3

This looks pretty boring, so you might want to add a border to all the cells by qualifying the <TABLE> tag, changing it to <TABLE BORDER>, to give this:-

row 1, cell 1row 1, cell 2row 1, cell 3
row 2, cell 1row 2, cell 2row 2, cell 3

The width of the border can also be changed with the tag <TABLE BORDER=n>, where n is a number. Larger numbers like 10 or 20 give a wide, 3D-effect border.

Then you can add headings to the table by putting table heading tags into the first row like this:-

<TABLE BORDER>
<TR><<TH>Heading 1</TH><TH>Heading 2</TH><TH>Heading 3</TH></TR>
<TR><TD>row 1, cell 1</TD><TD>row 1, cell 2</TD><TD>row 1, cell 3</TD></TR>
<TR><TD>row 2, cell 1</TD><TD>row 2, cell 2</TD><TD>row 2, cell 3</TD></TR>
</TABLE>

In the browser, the table now looks like this:-

Heading 1Heading 2Heading 3
row 1, cell 1row 1, cell 2row 1, cell 3
row 2, cell 1row 2, cell 2row 2, cell 3

The table can be given a caption:-

<TABLE BORDER>
<CAPTION>A Table</CAPTION>
<TR><<TH>Heading 1</TH><TH>Heading 2</TH><TH>Heading 3</TH></TR>
<TR><TD>row 1, cell 1</TD><TD>row 1, cell 2</TD><TD>row 1, cell 3</TD></TR>
<TR><TD>row 2, cell 1</TD><TD>row 2, cell 2</TD><TD>row 2, cell 3</TD></TR>
</TABLE>

A Table
Heading 1Heading 2Heading 3
row 1, cell 1row 1, cell 2row 1, cell 3
row 2, cell 1row 2, cell 2row 2, cell 3

More complex tables can be produced by making a heading or a cell span more than one column or row. for instance, if you want a heading to span the whole width of the table in the example, you would use the tag <TH COLSPAN=n>, where n is the number of columns you want the heading to span, in this case 3:-

A Table
Overall Heading
row 1, cell 1row 1, cell 2row 1, cell 3
row 2, cell 1row 2, cell 2row 2, cell 3

Next, a complex table with the first cell in the first row spanning two columns, the third cell in row 2 spanning two rows and two columns, and a blank cell at the bottom right:-

<TABLE BORDER>
<CAPTION>A Table</CAPTION>
<TR><TH COLSPAN=4>Overall Heading</TH></TR>
<TR><TD COLSPAN=2>row 1, cell 1</TD><TD>row 1, cell 2</TD><TD>row 1, cell 3</TD></TR>
<TR><TD>row 2, cell 1</TD><TD>row 2, cell 2</TD><TD COLSPAN=2 ROWSPAN=2>row 2, cell 3</TD></TR>
<TR><TD>row 3, cell 1</TD><TD>row 2, cell 2</TD></TR>
<TR><TD>row 4, cell 1</TD><TD>row 4, cell 2</TD><TD>row 4, cell 3</TD></TR> </TABLE>

A Table
Overall Heading
row 1, cell 1row 1, cell 2row 1, cell 3
row 2, cell 1row 2, cell 2row 2, cell 3
row 3, cell 1row 3, cell 2
row 4, cell 1row 4, cell 2row 4, cell 3

By default, table data is aligned to the left of the cell and centred top to bottom. This can be changed into centred or right aligned by adding a qualification to the <TD> tag, making it <TD ALIGN=CENTER> or <TD ALIGN=RIGHT>. To align data at the top or bottom of the cell, the tag is <TD ALIGN=TOP> or <TD ALIGN=BOTTOM>. For the final example table below, the text in row 2, cell 3 has been aligned with the tag <TD COLSPAN=2 ROWSPAN=2 ALIGN=CENTER VALIGN=TOP>row 2, cell 3</TD>.

A Table
Overall Heading
row 1, cell 1row 1, cell 2row 1, cell 3
row 2, cell 1row 2, cell 2row 2, cell 3
row 3, cell 1row 3, cell 2
row 4, cell 1row 4, cell 2row 4, cell 3

Finally, a table can be centred in the browser window, like any other object, with the <CENTER> tag, and its width, which is normally defined by the amount of data in the cells, can be predetermined using the tag <TABLE WIDTH=xx%>, where 100% is the width of the browser window. Incidentally, if the text in cells becomes too long for the width of the cell, the browser will automatically wrap the text and increase the depth of that row of cells.

The last example shows the same table centred and given a width of 80% of the browser window:-

A Table
Overall Heading
row 1, cell 1row 1, cell 2row 1, cell 3
row 2, cell 1row 2, cell 2row 2, cell 3
row 3, cell 1row 3, cell 2
row 4, cell 1row 4, cell 2row 4, cell 3

Frames

The latest extension, which at the time of writing is supported only by Netscape Navigator 2.0, is the facility to have more than one independent frame within the browser window. Probably the most useful application of this is to have an index to the Web Site permanently available in one window whilst browsing through the pages in the other.

The frames must be set up immediately after the document heading, using the tag <FRAMESET> to define the page layout. For example, a version of this page with a contents frame down the left quarter of the page and the main frame taking up the remaining three qarters to the right could be drawn like this:-

<HTML>
<HEAD><TITLE>HTML Reference Guide</TITLE></HEAD>

<FRAMESET COLS=25%, 75%>
<FRAME SRC="contents.htm">
<FRAME SRC="html.htm" NAME=MAIN>
</FRAMESET>

</HTML>

Email the author for a version of this guide set up in exactly this way.


This reference guide was written by:

Keith Domone
75337.1745@compuserve.com

January 1996