Exercise 2 Demo: Part B : Ordered Lists
Ordered Lists work with letters and numbers.
More List Tags : Ordered Lists
The Ordered List 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>
10' - 2 x 4s (24)
<li> </li>
Circular saw
<li> </li>
Hammer
<li> </li>
Box of nails
<li> </li>
</ol>
On your web page it will look like this:
Home Depot List:
- 10' - 2 x 4s (24)
- Circular saw
- Hammer
- 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:
- 10' - 2 x 4s (24)
- Circular saw
- Hammer
- 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:
- 10' - 2 x 4s (24)
- Circular saw
- Hammer
- Box of nails
Experiment with nesting Ordered Lists. There is a video that covers this on the Video Page It is similar to we used in the last demo. Just imagine what you can do with Ordered Lists!
Go to Part C of Demo 2.