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:
- My first item on the list.
- My second item on the list.
- My third item on the list.
- My fourth item on the list.
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.
Download in PDF Format HERE:
Learning HTML
Posts
No comments:
Post a Comment