Lists are a way of representing multiple items in a neat manner. Here is an example of a list: tomatoes, oranges, apples, skillet, jazz cd. Here's a neat way to represent the same data:
- tomatoes
- oranges
- apples
- skillet
- jazz cd
Check out yet another way of presenting the same list
- tomatoes
- oranges
- apples
- skillet
- jazz cd
Several types of lists exist. The two above are called unordered, and ordered lists respectively. Ordered lists are numbered, while unordered lists are preceded by bullets.
Unordered Lists
The html tags for unordered lists are <ul> </ul>
You then add <ul><li> </li></ul>
Let's see what the code for the above unordered list will be then
<ul>
<li>tomatoes</li>
<li>oranges</li>
<li>apples</li>
<li>skillet</li>
<li>jazz cd</li>
</ul>
This produced
- tomatoes
- oranges
- apples
- skillet
- jazz cd
Ordered Lists
<ol> </ol> are for ordered lists. As you can see, if we wanted to change from unordered to ordered list, all we need to do is change u to o on the code we've written above. So we get
<ol>
<li>tomatoes</li>
<li>oranges</li>
<li>apples</li>
<li>skillet</li>
<li>jazz cd</li>
</ol>
which produces
- tomatoes
- oranges
- apples
- skillet
- jazz cd
By adding attributes to the list tags you can get different effects.
For unordered lists,
<ul type="disc">
<li>tomatoes</li>
<li>oranges</li>
<li>apples</li>
<li>skillet</li>
<li>jazz cd</li>
</ul>
will produce
- tomatoes
- oranges
- apples
- skillet
- jazz cd
<ul type="square">
<li>tomatoes</li>
<li>oranges</li>
<li>apples</li>
<li>skillet</li>
<li>jazz cd</li>
</ul>
will produce
- tomatoes
- oranges
- apples
- skillet
- jazz cd
<ul type="circle">
<li>tomatoes</li>
<li>oranges</li>
<li>apples</li>
<li>skillet</li>
<li>jazz cd</li>
</ul>
will produce
- tomatoes
- oranges
- apples
- skillet
- jazz cd
In ordered lists, the numbering can be done in several fashions
| Attribute | Effect |
| type="1" | will produce arabic numerals. This is also the defaul if you do not use the type="" attribute |
| type="A" | will produce lists with upper case letters used, ie. A, B, C, D, etc. |
| type="a" | will produce lists with lower case letters, ie. a, b, c, etc. |
| type="I" | will produce lists with lower case Roman numerals, ie. I, II, III, IV |
| type="i" | will produce lists with lower case Roman numerals, ie. i, ii, iii, iv |
If you don't want numbering to begin from one, you can use the start attribute.
See the following example...
<ol type="I" start="9">
<li>tomatoes</li>
<li>oranges</li>
<li>apples</li>
<li>skillet</li>
<li>jazz cd</li>
</ol>
will produce
- tomatoes
- oranges
- apples
- skillet
- jazz cd
Definition Lists
The next type of list is called definition list. In ordered and unordered lists we saw lists preceded by bullets and numbers respectively. In definition lists there's a term and its definition. Let's see an example.
-
Laser
-
Light amplification by stimulated emission of radiation
A device that utilizes the natural oscillations of atoms or molecules between energy levels for generating coherent electromagnetic radiation usually in the ultraviolet, visible, or infrared regions of the spectrum
-
Visa
-
An endorsement made on a passport by the proper authorities denoting that it has been examined and that the bearer may proceed
-
Ingratiate
-
To gain favor or favorable acceptance for by deliberate effort
I'm sure you get the idea. A definition list consists of two parts: a definition term <dt>, and a definition defintion <dd>. In other words, a term and its definition. Let's see how definion lists are generated.
<dl>
<dt>
Laser
<dd>
light amplification by stimulated emission of radiation
A device that utilizes the natural oscillations of atoms or molecules between energy levels for generating coherent electromagnetic radiation usually in the ultraviolet, visible, or infrared regions of the spectrum
<dt>
Visa
<dd>
An endorsement made on a passport by the proper authorities denoting that it has been examined and that the bearer may proceed
<dt>
Ingratiate
<dd>
To gain favor or favorable acceptance for by deliberate effort
</dl>
As you can see, definition list are created with the <dl> </dl> tags.
You then add <dl> <dt> <dd> </dl>
<dt> and <dd> are single tags that do not require closing tags.
Looping
You can use looping with your lists. Looping means having a list within a list. This will come in handy, say when one of your list items has its own list. Here's an example.
- tomatoes
- oranges
- apples
- Golden Delicious
- Granny Smith
- Jonagold
- Red Delicious
- skillet
- jazz cd
Our list above has another list of types of apples within it. Here is how to create looping in lists. You simply insert a new list within the list items:
<ul>
<li>tomatoes</li>
<li>oranges</li>
<li>apples</li>
<ul>
<li>Golden Delicious</li>
<li>Granny Smith</li>
<li>Jonagold</li>
<li>Red Delicious</li>
</ul>
<li>skillet</li>
<li>jazz cd</li>
</ul>
There is not limit to the level of looping. You can have a list, within a list, within a list... See the following example
<ul>
<li>tomatoes</li>
<li>oranges</li>
<li>apples</li>
<ul>
<li>Golden Delicious</li>
<li>Granny Smith</li>
<ul>
<li>purchase 5Ibs for your office</li>
<li>15Ibs for the home</li>
</ul>
<li>Jonagold</li>
<li>Red Delicious</li>
</ul>
<li>skillet</li>
<li>jazz cd</li>
</ul>
will produce
- tomatoes
- oranges
- apples
- Golden Delicious
- Granny Smith
- purchase 5Ibs for your office
- 15Ibs for the home
- Jonagold
- Red Delicious
- skillet
- jazz cd
The important thing to remember about looping is that, you must remember to close out all internal lists, before continuing with the external lists. Otherwise, your lists fall out of order.
|