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>
Bread
<li> </li>
Meat
<li> </li>
Cheese
<li> </li>
Tomatoes
<li> </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>
Bread
<li> </li>
Meat
<li> </li>
Cheese
<li> </li>
Vegetables:
<li> </li>
Tomatoes
<ul>
<li> </li>
Lettuce
<li> </li>
Carrots
<li> </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?
If you nest your lists, be sure you close as many </ul> unordered lists as you open.
Go to Part B of Demo 2.