|
HTML
can be used to easily create lists of items.
Lists can either be
un-numbered (“bulleted”) or numbered, depending on how
you want them to appear. A bulleted list is called an unordered
list, and a numbered list is called an ordered list.
Lists involve three
important commands:
<ul> =
Signifies the beginning of an unordered list (</ul>
indicates the end of the list and should be placed after the end
of the last item.)
<ol> =
Signifies the beginning of an ordered list (</ol>
indicates the end)
<li> =
List Item. Signifies the beginning of an item in either an ordered
or unordered list. You can place the tag </li> at
the end of an item in a list if you wish, but it is not necessary
to do so.
Examples:
<ol>
<li> Text 1
<li> Text 2
<li> Text 3
</ol> |
= |
- Text 1
- Text 2
- Text 3
|
|
<ul>
<li> Text 1
<li> Text 2
<li> Text 3
</ul> |
= |
|
List items are just
like regular code, so they can be formatted text, or they can
be links. They can even contain other lists!
Let's add a complex
list to our existing web page. Modify your code so it looks like
the following:
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
This is some text!
<pre>This is preformatted text</pre>
This web page is ©2001 by Me.
This should be a few spaces over
to the right.
<H1>This is going to be big text on its own line.</H1>
<font face="Arial" size=5>This will be almost
as big, and in Arial font!</font>
<br>
<div align="right">This should be on the next
line and on the right side of the screen.</div>
<br>
<center>This should be centered text.</center>
<br>
<br>
<hr width=75% size=6 align="left">
<br>
<br>
<br>
<div align="center">So should this, but several
more lines down the page.</div>
<br><br>
<a href="http://www.tmlp.com">Click here to go
to the TMLP Home Page.</a>
<br>
<br>
<ol>
<li> <font size="5">Text 1</font>
<ul>
<li><i>Text 1a</i>
<li><u>Text 1b</u>
</ul>
<li> <font size="7">Text 2</font>
</ol>
</body>
</html>
Load this up in your
browser. It should look something like the following:
As you can see, you
can put lists inside lists without too much difficulty...just
keep track of where things are in your web page so you know when
to close lists!
Up till now, except
for the "blue" of the links, we've been looking at plain
old black and white, but we know that HTML pages can have plenty
of color. Next, we'll be discussing how to change the color of
your text, the background color of your page, and the color of
your links!
|
