Lists

also more links and a few other useful tags

Ordered and unordered 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.

Nested lists

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.

List tricks (optional)

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:

  1. First item text
  2. Second item text

Definition lists

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.

Definition list tricks (optional)

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

List style

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.

Lab 8

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.

Complete Lab 8

You have built your lab 8 web page.
Upload your page to voyager, just as you did for lab 2.
Validate your lab 8 page.
Then, log in to Catalyst and submit assignment 8. The submission should provide the following information:

  • It should say that you have completed Lab 8.

Reading assignment

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"