UNIT 2 > MODULE 3

Lesson 1: Unordered Lists

Overview

The most common HTML lists are either ordered lists <ol> or unordered lists <ul>. Ordered lists are typically displayed with numbers, while unordered lists are typically displayed with bullets. In this lesson you will use HTML to create an unordered list for organizing some of the content on your portfolio's home page. This list will contain links to the pages for each unit you created earlier. Eventually you will create two lists (one of each type) and you will learn to use CSS to align the two lists side by side, but for now the lists will be in one column aligned to the left of the page (left aligned is the default setting so there is nothing you'll need to code.).

Learner Outcomes

At the completion of this exercise:

• you will be able to create an ordered and unordered list using XHTML.

Activities

1. Place your cursor beneath the last code you wrote in the previous lesson. Type the title for the first list, Required Projects. Contain this title in <h3> tags. It should look like this: <h3>Required Projects</h3>
2. On the next line, type the unordered list tag <ul>. Press Enter twice on your keyboard to make an empty line for more code. Close the unordered 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 one of the units you will be working on eventually. Enter the text between the <li> tags as it appears in the example below:

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

Resources/Online documents

• Common HTML Tags
• W3C HTML 4.01 Specification
• WDG Guide to HTML

All done?

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

Copyright © 2005-2008 by University of Washington. Permission is granted to use these materials in whole or in part for educational, noncommercial purposes provided the source is acknowledged. This product was created with support from the National Institute on Disability and Rehabilitation Research of the U.S. Department of Education (grant #H133D010306), and is maintained with support from the National Science Foundation (grant #CNS-054061S). The contents do not necessarily represent the policies of the U.S. federal government, and you should not assume their endorsement.