HTMLCOOK -
Main Page - lists all articles and tutorials
Google
  Web www.htmlcook.com
UK2 for domains and webhosting
• Windows Servers: £50 off plus free WebsiteSpark™
• Business Booster Bundle - Get both the Search Engine Submission tool (usually £39.95) and Business Directory entry (usually £12.50) for an amazing £39.95!
• Domain Names Offer - Get a .com and .co.uk together and save 12% on the total price!

Introduction
Backgrounds
Fonts
Advanced Text
Lists
images
Links
Tables
Frames
Forms
JavaScript
Recommended Links


Lists

There are several kinds of "Lists" that you can use for different purposes.
Lists can contain whatever type of information that you want them to.

  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.
 

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. 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

  • - "Bullet"

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.


    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"><b>My List Of Lists!</B></FONT>

    <P></CENTER>

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

    <OL TYPE=I>What can lists look like?

       <OL TYPE=A>

       <LI>Basic HTML Tutorial

          <OL TYPE=1>

          <LI>Lots of lists

          <LI>Can be useful

          <LI>Do you like lists?

       </OL>

       <LI>Even more lists

          <OL TYPE=1>

          <LI>Do you like the tutorial?

          <LI>Want to learn more html?

          <LI>you're doing great!

          </OL>

       <LI>Keep Up the Good Work

          <LI>You're making great progress

          <LI>Well done!

          <LI>Not hard is it?

          </OL>

       </OL>

    <LI>Enjoy!

    </font>

    </BODY>

    </HTML>


    Check out this page

     

    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

     
    <<Previous Page