To include a list of items that will be automatically numbered, use HTML ordered list tags to make the Web browser display the list and generate the numbers automatically. There are two (2) types of tags (the second of which is discussed in Section 07 of Chapter Eight) in numbered (ordered) lists. The first pair of tags, <OL> and </OL>, turns ordered lists on/off, respectively (Can you see how "OL" would indicate Ordered Lists?). Between these two (2) tags, <OL> and </OL>, are the items to be listed. Precede each item in the list by <LI> (Can you see how "LI" indicates a LIst, getting the first two letters from the word "list" itself?  It might be easy to misread <LI> as something else, because of fonts, but just remember, take the first two letters from the word "list" and you get an "l" and an "i", so that makes <LI>).  The <LI> tag tells the Web browser to include this as part of the numbered list.  Without it, the item will be included in the <LI> tag used above it. 

     Check out the following example (a grocery list!) of code, in which the ... means that there is other code before and/or after that's not given. Only the code we're discussing at the moment is given.

...
<H1>GROCERY LIST</H1>
<OL>
<LI>Milk
<LI>Eggs
<LI>Bread
</OL>
...

     The output of the example HTML code above would look similar to this:

GROCERY LIST

1. Milk
2. Eggs
3. Bread

     Did you notice that the numbers were added to your Web page automatically by the browser? Did you remember that <H1> is a header that will enlarge your text? Experiment with list items; try adding other tags (boldface, italics, etc.) to enhance the look of the text.

The list items do not have to be short words. This set of tags can be used to list anything, such as rules, guidelines, directions, or steps, etc.

03) BULLETED LISTS

     Bulleted lists work in the same manner as numbered lists except bulleted lists place a small dot or square (depending on your browser) called a bullet to the left of each item (instead of a number, as in the above ordered list). The tags to turn a bulleted list on and off are <UL> and </UL> (UL stands for unordered list) respectively. Then, each item in the list is preceded by <LI>, just as in a numbered list. 

...
<H2>THINGS TO DO:</H2>
<UL>
<LI>Go to the bank
<LI>Go to the grocery store
<LI>Call the plumber
</UL>
...

     The output on a Web page of the above code would look similar to this:

THINGS TO DO:

Again, experiment with other tags (bold, etc.) to enhance the look of the Web page.

04) DEFINITION LISTS

     A definition list was originally used for dictionary-term lists, where each item had two (2) parts: 1) The term and 2) The definition of said term. The tags used to turn a dictionary list on and off are <DL> and </DL>, respectively. To mark the two (2) different parts of your list item, precede the term with the <DT> tag and then precede the definition part by the <DD> tag.  This is a handy list to use, but it isn't often used. . . 

...
<H1>COMPUTER TERMS</H1>
<DL>
<DT>Bug<DD>An error in a program.
<DT>Data<DD>Raw facts that have not been organized.
<DT>Hard Copy<DD>Printed output.
<DT>Kilobyte<DD>A term used to stand for 1,024 bytes; the symbol is K.
</DL>
...

     The output would resemble this:

COMPUTER TERMS

Bug

An error in a program.

Data

Raw facts that have not been organized.

Hard Copy

Printed output.

Kilobyte

A term used to stand for 1,024 bytes; the abbreviation symbol is K.

 

     It is quite possible to put lists inside of lists. It is also possible to use the definition list tags for things other than definitions. Some people like to use the <DT> term tag as a section header and the <DD> definition tag as the section text. 

     You can also leave out the <DT> tag and only use the <DD> tag by itself; thus allowing a way to indent text.

     There are a multitude of colorful bullets available, too, that aren't just the plain dot or square that is automatically generated. To use your own bullet image, you would add the <IMG SRC> (image source, where you would put the name of the image you are wishing to use) tag (discussed in Chapter Five) after the <UL> tag. 

<UL><IMG SRC="mybluesquarebullet.jpg">

     If you don't want any bullets at all, begin your list with: <UL PLAIN>.