KacMac
  
KacMac Home
 

   Index
   Chapter 1
   Chapter 2
   Chapter 3
   Chapter 4
   Chapter 5
   Chapter 6
   Chapter 7
   Chapter 8
   Chapter 9
   Chapter 10
   Chapter 11
   Appendix I
   Appendix II
   Appendix III
   Appendix VI
 HTML Guide   Chapter 5 - Create Lists 

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).

  Make KacMac your home page
Add URL - Information Center - Contact us - Terms of Service - Privacy Policy - Advertising

Copyright © 2004 KacMac. All rights reserved.