1 Mastering the Internet and HTML Lists and List Tags

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

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

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

5 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

6 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 tag creates unordered lists. The tag must close to define the end of the list The tag defines list items of a list. The tag is used inside the 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 lists Example 8.1 Unordered lists (figures 8.1 and 8.2) (removed top part of the tags) Here is my first unordered list First list item Second list item Third list item Fourth list item Here is my second unordered list List item using the disc symbol List item using the circle symbol List item using the square symbol List item using no TYPE attribute (Cont’d)

8 Figure 8.1 Netscape rendering Figure 8.2 MS IE rendering

9 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 tag creates ordered lists. The tag must close to define the end of the list The tag defines list items of a list. The tag is used inside the 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 lists Example 8.2 Ordered lists (removed top part of the tags) This ordered list uses Arabic (default) numbers First list item Second list item Third list item Fourth list item This ordered list uses uppercase Latin letters List item using uppercase Latin letter This ordered list uses lowercase Roman numerals List item using lowercase Roman numeral (figures 8.1 and 8.2) (Cont’d)

11 Figure 8.3 Netscape rendering Figure 8.4 MS IE rendering

12 Definition lists Definition lists define terms A definition list consists of term/definition pairs The tag creates definition lists. The tag must close to define the end of the list The and tags define the term and definition respectively. These tags are used inside the tag as many times as there are list items. (Cont’d)

13 Definition lists Example 8.3 Definition lists A Web page with definition lists <FONT COLOR="blue">Web page with two definition lists This definition list uses DT/DD pairs. Term1 Here is the definition of the first term Term2 Here is the definition of the second term Term3 Here is the definition of the third term This definition list uses DT, DT, DT followed by DD, DD, DD. Term1 Term2 Term3 Here is the definition of the first term Here is the definition of the second term Here is the definition of the third term (figure 8.5) (Cont’d)

14 Figure 8.5 Definition lists

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

16 Nested lists Example 8.4 Nested lists A Web page with nested lists Web page with three nested lists Here is my three-level nested list First-level list item 1 First-level list item 2 Second-level list item 1 Second-level list item 2 Second-level list item 3 Third-level list item 1 Third-level list item 2 Third-level list item3 Second-level list item 4 First-level list item 3 Term1 Definition Term 1 Term2 Definition of Term 2 Term3 Definition of Term 3 First-level list item 4 (figure 8.6) (Cont’d)

17 Figure 8.6 Nested lists

18 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,, and (Cont’d)

19 Formatting via list tags Example 8.5 Formatting via list tags (shortened) Using the DT tag does not indent text This text is indented by a DT tag Using the DD tag indents text once This text is indented by a DD tag Nesting the UL and the DD tags indents text twice This text is indented by a UL tag and a DD tag. This text is indented by a UL tag and a DD tag. This text is indented by nesting five UL tags. (figure 8.7) (Cont’d)

20 Figure 8.7 Formatting via list tags

21 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 Non-text list items Creating nontext list items Here are my nontext list items (Cont’d)

22 Nontext list items This is a traditional list Traditional list item List with hyperlinks Northeastern University Prentice Hall publishing Use a search engine Mix text and non-text list items Traditional list item Example 8.1 Web page Traditional list item Example 8.2 Web page (figure 8.8) (Cont’d)

23 Figure 8.8 Nontext list items

24 Tutorials Tutorial A definition list for marketing (top tags are not shown) Great value For as little as $50 a month, you have access to 10 sports programs which include swimming, tennis, racket ball and family programs. Easy enrollment 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. Access to membership You get to meet over 500 members in our monthly parties. Parties are fun for everyone including children. Friendly service Our courteous staff are available to help you with any of your needs or to answer your questions.

25 Tutorials Tutorial A definition list for markup (shortened from the top) Student Excuse me Professor; I have a question. Professor Certainly; what is the question? Student How can you change text color in HTML? Instructor You can use the FONT tag or style sheets. Student Thank you Professor. Professor You are welcome.

26 Tutorials Tutorial Hierarchical structure (shortened from top) Organization structure Organization structure of a college Here is the structure of a college in a university Dean's office Dean Associate dean Assistant dean Staff Staff 1 Staff 2 Staff 3 Department Chairman Associate chairman Faculty Group 1 Group 2 Group 3 Staff Graduate students Undergraduate students (figure 8.11) (Cont’d)

27 Figure 8.11 Organization structure

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

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

30 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 – Ordered lists itemize information whose order is important. The HTML tag is – Definition lists define terms. The HTML tag is – and tags need tag, while tag needs and tags to define list items – List items can be any HTML element – Lists may be nested, and may be used for formatting

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

32 Unordered list of ten names A list of ten names Abe Zeid John Smith Linda Brown Adam Jacocbs Mary Ann Wood Kathy Shnider James Hackley Cindy Smile George Jones Sandra Michaels

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

34 Using definition List for marking up dialogs between three people Recording three people chat A conversation takes place in a ski resort between three skiers. They are advanced skiers. The conversation is recorded in this Web page. First skier How long have you been skiing? Second skier Since I was 10. Third skier Since I was 15. Third skier Ski conditions are excellent today. Second skier Sure, they are. First skier Let us all hit the slopes. (Cont’d)

35