Ordered and Unordered Lists Web Design – Section 3-5 Part or all of this lesson was adapted from...

8
Ordered and Unordered Lists Web Design – Section 3-5 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course materials

Transcript of Ordered and Unordered Lists Web Design – Section 3-5 Part or all of this lesson was adapted from...

Page 1: Ordered and Unordered Lists Web Design – Section 3-5 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development.

Ordered and Unordered Lists

Web Design – Section 3-5

Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course materials

Page 2: Ordered and Unordered Lists Web Design – Section 3-5 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development.

Objectives

The Student will: Be able to create an ordered and

unordered list using HTML. Be able to apply the concepts of nesting.

Page 3: Ordered and Unordered Lists Web Design – Section 3-5 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development.

Lists

The most common HTML lists are either ordered lists <ol> or unordered lists <ul>. Ordered lists are typically displayed

with numbers Unordered lists are typically displayed

with bullets.

Page 4: Ordered and Unordered Lists Web Design – Section 3-5 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development.

Lists Lists are a great example of nested

HMTL tags. All lists begin with <ol> or <ul> List items all need to be included

between <li> and </li> The list is then ended with </ol> or

</ul> Think about indenting your lists to

clearly see the beginning and ending tags

Page 5: Ordered and Unordered Lists Web Design – Section 3-5 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development.

Example The list of the best baseball teams in

the Chicago area would be:<ol>

<li> <strong> CUBS! </strong></li><li> Kane County Cougars </li><li> Joliet Slammers </li><li> Schaumburg Flyers </li><li> Windy City ThunderBolts </li><li> White Sox </li>

</ol>

Page 6: Ordered and Unordered Lists Web Design – Section 3-5 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development.

Example

The result is…

Page 7: Ordered and Unordered Lists Web Design – Section 3-5 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development.

Summary

Ordered Lists <ol> and unordered lists <ul> and the list items are nested tags.

Indent and use white space to keep your code clean and to allow you to easily find opening and closing tags

Page 8: Ordered and Unordered Lists Web Design – Section 3-5 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development.

Rest of Today

Follow the directions on the handout to lists to your web page.