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 To create a webpage: Draw a mockup of your page design. Use photo-editing software to create the site images. Use an editor to create the HTML tags. Test and modify your design. Upload your HTML files and image files to a Web server.

4. CREATING A COMPLEX LIST To bake cookies: Take out the utensils you need: Mix your cookie dough: Put the dough on a cookie sheet: Bake: Enjoy:

5. CHANGING THE ORDERED LIST NUMBERING SCHEME Default List Go to the grocery store Get gas for the truck Stop at the bank Alphabetized List Go to the grocery store Get gas for the truck Stop at the bank Roman Numeral List Go to the grocery store Get gas for the truck Stop at the bank

6. CREATING AN UNORDERED (BULLETED) LIST HTML 5 Features Application caches: Think of cookies on steroids. Canvas: Create graphics and animations. Geolocation: Develop location-aware webpages. Video: Embed video as easy as embedding an image. Web Workers: Supports background processing to improve site performance.

7. CONTROLLING THE UNORDERED LIST APPEARANCE Default Bullet: Dogs Cats Horses Square Bullet: Dogs Cats Horses Disc Bullet: Dogs Cats Horses

8. USING A GRAPHIC FOR A BULLET Graphics Bullet: Dogs Cats Horses

9. CREATING A LARGE BULLET Graphics Bullet: Cheese Pepperoni Sausage

10. POSITIONING LIST CONTENT list-style-position:inside Take out the utensils you need: Mix your cookie dough: Put the dough on a cookie sheet: Bake: Enjoy: list-style-position:outside Take out the utensils you need: Mix your cookie dough: Put the dough on a cookie sheet: Bake: Enjoy:

11. CREATING A DEFINITION LIST Chapter Definitions Ordered List: 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. Unordered List: 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. List Item: An entry within an ordered or unordered list. To specify a list item in HTML, you use the <li> and </li> tag pair. Lorem Ipsum: An industry standard placeholder (or dummy) text graphics that designers can use within the pages they design until the actual content is available. Definition List: A list of terms and their meanings. To create a definition list in HTML, you use the <dl> and </dl> tag pair. Nested List: 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.

12. CREATING A NESTED LIST My Favorite Things: Food Pasta Pizza Nachos Leisure Cigars Wine Movie Night Places The Ranch Palm Springs Vegas

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 and, which you can use to create a numbered list. It also provides an unordered-list tag pair and, which you can use to create a bulleted list. HTML supports the and 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.