Unordered List

Unordered List:
In this tutorial we will be extending the ordered list table of contents from the previous tutorial with an unordered list. In an unordered list the list items will be denoted with bullet points.

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.

The code below is what we covered in the previous tutorial

Table of contents <ol> <li>Links</li> <li>Buttons</li> <li>Tutorials Completed</li> </ol>

For each item in the ordered list we will be adding a few sub menu items with an unordered list. For example: The Links sub items will be input within the the <ul> and </ul> tags after the links <li> tag. See output below for what will be displayed on a browser.

HTML code		Sample of code output
Table of contents <ol>   <li>Links     <ul>       <li> Text Link </li>       <li> Text Link with target attribute </li>     </ul>   <li>Buttons   <li>Tutorials Completed </ol>		Table of contents Links Text Link Text Link with target attribute Buttons Tutorials Completed

Finally we can add the rest of the sub items for the buttons content menu. See output below for what will be displayed on a browser.

HTML code		Sample of code output
Table of contents <ol>   <li>Links     <ul>       <li> Text Link </li>       <li> Text Link with target attribute </li>     </ul>   <li>Buttons     <ul>       <li> Clickable button </li>       <li> Onclick event button </li>       <li> URL link button </li>     </ul>   <li>Tutorials Completed </ol>		Table of contents Links Text Link Text Link with target attribute Buttons Clickable Button Onclick event Button URL link button 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 Unordered List in the completed tutorials table.

<tr>    <td>Unordered List</td>    <td>Yes</td> </tr>

To download the finished example for this tutorial please click here

In the next tutorial I will expand the list of contents to include internal link anchors that will link to relevant paragraphs / chapters within a webpage. 

Previous tutorial

Next tutorial