t.2.8.pp

HTML ListsLesson 8Module 2: HTML Basics

Lesson Overview In this lesson, you will learn to:

1. Create lists using HTML code.2. Improve readability of a Web page using lists.

Guiding Questions1. Find a Web page that uses a list. How does a

list impact the readability of the page?2. Give 2 examples of how a list could be used

in a Web page or Web site on another topic?

Types of Lists Three types of lists which will be covered in

this lesson:1. Unordered lists2. Ordered lists3. Definition lists

Unordered Lists Similar to bulleted lists in word processing Items in the list have no special order Changing the order would not change the

meaning of the information Example: A listing of your school subjects:

Science Math Reading

Creating an Unordered List Start with the <ul>…</ul> tags to designate the

beginning and ending of an unordered list Add <li>…</li> tags to identify items to be placed in

the list To create our list of school subjects, use the following

HTML code:<ul><li>Science</li><li>Math</li><li>Reading</li><ul>

Ordered Lists Use a numbering or ordering system to

create meaning Changing the order changes the meaning For example: A list of the steps to make a

peanut butter sandwich. Changing the order of the steps changes the

outcome of the sandwich

Creating an Ordered List Start with the <ol>…</ol> tags to designate

the beginning and ending of an ordered list The same <li> tag identifies items in the list

Creating an Ordered List Code for making a peanut butter sandwich:<ol><li>Get a slice of bread.</li><li>Open a jar of peanut butter.</li><li>Spread peanut butter on the slice of bread with a knife.</li><li>Place another slice of bread on top.</li><li>Eat the sandwich.</li></ol>

Definition Lists Used to define terms Different from unordered and ordered lists Has two parts

1. The term2. The definition

Labeling of the parts is very important

Creating a Definition List A <dl>…</dl> tag identifies the beginning

and ending of the list A <dt>…</dt> tag identifies the terms A <dd>…</dd> tag identifies the definitions

Creating a Definition List Example of definition list coding:<dl><dt>format</dt><dd>the design and layout of a page</dd><dt>source code</dt><dd>the HTML code that creates a Web page</dd><dt>Web page</dt><dd>a file written in HTML, or other Web publishing language</dd></dl>

Lesson Review Describe the code needed to create each of

the following:1. Unordered list2. Ordered list3. Definition list

Practice: Lists1. Create the following changes in your “Tags

and Attributes” Web page: An unordered list An ordered list A definition list

2. Challenge Activity: Add underlining as appropriate.