WEBPROG1 – Web Programming 1 (HTML)                                                         Prelim Period                 ...
WEBPROG1 – Web Programming 1 (HTML)                                                      Prelim Period                    ...
WEBPROG1 – Web Programming 1 (HTML)                                                      Prelim Period                    ...
Upcoming SlideShare
Loading in...5
×

Handout4 lists

232

Published on

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

  • Be the first to like this

No Downloads
Views
Total Views
232
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Handout4 lists

  1. 1. WEBPROG1 – Web Programming 1 (HTML) Prelim Period Handout #4HTML Lists There are 3 different types of lists. Use <ol> for ordered lists, <ul> for unordered lists, and <dl> fordefinition lists. Use the type and start attributes to fine tune your lists accordingly. • <ul> - unordered list; bullets • <ol> - ordered list; numbers • <dl> - definition list; dictionaryHTML Ordered Lists Use the <ol> tag to begin an ordered list. Place the <li> (list item) tag between your opening <ol>and closing </ol> tags to create list items. Heres an example.Code:<h4 align="center">Goals</h4><ol><li>Find a Job</li><li>Get Money</li><li>Move Out</li></ol>Display: Goals 1. Find a Job 2. Get Money 3. Move Out Start your ordered list on any number besides 1 using the start attribute.Code:<h4 align="center">Goals</h4><ol start="4" ><li>Buy Food</li><li>Enroll in College</li><li>Get a Degree</li></ol>Display: Goals 4. Buy Food 5. Enroll in College 6. Get a DegreePrepared By: RICHARD F. ORPIANO Page 1 of 3
  2. 2. WEBPROG1 – Web Programming 1 (HTML) Prelim Period Handout #4HTML Ordered Lists Continued There are 4 other types of ordered lists. Instead of generic numbers you can replace them withroman numberals or letters, both capital and lower-case. Use the type attribute to change thenumbering.Code:<ol type="a"><ol type="A"><ol type="i"><ol type="I">Display: Lower-Case Letters Upper-Case Letters Lower-Case Numerals Upper-Case Numerals a. Find a Job A. Find a Job i. Find a Job I. Find a Job b. Get Money B. Get Money ii. Get Money II. Get Money c. Move Out C. Move Out iii. Move Out III. Move OutHTML Unordered Lists Create a bulleted list with the <ul> tag. There are three basic shapes for an unordered list: square,disc, and circle. The default bullet is the disc.Code:<h4 align="center">Shopping List</h4><ul><li>Milk</li><li>Toilet Paper</li><li>Cereal</li><li>Bread</li></ul>Display: Shopping List • Milk • Toilet Paper • Cereal • BreadCode:<ul type="square"><ul type="disc"><ul type="circle">Prepared By: RICHARD F. ORPIANO Page 2 of 3
  3. 3. WEBPROG1 – Web Programming 1 (HTML) Prelim Period Handout #4Code: type="square" type="disc" type="circle"  Milk • Milk o Milk  Toilet Paper • Toilet Paper o Toilet Paper  Cereal • Cereal o Cereal  Bread • Bread o BreadHTML Definition Term Lists Make definition lists as seen in dictionaries using the <dl> tag. These lists displace the term wordjust above the definition itself for a unique look. Its wise to bold the terms to displace them further. • <dl> - defines the start of the list • <dt> - definition term<dl><dt><b>Fromage</b></dt><dd>French word for cheese.</dd><dt><b>Voiture</b></dt><dd>French word for car.</dd></dt>Display:Fromage French word for cheese.Voiture French word for car.Prepared By: RICHARD F. ORPIANO Page 3 of 3

×