Ms. Kessinger

HTML Lessons

http://web.nafcs.k12.in.us/users/fchs/students/loginname

Lesson 4- Lists

Click to go to Web 2 Lesson

Unordered Lists -Click to Practice

Unordered lists are marked with bullets. They begin with the ul tag and each bullet is marked with the li tag.

Ordered Lists - Click to practice.

Ordered lists are marked with numbers or letters.

• Definition Lists -Click to Practice

• It is a list of items (terms), with a description of each item (term).
• A definition list starts with a <dl> tag (definition list).
• Each term starts with a <dt> tag (definition term).
• Each description starts with a <dd> tag (definition description).

---

Styling a List -Click here for more Information

The CSS list properties allow you to:

• Set different list item markers for ordered lists
• Set different list item markers for unordered lists
• Set an image as the list item marker

You can change what kind of list you have by adding a style to the style sheet. Some examples are shown below.

 Place the code below into your style sheet to change the list type.

---

Styles for an Unordered List - Click to Try it Out

ul {list-style-type:circle;}
ul{list-style-type:square;}
ul {list-style-type:disc;}
ul{list-style-type:none;}

Styles for an ordered list - Click Here to Find More List Types

ol {list-style-type:upper-roman;}
ol {list-style-type:lower-roman;}
ol {list-style-type:upper-alpha;}
ol {list-style-type:lower-alpha;}
ol {list-style-type:lower-decimal;}

 

---

Advanced - Web II Styling with an Image -Click to Practice

Add the code below to your style sheet if you want to use an image as a bullet point. Be sure your image is the appropriate size for a bullet.

ul{list-style-image: url('images/sqpurple.gif');

---

L4 Review Questions WEB I

Create a new html file called l6.html. Save it in your review folder. Answer the questions below. Place them in an ordered list.

1. What is the difference between an ordered list and an unordered list?
2. What code would you use to add a new item to your list?
3. What code would you use to add a term to the definition list?
4. When would you choose to use an ordered list over an unordered list?
5. List three different ways to style a list.

Click here for extra help

---

WEB 2 LESSON ON NESTED LIST

Click here to practice

Lesson 6 Review Questions - WEB 2

Open your review.html page and add a heading for lesson 6. Answer the questions below using a nested list. (hint-nest the answers)

1. When would one want to use a nested list?
2. What is different about the code in a regular list and a nested list?
3. What tags are used to create a nested list?
4. What code is used to create a bulleted list with an image?
5. What should you do to your image before adding it as a bullet?

Lesson 6 Review Assignment - WEB 2

Open your review.html page. Create a heading for Lesson 6 Nested List

1. Create a nested list that is 3 deep. (there are 3 nested list within the main list.)
2. Give this list a class and add a style to it on your external style sheet.
3. Using a picture of yourself, change the style of your bulleted list to an image.Click here for extra help

Click to go to the top