|
|
CONTENTS
Putting Your
Affairs in Order with Numbered Lists
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 entire list is surrounded by the <OL> and </OL> tags.
- Each item in the list is preceded by the <LI> (list item) tag.
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:
<HTML>
<HEAD>
<TITLE>Numbered Lists - Example 1</TITLE>
</HEAD>
<BODY>
<H3>My Five Favorite Sites</H3>
<OL>
<LI>KacMac
<LI>Alta Vista
<LI>Yahoo
<LI>MSN
<LI>Excite
</OL>
</BODY>
</HTML>
Notice how we didn't include any numbers before each list item. However,
whenwe display this document in a browser, the numbers get inserted
automatically.
| 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 (more 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 that uses a numbered list to explain how to
juggle:
<HTML>
<HEAD>
<TITLE>Numbered Lists - Example 2</TITLE>
</HEAD>
<BODY>
<H3>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, the list looks
pretty good when viewed in a Web browser.
| More options |
| There are 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 ex, <OL SEQNUM=10> ). Also, you can use
<LH> tag to specify a title for the list. |
Scoring Points with Bulleted
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, man -it's an unordered list!
</UL>
Here's an HTML document 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>
| More about Bulleted Lists |
| You can have lots of fun with bulleted lists. You can specify one of dozens
of bullet styles (called 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>. |
Definition Lists
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. 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 uses a definition
list to outline a few words and phrases and their definitions. (Notice that
we'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>
| 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). |
Combining Lists Inside Lists
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, we'll take the definition list from the last section and toss
in both a numbered list and a bulleted list. Here's the result (we've lopped off
some of the lines to make it easier to read):
<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 -we've inserted
a bulleted list that gives a few examples. Then, after the third definition list
entry-Byte-Bonding -we've put in a numbered list.
The Least You Need to Know
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:
- Numbered lists are useful for rankings, procedures, and people who just like
to count things. Each item is preceded by a <LI> tag, and the whole list
is bracketed by the <OL> and </OL> tags.
- Bulleted lists let you display point-form comments in your Web page. Again,
each item gets an <LI> tag out front, and the list sits inside <UL>
and </UL> tags.
- Definition lists are useful for dictionary-style entries, or even for
document sections (where the term is the section heading and the definition is
the section text). Use the <DT> tag for the term, the <DD> tag for
the definition, and surround everything with the <DL> and </DL>
tags.
- It's no problem combining one type of list inside another type (or even, for
that matter, the same type).
|
