HTML

Chapter 6 Arranging Text in Lists

Developing a Web Site 1

Objective

 You will learn to

 format numbered lists, bulleted lists, and a
variety of other indented lists.
 see how the HTML tags for creating lists
can be used for almost any other type of
indentation you want on your Web pages.

Developing a Web Site 2

Three Types of HTML Lists

 Ordered list <OL>…</OL>

 Unordered list <UL>…</UL>
 Definition list <DL>…</DL>

Developing a Web Site 3

Ordered List
 Ordered lists are indented lists that have
numbers or letters in front of each item.
 Tag: <OL><LI><LI>…</OL>
 Attributes: type(I – uppercase roman
numerals, i – lowercase roman numerals, A –
capital letters, a – lowercase letter, 1 – ordinal
number), start(start an ordered list with any
number or letter), value(renumber the
individual points)

Developing a Web Site 4

Ordered List - continued
 Examples
 <OL>Foods
<LI>Chicken Rice
<LI>Curry Mee
<LI>Mee Goreng
</OL>
 <OL TYPE="I">Foods
<LI>Chicken Rice
<LI>Curry Mee
<LI>Mee Goreng
</OL>
Developing a Web Site 5
Ordered List - continued
 <OL TYPE="I">Foods
<LI>Chicken Rice
<LI TYPE="a">Curry Mee
<LI>Mee Goreng
</OL>
 <OL TYPE="I">Foods
<LI>Chicken Rice
<LI TYPE="a">Curry Mee
<LI>Mee Goreng
<LI value="10">Curry Fish Head
<LI>Roti Canai
</OL>

Developing a Web Site 6

Ordered List - continued
 <OL TYPE="A" start="5">Foods
<LI>Chicken Rice
<LI>Curry Mee
<LI>Mee Goreng
<LI>Curry Fish Head
<LI>Roti Canai
</OL>
 <OL start="10">Foods
<LI>Chicken Rice
<LI>Curry Mee
<LI>Mee Goreng
</OL>

Developing a Web Site 7

Unordered List

 Unordered lists are indented lists with a

special bullet symbol in front of each
item.
 Tag: <UL><LI><LI>…</UL>
 Attributes: type(disc, circle or square)

Developing a Web Site 8

Unordered List - continued
 Examples
 <UL>Drinks
<LI>Milo
<LI>Orange Juices
</UL>
 <UL TYPE="square">Drinks

<LI>Milo
<LI>Orange Juices
</UL>

Developing a Web Site 9

Unordered List - continued
 <UL TYPE="square">Drinks
<LI TYPE="disc">Milo
<LI>Orange Juices
</UL>

Developing a Web Site 10

Definition List
 Definition lists are indented lists without any
number or symbol in front of each item.
 Tag: <DL>
<DT>
<DD>
<DT>
<DD>…
</DL>

Developing a Web Site 11

 Example:
 <DL>

<DT>OOP2033
<DD>Object-oriented with C++
<DT>DWE2334
<DD>Developing a web site
</DL>

Developing a Web Site 12

Summary

 You have learned to create and combine

three basic types of HTML lists: ordered
lists, unordered lists, and definition lists.

Developing a Web Site 13