HTML and its various derivatives were originally meant to
be able to reproduce academic and research text. As a
consequence, particular care was taken to ensure specific
elements—such as lists and tables—were implemented and robust enough to handle the tasks for which they serve. In the case of lists, HTML defines three different types of lists: ordered (commonly known as numbered) lists, unordered (commonly known as bulleted) lists, and definition lists (for term and definition pairs). This chapter covers all three types of lists and the various syntax and formatting possibilities of each. Understanding Lists
Note
All lists, whether ordered, unordered, or definition, share
similar elements. Each HTML list has the following structure:
<list_tag>
<item_tag>Item text</item_tag>
<item_tag>Item text</item_tag>
...
</list_tag>
Definition lists are slightly different in syntax because they have an item tag (<dt> or “definition term”) and a definition description tag (<dd>). See the Definition Lists section later in this chapter for more information. For each list you need the list opening tag, a corresponding closing tag, and individual item tags (paired; open and close). Each type of list has its own display format:
|
C 5H5A P T E R
✦✦✦✦ In This Chapter Understanding Lists Ordered (Numbered) Lists Unordered (Bulleted) Lists Definition Lists Nested Lists ✦✦✦✦ |
|
76
Part II ✦ HTML/XHTML Authoring Fundamentals
|
|
The ordered and unordered lists have many different display options available:
✦ Ordered lists can have their items preceded by the following: • Arabic numbers • Roman numerals (upper- or lowercase) • Letters (upper- or lowercase) • Numerous other language-specific numbers/letters ✦ Unordered lists can have their items preceded by the following: • Several styles of bullets (filled circle, open circle, square, and so on) • Images More information on the individual list types is provided in the following sections. Ordered (Numbered) Lists Ordered lists have elements that are preceded by numbers or letters and are meant to provide a sequence of ordered steps for an activity. For example, this book uses numbered lists when stepping the reader through a process. Such a list might resemble the following:
tag (<li>) to delimit each individual list item. In the preceding example, the list has three elements numbered with Arabic numbers. This is the default for ordered lists in HTML, as shown in the following code, whose output is shown in Figure 5-1: <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<title>Example Ordered List</title>
</head>
<body>
<ol>
|
|
Chapter 5 ✦ Lists
77
|
<li>In Internet Explorer, open the Web page that displays
the graphic you wish to use as wallpaper for your
desktop.</li>
<li>Right-click on the image to open the context menu.</li>
<li>Choose Set as Background to save the image and use it
as your desktop wallpaper.</li>
</ol>
</body>
</html>
Figure 5-1: The default ordered list uses Arabic numbers for its items. To specify a different type of identifier for each item, you would use the list-style attribute and define a style for the list, as shown in the following code: <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<title>Example Ordered List - Letters</title>
</head>
<body>
<ol style=“list-style: upper-alpha”>
<li>In Internet Explorer, open the Web page that displays
the graphic you wish to use as wallpaper for your
desktop.</li>
|
|
78
Part II ✦ HTML/XHTML Authoring Fundamentals
|
|
Note
<li>Right-click on the image to open the context menu.</li>
<li>Choose Set as Background to save the image and use it
as your desktop wallpaper.</li>
</ol>
</body>
</html>
This code results in the list items being prefaced with uppercase letters, as shown in Figure 5-2. Figure 5-2: The upper-alpha value of the list-style attribute causes the ordered list elements to be prefaced with uppercase letters. Using letters or Roman numerals only makes sense for organizational lists (out- lines, and so on), not for lists that outline a series of steps—especially if the steps must be followed in order. The list-style-type property supports the following values in CSS2: ✦ decimal ✦ decimal-leading-zero |
|
Chapter 5 ✦ Lists
79
|
|
Note
✦
✦
✦
✦
✦
✦
✦
✦
✦
✦
✦
✦
✦
✦
✦
✦
lower-roman
upper-roman
lower-greek
lower-alpha
lower-latin
upper-alpha
upper-latin
hebrew
armenian
georgian
cjk-ideographic
hiragana
katakana
hiragana-iroha
katakana-iroha
none
Some of the list-style-types are font-dependent—that is, they are only supported on certain fonts. If you are using a type such as hiragana with a Latin-based font, you will not get the results you intend.
The list-style-types are self-explanatory. The default type is typically decimal,
but can be defined by the individual client browser. Keep in mind that your
document’s font and language options must support the language character sets
used by the list-type.
Ordered lists also support the list-style-position property. This property controls where the number or character preceding each item appears. The property has two possible values:
|
|
80
Part II ✦ HTML/XHTML Authoring Fundamentals
|
||
|
Figure 5-3: The list-style-position property controls where the list item numbers/characters
appear—outside or inside the list item margins.
|
|
Chapter 5 ✦ Lists
81
|
<style type=“text/css”>
ol { counter-reset: list 11; }
li { list-style-type: none; }
li:before {
content: counter(list,decimal) “. ”;
counter-increment: list; }
</style>
This code introduces quite a few CSS2 concepts—pseudo-elements, counters, and related
properties and methods. However, it isn’t as complex as it might first appear:
Tip
The various list properties can all be defined within one property, list-style.
The list-style property has the following syntax:
list-style: <list-style-type> <list-style-image>
<list-style-position>
You can use this one property to specify one, two, or all three list-style prop-
erties in one declaration. For example, to define an ordered list with lowercase
letters and inside positioning, you could use the following tag:
<ol style=“list-style: lower-alpha inside;”>
See Chapters 16 and 17 for more information on styles.
|
|
82
Part II ✦ HTML/XHTML Authoring Fundamentals
|
|
Unordered (Bulleted) Lists
Unordered lists are similar to numbered lists except that they use bullets instead of numbers or letters before each list item. Bulleted lists are generally used when providing a list of nonsequential items. For example, consider the following list of ice cream flavors: ✦ Vanilla ✦ Chocolate ✦ Strawberry Unordered lists use the unordered list tag (<ul>) to delimit the entire list and the list item tag (<li>) to delimit each individual list item. In the preceding example, the list has three elements each preceded with a small, round, filled bullet. This is the default for unordered lists in HTML, as shown in the following code, whose output is shown in Figure 5-4: <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
Figure 5-4: An example of an unordered list.
|
|
Chapter 5 ✦ Lists
83
|
<title>Example Unordered List</title>
</head>
<body>
<ul>
<li>Vanilla</li>
<li>Chocolate</li>
<li>Strawberry</li>
</ul>
</body>
</html>
Unordered lists also support the list-style-type property, but with slightly
different values:
✦ disc ✦ circle ✦ square ✦ none The default bullet type is disc, though the client browser can define the default differently. The different bullet types are shown in Figure 5-5.
Figure 5-5: An example of the different bullet types for unordered lists.
|
|
84
Part II ✦ HTML/XHTML Authoring Fundamentals
|
|
As with ordered lists, you can define the list-style-position property, which in
the case of unordered lists controls where the bullet appears—outside or inside the
left margin of the item. For example, to move the bullet inside the item margins you
would use a style with the <ul> tag similar to the following:
<ul style=“list-style-position: inside;”>
Unordered lists support one other type of bullet for each item, an image. The image
for use in unordered lists must fit the following criteria:
✦ Be accessible to the document via HTTP (be on the same Web server or deliverable from another Web server) ✦ Be in a suitable format for the Web (jpg, gif, or png) ✦ Be sized appropriately for use as a bullet To specify an image for the list, you use the list-style-image property. This property has the following syntax: list-style-image: url(url_to_image); This property can be used to add more dimension to standard bullets (for example, creating spheres to use instead of circles) or to use specialty bullets that match your content. For example, consider the two graphics shown in Figure 5-6, created in Jasc’s Paint Shop Pro.
Figure 5-6: Two graphics that can be used as bullets.
|
|
Chapter 5 ✦ Lists
85
|
|
Of course, the graphics must be scaled down to “bullet” size and saved in a
Web-friendly format. In this case, the graphics are reduced to 10-20 pixels square and
saved on the root of the Web server as sphere.jpg and cone.jpg. The following
code uses the images, and the output is shown in Figure 5-7.
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<title>Example Unordered List with Image Bullets</title>
</head>
<body>
<p><b>sphere</b></p>
<ul style=“list-style-image: url(sphere.jpg);”>
<li>Vanilla</li>
<li>Chocolate</li>
<li>Strawberry</li>
</ul>
<p><b>cone</b></p>
<ul style=“list-style-image: url(cone.jpg);”>
<li>Vanilla</li>
<li>Chocolate</li>
<li>Strawberry</li>
</ul>
</body>
</html>
Figure 5-7: Using graphics in unordered lists.
|
|
86
Part II ✦ HTML/XHTML Authoring Fundamentals
|
|
Note A few references state that the closing item tags (</li>) are not necessary in
lists. Although most browsers will render the list properly without them, your
code will not validate against the strict HTML unless you include them.
Definition Lists Definition lists are slightly more complex than the other two types of lists because they have two elements for each item, a term and a definition. However, there aren’t many formatting options for definition lists, so their implementation tends to be simpler than that of the other two lists. Consider this list of definitions, highlighting popular Web browsers: Internet Explorer Developed by Microsoft, an integral piece of Windows products. Mozilla Developed by the Mozilla Project, an open source browser for multiple platforms. Netscape Developed by Netscape Communications Corporation, one of the first graphical browsers. Safari Developed by Apple Computer, Inc., for Apple’s OSX operating system. The bulleted items can be coded as list terms and their definitions as list definitions, as shown in the following code. The output of this code is shown in Figure 5-8. <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<title>Example Definition List</title>
</head>
<body>
<dl>
<dt>Internet Explorer</dt>
<dd>Developed by Microsoft, an integral piece of Windows
products.</dd>
<dt>Mozilla</dt>
<dd>Developed by the Mozilla Project, an open source
browser for multiple platforms.</dd>
<dt>Netscape</dt>
<dd>Developed by Netscape Communications Corporation, one
of the first graphical browsers.</dd>
<dt>Safari</dt>
|
|
Chapter 5 ✦ Lists
87
|
|
Note
<dd>Developed by Apple Computer, Inc, for Apple’s OSX
operating system.</dd>
</dl>
</body>
</html>
Figure 5-8: Definition lists provide term and definition
pairs for each list item.
To add clarity to your definition lists, you will usually want to construct styles that set the definition term in a different font or textual style. For example, you might want the definition terms to be red, bold, and italic. The following style definition accomplishes this: <style type=“text/css”>
dt { color: red; font-style: italic;
font-weight: bold }
</style>
Nested Lists
You can nest lists of the same or different types. For example, suppose you have a bulleted list and need a numbered list beneath one of the items, as shown: ✦ Send us a letter detailing the problem. Be sure to include the following: 1. Your name 2. Your order number 3. Your contact information 4. A detailed description of the problem |
|
88
Part II ✦ HTML/XHTML Authoring Fundamentals
|
|
In such a case, you would nest an ordered list inside an unordered one, as shown in
the following code:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<title>Example Definition List</title>
</head>
<body>
<ul style=“list-style: disc;”>
<li>Send us a letter detailing the problem. Be sure to
include the following:</li>
<ol style=“list-style: decimal;”> <li>Your name.</li>
<li>Your order number.</li>
<li>Your contact information.</li>
<li>A detailed description of the problem.</li>
</ol>
</ul>
</body>
</html>
The output of the code is shown in Figure 5-9.
Figure 5-9: You can nest different types of lists within one another. Note that the nested list does not span any open or close tags—it starts after the close tag of the parent’s item and before any other tags in the parent list. It is also |
|
Chapter 5 ✦ Lists
89
|
|
formatted (indented) to make it easier to identify in the code. Using this method, you
can nest any list within any other list.
Summary This chapter covered the ins and outs of the three different list types in HTML: numbered, bulleted, and definition. You learned how to define and format each type of list and how you can nest lists for more flexibility. From here, if you are relatively new to HTML you should progress through the chapters in order, learning about the various elements of an HTML document. Starting in Chapter 16, you will begin learning how to effectively use CSS to format and better control your documents. If you are more experienced with HTML, read the chapters that interest you or that you need more information on and then read the Chapters in Part III (Controlling Presentation with CSS) to get a good handle on using CSS in HTML. ✦✦✦ |
No comments:
Post a Comment