MAT 125: Demos for Exercises

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.

This exercise 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:

If you nest your lists, be sure you close as many </ul> unordered lists as you open.


Go to Part B of Demo 2.