Lists

293 views

Published on

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
293
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Lists

  1. 1. Working with HTML ListsMonday, October 24, 2011
  2. 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. 3. Ordered List Example 1 The code is: <ol> <li>Earth <li>Wind </ol> Here is how it looks in a browser: 1. EarthMonday, October 24, 2011 2. Wind
  4. 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. WaterMonday, October 24, 2011
  5. 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. PlutoMonday, October 24, 2011
  6. 6. Nesting Ordered ListHow 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. 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. 8. Unordered List Example 1 The code is: <ul> <li>Fire <li>Water </ul> Here is how it looks in a browser: • Fire • WaterMonday, October 24, 2011
  9. 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  WindMonday, October 24, 2011
  10. 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. 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. 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

×