Rediff Homepages

Line
Your Homepage
Line

Step 7 : Creating Lists

In this part we take a look at how to create lists. You can make a shopping list or just use the list as a menu or as a directory listing.

Top


Creating an Unordered List

Lets start with creating a bulletted list of say 5 items. We do so by using the <UL> tag. UL stands for Unordered List ie. a list which is not numbered or sorted. We use the <LI> tag to specify each item in the list.

<BODY>
<UL>
<LI>Item 1
<LI>Item 2
<LI>Item 3
<LI>Item 4
<LI>Item 5
</UL>
</BODY>

This shows as...

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5

The list is put within the <UL></UL> tags and each list item or text is preceded with a <LI> tag.

Top


Creating an Ordered List

An ordered list consists of items which are sequentially numbered or lettered. We use the <OL> tag to specify an ordered list.

<BODY>
<OL>
<LI>Item 1
<LI>Item 2
<LI>Item 3
<LI>Item 4
<LI>Item 5
</OL>
</BODY>

  1. Item 1
  2. Item 2
  3. Item 3
  4. Item 4
  5. Item 5

By default the numbering will start at 1 and increment by one for each item. We can also specify the type of numbering and the starting number.

<BODY>
<OL TYPE = A START = 1>
<LI>Item 1
<LI>Item 2
<LI>Item 3
<LI>Item 4
<LI>Item 5
</OL>
</BODY>

  1. Item 1
  2. Item 2
  3. Item 3
  4. Item 4
  5. Item 5

In the above example we have specified the type to be A and the starting value as 1.

The different styles for ordering the list are

A - Use large letters
a - Use small letters
I - Use large Roman numerals
i - Use small Roman numerals
1 - Use numbers.

Lets take another example of ordered listing.

<BODY>
<OL TYPE = i START = 1>
<LI>Item 1
<LI>Item 2
<LI>Item 3
<LI>Item 4
<LI>Item 5
</OL>
</BODY>

  1. Item 1
  2. Item 2
  3. Item 3
  4. Item 4
  5. Item 5

Top


Creating Directory Listings

To create a directory listing we use the <DIR> tag instead of the usual <UL> or <OL> tags.

<BODY>
<DIR>
<LI>Item 1
<LI>Item 2
<LI>Item 3
<LI>Item 4
<LI>Item 5
</DIR>
</BODY>
Here's the result...

  • Listing 1
  • Listing 2
  • Listing 3
  • Listing 4
  • Listing 5
  • Top


    Creating A Menu

    We can also use the <MENU> tag to create a menu of items.

    <BODY>
    <MENU>
    <LI>Listing 1
    <LI>Listing 2
    <LI>Listing 3
    <LI>Listing 4
    <LI>Listing 5
    </MENU>
    </BODY>
    
    Here's the result...

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Top


    Depending on your requirements you can create neat and precise lists which will help you present information in a more ordered manner.

    Case Study : Ram Chandran's Homepage
    Ram's got a lot of interests including sports and food. Lets see how he puts up his favorite's lists.
    To view the code of the example file use the view source option of your browser.

    < Creating Inline Images | Index | Creating Tables >
    Line

       Broadband | Chat | Contest | Movies | E-cards | Weather | Travel | | Romance | Astrology | Shopping
    Money | Instant Messenger
    | Auctions | Auto | Education | Jobs | TechJobs | Women | Technology

    rediff.com
    Disclaimer
    © 2000 rediff.com India Limited. All Rights Reserved.