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
