Cafe LaTe Home
Contents
Background
Getting Started
Images
Links
Tables
Lists
Resources
Tag Index
Ordered Lists

Section VI: HTML Lists
   Lesson 6-2: Ordered Lists

    This lesson will show you how to create numbered lists. If you have not completed Lesson 6-1, you should go back and do that lesson first.

   Ordered lists are very similar to unordered lists. To create an ordered list the only tags you need are the opening and closing OL (Ordered List) tags, and one set of LI (List Item) tags for each item in your list. You should not number the list yourself. The browser does all the numbering for you. Here is a simple example:

HTML Source Code The List as
Displayed in a Browser
How to shut down your computer:
ol
liClick your iStart/i button./li
liClick iShut down Windows/i./li
liClick iOK/i./li
/ol 		How to shut down your computer:
  1. Click your Start button.
  2. Click Shut down Windows.
  3. Click OK.

   If you don't want to use Arabic numerals to number your items, you can also use Roman numerals or Latin alphabet letters. You can also use capital letters or small letters or Roman numerals. The type of numbering you use is set with the TYPE attribute. The value of TYPE can be "1", "I", "i", "A", or "a".

Use TYPE="1"to number with Arabic numerals
Use TYPE="A"to number with UPPERCASE alphabet letters
Use TYPE="a"to number with lowercase alphabet letters
Use TYPE="I"to number with UPPERCASE Roman numerals
Use TYPE="i"to number with lowercase Roman numerals

   Here are some examples of different types of numbering. Click the source links to view the source code for each example:

TYPE="A"

How to shut down your computer:
  1. Click your Start button.
  2. Click Shut Down.
  3. Click Yes.
Source 		TYPE="I"

How to shut down your computer:
  1. Click your Start button.
  2. Click Shut Down.
  3. Click Yes.
Source
TYPE="a"

How to shut down your computer:
  1. Click your Start button.
  2. Click Shut Down.
  3. Click Yes.
Source 		TYPE="i"

How to shut down your computer:
  1. Click your Start button.
  2. Click Shut Down.
  3. Click Yes.
Source

   Isn't that a lot easier than trying to align each line with line breaks and space codes?

   Sometimes you may want to make a more complex list. This can be done by putting one list inside another list. Putting one list inside another list is called nesting. Here are two examples. Be sure to take a look at the source code:

An unordered list
inside an ordered list:		 An ordered list with small letters
inside an ordered list with capital letters:
UL inside OL

How to shut down your computer:
  1. Click your Start button.
  2. Click Shut Down.
  3. Select one of the following:
    • Shut down the computer?
    • Restart the computer?
    • Restart the computer in MS-DOS mode?
  4. Click Yes.
Source 		OL lowercase inside OL Uppercase

How to shut down your computer:
  1. Click your Start button.
  2. Click Shutdown Windows.
  3. Select one of the following:
    1. Shut down the computer?
    2. Restart the computer?
    3. Restart the computer in MS-DOS mode?
  4. Click Yes.
Source


Practice:

   All right, let's add an ordered list to your practice file. Open your file in a text editor, add the red text, save your file, and look at it with your browser:


bEditing your Practice Page/B
ol
liStart your computer./li
liStart Notepad and open your practice file./li
liStart your browser and open the same file./li
liEach time you save your file in Notepad, take a look at it with your browser./li
liSave your file often./li
/ol

To see what the result should look like, click here!




Review:
  • Numbered lists are created with the ordered list OL and list item LI tags.
  • You can set the way a list numbers items with the TYPE attribute.
  • Alphabet letters, Roman numerals, and Arabic numerals may be used for numbering.
    In addition, alphabet letters and Roman numerals may be UPPERCASE or lowercase.
  • Lists can be nested. That is, you can put lists inside of lists.


 

Previous Lesson Next Lesson
 

[Cafe LaTe Home] [Chat Lounge] [Community Center] [Newspaper] [HTML Tutor]


Last revision: 2002/03/04, Copyright © The Three Cities Workshop