WilRose HTML Tutorial, a FREE on-line learning center

Download Some Cool Website Software Now !
This site designed with Web Page Creator 32 HTML Editor ver. 6.0
Introduction
Backgrounds
Fonts and Text
Accents
Lists
Images
Links
Tables
Frames
Forms
JavaScript
Great Books
Members Area

Lists

There are several kinds of "Lists" that you can use for different purposes. I will use a series of Lists to describe them. Lists can contain whatever type of information that you want them to. And with just a little imagination and creativity, lists can be useful for an infinite number of purposes on the World Wide Web.

    This is an "Ordered List"
  1. This is list item # 1
  2. List item # 2
  3. List item # 3, etc.

    This is an "Un-ordered List"
  • List item # 1
  • List itm # 2, etc.

This is a "Definition List"
This Definition Title # 1
Definition Data, This is the Definition of Definition Title # 1
Browser:
What I use to see what's on the net.
Text Editor or HTML Editor:
What I use to program stuff for view on the net in someone else's browser.

There are more kinds of Lists. Now here's how you do it.

An example of an "Ordered List"

<OL> - (Starts Ordered List)

<LI> - (List Item # 1)

<LI> - (List Item # 2)

<LI> - (etc., etc.)

</OL> - (Ends the Ordered List)

When you make an "Ordered List" with the <OL> tags most Browsers interpret the command and automatically assign each List Item a number by default starting with # 1. However, it is also possible to define what is used to "Order" the List. You can use Upper case letters, Lower case letters, and even Roman Numerals. *NOTE: For some strange reason, this does not work with MSIE 5.0. No matter which you use, you must remember to Begin the list and then End the list.

Here's how you define the format of the list.

<OL TYPE=A> - (Automatically labels list Item # 1 as List Item # A) then A, B, C, etc.

<OL TYPE=a> - (Automatically labels list Item # 1 as List Item # a) then a, b, c, etc.

<OL TYPE=I> - (Automatically labels list Item # 1 as List Item # I) then I, II, III, IV, etc.

You can also use a new list to pick up where you left off on a previous list, that is you can define what number or letter to start with like so:

<OL TYPE=1 START=6> - This starts the new list at # 6 and goes from there.

"Unordered Lists"

Unordered Lists follow the exact concept of the Ordered Lists exept that by default instead of showing each List Item being auto numbered the List Items are marked by a

The coding is simple, just use the tags

<UL>

<LI>

<LI>

</UL>

This is a "MENU" List
  • Menu Item # 1
  • Menu Item # 2
    •

    Again, Menu Lists are simple. Just use the <MENU><LI></MENU> tags.

    This is a "Directory List"

  • Directory Item # 1
  • Directory Item # 2, etc.

    Use the <DIR><LI></DIR> tags.

    Last but not least, Definition Lists

    <DL> - (Begins Definition List)

    <DT> - (Definition Title # 1, what will be defined)

    <DD> - (Definition Data, the definition itself)

    <DT> - (Definition Title # 2)

    <DD> - (Definition # 2)

    </DL> - (Ends Definition List)

    You can also "nest" lists inside of lists. The old Hierarchy rule applies. Try one. Put this in your text editor.

    <HTML>

    <HEAD>

    <Title>My Nested Lists</TITLE></HEAD>

    <BODY BGCOLOR=#FFFFFF>

    <CENTER>

    <FONT SIZE=6 COLOR=#0000FF FACE="Arial"><My List Of Lists!</B>></FONT>

    <P></CENTER>

    <HR SIZE=5>

    <P><FONT SIZE=3 COLOR=#000000 FACE="Book Antigua">

    <OL TYPE=I><U>Exciting Things at WilRose.com</U>

       <OL TYPE=A>

       <LI>Basic HTML Tutorial

          <OL TYPE=1>

          <LI>Background Images

          <LI>Fonts and Text

          <LI>And Much More!

       </OL>

       <LI>WRnetRadio

          <OL TYPE=1>

          <LI>Blooze & Boogie Radio Show

          <LI>Keepin' it Country Radio Show

          <LI>Groovin' R & B Radio Show

          </OL>

       <LI>DigiJam

          <LI>Software reviews

          <LI>Downloads to jam live on the net

          <LI>Latest electronic Music software

          </OL>

       </OL>

    <LI>Everything else on the Internet

    </OL>

    </BODY>

    </HTML>

    And there you have it. Open your text editor and practice the different kinds of lists. Try them all. Be creative and use multiple accents, fonts, font colors and whatever else you come up with.

    Top of Page?


    Tutorial Front Page / Backgrounds / Fonts & Text / Accents
    Images / Links / Tables / Frames / Forms / JavaScript
    Cool Free Web Stuff / Recommended Books / Web Site Design / WilRose.com Home