Scribd
Upload
35 views

Module 4: Inserting Unordered, Ordered and Description Lists Module 4: Inserting Unordered, Ordered and Description Lists

Unordered, ordered, and description lists can be created in HTML. Unordered lists use the <ul> tag and contain items that don't need a particular order. Ordered lists use the <ol> tag and are useful for presenting a series of steps. Description lists define terms and their descriptions using the <dl>, <dt>, and <dd> tags. CSS properties like list-style-type can control the appearance of list item markers. The type and start attributes also allow customizing ordered list numbering. Laboratory exercises provide practice inserting different list types in HTML documents.

Uploaded by

Just Me
Copyright
© © All Rights Reserved
Available Formats
Download as PPSX, PDF, TXT or read online on Scribd
35 views

Module 4: Inserting Unordered, Ordered and Description Lists Module 4: Inserting Unordered, Ordered and Description Lists

Unordered, ordered, and description lists can be created in HTML. Unordered lists use the <ul> tag and contain items that don't need a particular order. Ordered lists use the <ol> tag and are useful for presenting a series of steps. Description lists define terms and their descriptions using the <dl>, <dt>, and <dd> tags. CSS properties like list-style-type can control the appearance of list item markers. The type and start attributes also allow customizing ordered list numbering. Laboratory exercises provide practice inserting different list types in HTML documents.

Uploaded by

Just Me
Copyright
© © All Rights Reserved
Available Formats
Download as PPSX, PDF, TXT or read online on Scribd
You are on page 1/ 35

Module 4: Inserting

Unordered, Ordered and


Description Lists
HTML Lists
• There are 2 kinds of lists in HTML: unordered or
bulleted lists and ordered or numbered lists.
• The <ul> and </ul> tags are used to create
unordered or bulleted lists.
• The <ol> and </ol> tags are used to create ordered
lists or numbered lists.
• Items in the lists are added by using the <li> and
</li> tags.
Unordered Lists
• An unordered list contains a list of items that don’t
need to be in a particular order.
Activity 12
The CSS list-style-type property
• The list-style-type property is used to define the
style of the list item marker in unordered lists.
• The disc value sets the list item marker to a bullet
• The circle value sets the list item marker to a circle
• The square value sets the list item marker to a
square
• The none value will not display markers on list
items
Ordered Lists
• An ordered list is useful for presenting a series of
steps that the user should perform in order.
Activity 13
The type attribute
• The type attribute of the <ol> tag defines the list
item marker.
• type=“1” – The list item will be numbered with
numbers
• type=“A” – The list item will be numbered with
upper case letters
• type=“a” – The list item will be numbered with
lower case letters
The type attribute
• type=“I” – The list item will be numbered with
upper case roman numbers
• type=“i” – The list item will be numbered with
lower case roman numbers
The start attribute
• 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.
Laboratory
Exercise 8
Inserting Lists
Instructions
• Create a new HTML file and save it as
laboratory8.html
• The title should be Laboratory 8
• Create a <h1> heading that will display “Types of
Websites”
• Create another <h1> heading that will display
“Research Chapters”
• Both headings should be written using “Calibri”
Instructions
• Using unordered and ordered lists, create a web
page that will display the output given next slide.
• All list items should be written using “Georgia”
Inserting
Description
Lists
HTML Description List
• HTML also supports description lists.
• A description list is a list of terms, with a
description of each term.
• The <dl> and </dl> tags define the description list.
• The <dt> and </dt> tags define the term (name).
• The <dd> and </dd> tags describe each term.
Activity 14
Laboratory
Exercise 9
Inserting Description Lists
Instructions
• Create a new HTML file and save it as laboratory9.html
• The title should be Laboratory 9
• Create a <h1> heading that will display Chapter
Definitions
• The heading should be centered in the screen and
should be colored “MediumSeaGreen”.
• All description terms should be colored “Tomato”
• Using description lists, create a web page that will
display the output given next slide.

You might also like