2. Lesson Overview
In this lesson, you will learn to:
1. Create lists using HTML code.
2. Improve readability of a Web page using lists.
3. Guiding Questions
1. 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?
4. Types of Lists
Threetypes of lists which will be covered in this
lesson:
1. Unordered lists
2. Ordered lists
3. Definition lists
5. Unordered Lists
Similarto 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
6. 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>
7. 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
8. Creating an Ordered List
Startwith the <ol>…</ol> tags to designate the
beginning and ending of an ordered list
The same <li> tag identifies items in the list
9. 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>
10. Definition Lists
Used to define terms
Different from unordered and ordered lists
Has two parts
1. The term
2. The definition
Labeling of the parts is very important
11. 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
12. 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>
13. Lesson Review
Describe the code needed to create each of
the following:
1. Unordered list
2. Ordered list
3. Definition list
14. Practice: Lists
1. 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.
Editor's Notes
Lesson 8 Overview
Post one or more of these questions in an area where students can read them and allow time for students to respond to the questions. Discuss the student answers these questions.
Introduce lists by discussing the types of lists that will be covered in this module.Unordered OrderedDefinition
Unordered lists are similar to a bulleted list in word processing. These lists items are presented in no special order. If the order of the list is changed, it does not change the meaning of the information. For example, if you created a list of the subjects you are studying in school you can list them in any order. The order has nothing to do with the meaning of the list.
To create an unordered list, two tags are needed. The <ul>…</ul> tag is used to designate the beginning and ending of the unordered list, while the <li>…</li> is used to identify the items to be placed in the list. Here is the code needed to create the list of school subjects: <ul> <li>Science</li> <li>Math</li> <li>Reading</li> </ul>
Discuss ordered lists. Ordered lists use the numbering system and give an order to the items in the list. Changing this order would mean changing the meaning of the information in the list. For example, if you created a list of steps to make a peanut butter sandwich you would need to put the steps in a certain order. Changing the order would mean changing the outcome of the steps.
To create an ordered list, only one of the tags needs to be changed. Instead of the <ul> tag a <ol> tag is used. The same <li> tag used to identify items in the list is used. Here is the code needed to create the steps in 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>
To create an ordered list, only one of the tags needs to be changed. Instead of the <ul> tag a <ol> tag is used. The same <li> tag used to identify items in the list is used. Here is the code needed to create the steps in 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>
A definition list is used when you want to define terms for the viewer. This list is a little different than unordered and ordered lists. A definition list includes two parts, the term and the definition. Of course, correct labeling of these items is very important.
To create a definition list, a <dl>…</dl> tag is needed to identify the beginning and ending of the list. Each term is identified by a <dt>…</dt> tag and each definition is identified by a <dd>…</dd> tag. It is important to include the definition with the term so that they appear correctly on your Web page. Here is the code for a definition list for a few terms from this module: <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>
Review concepts covered if needed with the students and discuss the practice activity.
