3.17. Constructing HTML lists in two easy steps
Creating an HTML list requires two elements that, when used together, form the list. The first element is used to mark up each list item. The second determines what kind of list you're creating: ordered or unordered.
Let's step through creating Tony's list of cities in HTML.
3.17.1. Step One:
Put each list item in an <li
>
element.
To create a list, you put each list item in its own <li> element, which means enclosing the content in an opening <li> tag and a closing </li> tag. As with any other HTML element, the content between the tags can be as short or as long as you like and broken over multiple lines.
Locate this HTML in your "journal.html" file and keep up with the changes as we make them.
We're just showing a fragment of the HTML from Tony's journal here.
<h2>August 20, 2005</h2>
<img src="images/segway2.jpg" />
<p>
Well I've made it 1200 miles already, and I passed
through some interesting places on the way:
</p>
<li>Walla Walla, WA</li>
First move the list items outside of the paragraph. The list is going to stand on its own.
<li>Magic City, ID</li>
...and then enclose each list item with an <li>, </li> set of tags.
<li>Bountiful, UT</li>
<li>Last Chance, CO</li>
<li>Why, AZ</li>
Each of these <li> elements will become an item in the list.
<li>Truth or Consequences, NM</li>
<h2>July 14, 2005</h2>
<p>
I saw some Burma Shave style signs on the side of
the road today:
</p>
3.17.2. Step Two:
Enclose your list items with either the <ol
>
or <ul>
element.
If you use an <ol> element to enclose your list items, then the items will be displayed as an ordered list; if you use <ul>, the list will be displayed as an unordered list. Here's how you enclose your items in an <ol> element.
Again, we're just showing a fragment of the HTML from Tony's journal here.
<h2>August 20, 2005</h2>
<img src="images/segway2.jpg" />
<p>
Well I've made it 1200 miles already, and I passed
through some interesting places on the way:
</p>
<ol>We want this to be an ordered list, because Tony
visited the cities in a specific order. So we use an <ol> opening tag.
<li>Walla Walla, WA</li>
<li>Magic City, ID</li>
<li>Bountiful, UT</li>
<li>Last Chance, CO</li>
<li>Why, AZ</li>
<li>Truth or Consequences, NM</li>
All the list items sit in the middle of the <ol> element and become its content.
</ol>And here we close the <ol> element.
<h2>July 14, 2005</h2>
<p>
I saw some Burma Shave style signs on the side of
the road today:
</p>
Is <ol> a block element or inline? What about <li>?
|
Make it Stick
HTML
is for
structure
Use
ul or ol
for lists
Wash
the
cat
unordered list = ul
ordered list = ol
list item = li
|
| 
No comments:
Post a Comment