Chapter 8, Lesson 1

If you already know how to create unordered lists in HTML, you can skip this lesson.

Obviously, there's nothing to prevent you from constructing a list on your web page by just using text, and placing a special character or number at the beginning of each list item, and placing a '<BR>' at the end of each item's line. In fact, I often do just that. But nothing looks quite as snazzy as a list with "bullets" at the beginning of each list item. One obvious way to do that would be to have a little bitty image file, bullet-shaped, and insert that inline-image at the beginning of each list item. If you want your own unique "bullet", that's probably the best way to do it.

But HTML provides for making "unordered" lists (i.e., lists with bullets), whereby a built-in (default) bullet is selected and displayed by the browser for each item in the list.

The HTML list is bounded by (that is, begins and ends with) a list tag pair. In this case, an Unordered List is bounded by the tag pair:

<UL> </UL>

The list appears between the opening <UL> and the closing </UL> tags.

However, bullets will only be placed at the beginning of a "list item". Each list item is designated by a standalone tag:

<LI>

The <LI> tag should only occur inside a list, that is, between the opening and closing "list" tag pair. Notice that '<LI> ' is a standalone tag, meaning that there is no closing tag. Everything that occurs after the <LI> tag and before the next <LI> tag (or before the closing of the list), constitutes a "list item"

Now we can submit a format for building an unordered list, like so:

<UL>
list heading text (if any) goes here <BR>
<LI> list item (text, images, and/or links)
<LI> another list item (text, images, and/or links)
</UL>

Here's what we've told the browser (with the above code): with the opening <UL> tag, "this is an unordered list, so provide bullets for each list item"; then with each <LI> tag, "what follows (be it text, images, or links) is our list item"; then with the second <LI> tag, "here's another list item"; and finally, with the closing </UL> tag, "our list is done, so quit making bullets"

Lets's show some HTML source code and demonstrate lists:

Here's a list using just plain text (no special tags):
<P>
<B><I>Everything</I> I Like to Eat</B><BR>
- cookies<BR>
- potatoes<BR>
- hominy grits (NOT!)
<P>
Here's a list using custom "bullet" images (but no special tags):
<P>
<B>Cookies I Like</B><BR>
<IMG SRC="bullet1.gif"> chocolate chip<BR> 
<IMG SRC="bullet1.gif"> coconut macaroon<BR> 
<IMG SRC="bullet1.gif"> grasshopper 
<P>
Here's a list using HTML "unordered list" tags:
<UL>
<B>How I Like My Potatoes</B><BR>
<LI> french fried
<LI> baked 
<LI> scalloped
</UL>

Here's a list using just plain text (no special tags):

Everything I Like to Eat
- cookies
- potatoes
- hominy grits (NOT!)

Here's a list using custom "bullet" images (but no special tags):

Cookies I Like
chocolate chip
coconut macaroon
grasshopper

Here's a list using HTML "unordered list" tags:

How I Like My Potatoes

• french fried
• baked
• scalloped

Let's take a look at what happened in our demo. In the first example, we built a list by hand, using plain text, and '<BR>' to force a line-break at the end of each item in the list. In the second example, we did the same thing, but we used a custom '.GIF' image file to start each line. In the final example, we let the browser to the extra work, by specifying an unordered list.

As you can see, the list is bounded by the opening '<UL>' and the closing '</UL>' tags, which designate it to the browser as a list of type "unordered". Everything between the opening '<UL>' tag and the first '<LI>' tag becomes the list's "heading". The browser places a bullet before each list item, and automatically inserts a line feed (end-of-line action) before it does so.

On my browser, the list was somewhat indented from the left margin, the list "heading" was also indented, and the default solid-round bullet was used to mark each list item. However, different browsers may handle each of these things differently. Some may not indent, some may indent, but not indent the list "heading", and some may use a differently shaped "bullet" as their default.

You may have noticed that I used a '<BR>' tag at the end of the "list heading" text. Some browsers (Bill Gate's favorite browser, for example) don't automatically insert a line break before the first list item, although they do before all the remaining list items. Therefore, they require the '<BR>' after the heading text. It turns out that most other browsers are smart enough to handle the extra '<BR>', and so there it is. Go ahead, put one there, at the end of your list heading, even if you don't think you need it. This is one of those little hints that will place you in the "wow, they're really good" category of web authors. It's also a good reason to have a copy of more than one web browser for testing your web page. If you had only tested your page on Netscape, for example, and left the heading's '<BR>' off, everything would have looked okey-dokey on your browser; but somebody out on the internet who loaded your web page using Microsoft Explorer would have seen the list heading and the first list item on the same line. When they did, they would have thought you didn't check your web page, and probably would have sent you some nasty e-mail making some not-so-vague reference to your dubious pedigree.

---

Overseer: Monty Northrup ... ... leave e-mail ...

---