Creating Web Pages

By Bob Pajot

Last month we dealt with placement of text and images on the web page and illustrated how important TABLES are for properly displaying them. This month will also deal with text placement and the use of LISTS.

The purpose of creating a list is to provide data in a ordered format.
There are various type of lists which you can create in your HTML document, Ordered Lists, Unordered lists, Directory Lists, Menu Lists and Definition Lists.
A List may be nested within another list if required.

This month we will concentrate on ORDERED and UNORDERED LISTS.

The Ordered List element is used to present a numbered list of items, sorted by sequence or order of importance. The Ordered list must begin with a <OL> (Ordered List) element, immediately followed by a <LI> (List Item) element. An example of an Ordered List follows. Note: the numbers 1. 2. & 3. are put in by HTML and can also be displayed as a, b, c, or i, ii, iii, iv etc. and the list can be varied as far as start number.

<OL type="1"> <LI>Item Number One</LI> <LI>Item Number Two</LI> <LI>Item Number Three</LI> </OL>

Would Be Rendered As:   Item Number One Item Number Two Item Number Three

The Unordered List element is used to present a list of items which is typically separated by white space and/or marked by bullets. The Unordered list must begin with a <UL> (Unordered List) element immediately follow by a <LI> (List Item) element. Note: the bullets can be a variety of shapes such as circle, disk, square. An Example of an Unordered list is:

<UL type="circle"> <LI>Item Number One</LI> <LI>Item Number Two</LI> <LI type="square">Item Number Three</LI> <LI type="disk">Item Number Four</LI> </UL>

Would Be Rendered As:   Item Number One Item Number Two Item Number Three Item Number Four

A list created this way will be properly aligned with either a number or letter in the case of an Ordered List or a bullet in the case of an Unordered List. (the bullet can be omitted or varied in type)

Lists are perfect for lining up text quickly, are easier to use than tables, yet display your text in a professional looking manner.

By enclosing your entire list between the <CENTER> </CENTER> element, your list can be horizontally centered on the page.