454 Rizal Ave Ext Cor 9th Ave, Grace Park, Caloocan

COLLEGE OF COMPUTER STUDIES

Course Code : ITFUND

Course Title : Introduction to Computing

Module 3
HTML List

In this course, the students will be taught to create basic structure and syntax of HTML.

At the end of this lesson, the student will be able to:

1. Use the HTML List tags.

2. Create different kinds of lists and nest one upon another.
3. Input a preformatted text and a horizontal rule into the page.

3.1 HTML Tags for List

HTML lists allow web developers to group a set of related items in lists.

3.2 Unordered List

This kind of list is enclosed in <ul> </ul> tags, while each item is enclosed in <li> </li> tags.
 454 Rizal Ave Ext Cor 9th Ave, Grace Park, Caloocan

By default, unordered lists are displayed with solid round bullets. The bullet type can be changed by using
the type attribute.

3.3 Ordered List

This kind of list is enclosed in <ol> </ol> tags, while each list item is enclosed in <li> </li> tags.

The list items will be marked with numbers by default:

Ordered lists use Arabic numerals with a value “1” for the fi rst list item. ,”2” for the second item, and so
on. As with unordered lists, the appearance of these numerals can be changed by changing the type
attributes.

The type attribute of the <ol> tag, defines the type of the list item marker:

You can also change the starting point of an ordered list by adding the start attribute in the initial <ol>
tag. For example, in Arabic numerals, if you want to start the list at 50, you should type “<ol start=”50”>”.
 454 Rizal Ave Ext Cor 9th Ave, Grace Park, Caloocan

By default, an ordered list will start counting from 1. If you want to start counting from a specified number,
you can use the start attribute. Example:

3.4 Definition List

Definition List is also called Description List. A description list is a list of terms, with a description of each
term. This kind of list is enclosed in <dl> </dl> tags. Th e term to be defined is within <dt> </dt> tags, while
the term’s definition is noted inside <dd> </dd> tags.

Example:
 454 Rizal Ave Ext Cor 9th Ave, Grace Park, Caloocan

You can have as many descriptions for each term as you like. Inside the definition data <dd> tags you can
also put paragraphs, line breaks, links, images, or even other lists.

3.4 Nested List

Lists can be nested (list inside list).

When your teacher asks you to do an outline, what s/he wants you to do, in effect, is to come up with a
structured list, which you can create in a webpage. You can nest lists within lists to create a hierarchy of
information, putting unordered or ordered lists inside the first list’s item (<li> </li>) tags.

To give you an idea of how this works, type in your Notepad:

APPLICATION:

Create a webpage using the following format:

• Unordered list of student’s hobbies with at least 10 hobbies
• An ordered list of student’s favorite dish with at least 10 dishes
 454 Rizal Ave Ext Cor 9th Ave, Grace Park, Caloocan

ASSESSMENT

NAME: _______________________________________________ SCORE: _________________

YEAR & SECTION: _______________________________________ DATE: _________________

Instruction: Write HTML tags in the HTML Code column to have an output like in the Browser Display