Learning HTML
For Kids!
To create lists, use these tags:
<ol>…</ol>
<ul>…</ul>
<li>…</li>
6. Lists
People are usually in a hurry when using the Web. This behavior may be a carry over from when folks used to pay for the actual time spent on the Internet. Back in the olden days, say four years ago, users did not have the luxury of unlimited time on the Web. So they would quickly go online, get the information they needed and sign off. In this way, the user just paid for the little time used.
Things are different today. Mostly everyone has unlimited time access to the Web, but the behavior hasn’t changed much. People are still in a hurry, and they don’t like to read a lot of text. So putting your information in the form of a list seems to help.
Lists come in a variety of forms with most either numbered or bulleted. The numbered lists are called ordered lists and the bulleted lists are unordered lists.
Lists are nested. There is a tag that identifies the type of list, like numbered or bulleted. Then within that tag there is another tag that itemizes the list. Maybe some definitions would help.
<ol>…</ol>
The ordered list is a container tag and is used for numbered lists.
<ul>…</ul>
The unordered list is a container tag and is used for bulleted lists.
<li>…</li>
The listed item tag is a container tag and is nested
within the ordered or unordered tags.
Here is an example of the differences between ordered and unordered lists.
An ordered (numbered) list goes like this:
<ol>
<li>My first item on the list.</li>
<li>My second item on the list.</li>
<li>My third item on the list.</li>
<li>My fourth item on the list.</li>
</ol>
In the browser it will appear like this:
- My first item on the list.
- My second item on the list.
- My third item on the list.
- My fourth item on the list.
An unordered (bulleted) list goes like this:
<ul>
<li>My first
item on the list.</li>
<li>My second item on the list.</li>
<li>My third item on the list.</li>
<li>My fourth item on the list.</li>
</ul>
In the
browser it will appear like this:
Let's apply what we've learned
Step 1 Load your text editor once more and open our current HTML document: firstpage.html.
Step
2 Your file
should appear as below:
<html>
<head>
<title>This is my first web page.</title>
</head>
<body>
<h1>Hello world.</h1> This is my first web page. There's more
to come.
<hr>
<p>
I am
learning how to use the horizontal rule, headline, paragraph and line break tags. Writing
HTML isn't as hard as it appears.
</p>
<p>Here's a list of items I like about school:<br>
Science<br>
Reading<br>
But most of all--recess!<br>
</p>
</body>
</html>
Step 3. Let's add one of the lists noted above. Enter the tags and text that appear in red.
<html>
<head>
<title>This is my first web page.</title>
</head>
<body>
<h1>Hello world.</h1> This is my first web page. There's more
to come.
<hr>
<p>
I am
learning how to use the horizontal rule, headline, paragraph and line break tags. Writing
HTML isn't as hard as it appears.
</p>
<p>Here's a list of items I like about school:<br>
Science<br>
Reading<br>
But most of all--recess!<br>
</p>
<p>I can also create lists using numbers and bullets. Here is an example of a list with numbers:
<ol>
<li>My first item on the list.</li>
<li>My second item on the list.</li>
<li>My third item on the list.</li>
<li>My fourth item on the list.</li>
</ol>
</p>
</body>
</html>
Step 4 Save your file.
Step 5 If Netscape Navigator is still open, hit the reload button. If not, then load Navigator and follow the previous steps in Chapter 4.
Here's your latest revision in your browser.
|
Privacy
Statement |