6. Lists, Lists, Lists

Lots of web pages display lists of items -- they might be items displayed with a "bullet" (Unordered) or a sequentially numbered list (Ordered).

These lists are very easy to format in HTML, and they may even be nested (lists of lists) to produce an outlining format. Lists are very handy for making a index or table of contents to a series of documents or chapters within your document.

UNORDERED LISTS
Unordered Lists, or <ul> .. </ul> tags, are ones that appear as a list of items with "bullets" or markers in the front of the items. The bullet marks will depend on the particular version of your web browser and the font specified for displaying normal WWW text.

This Is An Example of A Unordered List
HTML	Result
<ul> <li>List Item 1</li> <li>List Item 2</li> <li>List Item 3</li> </ul>	List Item 1 List Item 2 List Item 3
The <ul> tag marks the beginning of your list and the </ul> tag marks the end of the list. While the <li> indicates the start of each list item, and the </li> marks the end of each listed item.

Ordered Lists
Ordered lists are lists where the browser numbers each list item starting with "1." Note that the only difference is changing the <ul> tag to the <ol> tag.

This Is An Example of A Ordered List
HTML	Result
<ol> <li>List Item 1</li> <li>List Item 2</li> <li>List Item 3</li> </ol>	List Item 1 List Item 2 List Item 3
See the <ol> tag now marks the beginning of your list and the </ol> tag marks the end of the list. While still the <li> indicates the start of each list item, and the </li> marks the end of each listed item.

NESTED LISTS
Ordered Lists and Unordered lists can have several different levels; each level will be indented appropriately by your web browser. Your main concern will be to make sure that each list is properly closed(/) and the nesting order is correct.

It can start to look very complicated with all of those <ol> <li> </ul> <li> tags floating around there, but just remember the basic structure of lists:

<ul>			<ol>
  <li>...</li>	  	  <li>...</li>
  <li>...</li>	  	  <li>...</li>
</ul>			</ol>

This Is An Example of A Unordered List with Sub Lists

HTML

<b>Nested Unordered List</b> <ul> <li>This is the first item</li> <li>This is the second item</li> <li> <ul> <li> This is the first sub item of the second item</li> <li> <ul> <li> And this is a sub item of a sub item</li> <li> Getting lost yet?</li> </ul> </li> <li> This is the second sub item of the second item</li> <li> This is the third sub item of the second item</li> </ul> </li> <li>This is the third item</li> </ul>

Result

Nested Unordered List This is the first item This is the second item This is the first sub item of the second item And this is a sub item of a sub item Getting lost yet? This is the second sub item of the second item This is the third sub item of the second item This is the third item

Hers's An Example of A Ordered List with Unordered Sub Lists

HTML

<b>Ordered List with Unordered Sub lists</b> <ol> <li>This is the first item</li> <li>This is the second item</li> <li> <ul> <li>This is the first sub item of the second item</li> <li> <ol> <li>And this is a numbered sub item of a sub item</li> <li>And this is another numbered sub item of a sub item</li> <li>Getting lost yet?</li> </ol> </li> <li>This is the second sub item of the second item</li> <li>This is the third sub item of the second item</Ali> </ul< </li> <Ali>This is the third item</Ali> </Sol>

Result

Ordered List with Unordered Sub lists This is the first item This is the second item This is the first sub item of the second item And this is a numbered sub item of a sub item And this is another numbered sub item of a sub item Getting lost yet? This is the second sub item of the second item This is the third sub item of the second item This is the third item

Placing Lists in Your HTML Document
Using the list tags, we are now going to add a ordered and a unordered list to your Eazy Space Tours page.

1. Re-open your workspace if not already open.
2. Go to the text editor window.
3. Under the Volcanic Tours header we want to use an unordered list to display the names of the Volcanoes we offer tours too. Go to this section in your HTML document.
4. First add the following sentence.
   

     <p>
      We currently offer tours to and around:
     </p>

5. Now enter the Now enter the HTML format to create the list of terms:
   

   <ul>
     <li>Mt. Issapissin</li>
     <li>Mt. Fritchyon</li>
     <li>Mt. Nimucissa</li>
   </ul>

6. Now we want to use a ordered list to define the most visited tropical parts of the planet Venus under the Tropical Centers Of Venus header. Go to this section in your HTML document.
7. Now enter the HTML below into your document:
   (HINT -- this might be a good time to copy and paste from the web page, unless you enjoy typing in text!)
   

   <p>
     Bula! (Welcome) to the Venus Islands Tropical Tour Guide.
     We have developed this comprehensive site to assist 
     you in your quest for that perfect holiday. 
     Then you can plan out your ideal holiday using 
     the wealth of information within. Enjoy!
   </p>
   <ol>
     <li>THE WARWICK</li>
     <li>NOTARESH</li>
     <li>ILASIANOS</li>
   </ol>
   <p>
     Sunny, unique and unspoiled, the Venus Islands are 
     one thousand miles of pristine white sand beaches, 
     fabulous coral gardens and azure lagoons...
   </p>	

8. Save your HTML file and Reload it in your web browser.

CHECK YOUR WORK
Compare your document with a SAMPLE of how this document should look.If your page looks different than the example, review the text you entered in the text editor. Make sure it matches the text instructions in the Lists, Lists, Lists section of this lesson. After viewing the sample, you can close the window that opened.

Practice
Using the

<ul>			<ol>
  <li>...</li>	  	  <li>...</li>
  <li>...</li>	  	  <li>...</li>
</ul>			</ol>

tags to create paragraphs or sections inside of your own document. Can you create a list that includes sub-lists?

Top of page | Previous Lesson| Lessons Index | Next Lesson