Mastering the Internet and HTML

Mastering the Internet and HTML Lists and List Tags

Goal Objectives Introduction Unordered list Ordered list Definition list Nested lists Formatting via lists Nontext list items Tutorials FAQs Summary Exercises/Homework Outline

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.

Objectives • Introduction • Types of lists • Formatting via lists • Nontext list items • HTML tags for lists

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

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)

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)

Figure 8.1 Netscape rendering Figure 8.2 MS IE rendering

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)

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

Figure 8.4 MS IE rendering Figure 8.3 Netscape rendering

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)

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

Figure 8.5 Definition lists

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)

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> (figure 8.6) (Cont’d) Nested lists

Figure 8.6 Nested lists

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)

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) Formatting via list tags

Figure 8.7 Formatting via list tags

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)

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)

Figure 8.8 Nontext list items

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>

Tutorials Tutorial 8.6.2A 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>

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

Figure 8.11 Organization structure

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)

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.

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

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)

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

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)

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

Mastering the Internet and HTML