CREATING LISTS IN HTML

A web page may contain a list. A list is of two types - Ordered and Unordered list. An Ordered or Numbered list is a series of items displayed in a sequence. Each item starts with a number according to its priority/availability etc. The number may be of any kind like 1, 2, ....or I, II, ...or A, B, .... where as an Unordered or Unnumbered list is a series of items displayed with a symbol called bullets. Here all items supposed to be equally important, so displayed with bullet signs not with numbers.

Q. How we can make an ordered or unordered list in HTML.

Ans. Creating an ordered List
<OL> tag is used to create an ordered list. It is a container tag and followed by the tags <LI> (list items). 
List attributes "type = value" and "start=value" are used to define the type of number to be used in the list, like 1, 2, 3...   I, II, III ....   a, b, c....etc and from which number the list is to be started.
The values which are used with TYPE attribute in <OL> tag are :

Type Value

Style

Series of Sequence

A

Capital Alphabet

A, B, C, D ….

a

Lowercase Alphabet

a, b, c, d ….

I

Capital Roman Nos.

I, II, III, IV ….

i

Lowercase Roman No.

i, ii, iii, iv ….

1

Arabic Numbers

1, 2, 3, 4 ….

For ex. <OL type = "Value" starts = "Value">
            <LI> List 1
            <LI> List 2
            </OL>

Now let see an example to make an ordered list:
<OL Type = "a">
<LI> Pen </LI>
<LI> Pencil</LI>
<LI> Rubber</LI>
</OL>
In Notepad++


In Browser

Try above program yourself Try it yourself editor
 
Code
Output

Creating an unordered List
<UL> tag is used to create an unordered list. It is a container tag and followed by the tags <LI> (list items). 
Unordered List attributes "type = value" is used to define the type of bullets to be used in the list, like disc (·), circle (O)or square (■)

Syntax to use the <UL> tag is as follows:
            <UL type = "Value">
            <LI> List 1
            <LI> List 2
            </UL>

For ex:
<UL Type = "disc">
<LI> Pen </LI>
<LI> Pencil</LI>
<LI> Rubber</LI>
</UL>

In Notepad++


In Browser

Try above program yourself Try it yourself editor
 
Code
Output

Nested List : A list can be nested with the same or with different types of list inside another list. The web browser automatically indents the nested list level and display as list 'items'.
For example to show a list of some of the states of India and some cities of that states we type the syntax as follow:
<UL Type = "circle">
<LI> Bihar 
<UL>
<LI> Patna 
<LI> Sitamarhi 
<LI> Dumka 
</UL>
<LI> Uttar Pradesh
<UL>
<LI> Lucknow 
<LI> Varanasi 
<LI> Agra 
</UL>
<LI> Gujarat 
<UL>
<LI> Vadodara 
<LI> Surat 
<LI> Ahmadabad 
</UL>
</UL>
In Notepad++
In Browser

Try above program yourself Try it yourself editor
 
Code
Output

Description List : HTML also support a list style which is called definition list or description list where terms are listed along with their definition like a dictionary or encyclopedia. The definition list is a ideal way to present a glossary, list of items etc. Definition list uses following tags :
<DL>    Defines the start of the list
<DT>    A term
<DD>    Term Definition
</DL>    End of the list

For ex.
<H1> DEFINITION LIST</H1>
<DL>
<DT> India </DT>
<DD> India is a country </DD>
<DT> Delhi </DT>
<DD> Delhi is the capital of India </DD>
</DL>

In Notepad++


In Browser



Try the above codes in Try it Editor.
Try it yourself editor
 
Code
Output






 
     






By -
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)

Python: Functions