<< .. Go to : : Home : : Exercise 2 : : Demo 2A : : Demo 2B : : Demo 2C : : Demo 2D : : Demo 2E : : TAGS : : All Class Demos .. >>

Exercise 2 Demo: Part A : Lists

Always start your HTML document with the DocType and the 4 Basic HTML tags we covered in Exercise One.

There are several different types of lists that we will work with. Unordered Lists, Ordered Lists and Definition Lists.

These are some of the HTML Elements you will need add for Part A of Exercise 2. This lesson is about using list tags. We will start with the Unordered List which is marked with a bullet instead of a number.

Unordered Lists

The Unordered List requires a pair of tags <ul> and </ul>. You open a <ul> tag, nest all the list items and when you are finished with your list you close with the </ul> tag.

Each entry in the list is enclosed within a list item <li> </li> tag pair.

Your HTML will look like this:

Groceries:
<ul>
<li>
Bread </li>
<li>
Meat </li>
<li>
Cheese </li>
<li>
Tomatoes </li>
</ul>


On your web page it will look like this:

Groceries

  • Bread
  • Meat
  • Cheese
  • Tomatoes

The black bullet or disc is the default marker for each list item. To select an alternate shape you can add one of these attributes to the code: type="square" or type="circle" in the opening <ul> tag. Here is the same list with <ul type="square">

Groceries

  • Bread
  • Meat
  • Cheese
  • Tomatoes

You can also nest one list in another:

Groceries:
<ul>
<li>
Bread </li>
<li>
Meat </li>
<li>
Cheese </li>
<li>
Vegetables: </li>
     <ul>
     <li>
Tomatoes </li>
     <li>
Lettuce </li>
     <li>
Carrots </li>
     </ul>
</ul>

Be sure you close out each list item and also each unordered list.

You may want to try this:

  • How about indenting some text using an unordered list.
    • Do you think you can indent even further than this?
      • Can you figure out how I did it?

Be sure you close as many </ul> unordered lists as you open.

Ready for more? Go to Part B of Demo 2.

Go back to the Exercise 2 page.

© Claudia Faulk. Created in 2008. Updated 6.18