Lists Module 2: XHTML Basics LESSON 8

Module 2: XHTML Basics LESSON 8 Lesson Overview In this lesson, you will learn to:  Create lists using XHTML code.  Improve readability of a Web page using lists.

Module 2: XHTML Basics LESSON 8 Guiding Questions for Lesson 7  Find a Web page that uses a list. How does a list impact the readability of the page?  Give 2 examples of how a list could be used in a Web page or Web site on another topic?

Module 2: XHTML Basics LESSON 8 Types of Lists  Three types of lists which will be covered in this lesson:  Unordered lists  Ordered lists  Definition lists

Module 2: XHTML Basics LESSON 8 Unordered Lists  Similar to bulleted lists in word processing  Items in the list have no special order  Changing the order would not change the meaning of the information  Example: A listing of your school subjects:  Science  Math  Reading

Module 2: XHTML Basics LESSON 8 Creating an Unordered List  … tags are used to designate the beginning and ending of an unordered list  … tags are used to identify items to be placed in the list  To create our list of school subjects, use the following XHTML code:   Science  Math  Reading 

Module 2: XHTML Basics LESSON 8 Ordered Lists  Use a numbering or ordering system to create meaning  Changing the order changes the meaning  For example: A list of the steps to make a peanut butter sandwich.  Changing the order of the steps changes the outcome of the sandwich

Module 2: XHTML Basics LESSON 8 Creating an Ordered List  … tags are used to designate the beginning and ending of an ordered list  The same tag identifies items in the list  Code for making a peanut butter sandwich: Get a slice of bread. Open a jar of peanut butter. Spread peanut butter on the slice of bread with a knife. Place another slice of bread on top. Eat the sandwich.

Module 2: XHTML Basics LESSON 8 Definition Lists  Used to define terms  Different from unordered and ordered lists  Has two parts – the term and the definition  Labeling of the parts is very important

Module 2: XHTML Basics LESSON 8 Creating a Definition List  A … tag identifies the beginning and ending of the list  A … tag identifies the terms  A … tag identifies the definitions  Example of definition list coding: format the design and layout of a page source code the HTML code that creates a Web page Web page a file written in HTML, or other Web publishing language

Module 2: XHTML Basics LESSON 8 Lesson Review  Describe the code needed to create each of the following:  Unordered list  Ordered list  Definition list

Module 2: XHTML Basics LESSON 8 Practice: Lists Create the following changes in your “Tags and Attributes” Web page:  An unordered list  An ordered list  A definition list  Challenge Activity: Add underlining as appropriate.