Basic Guide For Writing Web Pages -- Introduction / Table Of Contents / Previous Page / Next Page

Basic Web Page Writing Step 9
Ordered Lists

In step 8 you used the Unordered List option to create a bulleted list. There are times that you want to put things into a ordered or numbered list.

This step will introduce the ORDERED LIST or numbered list tag. You also will use a DEFINITION LIST and see how you can NEST Ordered and Unordered list.

Ordered List

The tags for Ordered lists are <OL> and </OL>. You will also still used the <LI> (list item) tag.

To make an Ordered List,

  1. Start with an opening list <OL> tag (for Ordered list).
  2. Enter the <LI> (list item) tag followed by the text for the list. No closing <LI> tag is needed but can be used.
  3. End the entire list with a end list </OL> tag.
Below is a sample three-item list: 
    <OL>
    <LI> List Item One
    <LI> List Item Two
    <LI> List Item Three
    </OL>

This would produce

  1. List Item One
  2. List Item Two
  3. List Item Three

As you can see it is just like the Unordered List except that the Number is placed in front of each line item. It is useful when you add to the list since it will automatically renumber for you.

Definition List

A Definition List is a way of using list to show terms and their definitions on a different line. You will probably find other uses for them as well.

The tags for Definition lists are <DL> and </DL>. The line item tag is replaced with a definition term tag <DT> and the another tag, the definition definition <DD> is used.

To make and Definition List,

  1. Start with an opening list <DL> tag (for Definition list).
  2. Enter the <DT> (Definition Term) tag followed by the Word or words to describe.
  3. Enter the <DD> (Definition Definition) tag followed by the text for the list.
  4. End the entire list with a end list </DL> tag.
Below is a sample three-item list: 
    <DL>
    <DT> Computer
    <DD> An electronic device used for word processing, telecommunications, and many other applications.
    <DT> Software
    <DD> The programs used to run a computer. 
    <DT> Printer
   <DD> An output device which will give you hard copy of data.
    </DL>

This would produce

Computer
An electronic device used for word processing, telecommunications, and many other applications.
Software
The programs used to run a computer.
Printer
An output device which will give you hard copy of data.

From the above example you should see may uses for the Definition List tags.

Nested Lists

Sometimes, for example, in an outline type list, you may want both Ordered and Unordered information included. One way to do this is to nest the list. Just don't get to carried away since they can get hard to follow when coding them.

Here is an example of a nested list.

<OL>
<LI>Main Parts of A Computer
<UL>
<LI>Keyboard
<LI>CPU
<LI>Monitor
</UL>
<LI>Storage Devices Used on a  Computer
<UL>
<LI>Floppy Disk Drives
<LI>Hard Drives
<LI>CD's
<LI>Tape Backups
</UL>
<LI>Output Devices
<UL>
<LI>Printer
<LI>Plotter
</UL>
</OL>
This would produce

  1. Main Parts of A Computer
  2. Storage Devices Used on a Computer
  3. Output Devices
You can see how nested lists can get a bit confusing, but if you look at them carefully, they really are not that difficult and are a nice way to create a table of contents, outlines and other types of list with sub-list included.

Try using the Ordered list in your own page. Once you understand Ordered list and Unordered lists, try the definition and nested list.

In step 10 you will start putting graphic images in your page.

STEP 10 -- Adding A Graphic

Basic Guide For Writing Web Pages -- Introduction / Table Of Contents / Previous Page / Next Page

created by Larry Curreri,

© 1996 l_curreri@yahoo.com
Visit My Home Page

last modified: January 14, 2002

This page hosted by Get your own Free Home Page