This lesson will teach you how to make lists, both ordered (numbered) and unordered (bullets). Lists are very simple to make, and can improve the layout of a page dramatically if used correctly.
To make an ordered list, you first have to tell the browser you are beginning the list. You do that by the tag <OL>. Once you've typed that in, you will have to tell the browser the different sections of the list. You do that by the tag <LI>. Confused? Here's an example to clear things up:
You want to make a glossary, where each word is numbered starting from one. Ok, we know that we want it numbered, so we know we should make an ordered list. So let's type in <OL>. You want the first word to be Aardvark (let's make it interesting). Ok, let's type in <LI> to tell it we're making a section of the list (you may wish to indent each <LI> to make it easier to read). Now type in Aardvark (you may wish to bold it, <B>Aardvark</B>). Now you can type in the definiton:
A large burrowing nocturnal African mammal that has an extensible tongue, powerful claws, large ears, and heavy tail and feeds on ants and termites.
You are done with the first section of the list, so let's tell the browser with the ending tag, </LI> (it is not required if you prefer to leave it out). And just for right now, let's end the ordered list (we can insert more sections of the list before the ending tag later): </OL>
Your HTML file (not including the heading, title, etc.) should look something like:
<OL> <LI> <B>Aardvark</B>: A large burrowing nocturnal African mammal that has an extensible tongue, powerful claws, large ears, and heavy tail and feeds on ants and termites. </LI> </OL>
The result of the above code looks like this:
Pretty neat, huh? Do you understand pretty much how to make ordered lists? Let's add a couple more definitions so we can make sure the numbering system works.
Before the </OL>, tell the browser you're going to add another section to the list (<LI>). Now type in the word Binnacle, and then the definition:
a case, box, or stand containing a ship's compass and a lamp
and then tell it this section of the list is done (</LI>). Let's add one more word the exact same way as above, only this time we're going to make it a little more complicated. Let's choose a word with two definitions, illustrating the effect of a list inside a list (sub-list). You should get the idea by now that you should type <LI>. The word we will use now is clairvoyance, and the two definitions are (notice my use of a list!):
To make the sub-list, just type in another <OL>. You should put it after the <LI> and the word, but right before the definitions. Then before the first definition, put <LI> to tell the browser you are starting a section of the sub-list. Put in the ending tag after the first definition (</LI>). Then put another <LI> before the second definition, followed by the ending tag. Then tell the browser you are ending the sub-list, </OL>.
Confused again? We'll look at a small example of a sub-list so you can study it:
<OL> <LI> <B>Clairvoyance</B>: <OL> <LI>the power or faculty of discerning objects not present to the senses</LI> <LI>ability to perceive matters beyond the range of ordinary perception</LI> </OL> </LI> </OL>
The above code will look like this in the browser:
Let's now add the definition for clairvoyance and binnacle to the glossary we started earlier:
<OL> <LI> <B>Aardvark</B>: A large burrowing nocturnal African mammal that has an extensible tongue, powerful claws, large ears, and heavy tail and feeds on ants and termites. </LI> <LI> <B>Binnacle</B>: a case, box, or stand containing a ship's compass and a lamp <LI> <B>Clairvoyance</B>: <OL> <LI>the power or faculty of discerning objects not present to the senses</LI> <LI>ability to perceive matters beyond the range of ordinary perception</LI> </OL> </LI> </OL>
The above code will have the following result:
That should be enough for anyone to understand how to make an ordered list.
So basically, the only differences between ordered and unordered lists are (I'll use an unordered list now to show you how they work):
The code for the list I just barely wrote is:
<UL> <LI>Ordered lists use numbers while unordered lists use bullets <LI>You start an unordered list by using the tag <UL>instead of <OL> <LI>You end an unordered with </UL> instead of </OL> </UL>
Note one thing: if you actually typed in the code exactly how it is above, it wouldn't look too good. That's because of the red symbols. Because you cannot type an actual "<" to print a "<", you have to use special codes to print them out. Why? Because otherwise the browser will mistake them for part of a tag! So if you want to see what I REALLY wrote for the list, view the document source and you'll see the code to make those symbols. I won't teach you how yet, because that will be in a much later lesson.
Just to show you how similar unordered lists are to ordered, let's take the code for the glossary we just made, only changing it into an unordered list:
<UL> <LI> <B>Aardvark</B>: A large burrowing nocturnal African mammal that has an extensible tongue, powerful claws, large ears, and heavy tail and feeds on ants and termites. </LI> <LI> <B>Binnacle</B>: a case, box, or stand containing a ship's compass and a lamp <LI> <B>Clairvoyance</B>: <UL> <LI>the power or faculty of discerning objects not present to the senses</LI> <LI>ability to perceive matters beyond the range of ordinary perception</LI> </UL> </LI> </UL>The effect of the above code is:
Notice two things (let's do an ordered list this time):
Phew! We're done! That's all there is to making lists! Now you can go to your refrigerator and grab an ice cold milk (help yourself!).