Chapter: 11th Computer Applications : HTML - Formatting text, Creating Tables, List and Links

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.

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:


 

Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail
11th Computer Applications : HTML - Formatting text, Creating Tables, List and Links : Lists in HTML |


Privacy Policy, Terms and Conditions, DMCA Policy and Compliant

Copyright © 2018-2023 BrainKart.com; All Rights Reserved S21. Developed by Therithal info, Chennai.