Lesson 4 The Listing Elements

Unit I

KEYWORD
S
Internet

List

Tag

Browser

Hypertext

URL

The Unordered List Elements

Bulleted lists are used to preface one or more items by a bullet. They are used
if the presentation order of the information is not necessary. Unordered Lists can
be a way of organizing Home pages to segregate different items. To use Unordered
List, type <UL> and end it with </UL>. Items on the list must be preceded by an
<LI> tag. The <LI> tag represents the list entry and it can be in multiple entries.
The said tag does not require an end tag.
The table below shows tag, attribute, value and description of Unordered
List
Element.
Table 1
Tag
<UL>

<LI>

Attributes and
Values
TYPE= (Circle/
Square / Disc)
TYPE= (Circle/
Square / Disc)

Description
TYPE= This type of list
bullets and indents list
item. Default value is
Disc
TYPE= Identifies the
item in an unordered
and ordered manner.

Lesson 4 The Listing Elements

Unit I

Below is an HTML Program that uses the <UL></UL> and <LI> tags.
HTML Program 1

Lesson 4 The Unordered List Elements

Unit I
The following is the Program Output of HTML Program 1 that used
<UL></UL> and <LI> tags.
Program Output 1

Lesson 4 The Unordered List Elements

Unit I

Ordered Lists Element

The Ordered Lists Element is a useful tool for arranging similar elements.
Ordered List can be used to list a set of instructions or collections of hyperlinks.
Ordered List Element is a type of HTML list which begins with a <OL> and
ends with </OL> tags. Each list is itemized with the <LI> tags. The symbol that
appears before each item varies on the TYPE value you declare. The table below
shows the Attributes and Values of <LI> and <OL></OL> Tags.
Table 2
Tags

Attributes and Values

<LI>

TYPE= (1/i/l/a/A)

<OL>

TYPE= (1/i/l/a/A)

START= #

Description
TYPE= Identifies an item in an
unordered and ordered list
TYPE= This is numbered and
indented. The type attributes
specifies the numbering format:
1 is numeric,
I is Roman Numerals lower case,
I is Roman Numerals upper case,
a is Alphabet lower case and
A is Alphabet upper case
START= Specifies what number the
list should start numbering from

Lesson 4 The Unordered List Elements

Unit I
Below is the HTML Program that uses the <OL> </OL> and <LI> tags.
HTML Program 2

Lesson 4 The Listing Elements

Unit I

The following is the Program Output of HTML Program 2 that used <OL></OL> and
<LI> Tags.
Program Output 2

Lesson 4 The Listing Elements

Unit I

Definition List
The Definition Lists starts with a <DL> tag. The terms in the list is
identified with the <DT> tag and to identify the definition of terms, use the <DD>
tag. This type of list provides information in a glossary format. You can have as
many terms defined.
The table shows the Definition List Tags and its description.
Table 3 Definition List Tags
Tags
<DL>
<DT>
<DD>

Description
Definition or Descriptive List allows you to indent text. It
is useful in indenting definition for making terms.
Data Term It is not indented and it identifies the term to
be defined
Data Description It is indented and it identifies a terms
definition

Below is an HTML Program containing the tags shown in Table 3.

HTML Program 3

Lesson 4 The Listing Elements

Program Output 3

Unit I

Lesson 4 The Listing Elements

Unit I

Numbered Lists
The Numbered List is very useful specially in displaying multiple level of a

hierarchical structure. Ordered List is used to denote that you are specifying or
creating numbered items. But the output varies on the type of Browser with respect
to the type of bullets.
Below is an HTML Program that uses both <UL></UL> and <OL></OL>
Tags.
HTML Program 4

Lesson 4 The Listing Elements

Unit I

The following is a Program Output of HTML Program 4 that used both

<UL></UL> and <OL></OL> Tags.
Program Output 4

Lesson 4 The Listing Elements

Unit I

KEYPOINTS

Bulleted lists are used to preface one or more items by a bullet. Bulleted
lists are used if the presentation order of the information is not necessary.
Unordered Lists can be a way of organizing home pages to segregate
different items.

The Ordered Lists Element is a useful tool for arranging similar elements.
Ordered list can be use to list a set of instructions or collections of
hyperlinks.

The Definition Lists starts with a <Dl>. The term in the list is identified with
the tag<DT> and to identify the definition of terms we use the <DD> tag.
This type of list provides information in a glossary format.

The Numbered List is very useful specially in displaying multiple level of a

hierarchical structure. Ordered list is use to denote that you are specifying
or creating numbered items.

Lesson 4 The Listing Elements

Unit I
HANDS-ON ACTIVITY:

I.

Create a program that will lists down Classical civilizations in no

particular order. And, on the same program, that will lists down its
equivalent country in alphabetical order.

II.

Create a program that will produce the following output.

ASIAN COUNTRIES

Philippines
Japan
China
Singapore
Thailand
Malaysia