Chapter: 11th Computer Applications : Chapter 11 : HTML - Formatting text, Creating Tables, List and Links
Lists in HTML
Lists
in HTML
HTML
supports three types of lists viz. numbered, unnumbered and definition. These
lists are called as Ordered List, Unordered List and Definition List
respectively.
1. Numbered List / Ordered List
Numbered
list is created within the tag pair <OL>
….. </OL> tag. The tag <LI>
is used to present the list item in the list. Ordered list displays items in a
numerical or alphabetical order. Both <OL>
and <LI> tags are container
tags. But the usual the practice, closing tag </LI> never be used.
Illustration 11.14: An HTML code to demonstrate Numbered list
<html>
<head>
<title>
Number List </title>
</head>
<body>
<OL>
<LI> Tamil
<LI> Telugu
<LI> English
<LI> Computer Application
<LI> Commerce
<LI> Accountancy
<LI> Economics
</OL>
</body>
</html>
The output will be:
Attributes of Ordered List:
There
are two attributes can be used to customize ordered list, they are
(1) Type
- changing numbering style
(2) Start
- changing numbering order.
Type – is used to change the number
style. The default number style is standard Arabic numerals (1,2,3,…………).
Start – is used to specify the
number of letter with which start the list. The default starting point is 1. The value of the start attribute should be a decimal number,
regardless of the numbering style being used.
Illustration 11.15: An HTML code to demonstrate attribute of OL tag
<html>
<head>
<title>
Attribute of OL tag </title>
</head>
<body>
<OL type=i
start=5>
<LI> Physics
<LI> Chemistry
<LI> Biology
<LI> Botany
<LI> Zoology
</OL>
</body>
</html>
The output will be:
2. Un-numbered List / Unordered List
Unordered
lists are often referred as bulleted lists. Instead of numbers, each element in
the list has prefixed with a special bullet symbol. Unordered list is
surrounded within <UL>……… </UL> tags. As discussed above, each list
element is defined by <LI> tag.
Illustration 11.16: An HTML code to demonstrate Unordered list
<html>
<head>
<title>
Unordered List </title>
</head>
<body>
<UL>
<LI> Chennai
G Hr. Sec. School, Rotler Street, Chennai 600 112.
<LI>
Karnakata Sanga Hr. Sec. School, T. Nagar, Chennai 600 017.
<LI> S.M.B.
Jain Hr. Sec. School, T. Nagar, Chennai 600 017.
<LI> Chennai
G Hr. Sec. School, Nungambakkam, Chennai 600 034.
<LI> Chennai
G Hr. Sec. School, Saidapet West, Chennai 600 015
<LI> Santhome
Hr. Sec. School, Mylapore, Chennai 600 004.
</UL>
</body>
</html>
The output will be:
Attribute of Unordered List:
Like
ordered list, type attribute is used
to customize bullet style for the list of elements.
By
default, a solid circle is used as bullets.
Table: 11.4
Type
value : Numbering style
Disc : A solid circle
Square
: A solid square
Circle
: An unfilled circle
Illustration 11.17: An HTML code to demonstrate Unordered list
<html>
<head>
<title>
Attribute of UL tag </title>
</head>
<body>
<UL>
<LI> Chennai
G Hr. Sec. School, Rotler Street, Chennai 600 112.
<LI>
Karnakata Sanga Hr. Sec. School, T. Nagar, Chennai 600 017.
</UL>
<UL type=square>
<LI> S.M.B.
Jain Hr. Sec. School, T. Nagar, Chennai 600 017.
<LI> Chennai
G Hr. Sec. School, Nungambakkam, Chennai 600 034.
</UL>
<UL type=circle>
<LI> Chennai
G Hr. Sec. School, Saidapet West, Chennai 600 015
<LI> Santhome
Hr. Sec. School, Mylapore, Chennai 600 004.
</UL>
</body>
</html>
The output will be:
3. Definition List
Definition
list is different from other two types of list. No bullet or number is provided
for the list items. In this list type, the list element has two parts.
(1)
A
definition term
(2)
The
definition description
Definition
list is surrounded within <DL> ……. </DL> tags.
Definition
term is presented in between <DT> ….. </DT> tag and
Definition
description should be surrounded within <DD> ………… </DD> tag.
Illustration 11.18: An HTML code to demonstrate Definition list
<html>
<head>
<title>
Definition List </title>
</head>
<body>
<DL>
<DT> HTML: </DT>
<DD> Hyper Text Markup
Language </DD> <DT> Webpage:
<DD> A web page is a
document that is suitable for the World Wide Web and web browsers. A web browser displays a web page on a monitor or
mobile device. </DD>
</DL>
</body>
<html>
The output will be:
Nested Lists:
A
list block can be defined inside another list is called as nested list.
Illustration 11.19: An HTML code to demonstrate Nested lists
<html>
<head>
<title>
Nested List </title>
</head>
<body>
<OL>
<LI> Districts of Tamilnadu
<UL type=A>
<LI> Chennai
<LI> Madurai
<LI>
Coimbatore
</UL>
<LI> District of Kerala
<UL type=A>
<LI>
Thiruvananthapuram
<LI> Palakkad
<LI> Idukki
<UL>
</OL>
<body>
<html>
The output will be:
Related Topics