Lists

Each item in an ordered list has a letter or number before the list item. Example:

1. First item text
2. Second item text

Each item in an unordered list has some kind of a bullet before the list item. Example:

• First item text
• Second item text

Look at the samples, to see how the html tags are written.

A list can have another list embedded in a list item. Example:

1. First item text
   • Bulleted item
   • Bulleted item
2. Second item text
   • Bulleted item
   • Bulleted item

Look at the samples, to see how the html tags are written.

You can change the starting number by using the start attribute in the <ol> tag.
You can change the next number by using the value attribute in the <li> tag.
While you can do this, you probably do not want to confuse the reader with them.
They are being phased out. Example:

5. First item text
7. Second item text

Definition lists contain terms, and a definition for each term. Example:

elephant

large animal

bee

animal, smaller than an elephant

Look at the samples, to see how the html tags are written.

The definition terms and definitions do not need to match 1 to 1. You can have several definitions for a term. Example:

elephant

large animal

gray animal

bee

animal, smaller than an elephant

yellow and black animal

flying animal

Or, you can have all terms and no definitions. Example:

elephant

bee

Or, you can have no terms and all definitions.
This just produces an indented list.
Another way to indent the whole list is to use a margin-left style property.
Example of only definitions:

large animal

gray animal

animal, smaller than an elephant

yellow and black animal

flying animal

There are three list style properties.

• list-style-image
• list-style-type
• list-style-position

Look at the samples, to see how these affect the appearance of a list.

Now you are ready to build your lab 8 web pages.
Follow the link on the left to read the lab 8 requirements and build your lab 8 web pages.

You have built your lab 8 web page, and revised your index page.
Upload your pages to voyager, just as you did for lab 2.
Validate your lab 8 and index pages.
Then, use the link to the left to send a message to your instructor, saying that you have completed lab 8, and it is on voyager ready to be graded..

Reading assignments are in HTML, A Beginner's Guide, by Wendy Willard.

Chapter 8
(Note that we skipped chapter 7. We might get back to it later.)

Use Ordered Lists in a Web Page

The use of the type attribute is an old technique. Use styles instead.

Use Unordered Lists in a Web Page

Read.

Use Definition Lists in a Web Page

While a list of only <dd> can be used to create an indented list, the book and my notes provide alternative techniques, which might be better choices.

Combine and Nest Two or More Types of Lists in a Web Page

Read.

Style Lists

The use of styles to make a list into a navigation bar is very nice.

An alternate text is Even More Excellent HTML by Timothy T. Gottleber and Timothy N. Trainor. This book gives both new and older techniques. You may read in this book, if you wish. Look at chapter 4, "Lists"