Castro Chapter 15
Upcoming SlideShare
Loading in...5
×
 

Castro Chapter 15

on

  • 434 views

 

Statistics

Views

Total Views
434
Views on SlideShare
434
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Castro Chapter 15 Castro Chapter 15 Presentation Transcript

  • LISTSHTML5 & CSS Visual Quickstart GuideChapter 15
  • 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
  • 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>
  • 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>
  • 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
  • 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>
  • 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;}
  • 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;}
  • Setting All List-Style Properties at Once• Can combine different list-style properties into one• li {list-style: inside circle;}
  • 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>