Numbered and Alphabetized Lists
<ol type="number or letter type">
<li> List Item
<li> List Item
<li> List Item
</ol>ol element which requires both an <ol> start tag and an </ol> end tag. Between these tags you must place at least one or more list items, each of which are preceded by an <li> start tag (end tag is optional). The following example illustrates:
Example 1 - SOURCE CODE
The three basic steps to creating a web page are:
<ol>
<li> Decide on a subject.
<li> Acquire the necessary tools and materials.
<li> Write the HTML source code.
</ol>
Example 1 - RESULT
The three basic steps to creating a web page are:
- Decide on a subject.
- Acquire the necessary tools and materials.
- Write the HTML source code.
Ordering Styles
The list in Example 1 uses the the default '1, 2, 3' ordering style. You can, however, explicitly define the ordering style by using the
type attribute in the <ol> tag. The type attribute employs one of the following values and "orders" the list according to the given example:
Value Ordering Style 11, 2, 3, ... ii, ii, iii, ... II, II, III, ... aa, b, c, ... AA, B, C, ...
To illustrate, let's take the list we used in Example 1 and alphabetize it using lower-case characters:
Example 2 - SOURCE CODE
The three basic steps to creating a web page are:
<ol type="a">
<li> Decide on a subject.
<li> Acquire the necessary tools and materials.
<li> Write the HTML source code.
</ol>
Example 2 - RESULT
The three basic steps to creating a web page are:
- Decide on a subject.
- Acquire the necessary tools and materials.
- Write the HTML source code.
Nesting Lists
You can nest other lists inside of ordered lists and you can even nest an unordered list inside of an ordered list thus making for a more sophisticated display. To illustrate, let's add some nested bulleted lists to our running example to flesh out some more details about the basic steps to creating a web page.
In the following example, the top-level numbered lists appear in
Maroon Bold. Nested inside these are second-level bulleted lists which appear in Green.Example 3 - SOURCE CODE
The three basic steps to creating a web page are:
<ol type="1">
<li> Decide on a subject.
<ul type="disc">
<li> Business
<li> Family
<li> Hobby
</ul>
<li> Acquire the necessary tools and materials.
<ul type="disc">
<li> Web browser
<li> Text editor or HTML editor
<li> Graphics and clip-art
<li> Graphics editor
</ul>
<li> Write the HTML source code.
</ol>
Example 3 - RESULT
The three basic steps to creating a web page are:
- Decide on a subject.
- Business
- Family
- Hobby
- Acquire the necessary tools and materials.
- Web browser
- Text editor or HTML editor
- Graphics and clip-art
- Graphics editor
- Write the HTML source code.
Picking Up Where You Left Off
But let's say, for example, that you wanted to create series of lists where the ordering system of each succeeding list picked up where the last one left off? This can be easily accomplished using the
start attribute in the <ol> tag. The start attribute specifies which character to use to start the ordering style of the respective list. Hence, if you wanted a list to display items 4, 5, and 6, you would use the type="1" attribute-value pair along with the start="4" attribute-value pair and then insert three list items. The following example will illustrate:
Example 4 - SOURCE CODE
<b>Putting a Web Page on the Internet</b><br><br>To create a web page, you must first:
<ol type="1">
<li> Decide on a subject.
<li> Acquire the necessary tools and materials.
<li> Write the HTML source code.
</ol>
Then once you have tested your page in a number of web browsers, you are ready to 'go live'. At this point you would:
<ol type="1" start="4">
<li> Find a web host.
<li> Upload your web page to the web host server.
<li> Brag to all your friends.
</ol>
Example 4 - RESULT
Putting a Web Page on the Internet
To create a web page, you must first:
- Decide on a subject.
- Acquire the necessary tools and materials.
- Write the HTML source code.
- Find a web host.
- Upload your web page to the web host server.
- Brag to all your friends.
Aside from bulleted lists and numbered lists, there is a third style which lends itself to formatting text into a list of terms and their respective definitions and is appropriately called a definition list...
| <~ BACK | TOP | NEXT ~> |
