Scribd
Upload
27 views26 pages

Chapter 5 (List)

This document discusses different types of HTML lists including unordered, ordered, and definition lists. It provides examples and explanations of how to create each type of list and how to style lists using CSS properties like type, position, color, padding, margin, borders, and width. The objectives are to learn how to create different types of lists and apply various styles to lists.

Uploaded by

alhinai676
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
27 views26 pages

Chapter 5 (List)

This document discusses different types of HTML lists including unordered, ordered, and definition lists. It provides examples and explanations of how to create each type of list and how to style lists using CSS properties like type, position, color, padding, margin, borders, and width. The objectives are to learn how to create different types of lists and apply various styles to lists.

Uploaded by

alhinai676
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 26

Chapter 5

HTML Lists

Prepared by Ms. Juliet Ramos 1


Objectives
At the end of this module, the students will be
able to:
◦ How to create different types of lists
◦ Apply different styles to the lists

Prepared by Ms. Juliet Ramos 2


HTML Lists

 List are used to group related contents together in


a structured manner making content easy to read
and understand.

Three Types of List:


 Unordered List
 Ordered List
 Definition List
Prepared by Ms. Juliet Ramos 3
Unordered List
 used to group a set of related items in no particular order.
 The list items will be marked with bullets.
 unordered list starts with the opening tag <ul> and closing with
</ul>
 item on list is surrounded by the <li> tag (li stands for list item)
 The default bullet type is small black circles (disc)
 Types of bullets:
 Circle
 Square
 Disc - default

Prepared by Ms. Juliet Ramos 4


Example: Unordered List

 CODE  OUTPUT

Prepared by Ms. Juliet Ramos 5


Example: Sequence/Order of Bullets

Prepared by Ms. Juliet Ramos 6


How to Change the Bullet Type?
 The default bullet type is disc, to change the bullet type is
use the type attribute. See the example below:

Prepared by Ms. Juliet Ramos 7


Ordered List
 An Ordered List is a numbered list where the numbers are
in order beginning with the number 1.
 Use the opening tag <ol> to indicate the beginning of
Ordered List and closing with </ol>
 each item in your list must begin with the tag <li>.
Types:
 Decimal (1….)
 Alphabet ( A-Z or a-z)
 Roman Numerals (I or i)

Prepared by Ms. Juliet Ramos 8


Example: Ordered List
 Code  Output

Prepared by Ms. Juliet Ramos 9


How to change the number type?

 The default number type in ordered list is decimal. It can be


changed by using the type attribute. See example below:

Prepared by Ms. Juliet Ramos 10


Reversed Order and Start

Prepared by Ms. Juliet Ramos 11


Description List
 The Structure of definition list is a term followed by
its description or definition.
 Definition list tag starts with <dl> and ends with </dl>
 Within each < dl > tag you have a pair of definition
term <dt> and definition description element <dd>.

Prepared by Ms. Juliet Ramos 12


Example: Description List
 Code  Output

Prepared by Ms. Juliet Ramos 13


Nested List
 Code

Prepared by Ms. Juliet Ramos 14


Nested List
 Code

Prepared by Ms. Juliet Ramos 15


Changing Type Using CSS
Unordered List and Ordered List

Prepared by Ms. Juliet Ramos 16


Example: Unordered List – Bullet Type

Prepared by Ms. Juliet Ramos 17


Example: Unordered List – Bullet Type

Prepared by Ms. Juliet Ramos 18


Example: Ordered List – Alphabet

Prepared by Ms. Juliet Ramos 19


Example: Ordered List – Roman Numerals

Prepared by Ms. Juliet Ramos 20


Position the List Items

Prepared by Ms. Juliet Ramos 21


Styling the List with Colors

Prepared by Ms. Juliet Ramos 22


Centered with Padding & Margin List

Prepared by Ms. Juliet Ramos 23


Bordered Lists

Prepared by Ms. Juliet Ramos 24


List Width
 Lists have a 100% width by default. Use the width
property to change this.

Prepared by Ms. Juliet Ramos 25


References

 http://www.tutorialspark.com/html5/HTML5_Lists.php
 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul
 https://www.w3schools.com/html/html_lists.asp
 https://htmlreference.io/lists/

Prepared by Ms. Juliet Ramos 26

You might also like