home Java Script MS Access Perl HTML Delphi C ++ Visual Basic Java CGIPerl MS Excel Front Page 98 Windows 98 Ms Word Builder PHP Assembler Link to us Links |
When you present information on paper (or with a good old-fashioned overhead projector) you probably often include lists of numbered steps or "bullet points." You've also undoubtedly written many indented lists to organize information such as terms and their definitions or the outline of a business plan. Because lists are so common, HTML provides tags which automatically indent text and add numbers or bullets in front of each listed item.
In this chapter, you'll find out how to format numbered lists, bulleted lists, and a variety of other indented lists. You will also see how the HTML tags for creating lists can be used for almost any other type of indentation you want on your Web pages. To Do: You can make the most of this chapter if you have some text that needs to be indented correctly to be presentable.
There are three basic types of HTML lists. All three are shown in Figure 7.2, and Figure 7.1 reveals the HTML to construct them:
Just A Minute: Remember that different Web browsers can display Web pages quite differently. The HTML standard doesn't specify exactly how Web browsers should format lists, so people using older Web browsers may not see the same indentation that you see. Software of the future may also format HTML lists differently, though all current Web browsers now display lists in almost exactly the same way.
Figure 7.1. Use <OL> and <LI> for ordered lists, <UL> and <LI> for unordered lists, and <DL>, <DT>, and <DD> for definition lists.
Figure 7.2. The three types of HTML lists, as they appear in Netscape Navigator.
Although definition lists are officially supposed to be used for defining terms, many Web page authors use them anywhere they'd like to see some indentation. In practice, you can indent any text simply by putting <DL><DD> at the beginning of it and </DL> at the end.
You can indent items further by nesting one list inside another, like this:
<DL><DD>This item will be indented <DL><DD>This will be indented further <DL><DL><DD>And this will be indented very far indeed </DL></DL></DL></DL>
Just make sure you always have the same number of closing </DL> tags as opening <DL> tags.
Ordered and unordered lists can also be nested inside one another, down to as many levels as you wish. In Figure 7.3, a complex indented outline is constructed from several unordered lists. You'll notice in Figure 7.4 that Netscape Navigator automatically uses a different type of bullet for each of the first three levels of indentation, making the list very easy to read.
Figure 7.3. You can build elaborate outlines by placing lists within lists.
As shown in Figure 7.4, Netscape Navigator will normally use a solid disc for the first-level bullet, a hollow circle for the second-level bullet, and a solid square for all deeper levels. However, you can explicitly choose which type of bullet to use for any level by using <UL TYPE="disc">, <UL TYPE="circle">, or <UL TYPE="square"> instead of <UL>.
You can even change the bullet for any single point in an unordered list by using the TYPE attribute in the <LI> tag. For example, the following would display a hollow circle in front of the words "Extra" and "Super," but a solid square in front of the word "Special."
<UL TYPE="circle"> <LI>Extra <LI>Super <LI TYPE="square">Special </UL>
Figure 7.4. Multi-level unordered lists are neatly indented and bulleted for readability.
Just A Minute: Netscape Navigator is the only Web browser that currently lets you control the appearance of list bullets. All bullets will appear as solid discs in Microsoft Internet Explorer 3.0.
The TYPE attribute also works with ordered lists, but instead of choosing a type of bullet you choose the type of numbers or letters to place in front of each item. Figure 7.5 shows how to use roman numerals (TYPE="I"), capital letters (TYPE="A"), and lowercase letters (TYPE="a"), along with ordinary numbers in a multi-level list. In Figure 7.6, you can see the resulting nicely formatted outline.
Though Figure 7.5 uses only the TYPE attribute with the <OL> tag, you can also use it for specific <LI> tags within a list (though it's hard to imagine a situation where you would want to). You can also explicitly specify ordinary numbering with TYPE="1", and you can make lowercase roman numerals with TYPE="i".
Here's one more seldom-used but handy-when-you-need-it trick: You can start an ordered list with any number (or letter) with the START attribute. <OL START="3">, for example, starts a numbered list at 3 instead of 1. Individual points can be renumbered with the VALUE attribute (<LI VALUE="12">, for example).
Just A Minute: Note that you must always use numbers with the START and VALUE attributes. To make a list that starts with the letter C, for example, you need to type <OL TYPE="A" START="3">.
Figure 7.5. The TYPE attribute lets you make multi-tiered lists with both numbered and lettered points.
To check it out, go to the 24-Hour HTML Café List-O-Mania page at
http://www.mcp.com/sams/books/235-8/listlist.htm
Have some fun while you're there by trying to figure out what the real titles of the sample lists might be, based on the information they contain. Answers are given--as a nested HTML list, of course--at the end of the page.
You can also see how a list was used to enhance the 24-Hour HTML Café welcome page during the early stages of its development, at
http://www.mcp.com/sams/books/235-8/cafe7.htm
Figure 7.6. A well-formatted outline can make almost any plan look plausible.
To Do: Take a list or two of your own, and try to find the best way to present the information so that it can be easily understood.
In this chapter, you learned to create and combine three basic types of HTML lists: ordered lists, unordered lists, and definition lists. Lists can be placed within other lists to create outlines and other complex arrangements of text.
Table 7.1 lists all the tags and attributes covered in this chapter.
Table 7.1. HTML tags and attributes covered in Chapter 7.
Tag | Attribute | Function |
<OL>...</OL> | An ordered (numbered) list. | |
TYPE="..." | The type of numerals used to label the list. Possible values are A, a, I, i, 1. | |
START="..." | The value with which to start this list. | |
<UL>...</UL> | An unordered (bulleted) list. | |
TYPE="..." | The bullet dingbat used to mark list items. Possible values are DISC, CIRCLE, and SQUARE. | |
<LI> | A list item for use with <OL> or <UL>. | |
TYPE="..." | The type of bullet or number used to label this item. Possible values are DISC, CIRCLE, SQUARE, A, a, I, i, 1. | |
VALUE="..." | The numeric value this list item should have (affects this item and all below it in <OL> lists). | |
<DL>...</DL> | A definition list. | |
<DT> | A definition term, as part of a definition list. | |
<DD> | The corresponding definition to a definition term, as part of a definition list. |
X. Xylophone Y. Yak Z. Zebra
Apple pie, pudding, and pancake, All begin with an A.