Chapter 7: Lists, Lists,
Lists
The UNORDERED
LIST...
The Unnumbered List is the first of the three types of
lists. This is probably the most common list you will
use.
Example of an Unordered List...
- pencils
- pens
- erasers
- paper
- glue
Notice the Bullet Before each List Item. Now here is
the HTML Code for the Unordered List Above...
<ul>
<li>pencils</li>
<li>pens</li>
<li>erasers</li>
<li>paper</li>
<li>glue</li>
</ul>
The <ul> tag is the opening Unordered
List Tag. Therefore, the </ul> is the
closing tag. Between these two tags you place LIST
ITEMS, each one having an individual
<li> opening tag, and an optional
</li> closing tag. There is no limit to the
number of List Items you may have in a single list.
The ORDERED
LIST...
The Ordered List, also known as the Numbered List, is very
similar in structure to the unordered list, except each
list item has a number in front of it, instead of a bullet.
Also, the opening tag for the list is <ol>
instead of <ul>, and the closing tag is
</ol> instead of </ul>. List
Items within the list still use the same tags.
Example of an Ordered List...
- pencils
- pens
- erasers
- paper
- glue
Notice the Number Before each List Item. Now here is
the HTML Code for the Ordered List Above...
<ol>
<li>pencils</li>
<li>pens</li>
<li>erasers</li>
<li>paper</li>
<li>glue</li>
</ol>
The Definition
List...
This type of list is a little more complicated, but still
very easy to use. This list starts with the
<dl> opening tag, and ends with the
</dl> closing tag. This has another tag
known as <dt> for Definition
Term, and <dd> for Definition
Definition. These two tags do not need closing
tags.
Example of a Definition List...
- alliance
- A union, relationship, or connection by kinship,
marriage, or common interest.
- alligator
- Large amphibious reptile with very sharp teeth,
powerful jaws.
- alliterate
- To arrange or form words beginning with the same
sound.
Now here is the HTML code for this Definition List...
<dl>
<dt>alliance
<dd>A union, relationship, or connection by kinship, marriage, or common interest.
<dt>alligator
<dd>Large amphibious reptile with very sharp teeth, powerful jaws.
<dt>alliterate
<dd>To arrange or form words beginning with the same sound.
</dl>
Your own HTML
page...
Add the following to your HTML page ("Home.htm"): (the blue
text is what to add)
<html>
<head><title>My Home
Page</title></head>
<body background="bgnd.gif">
<center><font color="Blue"><h1>YOURNAME's
Home Page</h1></font></center>
<hr>
This is the home page of <a href="mailto:YOUR EMAIL
ADDRESS"><img src="bullet.gif"
border=0><b>YOURNAME</b>.<img
src="bullet.gif" border=0></a>
<p>Type something about yourself here. Describe
briefly who you are and what you do for a living. Remember
to use bold and italic text, for emphasis.</p>
<hr>
<h2>My favourite Web Sites</h2>
<br>
<ul>
<li> <a href="http://www.xencon.com">Xenon Web
Design</a> </li>
<li> <a
href="http://www.microsoft.com">Microsoft</a>
</li>
<li> <a
href="http://www.sybase.com">Sybase</a>
</li>
<li> <a href="http://www.sybase.co.za">Sybase
South Africa</a> </li>
</ul>
</body>
</html>
Save the text file as "Home.htm".
Go To Chapter 8
Return to index
| 