Making Lists

Sometime you may want to make a list on your page. It could be a list of your relatives, a list of your postcard collection or a list of links that the viewer might be interested in.

HTML offers some tags that can quickly and elegantly organize a list. First we have the Unorganized List. This is a list that has no particular order in it and has bullets in front of the items. For example:

Towns of the North Okanagan

  • Salmon Arm
  • Enderby
  • Sicamous
  • Sorrento

And here is the script for that:

<B>Towns of the North Okanagan</b> <P><UL> <LI>Salmon Arm<BR> <LI>Enderby<BR> <LI>Sicamous<BR> <LI>Sorrento </UL>

The <UL> tag means an unordered list and the <LI> tag identifies the items in that list. Note that the list tags have to be closed off </UL> but the <LI> does not have to be closed.

There are some attributes that can be added here to the <UL> tag. If the round dot type bullet doesn't turn your crank then you can put in UL type=circle ( or square) The default type is disk. Let's try our script again, this time with circles and then squares.

Towns of the North Okanagan

  • Salmon Arm
  • Enderby
  • Sicamous
  • Sorrento

Towns of the North Okanagan

  • Salmon Arm
  • Enderby
  • Sicamous
  • Sorrento

And the scripts for these two lists:

<B>Towns of the North Okanagan</b> <P><UL type=circle> <LI>Salmon Arm<BR> <LI>Enderby<BR> <LI>Sicamous<BR> <LI>Sorrento </UL> <P><B>Towns of the North Okanagan</b> <P><UL type=square> <LI>Salmon Arm<BR> <LI>Enderby<BR> <LI>Sicamous<BR> <LI>Sorrento </UL>
These lists can also be Ordered (<OL>)in a variety of ways. For example

Towns of the North Okanagan

  1. Salmon Arm
  2. Enderby
  3. Sicamous
  4. Sorrento

And the script

<B>Towns of the North Okanagan</b> <P><OL type=1> *NOTE the type* <LI>Salmon Arm<BR> <LI>Enderby<BR> <LI>Sicamous<BR> <LI>Sorrento </OL>

There are other "types".

Type=i

Towns of the North Okanagan

  1. Salmon Arm
  2. Enderby
  3. Sicamous
  4. Sorrento

Type=I

Towns of the North Okanagan

  1. Salmon Arm
  2. Enderby
  3. Sicamous
  4. Sorrento
Type=a

Towns of the North Okanagan

  1. Salmon Arm
  2. Enderby
  3. Sicamous
  4. Sorrento

Type=A

Towns of the North Okanagan

  1. Salmon Arm
  2. Enderby
  3. Sicamous
  4. Sorrento

For the more adventurous, lists can be placed inside of lists.

Towns of the North Okanagan

  1. Salmon Arm
    • Canoe
    • Ranchero
    • Gleneden
  2. Enderby
  3. Sicamous
  4. Sorrento

And here's the script.

<B>Towns of the North Okanagan</b> <P><OL type=A> <LI>Salmon Arm<BR> <UL> <LI>Canoe <LI>Ranchero <LI>Gleneden </UL> <LI>Enderby<BR> <LI>Sicamous<BR> <LI>Sorrento </OL>

You can also place your own bullets in front of your lines of text but you can't use the lists tags. You place your text first and then insert a graphic (the bullet) in front of each line, like so:

Towns of the North Okanagan

Salmon Arm
Enderby
Sicamous
Sorrento

Obviously this little bullet is inappropriate to the page as it has a white background. I need a transparent graphic.

Towns of the North Okanagan

Salmon Arm
Enderby
Sicamous
Sorrento

There, that's better! Well, maybe not so. The text needs to be larger to match the size of the bullet. And there needs to be more space between the lines in the list.

Towns of the North Okanagan

Salmon Arm

Enderby

Sicamous

Sorrento

Here's the script for this list:

<B>Towns of the North Okanagan</b> <P> <IMG SRC="olive.gif" WIDTH="20" HEIGHT="15"> <FONT SIZE="4">Salmon Arm<p> <IMG SRC="olive.gif" WIDTH="20" HEIGHT="15"> Enderby<p> <IMG SRC="olive.gif" WIDTH="20" HEIGHT="15"> Sicamous<p> <IMG SRC="olive.gif" WIDTH="20" HEIGHT="15"> Sorrento</FONT>

Next we go to FRAMES