Castro Chapter 15


Published on

Published in: Education
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Castro Chapter 15

  1. 1. LISTSHTML5 & CSS Visual Quickstart GuideChapter 15
  2. 2. Lists in HTML• HTML provides a way to create lists of items• Plain lists• Numbered lists• Bulleted lists• List of descriptions• Also possible to nest one or more lists inside another one• Lists formed by principal element to specify what sort of list youcreate• ul – Unordered list• ol – Ordered list• dl – Description list (formerly definition list)• Secondary element specifies what sort of list item• li for list item in ol or ul• dt for term in dl• dd for description in dl
  3. 3. Creating Ordered Lists• Ordered list is useful for step-by-step instructions• Also useful for creating an outline• Also the proper choice for marking up breadcrumbnavigation• Example:<h1>Making a PB&J Sandwich</h1><ol><li>Get two slices of bread</li><li>Spread peanut butter on one slice</li><li>Spread jelly on the other slice</li><li>Put the two slices together</li></ol>
  4. 4. Creating Unordered Lists• Unordered lists are most widely used lists on Web• …because they’re used to mark up navigation• Also useful for lists of features, parts lists, etc.• Example:<h1>What You Need for a PB&J Sandwich</h1><ul><li>2 slices of bread</li><li>Peanut Butter</li><li>Jelly</li><li>Butter knife</li><li>Spoon</li></ul>
  5. 5. Choosing Your Markers• You can choose what sort of markers appear to the left of eachlist item• Bullets• Numbers• Images• Do this via CSS property list-style-type: marker• marker can be one of the following:• disc• circle• square• decimal• upper-alpha• lower-alpha• upper-roman• none
  6. 6. Choosing Where to Start List Numbering• By default, numbered list begins with 1• Might want to start somewhere else, though• Change this with start attribute on the ol tag• <ol start=“3”> would start ordered list at 3• You can also change numbering of a specific list item• <ol start=“2”><li>Unscrew the old bulb</li><li value=“5”>Screw in the new bulb</li><li>Plug in the lamp and turn it on</li></ol>
  7. 7. Using Custom Markers• Can create your own custom marker with an image• Don’t have to change your HTML, just the CSS• First, turn off normal markers• Then, set background property for li elements to desired image• ul {list-style: none;margin-left: 0;padding-list: 15px;}li {background: url(arrow-right.png) no-repeat 02px;padding-list: 25px;}
  8. 8. Controlling Where Markers Hang• By default, lists are indented from left margin• Markers can begin either halfway to the right of that point(default) or flush with the rest of the text• To make markers flush with the text:li {list-style-position: inside;}
  9. 9. Setting All List-Style Properties at Once• Can combine different list-style properties into one• li {list-style: inside circle;}
  10. 10. Creating Description Lists• Used for describing association between names (orterms) and values in groups• Previously called definition lists, now known asdescription lists• <h1>List of Horror Movie Legends</h1><dl><dt>Boris Karloff</dt><dd>Best known for his role in<cite>Frankenstein</cite>, his real namewas William Henry Pratt.</dd><dt>Christopher Lee</dt><dd>Took a bite out of audiences as Dracula</dd></dl>