Basic Guide to HTML

Lists and Tables and things.

There are a number of extra tricks available in HTML to help you format your text in a nice readable format. The first are lists.

Ordered Lists

These are lists where the bits are "numbered" in some way.
<OL>

<LI>1st part of the list </LI>
<LI>2nd part of the list </LI>
</OL>

Looks like
  1. 1st part of the list
  2. 2st part of the list

There are number of formats which are defined using a <OL type="i"> command.
  1. type="i"
  2. Roman numerals
  1. type="a"
  2. Letter
  1. type="1"
  2. Numbers
  1. type="I"
  2. Capital Roman numerals
  1. type="A"
  2. Capital Letter

Another useful command start="x" This allows the list to be started ar a number other than 1. Although it can be applied to any type it has to be stated as a number. Also some browsers don't use this. So don't rely on it.

  1. <OL start="10">
  2. and we continue form there
  1. <OL start="10" type="i">
  2. and we continue form there
  1. <OL start="10"type="a">
  2. and we continue form there

Unordered Lists

These are lists where the bits are "bulleted" in some way.
<UL>

<LI>1st part of the list </LI>
<LI>2nd part of the list </LI>
</UL>

Looks like

There are number of formats which are defined using a <UL type="i"> command.
  • type=square
  • type=circle
  • type=disc

Definition lists

Mainly used for glossaries etc actually these lists can be very versatile. The format is;

<DL>

<DT> the term </DT>
<DD>What it means </DD>
</DL>

The term
What it means

All that has been nice and straight forward hasn't it.
Brace yourself...

Table

Tables are used to give structure to a page. Many web page builders over use them. (Personal opinion only). However they are very useful so here we go....

The table tags...

<table>
Says start a table here. There are loads of things you can put in here. Some are similar to the image tags e.g. Border="" width="" (Though this is usual set as a % of the window). Others are more like the Body tag, e.g. bgcolor=#000000 (which is how I did the bits on the colours page if you don't believe me go and have a look.)
<TR>
Table return.. it says to the browser start a new line.
<TH>
Table Heading.. these cells are automatically centered and bold text. They too can have different background colours and widths etc.
They can also streatch across more than one cell.. colspan=x or rowspan=y
</Th>
The end of the heading cell
<TD>
Table division.. the normal cells, usually left justified and in normal text. Different background colours widths and colspan/ rowspan apply here too.
</TD>
- The end of the normal cell

Ok there are other tags such as captions, headers and footers but they get complex.

So lets put that together in a simple table...

<table width=95% border=1>
<tr>

<th>Row 1 - Column 1 </th>
<th>Column 2 </th>
<th width=50%>Column 3 </th>
</tr>
<tr>
<td bgcolor=#99FF00> Row 2 </td>
<td colspan=2> and anything could go in here including another table </td>
</tr>
<tr>
<td>Row 3</td>
<td>or even an image</td>
<td rowspan=2><img src="boo.gif" width="80" height="80" alt="example image" border="0"></td>
</tr>
<TR>
<TD>Row 4</td>
<TH>You can put headings anywhere</th>
</TR>
</table>

Which looks like..
Row 1 - Column 1 Column 2 Column 3
Row 2 and anything could go in here including another table
Row 3 or even an image example image
Row 4 You can put headings anywhere

So armed with these basic instructions you should be able to make your first page.

Don't be afraid to experiments as it is almost impossible to do damage to your machine viewing a HTML file THIS IS NOT A CHALLENGE Worst thing you could do is hang up your browser. And you might just come up with something really interesting.;)

Good luck and have fun...

From all at aria.uk.com