UNIT 2 > MODULE 3

Lesson 2: Ordered Lists

Overview

In the previous lesson you created an unordered list. In this lesson, you create an ordered list. In an ordered list, the actual order of the items in the list is significant. When viewed in a browser, instead of seeing bullets before each item, the items are typically numbered in sequence. The XHTML code for creating an ordered list is very similar to the code for creating an unordered list. The only difference is that the list begins and ends with the <ol> and </ol> tags respectively.

In this lesson, the ordered list that you will be creating will be a list of links to the websites you develop for clients.

Learner Outcomes

At the completion of this exercise:

Activities

  1. Place your cursor beneath the closing tag of the last list you made. Type the title for the second list: Client Sites. Contain this title in <h3> tags. It should look like this: <h3>Client Sites</h3>
  2. On the next line, type the ordered list tag <ol>. Press Enter twice on your keyboard to make an empty line for more code. Close the ordered list .
  3. Move the cursor up to the empty space and type the tags for containing list items: <li></li>. Press Enter again and type the list item tags. There will be three items in the list, so repeat this process one more time. Each list item represents a site you may be working on eventually. For now enter generic descriptions of the web sites which you'll replace in time. Enter the text between the <li> tags as it appears in the example below:

<ol>

<li>First Client Web Site</li>

<li>Second Client Web Site</li>

<li>Third Client Web Site</li>

</ol>

Remember, indenting the <li> tags helps keep the coding organized but will not alter how the list appears in a browser.

Resources/Online Documents

All done?

After you have saved the changes to index.htm, return to your browser and refresh to see the changes. Are there three numbered items in the list? Show your instructor your results before starting Lesson 3.