[Index of Lessons]
[Lesson 4] [Lesson 6]

5. Lists
Lists can present items of information in an easy-to-read format. Many web pages display lists of items- these may be items preceded with a "bullet" (Unordered) or a sequentially numbered list (Ordered). These lists are easy to format in HTML, and they may even be nested (lists of lists) to produce an outline format. Lists are also handy for creating an index or table of contents to a series of documents or chapters.
Unordered Lists
Unordered Lists, or ul tags, are ones that appear as a list of items with "bullets" or markers in the front.
Ordered Lists
Ordered lists are ones where the browser numbers each successive list item starting with "1."
Unordered and Ordered Lists
HTML Result 
<B>An Unordered List:</B>
     <ul>
     <li>  Item 1
     <li>  Item 2
     <li>  Item 3
     </ul>
An Unordered List:
  • Item 1
  • Item 2
  • Item 3 
<B>An Ordered List:</B>
     <ol>
     <li>   Item 1
     <li>   Item 2
     <li>   Item 3
     </ol>
An Ordered List:
  1. Item 1
  2. Item 2
  3. Item 3
Nested Lists
Ordered Lists and Unordered lists can have different levels, each will be indented appropriately by the web browser you use. A major concern will be to verify that each list is properly terminated and the nesting order is correct.
It can start to look complicated with all of those <ol> <li> </ul> <li> tags floating around, but by remembering the basic structure everything will work out fine.
Nested Lists
HTML Result 
<ul><B>Nested Unordered List</B>
     <li> Item 1
     <li> Item 2
     <ul>
     <li> Sub Item
     <ul>
     <li> Sub Item
     </ul>
     <li> Sub Item
     <li> Sub Item
     </ul>
     <li> Item 3
     </ul>
    Nested Unordered List
  • Item 1
  • Item 2
    • Sub Item
      • Sub Item
    • Sub Item
    • Sub Item
  • Item 3
Nested Lists - Mixing them
Not only can you include ordered lists within ordered lists, but you can also mix and match list types. The HTML starts to look pretty ugly, but watch how lists completely contain other lists.
Nested Mixed Lists
HTML Result 

<B>Nested Unordered List</B>
<ol>
<li>Item 1
<li>Item 2
<ul>
<li>Sub Item
<ol>
<li>Sub Item
<li>Sub Item
<li>Sub Item
</ol>
<li>Sub Item
<li>Sub Item
</ul>
<li>Item 3
</ol>
Nested Unordered List
  1. Item 1
  2. Item 2
    • Sub Item
      1. Sub Item
      2. Sub Item
      3. Sub Item
    • Sub Item
    • Sub item
  3. Item 3
Example
Now that you have seen more lists than you ever need, let's put them into action. The lists are the prelude to other pages, so soon you will learn how to add links to your work. The lists give the work a more structured to feel to them. We will use an unordered list, because it looks better for the type of web site we are making.

<html>
<head>
<title>UFO's, Paranormal and other Mysteries</title>
</head>
<body text=black bgcolor=white link=red>
<h1><u>UFO's, Paranormal and other Mysteries</u></h1>
<p>
Welcome to my web site, this site is going to have various
pages pertaining to information I have read and have found very
interesting.<br>
Subject matter will range from UFO's to ghosts and
there specter friends, prophecy's and theories which will make
your mind query all that you know. <p>
All of the information contained within these pages can be found in full in the <b>X-Factor</b> magazine. For these pages only excerpts have been used. All pictures have been found on various web sites around the world.<p>
I hope you enjoy this site<p>
<hr>
<h1><u>UFO's</u></h1>
<h3>Area 51</h3>
<i>"About 190km north west of Las Vegas, in the Nevada desert, the offical map stops. There is plenty there - roads, creeks, mountains, bunkers, buildings and a massive 9.5 km runway - but on paper these things do not exist. It is as if all human activity has ceased across an area the size of Switzerland."</i><br>
<ul>
<li>Main Article
<li>Case Notes
<li>Profile
<li>Evidence
</ul>
<p>
<h1><u>Paranormal</u></h1>
<h3>Millennium</h3>
<i>"Michel de Nostradame, popularly known by his Latin name Nostradamus, often spent his evenings alone, gazing into a bowl of water - like a gypsy with a crystal ball - until he went into a deep trance and saw into the future. On one such night, Nostradamus witnessed his own death. He died two weeks later, on 2 July 1566 - the exact date he had predicted." </i><br>
<ul>
<li>Main Article
<li>Case Notes
<li>Analysis
<li>Evidence
</ul><p>
<h1><u>Mysterious World</u></h1>
<h3>Quest for the Lost Ark</h3>
<i>"Covered with gold and surmounted with two golden Cherubim facing each other, the Ark of the Covenant must have been an awesome object to behold. But it was what lay inside that made it the holiest - and most powerful - of religious objects"</i><br>
<ul>
<li>Main Article
<li>Case Notes
<li>Profile
</ul><p>
</body>
</html>

Like before, add all of this to your first web page by opening the document and editing the page. To speed it up, you can cut and paste the code. After you have done all of this, click here (Example 5) to compare your work to the example provided. As you can see, the page is starting to take shape and look more like a web page to get your attention. Next we will look at graphics.
Click on Lesson 6 to continue, or click here (Top) to return to the top of document