Scribd
Upload
29 views

Chapter 4 (Lists)

The document discusses different types of lists that can be created in HTML, including unordered lists, ordered lists, and definition lists. It explains how to create each type of list using the appropriate HTML tags and attributes. It also covers nesting lists by inserting one type of list inside the list items of another.

Uploaded by

Charbel Hatem
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
29 views

Chapter 4 (Lists)

The document discusses different types of lists that can be created in HTML, including unordered lists, ordered lists, and definition lists. It explains how to create each type of list using the appropriate HTML tags and attributes. It also covers nesting lists by inserting one type of list inside the list items of another.

Uploaded by

Charbel Hatem
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/ 14

CSC 201

Introduction to HTML

Chapter 4 - Lists

1
Lists

In this chapter you will learn how to create a variety of lists.


Objectives
Upon completing this section, you should be able to
1. Create an unordered list.
2. Create an ordered list.
3. Create a defined list.
4. Nest Lists.

2
List Elements
 HTML supplies several list elements. Most list elements
are composed of one or more <LI> (List Item) elements.
 UL : Unordered List. Items in this list start with a list mark
such as a bullet.

<UL>
<LI> List item 1 </LI>
<LI> List item 2 </LI>
</UL>

• List item 1
3
• List item 2
List Elements
 You have the choice of three bullet types: disc(default),
circle, square.
 These are controlled in Netscape Navigator by the
“TYPE” attribute for the <UL> element.
<UL TYPE=square>
<LI> List item 1</LI>
<LI> List item 2</LI>
<LI> List item 3</LI>
</UL>
 List item 1
 List item 2
 List item 3 4
List Elements
 OL: Ordered List. Items in this list are numbered
automatically by the browser.
<OL>
<LI> List item 1</LI>
<LI> List item 2</LI>
<LI> List item 3</LI>
</OL>
1. List item 1
2. List item 2
3. List item 3

• You have the choice of setting the TYPE Attribute to one


5
of five numbering styles.
List Elements
TYPE Numbering Styles
1 Arabic numbers 1,2,3, ……
a Lower alpha a, b, c, ……
A Upper alpha A, B, C, ……
i Lower roman i, ii, iii, ……
I Upper roman I, II, III, ……

6
List Elements
 You can specify a starting number for an ordered
list.
<OL TYPE =i>
<LI> List item …</LI>
<LI> List item …</LI>
</OL>
<P> Text ….</P>
<OL TYPE=i START=3>
<LI> List item …</LI>
</OL>
7
List Elements
i. List item …
ii. List item …

Text ….

iii. List item …

8
List Elements
 DL: Definition List. This kind of list is different from the
others. Each item in a DL consists of one or more
Definition Terms (DT elements), followed by one or
more Definition Description (DD elements).
<DL>
<DT> HTML </DT>
<DD> Hyper Text Markup Language </DD>
<DT> DOG </DT>
<DD> A human’s best friend!</DD>
</DL>

HTML
Hyper Text Markup Language
DOG
A human’s best friend!
9
Nesting Lists
 You can nest lists by inserting a UL, OL, etc., inside a list
item (LI).
Example:
<UL TYPE = “square”>
<LI> List item …</LI>
<LI> List item …
<OL TYPE=i START=3>
<LI> List item …</LI>
<LI> List item …</LI>
<LI> List item …</LI>
<LI> List item …</LI>
<LI> List item …</LI>
</OL>
</LI>
<LI> List item …</LI> 10

</UL>
What will be the output?
<H1 ALIGN="CENTER">SAFETY TIPS FOR CANOEISTS</H1>
<OL TYPE=a START=2>
<LI>Be able to swim </LI>
<LI>Wear a life jacket at all times </LI>
<LI>Don't stand up or move around. If canoe tips,
<UL>
<LI>Hang on to the canoe </LI>
<LI>Use the canoe for support and </LI>
<LI>Swim to shore
</UL> </LI>
<LI>Don't overexert yourself </LI>
<LI>Use a bow light at night </LI>
</OL>
11
The output….

12
<H1 ALIGN="CENTER">SAFETY TIPS FOR
CANOEISTS</H1>
<OL TYPE="a" START="2">
<LI>Be able to swim </LI>
<LI>Wear a life jacket at all times </LI>
<LI>Don't stand up or move around. If canoe tips,
<UL>
<LI>Hang on to the canoe </LI>
<LI>Use the canoe for support What
<OL type="I" start="4">
<LI> Be careful </LI>
will
<LI> Do not look around</LI> be the
</LI> </OL> output?
<LI>Swim to shore
</UL> </LI>
<LI>Don't overexert yourself </LI>
<LI>Use a bow light at night </LI>
13
</OL>
The output….

14

You might also like