- Brian Whitworth

Transcript - Brian Whitworth

Mastering the Internet and
HTML
Lists and List Tags
1
Outline







Goal
Objectives
Introduction
Unordered list
Ordered list
Definition list
Nested lists






Formatting via lists
Nontext list items
Tutorials
FAQs
Summary
Exercises/Homework
2
Goal
This chapter covers lists, their use in Web
pages, their types, and their tags. It also
covers nested lists, nontraditional (nontext)
list items, and formatting via lists.
3
Objectives

Introduction
 Types of lists
 Formatting via lists
 Nontext list items
 HTML tags for lists
4
Introduction

Lists allow Web authors to organize and indent
text in Web pages
 Lists could be used to describe components of a
product, steps of a procedure, tasks of a plan, and
organizational/hierarchical structures
 HTML supports three types of lists: unordered,
ordered, and definition. The difference between
these types comes in their rendering
5
Unordered lists

Unordered lists itemize information whose order is
not important
 Browsers use one of three symbols to display list
items: disk (filled circle), square, or circle
 The <UL> tag creates unordered lists. The tag
must close to define the end of the list
 The <LI> tag defines list items of a list. The tag is
used inside the <UL> tag as many times as there
are list items. Its most common attribute is TYPE,
which specifies the display symbol of list items.
(Cont’d)6
Unordered lists

Example 8.1 Unordered lists (figures 8.1 and 8.2)
(removed top part of the tags)
<! List uses default list symbols>
Here is my first unordered list
<UL>
<LI>First list item
<LI>Second list item
<LI>Third list item
<LI>Fourth list item
</UL><! List controls list symbols>
Here is my second unordered list
<UL>
<LI TYPE = "disc">List item using the disc symbol
<LI TYPE = "circle">List item using the circle symbol
<LI TYPE = "square">List item using the square symbol
<LI>List item using no TYPE attribute
</UL></BODY></HTML>
(Cont’d)
7
Figure 8.1 Netscape rendering
Figure 8.2 MS IE rendering
8
Ordered lists

Ordered lists itemize information whose order is
important(
 Browsers use one of three styles to display list items:
Arabic numbers (1, 2, …), Latin letters (A, a, B, b,
…), or Roman numerals (I, i, II, ii, …)
 The <OL> tag creates ordered lists. The tag must
close to define the end of the list
 The <LI> tag defines list items of a list. The tag is
used inside the <UL> tag as many times as there are
list items. Its most common attribute is TYPE,
which specifies the display style of list items. (Cont’d)
9
Ordered lists

Example 8.2 Ordered lists
(removed top part of the tags)
<! List uses default list numbers>
This ordered list uses Arabic (default) numbers
<OL>
<LI>First list item
<LI>Second list item
<LI>Third list item
<LI>Fourth list item
</OL> <! List uses uppercase Latin letters>
This ordered list uses uppercase Latin letters
<OL>
<LI TYPE="A">List item using uppercase
Latin letter
<LI>List item using uppercase Latin letter
<LI>List item using uppercase Latin letter
<LI>List item using uppercase Latin letter
</OL>
<! List uses lowercase Roman numerals>
This ordered list uses lowercase Roman
numerals
<OL>
<LI TYPE = "i">List item using lowercase
Roman numeral
<LI>List item using lowercase Roman
numeral
<LI>List item using lowercase Roman
numeral
<LI>List item using lowercase Roman
numeral
</OL>
</BODY>
</HTML>
(figures 8.1 and 8.2)
(Cont’d)
10
Figure 8.3 Netscape rendering
Figure 8.4 MS IE rendering
11
Definition lists

Definition lists define terms
 A definition list consists of term/definition pairs
 The <DL> tag creates definition lists. The tag
must close to define the end of the list
 The <DT> and <DD> tags define the term and
definition respectively. These tags are used inside
the <DL> tag as many times as there are list items.
(Cont’d)
12
Definition lists
 Example 8.3 Definition lists
<HTML><HEAD>
<TITLE>A Web page with definition
lists</TITLE></HEAD><BODY>
<H2><CENTER>Web page with two
definition lists</CENTER>
</H2>
This definition list uses DT/DD pairs.
<DL>
<DT>Term1
<DD>Here is the definition of the first
term
<DT>Term2
<DD>Here is the definition of the
second term
<DT>Term3
<DD>Here is the definition of the third
term
<! List uses DT, DT, DT followed by DD,
DD, DD>
This definition list uses DT, DT, DT
followed by DD, DD, DD.
<DL>
<DT>Term1
<DT>Term2
<DT>Term3
<DD>Here is the definition of the first
term
<DD>Here is the definition of the
second term
<DD>Here is the definition of the third
term
</DL>
</BODY>
</HTML>
(figure 8.5)
(Cont’d)
13
Figure 8.5 Definition lists
14
Nested lists

Lists may be nested to represent multiple levels of
hierarchies
 The three types of lists (unordered, ordered, and
definition) may be nested together
 When we nest lists, we make one or more item of
a list an entire new list
 There is no limit on the levels of nesting
(Cont’d)
15
Nested lists
<UL>
<LI>Third-level list item 1
<<HTML><HEAD><TITLE>A Web page
<LI>Third-level list item 2
with nested lists</TITLE>
<LI>Third-level list item3
</HEAD><BODY>
</UL>
<H2><CENTER>Second-level list item 4
COLOR="blue">Web page with three
</OL>
nested
<LI>First-level list item 3
lists</CENTER></H2>
<DL>
<! List uses default list symbols>
<DT>Term1
Here is my three-level nested list
<DD>Definition Term 1
<UL>
<DT>Term2
<LI>First-level list item 1
<DD>Definition of Term 2
<LI>First-level list item 2
<DT>Term3
<OL>
<DD>Definition of Term 3
<LI>Second-level list item 1
</DL>
<LI>First-level list item 4
<LI>Second-level list item 2
</UL></BODY></HTML>
<LI>Second-level list item 3
(figure 8.6)
(Cont’d)

Example 8.4 Nested lists
16
Figure 8.6 Nested lists
17
Formatting via lists

Web authors may list tags to format Web
pages
 List tags are used to indent text
 The tags that produce indentation effects are
<UL>, <OL>, and <DD>
(Cont’d)
18
Formatting via list tags

Example 8.5 Formatting via list
tags (shortened)
<! Using the DT tag does not indent text>
Using the DT
tag does not indent text
<DT>This text is indented by a DT tag
<DT>This text is indented by a DT tag
<! Using the DD tag indents text once>
Using the DD
tag indents text once
<DD>This text is indented by a DD tag
<DD>This text is indented by a DD tag
<! Nesting the UL and the DD tags
indents text twice>
Nesting the
UL and the DD tags indents text
twice
<UL>
<DD>This text is indented by
<DD>a UL tag and a DD tag.
<DD>This text is indented by
<DD>a UL tag and a DD tag.
</UL>
<! Nesting the UL tag 5 times indents text
5 times>
<UL><UL><UL><UL><UL>
This text is indented
by 
nesting five UL tags.
</UL></UL></UL></UL> </UL>
</BODY>
</HTML>
(figure 8.7)
(Cont’d)
19
Figure 8.7 Formatting
via list tags
20
Nontext list items

Items of a list are traditionally text
 HTML supports nontext list items such as
hyperlinks, images, video, audio, etc.
 Example 8.6 Nontext list items
<HTML>
<HEAD>
<TITLE>Non-text list items</TITLE>
</HEAD>
<BODY>
<H2><CENTER>Creating nontext list
items</CENTER></H2>
Here are my nontext list items
<! Create a traditional list>
(Cont’d)
21
Nontext
list
items
 This is a traditional list
<UL> <LI>Traditional list item
<LI>Traditional list item
<LI>Traditional list item
</UL>
<! Create a list with hyperlink items> 
List with hyperlinks
<OL> <LI><A HREF = "http://www.neu.edu">Northeastern University</A>
<LI><A HREF = "http://www.prenhall.com">Prentice Hall publishing</A>
<LI><A HREF = "http://www.altavista.com">Use a search engine</A>
</OL>
<! Mix text and non-text list items> 
Mix text and non-text list items
<UL> <LI TYPE= "square">Traditional list item
<LI><A HREF = "Example8.1.html">Example 8.1 Web page</A>
<LI>Traditional list item
<LI><A HREF = "Example8.2.html">Example 8.2 Web page</A>
</UL> </BODY> </HTML>
(figure 8.8) (Cont’d) 22
Figure 8.8 Nontext list items
23
Tutorials
Tutorial 8.6.1 A definition list for
marketing (top tags are not shown)
<! Use a DL list>
<DL>
<DT>Great value
<DD>For as little as $50 a month, you have access to 10 sports programs
which include swimming, tennis, racket ball and family programs.
<DT>Easy enrollment
<DD>All it takes is a phone call. No application to fill or history to give. Call
us 8:00 a.m. - 10:00 p.m.
<DT>Access to membership
<DD>You get to meet over 500 members in our monthly parties. Parties are
fun for everyone including children.
<DT>Friendly service
<DD>Our courteous staff are available to help you with any of your needs or
to answer your questions.
</DL></BODY></HTML>
24
Tutorials
Tutorial 8.6.2 A definition list for
markup (shortened from the top)
<! Use a DL list>
<DL>
<DT>Student
<DD>Excuse me Professor; I have a question.
<DT>Professor
<DD>Certainly; what is the question?
<DT>Student
<DD>How can you change text color in HTML?
<DT>Instructor
<DD>You can use the FONT tag or style sheets.
<DT>Student
<DD>Thank you Professor.
<DT>Professor
<DD>You are welcome.
</DL></BODY></HTML>
25
Tutorials

Tutorial 8.6.3 Hierarchical
structure (shortened from top)
<TITLE>Organization structure</TITLE>
</HEAD><BODY>
<H2><CENTER>Organization structure of a
college</CENTER></H2>
 Here is the structure of a college in a
university
<UL>
<LI>Dean's office
<UL>
<LI TYPE = "square">Dean
<LI>Associate dean
<LI>Assistant dean
<LI>Staff
<OL>
<LI>Staff 1
<LI>Staff 2
<LI>Staff 3
</OL>
</UL>
<LI>Department
<OL>
<LI>Chairman
<LI>Associate chairman
<LI>Faculty
<UL>
<LI>Group 1
<LI>Group 2
<LI>Group 3
</UL>
<LI>Staff
<LI>Graduate students
<LI>Undergraduate students
</OL>
</UL></BODY></HTML>
(figure 8.11)
(Cont’d)
26
Figure 8.11 Organization
structure
27
FAQs

Q: Why does my browser not display the lists as I
expect?
– A: This is usually due to the improper closing
of the list tags, especially for nested lists. Check
all the list tags, and make sure they are closed
at the right locations.
 Q: How can I get better control of list formatting,
for example numbering, indenting, and so forth.?
– A: Style sheets allow better control of list
formatting.
(Cont’d)
28
FAQs

Q: What is the difference between ordered and
unordered lists?
– A: Both types are rendered in an identical
manne,r except that browsers use numbers for
items of ordered lists and symbols for items of
unordered lists.
 Q: Can an ordered list continue list numbering
automatically from a previous list?
– A: No. Ordered lists cannot hide numbering of
some list items, either.
29
Summary
– Lists allow Web authors to organize and indent text in
–
–
–
–
–
–
–
Web pages
HTML supports unordered, ordered, and definition lists
Unordered lists itemize information whose order is not
important. The HTML tag is <UL>
Ordered lists itemize information whose order is
important. The HTML tag is <OL>
Definition lists define terms. The HTML tag is <DL>
<UL> and <OL> tags need <LI> tag, while <DL> tag
needs <DT> and <DD> tags to define list items
List items can be any HTML element
Lists may be nested, and may be used for formatting
30
Exercises

Problem 8.1. Create an unordered list of the
names of 10 people.
– Solution strategy: Follow example 8.1. Use a
text editor to write and debug the HTML code.
Use a browser to display the results
(Cont’d)
31
<HTML><HEAD>
<TITLE>Unordered list of ten names</TITLE>
</HEAD><BODY>
<CENTER>A list of ten
names</CENTER>
<UL TYPE = "disc">
<LI>Abe Zeid
<LI>John Smith
<LI>Linda Brown
<LI>Adam Jacocbs
<LI>Mary Ann Wood
<LI>Kathy Shnider
<LI>James Hackley
<LI>Cindy Smile
<LI>George Jones
<LI>Sandra Michaels
</UL></BODY></HTML>
32
Problems

Problem 8.7 Use a definition list for marking
up dialogs between three people.
– Solution strategy: Use a text editor to write the
HTML code. Use a browser to test it
(Cont’d)
33
<HTML><HEAD><TITLE>Using definition List for marking up dialogs between three
people</TITLE></HEAD><BODY><H2><CENTER>Recording three people chat</CENTER></H2>
A conversation takes place in a ski resort between three skiers. They are advan
skiers. The conversation is recorded in this Web page.
<DL>
<DT>First skier
<DD>How long have you been skiing?
<DT>Second skier
<DD>Since I was 10.
<DT>Third skier
<DD>Since I was 15.
<DT>Third skier
<DD>Ski conditions are excellent today.
<DT>Second skier
<DD>Sure, they are.
<DT>First skier
<DD>Let us all hit the slopes.
</DL></BODY></HTML></HTML>
(Cont’d)
34
35

- Brian Whitworth

Transcript - Brian Whitworth

Directory