Creating Lists

Organization of a web page is probably the single most important characteristic that contributes to the success or failure of a web page. One of the most useful techniques is to be able to create lists within your web page.

 

Types of Lists

There are three types of lists that can be used within a web page:

Ordered Lists

Unordered Lists

Definition List

Ordered Lists

Ordered lists put things in a column with a numeric beginning. It takes 4 tags to do an ordered list. Here is an example:

  1. <ol> - begins an ordered list
  2. <li> - start an item in the list.
  3. </li> - ends a list item.
  4. </ol> - ends an ordered list.

Another example...here's the code...

<center><h1>Ramen Noodle Instructions</h1></center>
<p>
<ol>
<li>boil water.</Li>
<li>add ramen noodles.</Li>
<li>boil 5 minutes.</Li>
<li>add flavor pack and stir.</Li>
<li>eat</li>
</ol>

...creates this:

Ramen Noodle Instructions

  1. boil water.
  2. add ramen noodles.
  3. boil 5 minutes.
  4. Add flavor pack and stir.
  5. eat

Unordered Lists

Unordered lists put things in a column with a leading bullet or other symbol on each line. It takes 4 tags to do an ordered list. Here is an example:

Another example...here's the code...

<center><h1>Cute Pets</h1></center>
<p>
<UL>
<li>Cat</li>
<li>Dog</li>
<li>Hamsters</li>
<li>Add flavor pack and stir.</Li>
<li>eat</li>

</UL>

Creates this:

Ramen Noodle Pets

  • Cat
  • Dog
  • Hamsters
  • Add flavor pack and stir.
  • Eat

Definition List

Definition lists allow you to organize information such as defining terms or words. This technique is not used as often but is a great one to try. Sometimes it is just what you're looking for. It takes 6 tags to do an ordered list. Here is an example:

<dl>
- begins a definition table.
<dt>
- lists the item to be defined.
</DT>
- ends the item to be defined.
<dd>
- begins the definition.
</DD>
- ends a definition.
</dl>
- ends a definition table.

Another example...here's the code...

<center><h1>Cute Pets</h1></center>
<p>
<dl>
<DT>Cat</DT>
<DD> - Couldn't care less...</DD>
<DT>Dog</DT>
<DD> - Will love you to death!</DD>
<DT>Hamsters</DT>
<DD> - Yummy! Cats love'em.</DD>
</dl>

Creates this:

Cute Pets

Cat
- Couldn't care less...
Dog
- Will love you to death!
Hamsters
- Yummy! Cats love'em.

So simply put, ordered lists are numbered, unordered lists are bulleted.

Assignment

Create a new html file called "lists.htm" that includes an example of all three lists. Make sure it works correctly by viewing it with the browser. Email it to me..

Back to the outline.

1