1 Mastering the Internet and HTML Lists and List Tags

1

Mastering the Internet and Mastering the Internet and HTMLHTML

Lists and List Tags

2

OutlineOutline

Goal Objectives Introduction Unordered list Ordered list Definition list Nested lists

Formatting via lists Nontext list items Tutorials FAQs Summary Exercises/Homework

3

GoalGoal

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.

4

ObjectivesObjectives

IntroductionTypes of listsFormatting via listsNontext list itemsHTML tags for lists

5

IntroductionIntroduction

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

6

Unordered listsUnordered 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)

7

Unordered listsUnordered 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)

8

Figure 8.1 Netscape rendering Figure 8.2 MS IE rendering

9

Ordered listsOrdered 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)

10

Ordered listsOrdered 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)

11Figure 8.3 Netscape rendering Figure 8.4 MS IE rendering

12

Definition listsDefinition 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)

13

Definition listsDefinition 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</DL>

<! 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)

14Figure 8.5 Definition lists

15

Nested listsNested 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)

16

Nested listsNested lists Example 8.4 Nested lists<<HTML><HEAD><TITLE>A Web page

with nested lists</TITLE></HEAD><BODY><H2><CENTER>Web page with three nested lists</CENTER></H2>

<! List uses default list symbols>Here is my three-level nested list<UL> <LI>First-level list item 1 <LI>First-level list item 2

<OL> <LI>Second-level list item 1 <LI>Second-level list item 2 <LI>Second-level list item 3

<UL> <LI>Third-level list item 1 <LI>Third-level list item 2 <LI>Third-level list item3 </UL>

<LI>Second-level list item 4 </OL>

<LI>First-level list item 3 <DL>

<DT>Term1 <DD>Definition Term 1 <DT>Term2 <DD>Definition of Term 2 <DT>Term3 <DD>Definition of Term 3

</DL> <LI>First-level list item 4</UL></BODY></HTML>


17Figure 8.6 Nested lists

18

Formatting via listsFormatting via lists

Web authors may list tags to format Web pages

List tags are used to indent textThe tags that produce indentation effects

are <UL>, <OL>, and <DD>

(Cont’d)

19

Formatting via list tagsFormatting 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>


20

Figure 8.7 Formatting via list tags

21

Nontext list itemsNontext 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)

22

Nontext list itemsNontext 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)

23

Figure 8.8 Nontext list items

24

TutorialsTutorialsTutorial 8.6.1 A definition list formarketing (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>

25

TutorialsTutorialsTutorial 8.6.2 A definition list formarkup (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>

26

TutorialsTutorials 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>


27

Figure 8.11 Organization structure

28

FAQsFAQs 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)

29

FAQsFAQs 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.

30

SummarySummary– 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

31

ExercisesExercises

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)

32

<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>

33

ProblemsProblems

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)

34

<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 advanced 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)

35

Documents

1 Mastering the Internet and HTML Lists and List Tags