There are basically two types of list. Unordered lists arrange a series of items without numbering them, and ordered lists attribute a number to each element of the list."
The <UL> Command
To create an unordered list, use the set of commands shown below. The command that generates the unordered list is the <UL> command, which must enclose the entire list. Each item of the list should be specified with the list item command <LI>.
Syntax :-
<UL>
<LI> text of item
<LI> text of item n....
</UL>
The <OL> Command
To create an ordered list, use the set of commands shown below. The command that generates the ordered list is the <OL> command, which must enclose the entire list. Each item of the list should be specified with the list item command <LI>.
Syntax :-
<OL>
<LI> text of item
<LI> text of item n....
</OL>
Load the examp5a.htm file, and examine the source code shown below :
<html>
<body>
<h2><b>example of unordered list</b></h2>
<ul>
<li> First item of the list
<li> Second item of the list
<li> Third item of the list
<li> Fourth item of the list
</ul>
<hr>
<h2><b>example of ordered list</b></h2>
<ol>
<li> First item of the list
<li> Second item of the list
<li> Third item of the list
<li> Fourth item of the list
</ol>
<hr>
</body>
</html>
The following figure shows the effect caused by these commands.
Nested Lists
You can nest several lists to create hierarchical structures, and can mix ordered and unordered lists. First you will see how nesting of unordered lists works.
Nested Unordered Lists :-
Load the Examp05b.htm file, the source code of which is shown below :
<HTML>
<HEAD>
<TITLE>Nested non-ordered lists</TITLE>
</HEAD>
<BODY>
<B><P>Nested non-ordered lists</B></P>
<UL>
<LI>This is the first item of main list</LI>
<LI>This is the second item of main list</LI>
<UL>
<LI>This is the first subitem of main list's second item</LI>
<LI>This is the second subitem of main list's second item</LI>
<UL>
<LI>This is the third level, i.e., a subitem's subitem</LI>
<LI>We are still in the third level. Have you noticed how bullet formats change with every level?</LI></UL>
<LI>Don't get lost; this is the third subitem of main list's second item</LI>
<LI>Don't get lost this is the fourth subitem of main list's second item</LI></UL>
<LI>This is the third item of main list and that's all for now.</LI></UL>
</BODY>
</HTML>
This code is illustrated in the figure are given below.
Notice that for each level of the list, the browser (except Windows explorer) shows a different symbol to make viewing of the pages easier. Be sure to match all the commands, that is, every <UL> command must end with a </UL> command. If you forget one of them, the list structure will be incorrect.
Nested Ordered Lists
The Examp05c.htm files shown next presents the nesting of ordered files. The principle is the same.
<HTML>
<HEAD>
<TITLE>Nested Ordered lists</TITLE>
</HEAD>
<BODY>
<B><P>Nested Ordered lists</B></P>
<OL>
<LI>This is the first item of main list</LI>
<LI>This is the second item of main list</LI>
<OL>
<LI>This is the first subitem of main list's second item</LI>
<LI>This is the second subitem of main list's second item</LI>
<OL>
<LI>This is the third level, i.e., a subitem's subitem</LI>
<LI>We are still in the third level. Have you noticed how bullet formats change with every level?</LI></OL>
<LI>Don't get lost; this is the third subitem of main list's second item</LI>
<LI>Don't get lost this is the fourth subitem of main list's second item</LI></OL>
<LI>This is the third item of main list and that's all for now.</LI></OL>
</BODY>
</HTML>
See the result in the below figure.
Combining the two types of list is easy. See the example in the Examp05d.htm file, shown below.
<HTML>
<HEAD>
<TITLE>Nested Ordered lists</TITLE>
</HEAD>
<BODY>
<B><P>Nested Ordered lists</B></P>
<OL>
<LI>This is the first item of main list</LI>
<LI>This is the second item of main list</LI>
<UL>
<LI>This is the first subitem of main list's second item</LI>
<LI>This is the second subitem of main list's second item</LI>
<OL>
<LI>This is the third level, i.e., a subitem's subitem</LI>
<LI>We are still in the third level. Have you noticed how bullet formats change with every level?</LI>
</UL>
<LI>Don't get lost; this is the third subitem of main list's second item</LI>
<LI>Don't get lost this is the fourth subitem of main list's second item</LI></OL>
<LI>This is the third item of main list and that's all for now.</LI></OL>
</BODY>
</HTML>
See how the page looks in the below figure.
In this episode you learned how easy it is to create lists using the <UL>, <OL>, and <LI> commands. Lists are the main frameworks to build menus inside HTML pages.
Share This Post
PRINT THIS POST
No comments:
Post a Comment
If you have any doubts. Please let me know.