Lesson 4: Types of List
[4.1 The Unordered List][4.2 The Ordered
List][4.3 The Nested List]
If we wish to list out a number of items, we could use the following
types of listing:
4.1 The Unordered List
Also called unnumbered list or bulleted list. The HTML tags are shown as
follow
<UL>
<LI>item 1
<LI>item 2
<LIitem 3
</UL>
*Note that <LI> tag does not require a closing tag.
Example:
<HTML
<HEAD><TITLE>Unordered List</TITLE></HEAD>
<BODY>
<H2> Fruits</H2>
<HR>
<UL>
<LI> Apple
<LI> Grape
<LI> Orange
<LI> Pear
<LI> Pineapple
<LI> Water Melon
</UL>
</BODY>
</HTML> |
Copy and paste the above codes to your notepad and save the file as
uorlist.html.
Click here to view the sample
output.
[back to the top]
4.2 The Ordered List
Also known as the Numbered List. It is very similar in structure
to the unordered list, except each list item has a number in front of it,
instead of a bullet. Also, the opening tag for the list is <OL> instead
of <UL>, and the closing tag is </OL> instead of </UL>. Modify
the codes in section 4.1 by changing the tags <UL> to <OL> and </UL>
to </UL> and change the title to ordered list. Save the file as orlist.html.
Click here to view the sample output.
[back to the top]
4.3 The Nested List
This nested list contains lists within lists.
Example:
| <HTML>
<HEAD><TITLE>Nested List</TITLE></HEAD>
<BODY>
<H1 align=center><U> Internet Club</U></H1>
<OL>
<LI>Advisers
<UL>
<LI> Mr. Liew
<LI> Mrs James
<LI>Miss Irene
</UL>
<LI>Committee Members
<UL>
<LI>Nick
<LI>George
<LI>Francis
</UL>
</OL>
<BODY>
</HTML>
|
Copy the codes above and paste them to your notepad. Save the file as
nested.html
Click here to view the output.
[back to the top]
[Back to Main Page]