Download presentation
Presentation is loading. Please wait.
1
Chapter 4 Presenting Lists
2
Learning Objectives How to create an ordered list, which is sometimes called a numbered list How to create an unordered list, which is sometimes called a bulleted list How to control the appearance of the unordered list bullet How to use a graphic for a custom bullet How to position list content How to create a definition list consisting of terms and their meanings How to nest one list within another
3
Creating an ordered list
<!DOCTYPE html> <html> <body> <p>To create a webpage:</p> <ol> <li>Draw a mockup of your page design.</li> <li>Use photo-editing software to create the site images.</li> <li>Use an editor to create the HTML tags.</li> <li>Test and modify your design.</li> <li>Upload your HTML files and image files to a Web server.</li> </ol> </body> </html>
4
Creating a complex list
<!DOCTYPE html> <html> <body> <p>To bake cookies:</p> <ol> <li>Take out the utensils you need: <br/><img height="100" width="200" src="utensils.jpg"/></li> <li>Mix your cookie dough: <br/> <img height="100" width="200" src="dough.jpg"/></li> <li>Put the dough on a cookie sheet: <br/> <img height="100" width="200" src="cookiesheet.jpg"/></li> <li>Bake: <br/> <img height="100" width="200" src="bake.jpg"/></li> <li>Enjoy: <br/> <img height="100" width="200" src="enjoy.jpg"/></li> </ol> </body> </html>
5
Changing the ordered list numbering scheme
<!DOCTYPE html> <html> <body> <p>Default List</p> <ol> <li>Go to the grocery store</li> <li>Get gas for the truck</li> <li>Stop at the bank</li> </ol> <p>Alphabetized List</p> <ol style="list-style-type: upper-alpha"> <li>Go to the grocery store</li> <li>Get gas for the truck</li> <li>Stop at the bank</li> </ol> <p>Roman Numeral List</p> <ol style="list-style-type: upper-roman"> <li>Go to the grocery store</li> <li>Get gas for the truck</li> <li>Stop at the bank</li> </ol> </body> </html>
6
Creating an unordered (bulleted) list
<!DOCTYPE html> <html> <body> <p>HTML 5 Features</p> <ul> <li>Application caches: Think of cookies on steroids. </li> <li>Canvas: Create graphics and animations. </li> <li>Geolocation: Develop location-aware webpages.</li> <li>Video: Embed video as easy as embedding an image. </li> <li>Web Workers: Supports background processing to improve site performance. </li> </ul> </body> </html>
7
Controlling the unordered list appearance
<!DOCTYPE html> <html> <body> <p>Default Bullet:</p> <ul> <li>Dogs</li> <li>Cats</li> <li>Horses</li> </ul> <p>Square Bullet:</p> <ul style="list-style-type: square"> <li>Dogs</li> <li>Cats</li> <li>Horses</li> </ul> <p>Disc Bullet:</p> <ul style="list-style-type: circle"> <li>Dogs</li> <li>Cats</li> <li>Horses</li> </ul> </body> </html>
8
Using a graphic for a bullet
<html> <body> <p>Graphics Bullet:</p> <ul style="list-style-image: url('bullet.jpg')"> <li>Dogs</li> <li>Cats</li> <li>Horses</li> </ul> </body> </html>
9
Creating a large bullet
<!DOCTYPE html> <html> <body> <p>Graphics Bullet:</p> <ul style="list-style-image: url('pizza.jpg')"> <li>Cheese</li> <li>Pepperoni</li> <li>Sausage</li> </ul> </body> </html>
10
Positioning list content
<!DOCTYPE html> <html> <body> <p>list-style-position: inside</p> <ol style="list-style-position: inside"> <li>Take out the utensils you need: <br/><img height="100" width="200" src="utensils.jpg"/></li> <li>Mix your cookie dough: <br/> <img height="100" width="200" src="dough.jpg"/></li> <li>Put the dough on a cookie sheet: <br/> <img height="100" width="200" src="cookiesheet.jpg"/></li> <li>Bake: <br/> <img height="100" width="200" src="bake.jpg"/></li> <li>Enjoy: <br/> <img height="100" width="200" src="enjoy.jpg"/></li> </ol> <p>list-style-position: outside</p> <ol style="list-style-position: outside"> <li>Take out the utensils you need: <br/> <img height="100" width="200" src="utensils.jpg"/></li> <li>Mix your cookie dough: <br/> <img height="100" width="200" src="dough.jpg"/></li> <li>Put the dough on a cookie sheet: <br/> <img height="100" width="200" src="cookiesheet.jpg"/></li> <li>Bake: <br/> <img height="100" width="200" src="bake.jpg"/></li> <li>Enjoy: <br/> <img height="100" width="200" src="enjoy.jpg"/></li> </ol> </body> </html>
11
Creating a definition list
<!DOCTYPE html> <html> <body> <p>Chapter Definitions</p> <dl> <dt>Ordered List:</dt> <dd>Also called a numbered list; a list of items that appear in alphabetic or numerical order. To create an ordered list in HTML, you use the <ol> and </ol> tag pair.</dd> <dt>Unordered List:</dt> <dd>Also called a bulleted list; a list of items normally preceded by a circular bullet that appears in no particular order. To create an unordered list in HTML, you use the <ul> and </ul> tag pair.</dd> <dt>List Item:</dt> <dd>An entry within an ordered or unordered list. To specify a list item in HTML, you use the <li> and </li> tag pair.</dd> <dt>Lorem Ipsum:</dt> <dd>An industry standard placeholder (or dummy) text graphics that designers can use within the pages they design until the actual content is available.</dd> <dt>Definition List:</dt> <dd>A list of terms and their meanings. To create a definition list in HTML, you use the <dl> and </dl> tag pair.</dd> <dt>Nested List:</dt> <dd>A list of items that appear within another list of items. To create a nested list in HTML, you place an ordered or unordered list within a <li> and </li> tag pair of a surrounding (outer) list.</dd> </dl> </body> </html>
12
Creating a nested list <html> <body> <p>My Favorite Things:</p> <ul> <li>Food <ol><li>Pasta</li><li>Pizza</li><li>Nachos</li> </ol></li> <li>Leisure<ol> <li>Cigars</li><li>Wine</li><li>Movie Night</li> </ol></li> <li>Places<ol><li>The Ranch</li><li>Palm Springs</li><li>Vegas</li> </ol></li> </ul> </body> </html>
13
Real world: lorem ipsum
14
summary Across the Web, developers make extensive use of lists of data within the webpages they create—normally numbered lists or bulleted lists. A numbered list precedes the list items with a number, representing order. You might use a numbered list to present the steps a user must perform to accomplish a task. An unordered list precedes the items with a bullet. Items in an unordered list often appear in no particular order. HTML provides an ordered-list tag pair <ol> and </ol>, which you can use to create a numbered list. It also provides an unordered-list tag pair <ul> and </ul>, which you can use to create a bulleted list. HTML supports the <dl> and </dl> tag pair, which lets you create a definition list that consists of terms and their meanings. You might use this, for example, to create a glossary of key terms.
Similar presentations
