Scribd
Upload
6 views

Ordered and Unordered Lists

Uploaded by

santasan497
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
6 views

Ordered and Unordered Lists

Uploaded by

santasan497
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 30

ORDERED AND UNORDERED

LISTS
By
M.HEMAMALINI
LIST
• When we list the item without numbers , it is
called an unordered list.
• When we number them, it is called an
ordered list.
• Ex.
• Consider the foll. test
• The Department of computer science offers
the following courses:
• B.Sc computer science
• M.Sc Computer science
• PGDCA
• This is an example of an unordered list.
 Example
 Consider the following text

The Department of computer science offers the


following courses
1. B.Sc computer science
2. M.Sc computer science
3. PGDCA
This is an example of an ordered list.
The following is also an ordered list
The Department of computer science offers the following
courses
(i) B.Sc computer science
(ii) M.Sc computer science
(iii) PGDCA
The following is also an ordered list
The Department of computer science offers the following
courses
(a) B.Sc computer science
(b) M.Sc computer science
(c) PGDCA
UNORDERED LISTS
 An unordered list is represented by the <UL>
and </UL> tags.
 The <UL> tag is given at the beginning and

the </UL> tag is given at the end.


 Each list item is given an <LI> tag. This is

illustrated by the following example.


 Consider the following HTML code
The Department of computer science offers the
following courses
<BR>
<UL>
<LI>B.Sc computer science
<LI> M.Sc computer science
<LI> PGDCA
</UL>
BULLETS IN A LIST
 In a unordered list, every listed item has a bullet. The
bullet can be any one of the following symbols
 Disc
 Circle
 Square

The symbol that we want to include can be chosen using the


TYPE attribute of the <UL> tag .
For example if we use <UL type = square> we shall get a square
symbol.
if we use <UL type = circle> we shall get a circle symbol.
if we use <UL type = disc> we shall get a disc symbol.
The Department of computer science offers the
following courses
<h6> Full time </h6>
<UL type = square>
<LI>B.Sc computer science
<LI> MCA
</UL>
<h6> Evening courses</h6>
<UL type = circle>
<LI>B.Sc computer science
<LI> M.Sc computer science
<LI> PGDCA
</UL>
 <h6 > Week end Programme </h6>
 <UL type = disc>

 <LI> M.Phil

 <LI> Ph.D

 </UL>
PLAIN ATTRIBUTE
 In the unordered list, if we do not have any
bullets, we can use the plain attribute in the
<UL> tag as follows.
 <UL PLAIN>

 For example consider the following HTML code


• The Department of computer science offers the
following courses
<UL PLAIN>
<LI>B.Sc computer science
<LI> M.Sc computer science
<LI> PGDCA
</UL>
 There is a provision in HTML to design bullets of
our choice.
 If we design any symbol of our interest and store
it as a gif, bmp or jpg file, we can use it as a
bullet.

 For example, suppose we draw a small computer


symbol and store it as the file “computer.gif”.
 If we want to have this symbol as a bullet, we
must use it as an src attribute in the <UL> tag as
follows.
 <UL SRC = “Computer.gif”>
 <LI> B.Sc computer science
 <LI> M.Sc Computer science
 <LI> PGDCA
 </UL>
 <html>
 <head>
 <title> Vinyl </title>
 </head>
 <body bgcolor = #22ff22 text = #cc00cc>
 <h1> Vinyl Plastic Emulsion </h1>
 <hr> <br>
 <ul>
 <li> off –white
 <li> Softy Pink
 <li> Ocean Blue
 <li> Mist Gray
 <li> Wild Lilac
 <li> Pista
 </ul>
 </body>
 </html>
HEADING IN A LIST
 Ina list it is possible to introduce
intermediate heading using the <LH> tag of
HTML.
 Instead of using the <LI> tag if we use the

<LH> tag for a listed item, it becomes a


listed heading.
 For example consider the following text
The Department of computer science offers the following
courses
<UL> <LH> Full time <br><br>
<LI>B.Sc computer science
<LI> MCA
<br><br>
<LH> Evening courses
<br><br>
<LI>B.Sc computer science
<LI> M.Sc computer science
<LI> PGDCA
<br><br>
 <LH > Week end Programme
 <br><br>
 <LI> M.Phil
 <LI> Ph.D
 </UL>
 Consider the following code
 <html>
 <head> <Title> PROGRAMME CONTENT </title>
 </head>
 >Body bgcolor = 339933 Text = 770000>
 <UL>
 <LI> FUNDAMENTALS OF SALES & AMP
MARKETING
<LI> Communcation
 <LI> Structured selling process
 <Li> Sales Planning
 <Li> Trade selling
 <li> Marketing Management
 <Li>Adverisement and sales promotion
 </UL>

</body>
<html>
ORDERED LIST
 Lists which appear with numbers are called
ordered lists.
 The HTML code for as ordered list is similar to that

of an unordered list, except that we use an <OL>


tag instead of a <UL> tag.
• The Department of computer science offers
the following courses:
• <OL>
• <LI> B.Sc computer science
• <LI> M.C.A
• <LI> M.Sc Computer science
• <LI> PGDCA
• <LI> M.Phil
• <LI> Ph.D
• </OL>
• This is an example of an ordered list.
 <h4> Department of Computer Science
</h4>
 <OL>

 <LI> B.Sc Computer Science

 <LI> M.Sc Computer Science

 <LI> PGDCA

 </OL>

 <h4> Department of Mathematics</h4>

 <OL>

 <LI> B.Sc Mathematics

 <LI> M.Sc Mathematics

 <LI> M.Phil Mathematics

 </OL>
TYPE ATTRIBUTE
 Instead of numerals, we can have letters
A,B,C… or a,b,c… etc. or roman letters in the
ordering of the listed items.
 This is specified by the type attribute in the

<OL> tag.
Symbol Meaning
1 Numbers
A Upper Case letters A,B,C..
a Lower Case letters a,b,c…
I Upper case Roman numerals I,II,III…. etc
i Lower case Roman numerals i,ii,iii…. etc
• The Department of computer science offers
the following courses:
• <OL TYPE = A>
• <LI> B.Sc computer science
• <LI> M.C.A
• <LI> M.Sc Computer science
• <LI> PGDCA
• <LI> M.Phil
• <LI> Ph.D
• </OL>
• This is an example of an ordered list.
• The Department of computer science offers
the following courses:
• <OL TYPE = I>
• <LI> B.Sc computer science
• <LI> M.C.A
• <LI> M.Sc Computer science
• <LI> PGDCA
• <LI> M.Phil
• <LI> Ph.D
• </OL>
• This is an example of an ordered list.
 <HTML>
 <HEAD>
 <TITLE>ORDERED LIST</TITLE>
 </HEAD>
 <BODY>
 <h4> Department of computer science </h4>
 <OL TYPE = a>
 <LI> B.Sc computer science
 <LI> M.C.A
 <LI> M.Sc Computer science
 <LI> PGDCA
 <LI> M.Phil
 <LI> Ph.D
 </OL>
 <h4> Department of Mathematics </h4>
 <OL TYPE = a start = 7>
 <LI> B.Sc Mathematics
 <LI> M.Sc Mathematics
 <LI> M.Phil Mathematics
 </OL>

 <h4> Department of Zoology </h4>


 <OL TYPE = a start = 10>
 <LI> B.Sc Zoology
 <LI> M.Sc Zoology
 <LI> M.Phil Zoology
 <LI> Ph.D Zoology
 </OL>
 </BODY>
 </HTML>
NESTED LISTS
 It is possible to use one type of list within
another type of list. These are called lists.
 For example , the following is a nested list
 <HTML>
 <HEAD>
 <TITLE>ORDERED LIST</TITLE>
 </HEAD>
 <BODY bgcolor = #00ff00 text = #ff0000>
 <h1 align = center> st. xaviers college (autonomous) </h1>
 <h5> <center> Palayamkottai </center></h5>
 <hr size = 10>
 <p> The college offers the following courses: </p>
 <OL type = I>
 <Li> Department of computer science <br>
 <UL>
 <li><i> Full Time Course </i><br>
 <OL TYPE = 1>
 <li> M.SC Computer science
 <li> MCA
 </ol>
 <li><i> Evening Courses </i> <br>
 <ol type = 1>
 <li> M.Sc Computer science
 <li> PGDCA
 </ol>
 </Ul>
 <li> Department of Mathematics <br>
 <Ul>
 <li><i> Full Time Courses </i> <br>
 <Ol type = 1>
 <li> B.Sc Mathematics
 <li> M.Sc Mathematics
 <li> M.Phil Mathematics
 </ol>
 <li> <i> Week end Programmes </i>
 <ol type =1 >
 <li> M.Phil Mathematics
 </ol>
 </ul>
 </ol>
 </BODY>
 </HTML>

You might also like