Ordered List

Ordered List:
In this tutorial we will create a table of contents with an ordered list. In an ordered list the list items will be numbered.

If you want to follow the tutorial please download tutorial template here
If you are following these tutorials continue to use your own source code from previous tutorial.

We will be using the following tags:

Ordered list implementation tags
•Opening tag <ol>
•Closing tag </ol>

List item tags
•Opening tag <li>
•Closing tag </li>

The code below will provide a very basic table of contents with two list items. Firstly type Table of contents in standard font. You can alter this font at a later stage. Within the opening and closing tags for an ordered list we will add each list item with the <li> tag and close with the </li> tag.

HTML code		Sample of code output
Table of contents <ol>    <li>Links</li>    <li>Buttons</li>    <li>Tutorials Completed</li> </ol>		Table of contents Links Buttons Tutorials Completed

Save your HTML document and test on browser of choice. If you wish to continue following the tutorials type Yes into the table data column after Ordered List in the completed tutorials table.

<tr>    <td>Ordered List</td>    <td>Yes</td> </tr>

To download the finished example for this tutorial please click here

In the next tutorial I will extend this ordered list with unordered sub menus

Previous tutorial

Next tutorial