Numbered (Ordered) Lists


If the items in your list should follow a specific order, as in recipes or instructions, you want to use the ordered list tag (<ol>). With this tag, HTML automatically numbers or letters your items for you. Here's an example:

<ol><li>first item in the list</li> <li>second item in the list</li> <li>third item in the list</li></ol>


Notice how similar the two list samples are. Both the <ul> and <ol> tags call for the individual list items to be identified with the <li> tag. Like the <ul> tag, HTML has an automatic style for the list items within the <ol> tag. HTML automatically numbers the items with the familiar Arabic numerals (1, 2, 3, and so on). What's more, it automatically renumbers the list items if you decide to add or delete items later. Once again, Figure 6.1 has an example of this type of list.

Formatting Numbered Lists

You can use style sheets for formatting ordered lists. In addition to the standard Arabic numerals, there are four other styles that can be applied to your ordered list. Table 6.1 describes each of those types, and the following sample HTML shows how you can use style sheets to create a list ordered by lowercase roman numerals. Figure 6.1 shows an example of such a list in the Web browser.

<!DOCTYPE html      PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"      "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"        xml:lang="en" lang="en"> <head> <title>Bullet Options</title> <style type="text/css"> ol.lwroman {list-style-type:lower-roman} </style> </head> <body> <ol > <li>a list item</li> <li>another list item</li> </ol> </body> </html>


Table 6.1. List Style Types

Sample

Style Syntax

Definition

a, b, c

lower-alpha

Lowercase letters

A, B, C

upper-alpha

Uppercase letters

i, ii, iii

lower-roman

Small roman numerals

I, II, III

upper-roman

Large roman numerals


Setting a Start Value

There might be times when you'd like to start an ordered list with a number other than one. Many times when writing instructions, you need to interrupt a numbered list with some other material (such as text or examples), and then continue with the numbered list. To do this in HTML, close the first list, add the additional materials that you need, and then start a new list, using the list item's value attribute to set the beginning number for the new list. Figure 6.2 demonstrates how the following code is interpreted by the browser.

<!DOCTYPE html      PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"      "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"        xml:lang="en" lang="en"> <head> <title>Ordered Lists</title> <style type="text/css"> </style> </head> <body> <p>It's Payday!</p> <ol> <li>Turn in your timecard.</li> <li>Receive your paycheck.</li> <li>Endorse your paycheck.</li> </ol> <p>Congratulations! You're almost there.</p> <ol> <li value="4">Put the check in the bank.</li> </ol> </body> </html>


Figure 6.2. The Web browser shows an ordered list that was interrupted and started again using the value attribute.


Caution

The value attribute requires that you use Arabic numbering to specify the start value, even if you've chosen roman numerals or letters for your list type.




Sams Teach Yourself HTML in 10 Minutes
Sams Teach Yourself HTML in 10 Minutes (4th Edition)
ISBN: 067232878X
EAN: 2147483647
Year: 2004
Pages: 151
Authors: Deidre Hayes

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net