Scribd
Upload
11 views

Ordered & Unordered List

Uploaded by

codinglearner817
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
11 views

Ordered & Unordered List

Uploaded by

codinglearner817
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

UNIT 5 ORDERED AND

Ordered and

UNORDERED Unordered List

LIST
NOTES
Sructure
50 Introduction
51 Unit Objectives
6 2Lists
621 Ordered List
52.2 Unordered List
523 Definition List
524 Headings in a List
53 Nested List
54 Summary
5.5 Key Terms
56 Answers to 'Check Your Progress'
5.7 Questions and Exercises

5.0 INTRODUCTION
List is one of the most common ways to organize information ina Web page. It is a
sequence ofparagraphs, cach of which is preceded by aspecial symbol or anumber. By
organizing information in a list, complex data can be presented in a well-structured,
easy-to-read and comprehensive format., Ithelps visitors find infomation easily and also
draws attention to important information. In this unit, you willearn about the types of
lists used in HTML such as ordered list, unordered list and definition list. You will also
learn about the significance of using list heading and nested list.
5.1 UNIT OBJECTIVES

After going through this unit, you will be able to:


"Understand what a list is
" Learn about ordered list, unordered list and definition list

"Understand the significance of list heading and nested list

5.2 LISTS
HIML provides three types of lists-ordered list, unordered list and definition list. We
will discuss these lists in detail in this unit.
L5.2.1 Ordered List
An ordered list, also known as numbered list, is a list in which each list item is numbered.
ltis used when specific steps or instructions have to be followed. It is represented by
<OL> tags. The individual items ofthe list are identified using the <LI> tag, which is
defined withintheopening tag <OL> and the closing tag </0L>,
Self-Instructional
Material 73
Ordered and
Unordered List
The syntax for defining an ordered list is:
<OL>
<LI> Item 1

<LI> Item 2
NOTES
</0L>
sTART
Some ofthe commonly used attributes ofthe ordered list are TYPE and
YPE Attribute
of
The TYPE attribute sets th¹ numbering style to be used in the list. It takes one
in the list
the five values (see Table 5.1 )./To set the numbering type of all the items
TYPE attribute is used with <0L> tag.However, we can change the numbering type of
a particular item in the middle of the list. For this, specify TYPE
attribute in the
corresponding <LI> tag.
By default, the value ofTYPE attribute is 1.
Table 5.1 Values of TYPE Attribute

Value Deseription
Arabic numbers like I,2,3,4, and sp on
A Uppercase letters like A, B, C, Dand so on
Lowercase letters like a, b, c, d and so on
I: Uppercase Roman numbers like I, II, III, and so on
Lowercase Roman numbers like i, ii, iii, iv, and so on

START Atribute
The START attribute is used to specify the starting letter or number with which list
numbering will begin. For example,-<0L-START-="6"> would start a list from 6
whereas <oL-TYPE=-"A"-START= "4*> would start alistfromD. By default, the
numbering of the list starts from I.1
Note: The value of the START atribute is specified in numbers even if the value of the TYPE attribute is in
another number format or alphabet.
Example 54: An HTML code to demonstrate the use of ordered lists:
<HIM>

<HEAD>
<TITLE> Ordered Lists</TITLE>
</HEAD>
<BODY>

ORDERED LISTS with default values for type and start


attributes.
<OL>
<LI> List1
<LI> List2
<LI> List3

self-Imstructiunal
74 Materia!
Ordered and
ARDERED bLSTS 1n the uppercase roman numbers starting from Unordered List
II.

0L TYPE="I START="2 ">


<LI> List2
<LI> List3 NOTES
<LI> List4

</0L>
apDERED LISTS 1n uppercase alphabet ic order starting from D.
Ot, TYPE="A" START="4">
<LI> List4
<LI> List5
<LI> List6
</0L>
</BODY>
</HTML>

The output of the HTML code is


neueel roti Interset lbploret

ACpents and Setrgaedtooy lei

BTERED LISTS wth defrt vahus for type amd tart attnbutr1

CiREED LISTS the uppercase roman ambers tarting om

startT7
ORDEREDLISTS a ppercase alhabec order starng tom D

Lits

star
tndt
1 start
Concu

tart

S22 Ünordered List


An unordered líst, also known as bulleted or unnumbered
list, is a list in which the
list
individual
order ofthe list items is not significarnt. It is represented by <UL> tags.isThe
defined between
items in an unordered list are identified by using <LI> tag, which
the opening tag <UL> and the closing tag </UL>.
The syntax for defining unordered list is
<UL>
<LI> Item 1
<LI> Item 2

</UL>
Oneof the commonly used attributes of the unordered list is TYPE attribute
Self-Instruciuunu.
Materiol 75
Ordered and
Unordered list
TYPE Attribute
The TYPE attribute enables to change the type of bullets displayed in the list in the le.
page. The value cfthe TYPE attribute can be circle, square or disc. The Tv
NOTES attribute can be used with <UL> tag for _ettng the type for the entire list or it mavk
used with individual <LI> tag to set the type ofa particular list item. Note that th
values of TYPE attribute are case senstive and should be specified in lower case.
Example 5.2: An HTML code to demonstrate the use of unordered lists
<HIML>
<HEAD>
<TITLE>Unordered Lists</TITLE>
</HEAD>
<BODY>
Examples of unordered 1ist.
<UL TYPE="disc">
<LI>List1
<LI>List2
</UL>
<UL TYPE="square">
<LI>List3
<LI>List4
</UL>
<UL TYPE="circle">
<LI>List5
<LI>List6
</UL>
</BODY>
</HTM>
The output of the HTML code is

Unordered Lists Microsoft lnternet Explorer


Fle Edt View Favortes Tocs Help

Address )cDxunents and Setthgs\Adninstr storl Go nks


A

Examples of unordered ist

" List1
" List2

List3
List4

o List5
o List6
|lDone My Computer

Self-Instructional
Material
Ordered and
Defnition List Unordered List

definitionlist enables to include a definition list in a Web page. The terms in the
The
kfinition
etline,
listaredisplayed onthe left handside andthe definitions are displayed inthe
Theddefinition list is represented by <DL> tags. The two odkerelementsassociated NOTES
ihdefnitionnlist are definition term (represented by <DT> tags) andddefinition description
(epresentedby <DD> tags). The definition term specifies the terh and definition
dscripion,specifies thee definition of the term inthe definition list.
The syntax for defining definition list is
DL> <Ul>
DT>
DD>

<DL
Eramples.3: An HTML code to demonstrate the use of definition lists
<HTML>
<HEAD>
nTTLE>Definition Lists</TITLE>
</HAD>
<BODY>
Example of definition list.
<DL>
<DT><B>Definition Terml</B>
<DD> This is a definition of the first term in the list
<DT><B>Definition Term2</B>
<DD> This is a definition of the second term in the list
</DL>
</BODY>
</HIM>

The output of the HTML code is


Definition Lists-Microsoft Inter net Explorer
Fle Edt Favortes Tools Hep
yew
Seach aortes
Example of defnition ist.

Definition Terml
This is a definition of the irst term n the bst
Definition Tem2
This is a definiton of the second term in the ist

Done My Computer
Self-Instructional
Materia!
be
<LH>
can with
item
listed
Conpuer it
preceding
heading
A
list.
a list by
1or demonstrate Anvers
heading
title
a Yahoot amade
provIde Lists</TITLE>
<TITLE>Unordered My
to Animals JNai
is
to code is ofAnimals
wanttag
em
List <LH>HTML
code
Explbrer
Ueonrtdemno
we
a of Leopard
<LI> HTML
in whenusingAn <LI>
Mònkey
Lion<LI>
ListLI> Tiger
lnleriet T
Ans
List
Headings 5.4:
usedby
<LI>
Beer
the Mlcresoft
Setirnosla
example,
Example <LH>} rd
heading
is of UCDocents
jUnorderedLlsts
of
Lut
Anrals
heading </BODY> output
</HTM> Uss
Unordered Moakey Leopi this
<HIML> </HEAD>
5.24 listed <HEAD> <BODY>
<UL> </UL>
Luon lger Beer
In
List
The
a tag.
Self-Instructional
NOTES
Material
and nordered
ist
rdered
andlst
Unordered
Ordered
NOTES Self-Instructional
Material
means
A tags
nested
list
current
levels. 5.5.
in
Example
to the
extended
several
within
list
aslist nested
tagsshown
list demonstrate SOup
soup
ordered soup
Mushroom
<LI>
can
be Lists</TITLE>
Ordered
TLE> soup sourgarlic
<iI>Tomato
unordered type="disc">
<UL paneer
Stuffed
<LI>
and potato
Chilli
<LI>
it of
and roll
Spring
<LI>
set code
to juice
Lemon
<LI>
drink
Cold
(<LI> Hot Hot
lists'new
within and
a ordered :An
HTML
Exámple Beverages
kLI>TYPE="a">.
<OL Coffee
<LI> <LI><LI>
<OL Soup
inserting <LI>,
NESTED
LIST Tea
<LI> TYPE="a"> </UL>
lists
cTeabtem
lististed
by
i
dcontaji5.n S:
both
M> </HEAD><BODY>
V<HI<HEAD> SAOL>
Appetizer
DeI>
</0L>
</B0DY>
n can </0L>
</HML>
A

You might also like