Constructing Lists

HTML includes a set of tags that allow the creation of hierarchical bulleted lists. There are two types of lists: unordered and ordered. Unordered lists are bulleted, whereas ordered lists are usually numbered. You can also combine the two types to create more complex lists.

Unordered Lists

First let's take a look at two unordered lists. The code for these appears in Code Listing 2-8. Figure 2-8 displays the lists, separated by a horizontal rule.

Code Listing 2-8.

 <HTML> <HEAD> <TITLE>Listing 2-8</TITLE> </HEAD> <BODY> <UL>This is at the first level.   <UL>This is at the second level.</UL>   <UL>This is at the second level.     <UL> This is at the third level.</UL>   </UL>   <UL>This is at the second level.</UL> </UL> <HR> <UL>This is the first level header.   <LI>This is the first level-1 item in the list.   <LI>This is the second level-1 item in the list.   <UL>     <LI>This is the first level-2 item in the list.     <LI>And this is the second level-2 item in the list.   </UL>   <LI>This is the third level-1 item in the list. </UL> </BODY> </HTML> 

click to view at full size.

Figure 2-8. An example of an unordered list.

NOTE
HTML ignores extra white space. Notice how the code in Code Listing 2-8 takes advantage of this feature by using indents to visually separate the levels of hierarchy in the list. Though unnecessary, indenting lines of code can be a powerful debugging tool because it makes it easy to immediately recognize such common mistakes as accidentally leaving out a tag.

The first list in Code Listing 2-8 is constructed using only the unordered list tags, <UL> and </UL>. By placing one set of unordered list tags within another, we can embed lists within one another to create a series of indented pieces of text. Notice that each opening <UL> tag has a paired closing </UL> tag.

The next list shown in Code Listing 2-8 also begins with the unordered list tag, <UL>. A closing tag, </UL>, is necessary, and it appears at the end of the list, toward the end of the file. Anything between these two tags is considered part of the list. This list contains bulleted line items, preceded by the list item tag, <LI>. The ending tag, </LI>, is not required since anything encountered before another item begins or before the end of the list is considered part of the current list item. Another list is embedded in this list. Notice that this embedded list is indented and that its bullets have a different shape. Only the first three levels of embedding have differing types of bullets. Beginning with the third level, all lists use the same style bullet. Notice that the second level does not have any text after the <UL>. Such header text is optional.

Ordered Lists

The line items of an ordered list are displayed with numbers rather than with bullets. Use the <OL> tag to set up an ordered list, as shown in Code Listing 2-9. Figure 2-9 shows how Internet Explorer displays this code.

Code Listing 2-9.

 <HTML> <HEAD> <TITLE>Listing 2-9</TITLE> </HEAD> <BODY> <OL>   <LI>This is the first level-1 item in the list.   <LI>This is the second level-1 item in the list.   <OL>     <LI>This is the first level-2 item in the list.     <LI>And this is the second level-2 item in the list.   </OL>   <LI>This is the third level-1 item in the list. </OL> </BODY> </HTML> 

click to view at full size.

Figure 2-9.An example of an ordered list.

The list in Code Listing 2-9 begins with the ordered list tag, <OL>. As is the case with an unordered list, a closing tag (</OL>) is necessary. Each list item is now preceded by a number rather than by a bullet. Notice that a second list is embedded within the first and that the numbering restarts with 1 in this second list.

Complex Lists

The <OL> tag supports an attribute named TYPE, which controls whether the list items are prefaced with numbers, letters, or roman numerals. Code Listing 2-10 demonstrates the TYPE attribute as well as the mixing of <OL> and <UL> tags. You can see the display produced by this code in Figure 2-10. By combining ordered and unordered lists and by using the TYPE attribute, you can present complex hierarchical information.

Code Listing 2-10.

 <HTML> <HEAD> <TITLE>Listing 2-10</TITLE> </HEAD> <BODY> <OL TYPE="1">   <LI>This uses numbers.   <OL TYPE="A">     <LI>This uses uppercase letters.     <OL TYPE="a">       <LI>This uses lowercase letters.       <OL TYPE="I">         <LI>This uses uppercase roman numerals.         <OL TYPE="i">           <LI>This uses lowercase roman numerals.           <LI>This also uses lowercase roman numerals.         </OL>       </OL>     </OL>   </OL>   <UL>     <LI>Here is a bullet.   </UL> </OL> </BODY> </HTML> 

click to view at full size.

Figure 2-10. An example of a complex list.

By now, you should feel comfortable with some of the commonly used elements in HTML. In the next chapter, we explore two of the most powerful layout tools provided by HTML—tables and frames.



Dynamic HTML in Action
Dynamic HTML in Action
ISBN: 0735605637
EAN: 2147483647
Year: 1999
Pages: 128

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net