<< .. Go to : : Home : : Exercise 2 : : Demo 2A : : Demo 2B : : Demo 2C : : Demo 2D : : Demo 2E : : TAGS : : All Class Demos .. >>

Exercise 2 Demo: Part B : Ordered Lists

This is the HTML you will need for Part B of Exercise 2. Ordered Lists work with letters and numbers.

More List Tags : Ordered Lists

Lets move on to the Ordered List. It requires a pair of tags <ol> and </ol>.

Each entry in the ordered list is also enclosed within a list item <li> </li> tag pair.

Your HTML will look like this:

Home Depot List:
<ol>
<li>
10' - 2 x 4s (24) </li>
<li>
Circular saw </li>
<li>
Hammer </li>
<li>
Box of nails </li>
</ol>

On your web page it will look like this:

Home Depot List:

  1. 10' - 2 x 4s (24)
  2. Circular saw
  3. Hammer
  4. Box of nails

The Ordered List automatically uses Arabic numerals (1, 2, 3, etc). You can use other attributes to change to a alternate ordering system. Try type="A" or type="I". See the lecture for other possible type attributes.

Here is the same list again with <ol type="A"> in the opening tag.

Home Depot List:

  1. 10' - 2 x 4s (24)
  2. Circular saw
  3. Hammer
  4. Box of nails

You can also change the starting number or letter... start="x" (where x = the starting number or letter). That way it can start on a number other than #1 or a letter other than A.

For example <ol type="A" start="3"> results in:

  1. 10' - 2 x 4s (24)
  2. Circular saw
  3. Hammer
  4. Box of nails

Experiment with nesting Ordered Lists. Use the same formula we used in the last demo. Just imagine what you can do with Ordered Lists!

Ready for more lists? Go to Part C of Demo 2.

Want a review of Unordered Lists? Go to Part A of Demo 2.

Go back to the Exercise 2 page.

© Claudia Faulk. Created in 2008. Updated 1.10