|
|
| Music | Writing | Travelogues | Shakespeare Resource Center | Contact | |
Introduction | Required Tags | Formatting, Part I | Formatting, Part II | Links | Lists | Tables | Images | Other Resources
This lesson will concentrate on another useful element of HTML: lists. As mentioned throughout the lessons, lists follow roughly the same <TAG>content</TAG> format you're familiar with.
Lists come in three (3) varieties:
The list above, for instance, is an example of an unordered list. These are lists done with bullet points (as opposed to numbers, which are used in an ordered list). It is easy to see in demonstration using the markup for the above list:
<UL> <LI>Unordered lists</LI> <LI>Ordered lists</LI> <LI>Definition lists</LI> </UL>
The <UL> tag begins the list. Each list item is surrounded with the tags <LI> and </LI>. Finally, the list is closed with the </UL> tag. Ordered lists follow the exact same format, only (as you might be guessing), the defining tag for an ordered list is <OL>. Hence, the same list produced as an ordered list would appear like this in HTML:
<OL> <LI>Unordered lists</LI> <LI>Ordered lists</LI> <LI>Definition lists</LI> </OL>
And the items would display like this:
As with the <HR> and other tags, list tags can take a limited number of attributes. For unordered (bullet) lists, you can declare 3 different types (demonstrated below):
Ordered lists have a little more variety; there are five types, and you can also alter the number with which the list begins with the START attribute. Demonstrations below:
- <OL start="6">
- Notice that the numbers go up from 6 instead of 1
- Pretty nifty, huh?
Lists can also be nested, although sometimes you have to be careful where your opening and closing tags are. Let's say we had a list of errands to do, and one of those errands was to pick up some items at the grocery store. The code would appear like this:
<UL>
<LI>Run by bank</LI>
<LI>Pick up dry cleaning</LI>
<LI>Get groceries</LI>
<UL>
<LI>Milk</LI>
<LI>Bread</LI>
<LI>Peanut Butter</LI>
</UL>
<LI>Stop at Post Office on the way home</LI>
</UL>
And the list would be displayed on the page like this:
Up until now, we've avoided discussion of the third type of list, the Defined List. This is a little more complicated than the previous two types of lists, but it is still fairly easy to grasp. The same <TAG>content</TAG> syntax applies, only the <LI> tag element will be replaced with two different tags. To see what this means, let's take a look at the code from the introductory page of this lesson, where we defined "HTML" and "TAG" using—you guessed it—a definition list.
A simplified example of this list is:
The markup tags for this list are not too different from our bulleted and numbered lists. You declare a definition list with the appropriate tags <DL>content</DL>. However, there are two divisions for each item (being the term and the definition), which means that a simple <LI> tag won't do. We need <DT> tags to enclose the term and <DD> tags to mark the definition itself. In markup, the above example would appear thus:
<DL> <DT>HTML</DT> <DD>HyperText Markup Language—this is the language of the World Wide Web, a system of markup tags that tells your browser (Netscape, Internet Explorer, etc.) how to display a page.</DD> <DT>Tags</DT> <DD>These are the internal structural markers that define HTML documents. Any piece of content on an HTML page is usually defined by enclosing it within a pair of tags.</DD> </DL>
Lists come in three varieties:
Unordered and ordered lists declare their list items using <LI> tag pairs. Definition lists follow a similar format, but require two tags for all list items:
Now that lists have been covered, let's move on to our next lesson, Tables.