Getting Started with HTML

HTML (Hyper Text Markup Language) is the language used to write Web Pages. Whilst web pages can be written simply and effectively using Web Page Creation tools, it is often necessary to edit the actual code. A markup language works on the basis of tags which surround what you want to display on the screen. For example:

<B> This text would be printed in bold </B>

because it is started with the bold code and finishes with the end of bold code. Nearly all tags require a start and end code.

ALL tags for formatting a page are contained within <BODY> AND </BODY>

The following tags are a simple set which should help you to get started:

Paragraphs and Line Breaks

Linking to Other Pages

Pictures

Font Colour and Size

Background

Paragraphs and Line Breaks

<P> Text between PARAGRAPH tags will be printed in paragraphs.  </P>

The wrapping is produced automatically so you don't need to press the hard return key and even if you do it won't make any difference.

To force an extra line break you would have to use <BR> but with no ending tag.

Bold Text

<B> Text between BOLD tags will be printed in bold.  </B>

Alignment of Text

<CENTER> Text between CENTER tags will be aligned centrally.  </CENTER>

Note the American spelling of CENTER.

<P ALIGN="right"> Text between RIGHT tags will be aligned to the right.  </P>
<P ALIGN="left"> Text between LEFT tags will be aligned to the left.  </P>

Headings

<H1> Text between HEADING 1 tags is printed in the following style: </H1>

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Normal Text

Note: The heading number can be changed easily to H2 or H3 etc.

Lists

An UNORDERED LIST (UL) is produced with bullets against each list item (LI). It is defined as follows:

<UL>
     <LI>List Item 1</LI>
     <LI>List Item 2</LI>
     <LI>List Item 3</LI>
     <LI>List Item 4</LI>
     <LI>List Item 5</LI>
</UL>

It would look like this:

List Item 1
List Item 2
List Item 3
List Item 4
List Item 5

An ORDERED LIST (OL) is produced with each list item (LI) numbered. It is defined as follows:

<OL>
     <LI>List Item 1</LI>
     <LI>List Item 2</LI>
     <LI>List Item 3</LI>
     <LI>List Item 4</LI>
     <LI>List Item 5</LI>
</OL>

It would look like this:

List Item 1
List Item 2
List Item 3
List Item 4
List Item 5

Horizontal Rule

A horizontal rule draws a line across the page. It is defined as follows:

<HR>

there is no ending tag.

Linking to other Pages

Linking to other pages is simple if they are in the same directory. You need to know the filename of the page. It is defined as follows:

<A HREF="filename.htm">Link Text</A>

Filename.htm represents the filename of the document to link to and Link Text represents the text which will appear on screen in order to be able to create the link. For example:

a template to experiment with

If the page is in another directory then you need to use RELATIVE file addressing. This means that you refer to the file based upon where you are now. For example, if you are in the root directory and want to point to a file called test.htm in the samples directory then you would use:

<A HREF="samples/test.htm">Link Text</A>

However, if you were in the directory samples and wanted to point to the index.htm file in the root directory then you would use:

<A HREF="../index.htm">Link Text</A>

The .. means go up one directory so if you were in a directory of picture which was in a directory of samples (ie samples/picture) then you would use:

<A HREF="../../index.htm">Link Text</A>

NOTE: the use of / instead of \ for file addressing in HTML as opposed to the PC.

To link to a page somewhere else on the web then you would use its complete address, eg:

<A HREF="http://www.bbc.co.uk">Link Text</A>

Pictures

Like most documents, you can insert pictures into HTML as well. This is done using the following markup:

<IMG SRC="filename.gif">

Filename.gif represents the name of the file you want your picture to be. If you are using directories then it is possible to use relative addressing like you would with links. It is possible to change the width and height of the picture (if you only change the width then the height changes automatically). Eg:

<IMG SRC="filename.gif" WIDTH=100 HEIGHT=150>

HINT - Try to always use GIF or JPEG pictures as these are supported by web browsers and also take up little space.

Font Colours and Size

You can define the colour of font you want to use for a certain part of text using the FONT markup:

<FONT COLOR="colorname">

Note the spelling of the word COLOR - it is American.

You can also change the font size using SIZE:

<FONT COLOR="colorname" SIZE=4>

You can get at list of colours from a colour guide (click to see).

Backgrounds

The background to this document is a small picture which is tiled together to form a whole background. It is possible to set the background picture using the BODY tag which starts the whole of your main document (it comes after the HEAD information though). Eg:

<BODY background="backpic.gif">     The HTML document goes in here     </BODY>

Backpic.gif represents the filename of the background picture - you may need to use a directory path as well.

You can also change the background colour:

<BODY BGCOLOR="colorname">     The HTML document goes in here     </BODY>

NOTE: the American spelling of COLOR.

Return to Top