Embed Size (px)
DESCRIPTION
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?
Citation preview
ListsLists
Module 2: XHTML Basics
LESSON 8LESSON 8
Module 2: XHTML Basics
LESSON 8LESSON 8
Lesson OverviewIn this lesson, you will learn to: Create lists using XHTML code. Improve readability of a Web page using lists.
Module 2: XHTML Basics
LESSON 8LESSON 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 8LESSON 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 8LESSON 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 8LESSON 8
Creating an Unordered List <ul>…</ul> tags are used to designate the beginning and ending of an
unordered list <li>…</li> tags are used to identify items to be placed in the list To create our list of school subjects, use the following XHTML code: <ul> <li>Science</li> <li>Math</li> <li>Reading</li> <ul>
Module 2: XHTML Basics
LESSON 8LESSON 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 8LESSON 8
Creating an Ordered List <ol>…</ol> tags are used to designate the beginning and ending
of an ordered list The same <li> tag identifies items in the list Code for making a peanut butter sandwich:
<ol><li>Get a slice of bread.</li><li>Open a jar of peanut butter.</li><li>Spread peanut butter on the slice of bread with a knife.</li><li>Place another slice of bread on top.</li><li>Eat the sandwich.</li></ol>
Module 2: XHTML Basics
LESSON 8LESSON 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 8LESSON 8
Creating a Definition List A <dl>…</dl> tag identifies the beginning and ending of the list A <dt>…</dt> tag identifies the terms A <dd>…</dd> tag identifies the definitions Example of definition list coding:
<dl><dt>format</dt><dd>the design and layout of a page</dd><dt>source code</dt><dd>the HTML code that creates a Web page</dd><dt>Web page</dt><dd>a file written in HTML, or other Web publishing language</dd></dl>
Module 2: XHTML Basics
LESSON 8LESSON 8
Lesson Review Describe the code needed to create each of the following: Unordered list Ordered list Definition list
Module 2: XHTML Basics
LESSON 8LESSON 8
Practice: ListsCreate 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.
