HTML Tutorials - Lists... R R



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
  1. tomatoes
  2. oranges
  3. apples
  4. skillet
  5. 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

  1. tomatoes
  2. oranges
  3. apples
  4. skillet
  5. 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

AttributeEffect
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

  1. tomatoes
  2. oranges
  3. apples
  4. skillet
  5. 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.

Continue to HTML Forms...


Send me a feedback on this tutorial, so I can improve on it. Thanks.
Home|Comments, suggestions?



Copyright © 2000 Richie's Tutorials All rights reserved.