Building Web Pages From Ground Zero

By Professor Nibble ã Nibble University 2000-2007

HyperJump to Ordered, Unordered, Nested,, Definition, Assignments

LISTS - Lesson 5

 

There are three types of lists I will teach you about in lesson 5. I realize lists are not as exciting as animated graphics and MIDI sound in the background, but they are a very valuable tool, and HTML makes it pretty easy to make them. The three types of lists are: numbered, bulleted, and definition. I'm sure you already have experience with the first two when working with a word processor.

 

NUMBERED LISTS (ORDERED LISTS)

 

First of all, you should use numbered/ordered lists when you have a list of things that should be done in a particular order, such as directions. Notice my assignments use numbered lists because I want you to do the instructions in a certain order.

 

The tags needed for making a numbered list are:

<OL> </OL> The beginning and end of the list.

<LI> One of the list items. It has no closing tag.

 

All I have to do is show you a simple example and you will know it all. Actually, I bet you could figure this out without an example. Anyway, for you visual learners:

 

<OL>
<LI> This is the first item on our list.
<LI> This is the second item on our list.
<LI> This is the third item on our list.
</OL>

 

Result:

  1. This is the first item on our list.
  2. This is the second item on our list.
  3. This is the third item on our list.

 

The <LI> tag automatically gives a line break, so it is not necessary to put one. If the list item is really long, you don't have to do anything. It will wrap to the next lines properly. If you want a numbered item to be several short lines, insert a <BR> tag at the end of each short line and do not start the next <LI> until you are ready for the next number.

 

<OL>
<LI> This is the first item on our list.
<LI> This is the second item on our list. <BR>
This is also the second item on our list. <BR>
And this line is part of item two as well.
<LI> This is the third item on our list.
</OL>

 

Result:

  1. This is the first item on our list.
  2. This is the second item on our list.
    This is also the second item on our list.
    And this line is part of item two as well.
  3. This is the third item on our list.

 

Now that was pretty painless wasn't it? But, what if you want your ordered list to be capital letters or small case letters, or lower or upper case roman numerals, or to start at the number 7 or letter g instead of 1 or a? Wow, what a mouth full. No problem. There are two attributes you can use to give your lists flexibility. They are:

 

TYPE="" and START="" Study the following examples.

 

<OL TYPE="I">
<LI> This is the first item on our list.
<LI> This is the second item on our list.
<LI> This is the third item on our list.
</OL>

 

 Result:

  1. This is the first item on our list.
  2. This is the second item on our list.
  3. This is the third item on our list.

 

<OL TYPE="i">
<LI> This is the first item on our list.
<LI> This is the second item on our list.
<LI> This is the third item on our list.
</OL> 

 

 Result:

  1. This is the first item on our list.
  2. This is the second item on our list.
  3. This is the third item on our list.

 

<OL TYPE="A">
<LI> This is the first item on our list.
<LI> This is the second item on our list.
<LI> This is the third item on our list.
</OL>  

 

 Result:

  1. This is the first item on our list.
  2. This is the second item on our list.
  3. This is the third item on our list.

 

<OL TYPE="a">
<LI> This is the first item on our list.
<LI> This is the second item on our list.
<LI> This is the third item on our list.
</OL>  

 

 Result:

  1. This is the first item on our list.
  2. This is the second item on our list.
  3. This is the third item on our list.

 

<OL START="7">
<LI> This is the first item on our list.
<LI> This is the second item on our list.
<LI> This is the third item on our list.
</OL>  

 

 Result:

  1. This is the first item on our list.
  2. This is the second item on our list.
  3. This is the third item on our list.

 

<OL TYPE="A" START="7">
<LI> This is the first item on our list.
<LI> This is the second item on our list.
<LI> This is the third item on our list.
</OL>  

 

 Result:

  1. This is the first item on our list.
  2. This is the second item on our list.
  3. This is the third item on our list.

 

I really don't need to say much about all this if you look at the examples carefully and compare them with the results below each one in BLUE. Let's move on to some more kinds of lists.

top

BULLETED OR UNORDERED LIST 

 

Bulleted or Unordered Lists are the same as Numbered/Ordered Lists except they can be listed in any order and have a little graphic in front of each item. Use the following tags: 

 

<UL> </UL> The beginning and end of the list

<LI> One of the list items. It has no closing tag.

 

I bet this looks pretty familiar. Study the following example:

 

<UL>
<LI> Miami, Florida
<LI> Seattle, Washington
<LI> New York, New York
<LI> San Diego, California
</UL>

 

Result:
  • Miami, Florida
  • Seattle, Washington
  • New York, New York
  • San Diego, California

 

Remember what I said about using a <BR> to include more than one short line for a numbered item. You can do the same thing here with bulleted items. Remind Me!

 

It wouldn't be fair if ordered lists had attributes and unordered did not. The unordered list tag has one attribute that you might find useful. It is:

 

TYPE="shape"

 

You have three shapes to choose from: disc, circle, square

Look at this:

 

<UL TYPE="square">
<LI> Miami, Florida
<LI> Seattle, Washington
<LI> New York, New York
<LI> San Diego, California
</UL>

 

Result:
  • Miami, Florida
  • Seattle, Washington
  • New York, New York
  • San Diego, California

top

NESTED LISTS 

 

I know it appears as if I've not been honest. I promised only three kinds of lists and this is not one of them. Actually, Nested Lists are just more of what we already studied. You can put a list within a list to get a tier affect like in an outline. You can even put a list within a list within a list. Things just don't get better than that! With an unordered list, the list within the list will have a different bullet. With ordered lists, the list within a list will still be numbers unless you very simply change the type to whatever you want. For instance, the nested list could be capital letters. You're confused aren't you? I guess it's time for an example to clear this matter up.

 

<OL TYPE="I">
<LI> This is the first item on our list.
<OL TYPE="A">
<LI> This is a sub-item to the first.
<LI> This is another sub-item to the first.
</OL>
<LI> This is the second item on our list.
<OL TYPE="A">
<LI> This is a sub-item to the second.
<OL>
<LI> This is a sub-item to the sub-item!
</OL>
</OL>
<LI> This is the third item on our list.
</OL>

 
  1. This is the first item on our list.
    1. This is a sub-item to the first.
    2. This is another sub-item to the first.
  2. This is the second item on our list.
    1. This is a sub-item to the second.
      1. This is a sub-item to the sub-item!
  3. This is the third item on our list.

 

The red tags are the first tier. The light blue tags are the second tier - and we have two separate second tier items. The light green tags are a third tier. We could do something similar to an unordered list and get three different type of bullets. We can even nest unordered lists within ordered lists. It isn't that difficult, really!

top

DEFINITION LISTS

 

A Definition List is a leopard with slightly different spots. You do not use the <LI> tag and have to learn two different tags instead. Actually there are three new tags to learn. They are -

<DL> </DL> The beginning and end of your Definition List

<DT> The term or word to be defined.

<DD> The definition

 

Again, the best way to learn is to see an example:

 

<DL>
<DT> Astronaut
<DD> A person highly trained for space flight
<DT> Ancient
<DD> Relating to a time long ago
</DL>

 

Result:

Astronaut
A person highly trained for space flight
Ancient
Relating to a time long ago

top

Now that was pretty easy, eh? I know what you're thinking right now. It's Assignment time and you want to skip town. Not a chance. This is going to be great fun. (And broccoli is my favorite vegetable, too. NOT) Here we go.........

 

Assignment 1 - Lesson 5

 
  1. Load up your hawaii1.htm file into your editor.
  2. Go down to the Hawaii Facts section and take out the &nbsp codes from the beginning of each of the five lines. Make these five lines into an unordered list.
  3. After the Hawaii Facts section and before the line that gives credit to the author of the material, add the following material into an ordered list with regular numbers. The heading for the list will be Early Historical Events. Make it the same size and style heading as Hawaii Facts.

 

1778 - English explorer James Cook lands on Kauai
1789 - American ships begin arriving in Hawaii
1820 - The first American Christian missionaries come to Hawaii.
1891 - Liliuokalani becomes queen.
1898 - the United States gains control of Hawaii

 
  • Underneath the Early Historical Events section and before the line that gives credit to the author, add the heading (same size and style as the others), Words to Learn. Make a Definition list of the following terms and their meanings:

    • Blowhole - A lava tube through which ocean waves spout
    Lava - Hot liquid from a volcano
    Lava tube - A tunnel formed by flowing lava
    Petroglyph - A picture carved in a rock
    Sumo - A Japanese style of wrestling

  • Save the file as hawaii1.htm. Take a look at it in your browser. Go back and make any corrections to get the desired results. Print a copy from the browser. Print a copy of the source code, too. Hand in your work.

    •  

    Assignment 2 - Lesson 5

     

    Create the following outline in an html document you call outline.htm. Print out the results and also print out your source code after you save the file to the hard drive. Staple the two together and hand in. Make sure your name is in the title. Call it something like: Using Nested Lists by FirstName LastName. As a reminder, just in case you were sleeping in English class, the order for outlining tiers is:

    I, A, 1, a
    II, B, 2, b
    Roman numeral, Capital Letter, Regular number, Lower case letter

    This is what it should look like, sort of.

     

    		 
    
I.     Introduction

II.    Chapter One

	A.	Section 1.1

	B.	Section 1.2

	C.	Section 1.3

		1.	Figure 1.3.1

		2.	Figure 1.3.2

			a.	Chart 1.3.1

			b.	Chart 1.3.2

	D.	Section 1.4

III.	Chapter Two

	A. 	Section 2.1

	B. 	Section 2.2

IV.	Chapter Three

    top

    Table of Contents

    Lesson 6