1 / 12

Lists

Lists. LESSON 8. Module 2: XHTML Basics. Lesson Overview In this lesson, you will learn to: Create lists using XHTML code. Improve readability of a Web page using lists. Guiding Questions for Lesson 7 Find a Web page that uses a list. How does a list impact the readability of the page?

crobyn
Download Presentation

Lists

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Lists LESSON 8 Module 2: XHTML Basics

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

  3. 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?

  4. Types of Lists Three types of lists which will be covered in this lesson: Unordered lists Ordered lists Definition lists

  5. 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

  6. 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>

  7. 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

  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>

  9. 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

  10. 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>

  11. Lesson Review Describe the code needed to create each of the following: Unordered list Ordered list Definition list

  12. 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.

More Related