ALAN's BASIC HTML

This page is designed to give the reader an insight and basic understanding of HTML. Pages are easily created or edited in Windows Notepad or any ASCII Text Editor. Once created, a page should be saved with an .HTM or .HTML Extension. This page was written entirely in Windows Notepad.

Index

Setting up a page
Section Headings
Using Colour
Text Formatting and Alignment
Lists
Linking to Documents and Images
Displaying Images
Tables

Setting up a Page

Each page should be laid out as shown :

<HTML> This tells the browser that it is dealing with an HTML Document
<HEAD> This sets the header area and appears to be not always necessary
<TITLE>Beginners HTML (Page Title)</TITLE> This sets the Title which is displayed in the header of the browser. (If you're not using FRAMES)
</HEAD>
<BODY BGCOLOR="#RRGGBB"> This sets the looks of the page and can contain many instructions that will be dealt with later.

TEXT AND IMAGES FOR DISPLAY WILL GO HERE
BETWEEN THE TWO "BODY" TAGS.

</BODY> This sets the end of the displayable part of the page
</HTML> This sets the end of the document.

Section Headings

The Header Tag is an easy tag to explain and use. The header for this section was set as follows :

<H2>Section Headings</H2>

but the 2 could have been any number between 1 and 6, 1 being the largest header. You can use text formatting to alter the appearance of the header and this will be explained later.

<H1>Sizes</H1>
<H2>Sizes</H2>
<H3>Sizes</H3>
<H6>Sizes</H6>

Using Colour

The colour statement is formatted in one of two ways : ="#RRGGBB". The colour is set using Hexidecimal Code or Hex for short, which consists of a number system to the base 16. There are 16 symbols used which are : 0123456789ABCDEF

Each colour is set using three Hex pairs, i.e. RED is set as
<FONT COLOR="FF0000">

You may, if you know the correct name of the colour you want, use the colour name. <FONT COLOR="GREEN">GREEN</FONT> If you use the name of the colour, you are limited to the following only: BLACK, GRAY, SILVER, WHITE, RED, GREEN, BLUE, MAROON, PURPLE, OLIVE, LIME, AQUA, NAVY, YELLOW, TEAL & FUCHSIA.

Body Tag Settings

You can set the colour of the following, by inserting statements in the <BODY> Tag

Background Colour: <BODY BGCOLOR="#C0C0C0"> This would set the background to grey.
Link: The browser has it's default colour for this but you can set your own. LINK="#0000FF" would produce BLUE Links
Active Link: The browser normally has it's own colour for this and this is when you click on a link, it changes colour. You may set which colour it changes to ALINK="#FF0000" would set the active link RED
Visited Link: You can also set the colour that links turn once you've used them VLINK="#RRGGBB"
Text: The default colour can be set in the BODY Tag as follows "color". TEXT="#RRGGBB"

Our BODY Tag could well look like this : <BODY BGCOLOR="#C0C0C0" LINK="#0000FF" ALINK="#FF0000" VLINK="#00FF00" TEXT="#FFFF00">

Temporary Colour Change

If, when typing a line of text, you wish to make a temporary colour change then you may use the following : <FONT COLOR="#RRGGBB">text that you want to change colour here</FONT>. The </FONT> tag tells the browser to revert to the previously used colour, which may not be the page default colour !

Formatting and Aligning Text

There are several things you can do to TEXT to make it stand out or to position it on the page.

The <P> Tag (New Paragraph) is one of the more versatile as you can add commands to the Tag to align text to the LEFT, CENTRE, RIGHT or JUSTIFY.

For example,

<P ALIGN=LEFT></P>
<P ALIGN=CENTER></P>
<P ALIGN=RIGHT></P>

The <P> Tag only requires the </P> Tag when you insert commands inside the Tag and you want to revert to the normal format. For a normal New Paragraph <P> on it's own will suffice.

Another way of displaying text in the centre of the page is to use the

<CENTER>
&
</CENTER>
Tags.

These placed around the text you wish to centre. All text, including Headings, will be displayed in the centre of the page until you cancel the <CENTER> Tag with the </CENTER> Tag

If you wish to only insert a line Break the <BR> Tag is what you need.

The big difference between the <P> & <BR> Tags is that the <P> tags puts in an extra line space.

It is possible to change the size of the text <FONT SIZE=+2>A</FONT> the range of numbers you can use for this is -6 to -1 and +1 to +6 depending on the default font size or you can use 1 to 7 where 7 is the largest as follows :
The full range is <FONT SIZE=7>7654321</FONT>

You may make text <B>BOLD</B> or <I>ITALIC</I> or <U>UNDERLINED</U> or You may, of course, use a combination of all three and even change the colour. There are many other ways of affecting the appearance of the text, there are also numerable pages on the Web to explain them in more detail.

Lists

Several types of lists have already been used in this document and I will attempt to explain how they work and what other types there are.

Unordered Lists

<UL>Sets the start of the list
You may set the type of bullet - <UL TYPE=DISC> and the TYPE may be DISC, CIRCLE or SQUARE
<LI>Indicates the start of each list item
You may set the TYPE for an individual item - <LI TYPE=CIRCLE>
</UL> Indicates the end of the list

Ordered Lists

<OL> Sets the start of the list
Again <LI> Indicates the start of each list item
Ordered Lists, by default, start at 1 and increment at each line but you may specify which number to start at or you may select letters.

<OL TYPE="A"> You may specify the list to be in Upper Case "A"
<OL START=5>You may specify the start number or letter
<OL TYPE="a">List in lower case

<OL TYPE="i">List in lower case Roman
<OL TYPE="I">List in upper case Roman
</OL> Indicates the end of the list

Definition List

This is the list type that the "Lists Section" was written with and is formatted as follows
<DL>Indicates to the browser that this is the start of a Definition List
<DT> The TERM or TITLE
<DD> The DEFINITION
</DL>The end of the list.
<DT> & <DD> may be used for as many items as there are to list.

There are other types of lists, such as MENU and DIRECTORY Lists but these produce the same result as an Unordered List.

It is in order to NEST lists as I have above. i.e. One list in another, more than once if required.

It should also be noted that the temporary change of colour mentioned in the Using Colours Section alters the colour of the bullets or numbers in a list as well as the text, so it is possible to have the bullets set to one colour and links listed using another colour !

Linking to Documents and Images

You may use an anchor to link to a reference on the same page or to a refernece on another page or to a new page or image.

Linking to a reference on the same page.

First you need to NAME a place on the page to jump to,
<A NAME="selected name">. This should be placed in the document at the point you wish to be at the top of the screen.
Then insert the link, where you wish to jump from <A HREF="#selected name">descriptive text</A>

As a working example <A HREF="#top">Back to the Top of Page</A>

Linking to another page or document.

If the file or document you are linking to is in the same directory as the current one, you only need to refer to the file or Doc by name within the Anchor : <A HREF="FILENAME.HTML">Descriptive Text or Image</A>

The FILENAME.HTML can also be the File Name of an Image like RAOB.GIF.

To link to a reference on another document add the Reference Name to the end of the URL in the Anchor as follows : <A HREF="FILENAME.HTML#REFNAME">Descriptive Text</A>
If the File or Image is on another Server or Drive then you will need to specify the URL in more detail. If the document is on the same server but in a different directory you can set the default "BASE", otherwise, you must use the full URL.

<BASE="http://dspace.dial.pipex.com/town/square/ad716"> would set the BASE to my directory on the server. This BASE statement should be placed in the <HEAD> section of the Page. Only the File Name and local Sub-Directory is now required i.e. /frome/basic.htm

To link to this page from another site the Anchor would be : <A HREF="http://dspace.dial.pipex.com/town/square/ad716/frome/basic.htm">Learn Basic HTML with Alan</A>

Displaying Images

You may display any image format that your Browser supports but you must always consider that other Browsers may not support all the image formats. The normal Image Format is .GIF (Graphics Interchange Format) or .JPG .JEPG (Joint Photographic Experts Group)

To display an Image, the following should be used :
<IMG SRC="IMAGEFILENAME.GIF">

In some Browsers, it is possible to switch off downloading of graphics files to speed download times. In this environment, the person downloading your picture or image would not have a clue what was supposed to be there. To overcome this problem you may insert a text statement that will be displayed instead, as follows :
<IMG SRC="IMAGEFILENAME.GIF" ALT="Your text here">

You may wish to display text alongside the image and it is possible to position the text at either the top, middle or bottom as follows :

ALIGN="TOP"
ALIGN="MIDDLE"
ALIGN="BOTTOM"

Of course, you may want the image to appear on the right hand side of the page and if so, you should use the following :
<IMG SRC="IMAGEFILENAME.GIF" ALT="Your text here" ALIGN="RIGHT">

If the image is too large for your page, you may specify a size that the image will be displayed at. and this is done with the addition of WIDTH=Number of Pixels HEIGHT=Number of Pixels within the Image Tag as follows: <IMG SRC="IMAGEFILENAME.GIF" ALT="ME" WIDTH=50 HEIGHT=45>

And finally, you may want to display the image with a Border: <IMG SRC="IMAGEFILENAME.GIF" ALT="ME" WIDTH=50 HEIGHT=45 BORDER=2>

Tables

For controlling the layout of a page, Tables are a very useful device in HTML.

The <TABLE> Tag indicates the beginning of the Table and the </TABLE> Tag indicates the end of the Table. The "Table Row" <TR> Tag indicates the start of each row. You may end the row with a </TR> Tag but this is not always necessary as the next <TR> Tag will suffice. You should always get into the habbit of using the End Tag. Other tags that are used in tables are : <TH> which is the Table Header and <TD> which is for a Data Cell.

A picture paints a thousand words, so here is an example of a Table with the HTML to go with it.

<TABLE BORDER=1>

<TR><TH COLSPAN=2>Header</TH></TR>
<TR><TD>Cell 1</TD><TD>Cell 2</TD></TR>

Header

Cell 1 Cell 2

</TABLE>

In the above example, the term COLSPAN was used, it is also possible to ROWSPAN in the same manner. The BGCOLOR Tag and BACKGOUND Tag may also be used with Tables to great effect. In addition to the above, it is also in order to use ALIGN as in the <P> Tag.

<TABLE BORDER=5>

Header, Cell 1 and Cell 2 as above
<TR><TD BGCOLOR="RED" ALIGN="RIGHT" COLSPAN=2>
<FONT COLOR="WHITE">Cell 3</FONT>
</TD></TR>

Header

Cell 1 Cell 2

Cell 3

</TABLE>

The above should give the reader a good insight into how tables work and how to adapt tables to their own use.

More to come, when I get the time.

Of course, you may want the image to appear on the right hand side of the page and if so, you should use the following :
<IMG SRC="IMAGEFILENAME.GIF" ALT="Your text here" ALIGN="RIGHT">