<< .. 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 1.

This is the HTML 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.

List Tags

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

Lets start with the Unordered List. It 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.16