Intermediate HTML Design

Lists, Quotes and Sundry Tricks

So far, we've covered the basics of HTML. With this knowledge, you should be able to design some simple, but very effective, web documents. In the following sections, we'll cover other markups which will help you jazz up your efforts.

Unnumbered Lists <UL>

Very often in web design, you'll find yourself needing to make a list of items. Of course, you could always add a line break tag <BR> or a paragraph tag <P> to separate each item, but often that won't look very good. To help you out, HTML recognizes a tag that will let you create lists which include a bullet before each item. For example, if you wanted to create a list like this:

• Eenie
• Meanie
• Miney
• Mo

You would use the unordered list tag, or <UL>. Additionally, each item in the list would be preceded by a list item tag, or <LI>. So to make our list, we'd type the following:

<UL>
<LI> Eenie
<LI> Meanie
<LI> Miney
<LI> Mo
</UL>

And make sure you include the closing tag, </UL>, or you might really confuse the computer. Otherwise, these tags should give you a nice looking bulleted list.

Ordered Lists

Sometimes instead of an unordered list, you'll want to list some items that are numbered. The ordered list tag, <OL> will create an ordered list that automatically includes the numbers. It's very similar to a <UL> tag, the only difference being in the opening and closing tags. Let's try this:

<OL>
<LI> Eenie
<LI> Meanie
<LI> Miney
<LI> Mo
</OL>

When you look at this on the Web, the list appears as

1. Eenie
2. Meanie
3. Miney
4. Mo

Ordered list tags are really handy when you want to number your list and plan to add items to the list every now and then. This way, your list will remain numbered and you won't have to retype the numbers each time you make a change.

Definition Lists <DL>

A list of definitions usually consists of a tag for the term, <DT>, and a tag for the definition, <DD>. <DL> and </DL> tags are needed at the beginning and end of the list.

Let's use one of our previous examples.


<DL>
<DT>Lynx
<DD>A browsing program used to access the World Wide Web.
</DL>

The output would look like:

Lynx

A browsing program used to access the World Wide Web.

Of course, most definition lists would include more than one item, as in the above example, but the rules remain the same - precede each term with a <DT>, each definition with a <DD>, and a </DL> at the end, and your list will work quite nicely.

The <DT> and <DD> entries can contain multiple paragraphs (separated by <P> paragraph tags), lists, or other definition information. But to be perfectly honest, chances are you won't use definition lists very often. Unless, of course, you're working on an online dictionary...

Extended Quotations and the <BLOCKQUOTE> Tag

Sometimes when you're designing a Web page you'll have a quote you wish to highlight within the text. The <BLOCKQUOTE> tag is used to automatically indent and separate the quote from the rest of the text. For example:

My favorite passage in Henry V is

<blockquote>
I see you stand like greyhounds in the slips,<br>
Straining upon the start. The game's afoot:<br>
Follow your spirit, and upon this charge,<br>
Cry 'God for Harry, England, and Saint George!'</blockquote>

<P>Though I think the St. Crispan's speech is pretty good, too.<P>

The result is:

My favorite passage in Henry V is

I see you stand like greyhounds in the slips,
Straining upon the start. The game's afoot:
Follow your spirit, and upon this charge,
Cry 'God for Harry, England, and Saint George!'

Though I think the St. Crispan's speech is pretty good, too.

The <BLOCKQUOTE> tag distinguishes the quote from the other text by giving it some space and indenting it. In this case, we've also used a few line break tags, <BR>'s, to split up each line. If the tags hadn't been included, it would look like this:

My favorite passage in Henry V is

I see you stand like greyhounds in the slips, Straining upon the start. The game's afoot: Follow your spirit, and upon this charge, Cry 'God for Harry, England, and Saint George!'

Though I think the St. Crispan's speech is pretty good, too.

Interactive Quiz

Lists and blockquotes are pretty easy, even for the novice HTML developer. Try out your newly found skill with the next interactive HTML quiz.

When you're done with it, move on to the next section or review the current lesson again.

---