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>
|
- Item 1
- Item 2
- Item 3
- Item 4
- 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>
|
- Item 1
- Item 2
- Item 3
- Item 4
- 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>
|
- Item 1
- Item 2
- Item 3
- Item 4
- 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...
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.
|
10 Mb free for life!
