Universiy of Cagayan Valley
New Site Campus, Balzain, Tuguegarao City
College of Information Technology
First Semester, S.Y.2021-2022
Lesson 5: HTML Lists
Learning Activities:
HTML Lists
- HTML provides a simple way to show unordered lists (bullet lists) or ordered lists
(numbered lists).
- HTML Lists are used to specify lists of information. All lists may contain one or more
list elements. There are different types of HTML lists:
Ordered List or Numbered List (ol)
Unordered List or Bulleted List (ul)
Description List or Definition List (dl)
Control List Counting
1. Unordered Lists
- An unordered list is a list of items marked with bullets (typically small black circles).
- An unordered list starts with the <ul> tag. Each list item starts with the <li>tag.
This Code Would Display
<ul>
<li>Coffee</li> Coffee
<li>Milk</li> Milk
</ul>
More Unordered Lists
- The TYPE= shape attribute allows you to change the type of bullet that appears
Circle corresponds to an empty round bullet
Square corresponds to a square bullet
Disc corresponds to a solid round bullet; this is the default value
2. Ordered Lists
- An ordered list is also a list of items.
- The list items are marked with numbers. An ordered list starts with the <ol> tag.
- Each list item starts with the <li> tag.
This Code Would Display
<ol>
<li>Coffee</li> 1. Coffee
<li>Milk</li> 2. Milk
</ol>
- Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc.
More Ordered Lists
- The TYPE= attribute allows you to change the the kind of symbol that appears in the
list.
A is for capital letters
a is for lowercase letters
I is for capital roman numerals
i is for lowercase roman numerals
1|Page
Universiy of Cagayan Valley
New Site Campus, Balzain, Tuguegarao City
College of Information Technology
First Semester, S.Y.2021-2022
TRY IT OUT!
Open your text editor(notepad) and type the following text:
<html>
<head>
<title>My First Webpage</title>
</head>
<h1 align="center">My First Webpage</h1>
<font face="century gothic" size="5" color="red">
<p>Welcome to my <strong>first</strong> webpage. I am writing
this page using a text editor and plain old html.</p>
<p>By learning html, I'll be able to create web pages like web
programming</p>
Here's what I've learned:
<ul>
<li>How to use HTML tags</li>
<li>How to use HTML colors</li>
<li>How to create Lists</li>
</ul>
</font>
</body>
</html>
OUTPUT:
3. Definition Lists
- Definition lists consist of two parts: a term and a description.
- To mark up a definition list, you need three HTML elements; a container <dl>,
a definition term <dt>, and a definition description <dd>.
2|Page
Universiy of Cagayan Valley
New Site Campus, Balzain, Tuguegarao City
College of Information Technology
First Semester, S.Y.2021-2022
-
This Code Would Display
<dl>
<dt>Cascading Style Sheets</dt> Cascading Style Sheets
<dd>Style sheets are used to provide Style sheets are used to provide
presentational suggestions for documents presentational suggestions for
marked up in HTML. documents marked up in HTML.
</dd>
</dl>
- Inside a definition-list definition (the <dd>tag) you can put paragraphs, line
breaks, images, links, other lists, etc.
4. Control List Counting
- 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:
- To create an unordered list, type:
This Code Would Display
<h2>The start attribute</h2> The start attribute
<p>By default, an ordered list will start
counting from 1. Use the start attribute to start By default, or ordered list will start
counting from a specified number:</p> counting from 1. Use the start attribute to
<ol start="50"> start counting from specified number:
<li>Coffee</li>
<li>Tea</li> 50. Coffee
<li>Milk</li> 51. Tea
</ol> 52. Milk
<ol type="I" start="50">
<li>Coffee</li> L. Coffee
<li>Tea</li> LI. TEA
<li>Milk</li> LII. MILK
</ol>
TRY IT OUT!
Open your text editor(notepad) and type the following text:
<html>
<head>
<title>list</title>
</head>
<body>
<ol type="I">
<li>Multiple Choice:Read and analyze each statement and
choose the correct answer.</li>
<ol>
<li>It breaks down a programming task into series of
interaction among different entities or objects.</li>
<ol type="a">
<li>Structured Programming</li>
<li>Object-Oriented Programming</li>
<li>Procedural Programming</li>
3|Page
Universiy of Cagayan Valley
New Site Campus, Balzain, Tuguegarao City
College of Information Technology
First Semester, S.Y.2021-2022
<li>None of these</li>
</ol>
</ol>
</ol>
<ol type="I" start="2">
<li>ACRONYMS: Give what is being asked.</li>
<ol>
<li>HTML-</li>
<li>ISP--</li>
<li>TCP/IP-</li>
</ol>
</ol>
</body>
</html>
OUTPUT:
References:
1. W3Schools Online Web Tutorials
2. https://www.w3schools.com/lists/
3. http://www.scriptingmaster.com/html/HTML-basics.asp
4. https://en.wikibooks.org/wiki/Introduction_to_Information_Technology/Web_Technolog
ies#Introduction
Prepared by:
CELY BETH S. BACUD, MIT
Instructor
4|Page
