Lesson 9
How to List items
Unordered List
Ordered List
Definition List
Color
chart: Click here to chose color for your background.
Practice HTML Use
this feature or your Notepad.
How to List Items?
There are two types of List.
1. Unordered List
2. Ordered List
1.
Unordered List:
For unordered list you'll need <ul>
tags. It has opening and closing tags like any other tags.
This tag created bulleted list.
<ul>
</ul>
Now for each and every new item you must
use one more tag. It is called <li>
tag. So now
your <ul> tag will look like this. Please
note <li> tag does not need closing tags.
<ul>
<li> Item one
<li> Item two
</ul>
Ok now let's see how it works. You need
to copy the basic HTML tag as we've done so far. Now let's
add <ul> tag in it.
|
<html>
<head>
<title>
My Web Page
</title>
</head>
<body>
<p>I
am going for shopping so I'll buy.</p>
<ul>
<li> Toys
<li>Cloths
<li> Grocery
<li>Vegitables
<li>Ice Cream
</ul>
</body>
</html>
|
Now your Unordered List will look like
this. You can see in pic that
<ul> tag has created bullets in from of the
list items.
Ordered
List:
This type of list creates numbers instead
of buttlet. That's why it is called Ordered List. This type
of list uses <ol> tag
instead of <ul>. The rest
of the tags will be the same as before it means we'll use
<li> tag with each line ot item. This tag also needed
closing tag too.
<ol>
<li>
</ol>
Ok let's see how it works. Copy and paste
the same basic Html tags and we'll replace the <ul>
tags with <ol> tag.
<html>
<head>
<title>
My Web Page
</title>
</head>
<body>
<p>I
am going for shopping so I'll buy.</p>
<ol>
<li> Toys
<li>Cloths
<li> Grocery
<li>Vegitables
<li>Ice Cream
</ol>
</body>
</html> |
Now your list should look like this.
Please note it has replaced the bullets
with numbers.
Definition List:
There is yet another list which is called
Definition List. The <dl>
tag is used for this type of list. Definition List should
have Definition Title <dt>
tag. And we'll add another tag <dd>
inside of it. In this tag we canl
add the contents of the title.
<dl>
<dt>Definition title.
<dd>Here goes the content
related to the title.
</dl>
<html>
<head>
<title>
My Web Page
</title>
</head>
<body>
<dl>
<dt> A week has 7 days in it.
<dd>Monday, Tuesday, Wednesday, Thursday, Friday,
Saturday and Sunday.
</dl>
</body>
</html> |
Now the Definition List will look like
this.
