Are you making a list and checking it twice? Gonna find out who's naughty and…oops, drifted off to the North Pole for a second! But if you do want to include a list of things in your Web page, what's the best way to go about it? You saw in the last chapter how you can use the <BR> (line break) tag to display items on separate lines. That works well enough, I guess, but hold your list horses-there's a better way. HTML has a few tags that are specially designed to give you much more control over your list-building chores. In fact, HTML offers no less than three different list styles: numbered lists, bulleted lists, and definition lists. This chapter takes you through the basics of each list type and provides you with plenty of examples.
If you want to include a numbered list of items-it could be a top ten list, bowling league standings, or any kind of ranking-don't bother adding in the numbers yourself. Instead, you can use HTML ordered lists to make the Web browser generate the numbers for you.
Ordered lists use two types of tags:
The general setup looks like this:
<OL> <LI>First item. <LI>Second item. <LI>Third item. <LI>You get the idea. </OL>
Here's an example (see NUMLIST1.HTM on the disk):
<HTML> <HEAD> <TITLE>Numbered Lists - Example #1</TITLE> </HEAD> <BODY> <H3>My Ten Favorite U.S. City Names</H3> <OL> <LI>Toad Suck, Arkansas <LI>Panic, Pennsylvania <LI>Dismal, Tennessee <LI>Boring, Maryland <LI>Hell, Michigan <LI>Two Egg, Florida <LI>Muck City, Alabama <LI>Rambo Riviera, Arkansas <LI>King Arthur's Court, Michigan <LI>Buddha, Indiana </OL> </BODY> </HTML>
Notice how I didn't include any numbers before each
list item. However, when I display this document in a browser
(see the following figure), the numbers get inserted automatically.
Pretty slick, huh?
| Spice Up Your List Items |
Your list items don't have to be just plain text, so you're free to go crazy and insert other HTML tags. For example, you could use <B> and </B> to boldface a word or two in the item, you could use a heading tag to increase the font size of the item, or you could make an item a hypertext link to another Web page (I'll discuss this linking stuff in the next chapter). |
The items you toss into your numbered lists don't have to be short words and phrases, however. For example, if you're explaining how to perform a certain task, a numbered list is the perfect way to take your readers through each step. Here's a more involved example (it's NUMLIST2.HTM on the disk) that uses a numbered list to explain how to juggle:
<HTML> <HEAD> <TITLE>Numbered Lists - Example #2</TITLE> </HEAD> <BODY> <H3>The Complete Idiot's Guide to Juggling</H3> <HR> Here are the basic steps for the most fundamental of juggling moves - the three-ball cascade: <OL> <LI>Place two balls in your right hand, one in front of the other, and hold the third ball in your left hand. <LI>Of the two balls in your right hand, toss the front one towards your left hand in a smooth arc. Make sure the ball doesn't spin and that it goes no higher than about eye level. <LI>Once the first ball has reached the top of its arc, you need to release the ball in your left hand. Throw it towards your right hand, making sure it flies <I>under</I> the first ball. Again, watch that the ball doesn't spin or go higher than eye level. <LI>Now things get a little tricky (!). Soon after you release the second ball, the first ball will approach your left hand (gravity never fails). Go ahead and catch the first ball. <LI>When the second ball reaches its apex, throw the third ball (the remaining ball in your left hand) under it. <LI>At this point, it just becomes a game of catch-and-throw-under, catch-and-throw-under. Keep repeating steps 1-5 and, before you know it, you'll be a juggling fool. (However, I'd recommend holding off on the flaming clubs until you've practiced a little.) </OL> </BODY> </HTML>
As you can see, most of the items are quite long; although, it's
kind of hard to tell where each <LI> item begins and ends.
However, as shown in the next figure, the list looks pretty good
when viewed in a Web browser (this time I'm using Netscape).
Numbered list are perfect for outlining the steps in a procedure.
| Numbered Lists in HTML 3.0 |
HTML 3.0 includes a few snazzy options for numbered lists. For example, starting the list with <OL CONTINUE> tells the browser to start this list's numbers where the previous list left off. Similarly, <OL SEQNUM> lets you specify which number to start with (for example, <OL SEQNUM=10>). Also, you can use a new <LH> tag to specify a title for the list. Netscape also has a few extra numbered list goodies (these extras are called "Netscape extensions"). See Chapter 10 to learn about the Netscape extensions for numbered lists. |
Numbered lists, of course, aren't the only kinds of lists. If you just want to enumerate a few points, a bulleted list may be more your style. They're called "bulleted" lists because a Web browser displays a cute little dot or square (depending on the browser) called a bullet to the left of each item.
The HTML tags for a bulleted list are pretty close to the ones you saw for a numbered list. As before, you precede each list item with the same <LI> tag, but you enclose the entire list with the <UL> and </UL> tags. Why <UL>? Well, what the rest of the world calls a bulleted list, the HTML powers-that-be call an unordered list. Yeah, that's real intuitive. Ah well, here's how they work:
<UL> <LI>First bullet point. <LI>Fifty-seventh bullet point. <LI>Sixteenth bullet point. <LI>Hey, whaddya want-it's an unordered list! </UL>
Here's an HTML document (look for BULLETED.HTM on the disk) that demonstrates how to use the bulleted list tags:
<HTML> <HEAD> <TITLE>Bulleted List Example</TITLE> </HEAD> <BODY> <H3>Products I'd Like To See</H3> <UL> <LI>Water-resistant sponge <LI>Self-soiling oven <LI>Tineless fork <LI>Silent alarm clock <LI>Inflatable dartboard <LI>Teflon bath mat <LI>Helium-filled paperweight <LI>Flame-retardant firewood <LI>Sandpaper bathroom tissue <LI>Water-soluble dishcloth </UL> </BODY> </HTML>
The next figure shows how the NCSA Mosaic browser
renders this file, snazzy bullets and all.
| HTML 3.0's Bulleted Lists |
When HTML 3.0 finally arrives (and the Web browsers support it), you can have lots of fun with bulleted lists. You can specify one of dozens of bullet styles (called, believe it or not, dingbats) by adding DINGBAT to the <UL> tag (for example, <UL DINGBAT=folder> will give you a bullet that looks like a file folder). You can specify your own bullets by adding SRC to the <UL> tag. For example, if you have an image named MyBullet.gif, you could use it as a bullet like so: <UL SRC="MyBullet.gif">. If you don't want any bullets at all, start the list with <UL PLAIN>. |
The final type of list is called a definition list. People used it, originally, for dictionary-like lists where each entry had two parts: a term and the definition of the term. As you'll see, though, definition lists are useful for more than just definitions.
To mark the two different parts of each entry in these lists, you need two different tags. The term is preceded by the <DT> tag, and the definition is preceded by the <DD> tag, like so:
<DT>Term<DD>Definition
You can, if you like, put the <DT> part and the <DD> part on separate lines, but I prefer this style (and either way, they end up looking the same in the browser). You then surround the whole list with the <DL> and </DL> tags to complete your definition list. Here's how the whole thing looks:
<DL> <DT>A Term<DD>Its Definition <DT>Another Term<DD>Another Definition <DT>Yet Another Term<DD>Yet Another Definition <DT>Etc.<DD>Abbreviation of a Latin phrase that means "and so forth." </DL>
Let's look at a for instance. The HTML document shown next (you'll find it on the disk in the file named DEFNLIST.HTM) uses a definition list to outline a few words and phrases and their definitions. (Notice that I've applied boldfacing to all the terms; this helps them stand out more when the browser displays them.)
<HTML> <HEAD> <TITLE>Definition List Example</TITLE> </HEAD> <BODY> <H3>Some Techno-Terms You Should Know</H3> <DL> <DT><B>Barney Page</B><DD>A Web page that tries to capitalize on a current craze. <DT><B>Bit-Spit</B><DD>Any form of digital correspondence. <DT><B>Byte-Bonding</B><DD>When computer users discuss things that nearby noncomputer users don't understand. See also <I>geeking out</I>. <DT><B>Clickstreams</B><DD>The paths a person takes as she negotiates various Web pages. <DT><B>Cobweb Page</B><DD>A Web page that hasn't been updated in a while. <DT><B>Geek</B><DD>Someone who knows a lot about computers and very little about anything else. <DT><B>Geeking Out</B><DD>When <I>geeks</I> who are <I>byte-bonding</I> start playing with a computer during a non-computer-related social event. <DT><B>Luser</B><DD>A "loser user." Someone who doesn't have the faintest idea what they're doing and, more importantly, refuses to do anything about it. <DT><B>Nerd</B><DD>A <I>geek</I> totally lacking in personal hygiene and social skills. </DL> </BODY> </HTML>
The following screen shows how the definition list
appears in the Netscape scheme of things.
A few definitions arrayed, appropriately enough, in a definition list.
| More Than Just Definitions |
You'll often see people using definition lists for things other than definitions. Some Web welders like to use the term (the <DT> part) as a section heading and the definition (the <DD> part) as the section text. You can also leave out the term and just use the <DD> tag by itself. This is handy for those times when you need indented text (say, if you're quoting someone at length). |
The three types of HTML lists should stand you in good stead for most of your Web page productions. However, you're free to mix and match various list types to suit the occasion. Specifically, it's perfectly legal to plop one type of list inside another (this is called nesting lists). For example, suppose you have a numbered list that outlines the steps involved in some procedure. If you need to augment one of the steps with a few bullet points, you could simply insert a bulleted list after the appropriate numbered list item.
As an example, I'll take the definition list from the last section and toss in both a numbered list and a bulleted list. Here's the result (I've lopped off some of the lines to make it easier to read; you can find the full document on the disk in the file named COMBO.HTM):
<DL> <DT><B>Barney Page</B><DD>A Web page that tries to capitalize on a current craze. Recent subjects of Barney pages are: <UL> <LI>O.J. Simpson <LI>Windows 95 <LI>1996 Presidential election </UL> <DT><B>Bit-Spit</B><DD>Any form of digital correspondence. <DT><B>Byte-Bonding</B><DD>When computer users discuss things that nearby noncomputer users don't understand. Here are the three stages of byte-bonding that inevitably lead to <I>geeking out</I>: <OL> <LI>"Say, did you see that IBM ad where the nuns are talking about surfing the Net?" <LI>"Do you surf the Net?" <LI>"Let's go surf the Net!" </OL> <DT><B>Clickstreams</B><DD>The paths a person takes as she negotiates various Web pages. ... </DL>
After the first definition list entry-the one for Barney Page-I've inserted a bulleted list that gives a few examples. (I've added blank lines above and below the bulleted list to make it stand out better. Note that I added these lines for cosmetic purposes only; they don't affect how the page appears in the browser.) Then, after the third definition list entry-Byte-Bonding-I've put in a numbered list. The following screen shows how all this looks when a browser gets hold of it.
HTML is more than happy to let you insert lists inside each other.
This chapter took you through the wacky world of HTML lists. You may not need to use them all that often, but they can really come in handy. Just to make sure all this sinks in (where it sinks to is your business), here's a recap of some of the sights you saw along the way: