HTML Lists

topicSix

IMD311 – Introduction to Web Content Management & Design

MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my

WEB.DESIGN
 WEB.DESIGN
Learning Objectives

IMD311 – Introduction to Web Content Management & Design

• At the end of this chapter the students
should be able to:
– Specify different types of lists in web

MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my

page.
– Using different types of lists appropriately
– Customized different types of list in the
web page.
 WEB.DESIGN
Introduction

IMD311 – Introduction to Web Content Management & Design

• To create a bulleted list you need to
add a <ul> and a </ul> tag at the
beginning and the end of the list.
• Numbered lists have <ol> tags instead

MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my

of <ul> tags.
• To separate single list items we must
use <li> and </li> tags.
• There are special settings that you can
use to customize the lists on your page.
 IMD311 – Introduction to Web Content Management & Design

MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my

WEB.DESIGN
 WEB.DESIGN
Bulleted List Formatting output

IMD311 – Introduction to Web Content Management & Design

• Just as you can change the numbering
style for an ordered list, you can
change the default bullet style for an

MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my

unordered list with the type attribute.
• The three possible values for an
unordered list include:
 IMD311 – Introduction to Web Content Management & Design

MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my

WEB.DESIGN
 WEB.DESIGN
Bulleted List Formatting output

IMD311 – Introduction to Web Content Management & Design

• An unordered list is used when list
items do not have any particular order.
• An unordered list is created with the

MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my

<ul> tag. <ul> tag also is a two sided tag
and closed with </ul> tag.
• You can also change the bullet type for
individual list items by setting the type
attribute with the <li> tag:
 IMD311 – Introduction to Web Content Management & Design

MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my

WEB.DESIGN
 WEB.DESIGN
Numbered (Ordered) Lists

IMD311 – Introduction to Web Content Management & Design

• An ordered list is a numbered list. An
ordered list can be used whenever a list
requires sequence.
• Let's assume we want to create an

MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my

ordered list that displays your favorites
vacation places, the most favorites is listed
first and the next most important is listed
second, and so on.
• To create such list, we would use an
ordered list as:
 IMD311 – Introduction to Web Content Management & Design

MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my

WEB.DESIGN
 WEB.DESIGN
Numbered (Ordered) Lists

IMD311 – Introduction to Web Content Management & Design

• The <ol> tag starts an ordered list. The
<ol> tag is a two-sided tag, which means
that it also requires a closing tag </ol>.
• The </ol> tag instructs the browser that

MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my

the ordered list has ended.
• The <li> tag is used to list each item in the
list.
• The <li> tag is also a two-sided tag.
• Thus each item that needs to be placed in
a list, should be placed inside the <li> and
</li> tag
 IMD311 – Introduction to Web Content Management & Design

MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my

WEB.DESIGN
Change numbering style for an

WEB.DESIGN
IMD311 – Introduction to Web Content Management & Design
ordered list
• The <ol> tag includes the type attribute
that can be used to change numbering
style for an ordered list.

MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my

• This attribute can be set to one of the
following choices:
 IMD311 – Introduction to Web Content Management & Design

MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my

WEB.DESIGN
 Changing the list value for an

WEB.DESIGN
IMD311 – Introduction to Web Content Management & Design
ordered list
• With the start attribute you can set the value
of the first element in the list.
• For example, if you wanted to start your list
with the number 5, set the start attribute to 5

MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my

and the type attribute to 1, if necessary.
• You can also use the start attribute to change
the list value of the first element for
alphabetical or Roman numerical values.
• If, for example, you wanted to start your
ordered list with the letter C, set the type
attribute to A and the start attribute to 3.
 IMD311 – Introduction to Web Content Management & Design

MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my

WEB.DESIGN
 WEB.DESIGN
Custom Markers

IMD311 – Introduction to Web Content Management & Design

• If you want your own unique markers you
can easily use your own image.
• You should know that in order for the
image to be visible, the image must be

MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my

uploaded to the Internet (or within your
folder), either to your own domain, to
your blog or to one of the free picture
hosting sites.
• Markers are approximately 15 x 15 pixels
in size by default
 WEB.DESIGN
Custom Markers

IMD311 – Introduction to Web Content Management & Design

• If your marker image is larger than the
‘default size’, some browsers will overlap
them.
• In the code, there should be no spaces

MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my

between url and the opening ( ).
• You should use either relative or absolute
URLs for the marker location.
• To use custom marker, you must add a
style attribute to the <li> tag:
 WEB.DESIGN
Custom Markers

IMD311 – Introduction to Web Content Management & Design

• You can use custom markers for the
whole list or for only special lines of the
list.

MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my

• You can also remove custom markers
by using this code in the style sheet:
 IMD311 – Introduction to Web Content Management & Design

MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my

WEB.DESIGN
 How to Control Where Markers

WEB.DESIGN
IMD311 – Introduction to Web Content Management & Design
Hang
• By default all lists are indented from the
left margin.
• However, you can have your markers
either begin halfway to the right of the

MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my

starting point or flush with the rest of the
text.
• This last ‘hang’ is referred to as ‘inside’. To
control where your markers hang, you will
need to include this bit of code for the
desired list or list item:
 WEB.DESIGN
IMD311 – Introduction to Web Content Management & Design
• Place in the above tag denotes the
position.
• If you want the markers to begin

MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my

halfway to the right of the starting
point, you would use ‘inside‘ for place.
• However, if you wanted the markers to
display to the left of the list item text
you would use ‘outside’ (default).
 IMD311 – Introduction to Web Content Management & Design

MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my

WEB.DESIGN
 IMD311 – Introduction to Web Content Management & Design

MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my

WEB.DESIGN
 WEB.DESIGN
Definition Lists

IMD311 – Introduction to Web Content Management & Design

• Definition lists group terms and
definitions into a single list require
three different elements to complete

MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my

the list:
 WEB.DESIGN
Definition Lists

IMD311 – Introduction to Web Content Management & Design

• Definition list is used for displaying terms
and each followed by a definition list.
• A definition list starts with the <dl> tag.
• Each term in the definition list is listed

MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my

with the <dt> tag.
• Finally, the definition for the term is listed
with the <dd> tag.
• You can have as many terms (defined by
<dt>) in a list as you need.
 WEB.DESIGN
IMD311 – Introduction to Web Content Management & Design
• Each term can have one or more
definitions (defined by <dd>).
• To create a definition list with two

MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my

items requires elements and content in
the following order:
 IMD311 – Introduction to Web Content Management & Design

MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my

WEB.DESIGN
 IMD311 – Introduction to Web Content Management & Design

MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my

WEB.DESIGN
 IMD311 – Introduction to Web Content Management & Design

MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my

WEB.DESIGN
 WEB.DESIGN
Nested list

IMD311 – Introduction to Web Content Management & Design

• Lists can be nested, meaning one list
can be placed inside of another.
• A nested list, for example, can be used

MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my

to create an outline.
• The following shows an example of a
nested list:
 IMD311 – Introduction to Web Content Management & Design

MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my

WEB.DESIGN