HTML
ORDERED AND UNORDERED LISTS
Objectives
Understand ordered and unordered List
Explore nesting tags and list.
ORDERED LISTS
This is the type of the list where each item
is numbered usually starting at 1.
But can be changed using the start
attribute.
The ordered lists uses the container tag
<ol></ol>
Ordered list
Each item in this list is specified by
the empty tag:
<li>
Types of Colors
1. Primary
2. Secondary
3. Tertiary
Different types of numbering Ordered List
(Attribute = type)
1 for regural numbering (1,2,3,4, etc.)
a for lowercase alphabet (a,b,c,d, etc.)
A uppercase alphabet (A, B, C, D, etc.)
i for lowercase Roman Numeral (i, ii, iii, iv, etc.)
I for lowercase Roman Numeral (I, II, III, IV etc.)
Attributes of
<ol></ol>
Attribute Definition Value
Type Indicates the 1, a, A, I, I
type numbering
to be used in
the list.
Ex. <ol
type=A></ol>
Attributes of
<ol></ol>
Attribute Definition Value
Start Indicates the value or Any
number of the first number
item in the list.
Ex. <ol type=1
start=3></ol>
Classroom Officers
A. President
B. Vice-President
C. Treasurer
Classroom Officers part 2
iv. Secretary
v. Auditor
vi. PIO
UNORDERED LIST
This type of list that enumerates each item is not
NUMBERED but rather BULLETED and uses the
container tag:
<ul></ul>
<li>
Types of Colors
Primary
Secondary
Tertiary
Different Types of
UNORDERED LIST
Disk for round bullets
<ul type=disk>
Circle for circular bullets
<ul type=circle>
Square for square bullets
<ul type=square>
Attributes of
<ul></ul>
Attribute Definition Value
Type Indicates the type of Disc, circle,
bullet to be used in square
the list,
Ex. <ull
type=A></ol>
Colors NESTING LISTS
1. Primary
. Red
. Blue
. Yellow
2. Secondary
. Orange
. Violet
. Green
<html>
<head>
<title>Visual Guide</title>
</head>
<body>
<h3>Colors</h3>
<ol>
<li>Primary
<ul>
<li>Red
<li>Blue
<li>Tertiary
</ul>
<li> Secondary
<ul>
<li>Orange
<li>Violet
<li>Green
</ul>
</ol>
</body>
</html
Assignment
Write the code for the following outputs
I. Adobe
. Photoshop
. Flash
. Dreamweaver
II. Microsoft
. Access
. Visual Basic
. Excel