HTML 3--Adding a list
Objectives
1. Use the list container and proper list tags.
2. Use horizontal rules as separators.
Instructions
1. Open your browser and your homepage with your text program.
2. Below the "I am" section you are going to add a list. Before we get going you need some information on lists.
There are a few different kinds of lists you can use in an HTML document. We will be using an ordered list. An ordered list works like this:
You open with the <OL> (ordered list) tag. The "O" in the tag tells the browser to order your list using numbers. The other tag you use in this list (and in an unordered list) is <LI> (list item). So it works likes this:
<OL>This is my ordered list
<LI>Item one
<LI>Item two
<LI>Item three
<LI>Item four Note...the <LI> tag does not require a slash-tag
</OL>
It would look like this:
This is my ordered list
1. Item one
2. Item two
3. Item four
4. Item five
On ordered list can be nested as well. In other words, you can have a list within a list.
<OL>This is my ordered list
<LI>Item one
<LI>Item two
<OL>
<LI>Item a
<LI>Item b Note...the <LI> tag does not require a slash-tag
</OL> This ends the second list
<LI>Item three
</OL> This ends the second list
It would look like this:
This is my ordered list
1.Item one
2.Item two
1.Item a
2.Item b
3.Item c
3.Item three
An unordered list works exactly the same way except you use the <UL> ... </UL> container. The only difference in the look of the lists is that the numbers will be replaced by bullets (•). So, it works like this:
<UL>This is my unordered list
<LI>Item one
<LI>Item two
<LI>Item three
<UL>
<LI>More stuff
<LI>Still more stuff
<LI>Even more stuff
</UL>
<LI>Item four
</UL>
Don’t forget, if you nest a list you must have TWO list slash tags.
It looks like this:
This is my unordered list
•Item one
•Item two
•Item three
•More stuff
•Still more stuff
•Even more stuff
•Item four
The other kind of list is a definition list. This is great for a
list of terms and their definitions. (Hmmmm, I feel an assignment in there somewhere). It works a little something like this:
It uses three tags:
<DL> Definition List Tag (tells the browser this is a definition list)
<DT> Definition Term Tag (this would be the word or term)
<DD> Definition Definition Tag (this would be the definition)
An excellent example follows (if I do say so myself)
<DL>
<DT>Mrs. K
<DD>Best computer teacher ever
<DT>Me
<DD>Best student ever
<DT>Mickey
<DD>Mrs. K’s best cat ever
<DT>Hal
<DD>Mrs. K’s best iguana ever
</DL>
On the browser, it would look like this:
Mrs. K
Best computer teacher ever
Me
Best student ever
Mickey
Mrs. K’s best cat ever
Hal
Mrs. K’s best iguana ever
Okay, back to work....
1. You are going to put a list of either your classes or a top ten list of your choosing. If you are feeling creative, make a top ten list. If you’re not, for now just do your class schedule. You can change it to a top ten list later.
2. Make this an ordered list. Remember the tags? If not, go back and look at the tags and the structure.
3. Put this list right after your "I am" section, before your "I like" section. Be sure to add <HR> tags to offset the list.
4. After typing your list and the tags into your document, save and check it out in your browser.
Using the italics tag
In your list I would like you to make the heading for the list italics. To do this use the italics container <I> ... </I>
1. Right after your <OL> tag, insert the italic tag.
2. At the end of your first line (which is the title of your list) add the italic slash-tag.
Questions
On the bottom of your document you have the last assignment’s questions answered.
(remember your comment tags? <!...> You probably noticed that text within those tags does NOT show up on your browser...pretty clever, huh?)
1. What are the three kinds of lists?
2. If I have a list of vocabulary words I want to put into an HTML document, what would be the best list to use?
3. What are the three tags used in an ordered list? (remember...the slash-tag counts as a tag.)
4. What container do you use to make text italic?
5. Write a bit of HTML to make text that would look like the following:
Hi! How are you? I am fine.