Ordered and Unordered Lists Web Design – Section 3-5 Part or all of this lesson was adapted from...
-
Upload
ursula-tucker -
Category
Documents
-
view
216 -
download
3
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.](https://reader038.fdocuments.us/reader038/viewer/2022110210/56649e735503460f94b72e35/html5/thumbnails/1.jpg)
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.](https://reader038.fdocuments.us/reader038/viewer/2022110210/56649e735503460f94b72e35/html5/thumbnails/2.jpg)
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.](https://reader038.fdocuments.us/reader038/viewer/2022110210/56649e735503460f94b72e35/html5/thumbnails/3.jpg)
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.](https://reader038.fdocuments.us/reader038/viewer/2022110210/56649e735503460f94b72e35/html5/thumbnails/4.jpg)
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.](https://reader038.fdocuments.us/reader038/viewer/2022110210/56649e735503460f94b72e35/html5/thumbnails/5.jpg)
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.](https://reader038.fdocuments.us/reader038/viewer/2022110210/56649e735503460f94b72e35/html5/thumbnails/6.jpg)
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.](https://reader038.fdocuments.us/reader038/viewer/2022110210/56649e735503460f94b72e35/html5/thumbnails/7.jpg)
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.](https://reader038.fdocuments.us/reader038/viewer/2022110210/56649e735503460f94b72e35/html5/thumbnails/8.jpg)
Rest of Today
Follow the directions on the handout to lists to your web page.