2. Ordered Lists
• An ordered list is a list of items which is
marked with numbers, and/or letters. It is
also known as sequential list.
Ordered List Tags
<ol> and </ol>
It is the tag that creates an ordered list.
<li>
Each list item starts with this tag.
Ordered List Attribute
Type
1, A, a, I, i Monday, October 24, 2011
3. Ordered List Example 1
The code is:
<ol>
<li>Earth
<li>Wind
</ol>
Here is how it looks in a browser:
1. Earth
Monday, October 24, 2011
2. Wind
4. Ordered List Example 2
The code is:
<ol type=A>
<li>Fire
<li>Water
</ol>
Here is how it looks in a browser:
A. Fire
B. Water
Monday, October 24, 2011
5. Nesting Ordered Lists
Our desired output is:
A. Greek Gods
1. Zeus
2. Poseidon
3. Hades
B. Roman Gods
1. Jupiter
2. Neptune
3. Pluto
Monday, October 24, 2011
6. Nesting Ordered List
How do we do the codes?
<ol type=A>
<li>Greek Gods
<ol type=1>
<li>Zeus
<li>Poseidon
<li>Hades
</ol>
<li>Roman Gods
<ol type=1>
<li>Jupiter
<li>Neptune
<li>Pluto
</ol>
</ol> Monday, October 24, 2011
7. Unordered List
• An unordered list is a list of items which is
marked with bullets; typically small black
circles.
Unordered List Tags
<ul> and </ul>
The unordered list starts with the <ul> tag.
<li>
Each list item starts with this tag.
Unordered List Attribute
Type
disc [●], circle [○], square [■] Monday, October 24, 2011
8. Unordered List Example 1
The code is:
<ul>
<li>Fire
<li>Water
</ul>
Here is how it looks in a browser:
• Fire
• Water
Monday, October 24, 2011
9. Unordered List Example 2
The code is:
<ul type=square>
<li>Earth
<li>Wind
</ul>
Here is how it looks in a browser:
Earth
Wind
Monday, October 24, 2011
10. Definition List
• A definition list is a list of terms with
description. It is also called as Glossary List.
Definition List Tags
<dl> and </dl>
The tag that creates the definition list.
<dt>
Each term starts with this tag (definition term).
<dd>
Each description starts with this tag (data description)
Monday, October 24, 2011
11. Definition List Example 1
The code is:
<dl>
<dt>Zeus
<dd>God of the sky. King of
Olympus.
</dl>
Here is how it looks in a browser:
Zeus
God of the sky. King of Olympus.
Monday, October 24, 2011
12. Definition List Example 2
The code is:
<dl>
<dt>Zeus
<dd>God of the sky. King of Olympus
<dt>Hera
<dd>Goddess of marriage. Wife and sister
of Zeus.
</dl>
Here is how it looks in a browser:
Zeus
God of the sky. King of Olympus.
Hera
Goddess of marriage. Wife and sister of Zeus.
Monday, October 24, 2011
