Lists
Lists come in 3 flavors:
Bulleted lists:
The list is enclosed in the tags <UL> and </UL>. (UL stands for Unordered List). Each item is indicated with <LI> at the start of the item. This is now a container tag so the item should end with </LI> but the ending tag is not required. An item ends when the browser sees another <LI> tag or the ending </UL> tag.
<LI> automatically starts another line. You can't put 2 items on the same line.
Example:
<UL>
<LI>First item
<LI>Second item
</UL>
Will give you:
- First item
- Second item
You can change the type of bullet used.
The default is a filled-in disc, as above. The other options
are an outline circle, and a filled-in square.
For a circle:
<UL type="circle">
<LI>First item
<LI>Second item
</UL>
Produces:
- First item
- Second item
And <UL type="square"> in the above example produces:
- First item
- Second item
You can also write <LI type="disc"> (or "circle" or "square") to change the bullet on a specific list item, so you can "mix and match" bullets if you want:
- This is the first list item
- This is the second
- This is the third
Subdivided lists
You can nest lists:
- This is item one of the first list
- This is item two
- This is the first line of the sub-list of item two
- This is the second line
- This is item three of the top-level list
The code for the above list is:
<ul><li>This is item one of the first list</li>
<li>This is item two
<ul type="circle">
<li>This is the first line of the sub-list of item two</li>
<li>This is the second line</li>
</ul>
<li>This is item three of the top-level list
</ul>
Numbered lists:
The list is enclosed in <OL> and </OL>, meaning, of course, Ordered List. The rules for items are the same as bulleted lists.
Example:
<OL>
<LI>First item
<LI>Second item
</OL>
Will give you:
- First item
- Second item
Just as you can alter the type of bullet in bulleted lists, so you can alter the type of numbering in ordered lists:
<OL type="I"> gives you Roman numerals for the whole list
<li type="I"> gives you Roman numerals just for that line
Here's a list that shows you all the combinations:
- First item: regular numbers
- Second item: capital-letter Roman numerals
- Third item: small Roman numerals
- Fourth item: capital letters
- Fifth item: small letters
- And back to regular numbers to finish
The code that produced the salad above is:
<ol>
<li>First item: regular numbers</li>
<li type="I">Second item: capital-letter Roman numerals<li>
<li type="i">Third item: small Roman numerals</li>
<li type="A">Fourth item: capital letters</li>
<li type="a">Fifth item: small letters</li>
<li type="1">And back to regular numbers to finish</li>
Finally, you can of course create numbered lists with bulleted sub-lists, and vice versa:
- When would you like a coffee break?
- Now!
- In half an hour
- Never
- How long would you like it to last?
- 10 minutes
- half an hour
- rest of the day
Here's an exercise for you:
Write the code that produced the above list.
Why are the bullets circles, not discs? How would you change the code to make them discs? Or squares?
Definition lists:
This type is for lists composed of items, with comments or explanations for each item. The list is enclosed in the tags <DL> and </OL>. There is no <LI> tag; instead, there are the two tags <DT> ("definition text"), meaning the item itself, and <DD> ("definition data"), meaning what you want to say about it. The items are neither numbered nor bulleted. The definitions start on the line below the item, indented relative to them.
Example:
- <DL>
- <DT>This is an item
- <DD>This is the definition
- <DT>This is another item
- <DD>This is the definition
- </DL>
will give you:
- This is an item
- This is the definition
- This is another item
- This is the definition
If you don't have anything to say about an item, you can just leave its <DD> out. Modern browsers don't mind, but older ones (such as Netscape v.2) don't align the list properly if you don't have a <DD> for every <DT>. So you might as well put one in with just a non-breaking space in it: <DD> </DD>
Again, FrontPage Express seems to have no way of inserting this type of list except by editing the HTML. That's a pity because they're very useful (see the resource lists on this site for an example).
|
 |
 |
 |
 |
