HTML Tutorial
Lists
The previous chapter of this manual showed how to format individual lines and paragraphs of text. This tutorial leads you through formatting lists with bullet points or as numbered lists. You will not need any previous exercises to complete this chapter.
When you have finished this unit you will understand:
- How to layout text in bullet points or as numbered lists
- How to create itemized lists
- How to insert glossaries and definition lists into your document
You create a list by first specifying a list type, and then adding items to your list using list item tags (<LI>). There are three types of list:
- Ordered lists that are numbered
- Unordered lists shown as bullet points
- Definition lists
An ordered list is indented and numbered. The tag pair <OL> ... </OL> is used to define an ordered list. All the list items, and their tags, are enclosed between these two tags.
List Items
The text in each list item must be inserted between opening (<LI>) and closing (</LI>)list tags. The <LI> and </LI> tags must be completely within the <OL> ... </OL> tags.
- Let's list what you have done so far in the HTML manual, and display this list on a web page. Here is the HTML code to do this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My first list page</title>
</head>
<body>
<p>So far, I have completed:</p>
<ol>
<li>text</li>
<li>spacing</li>
<li>links</li>
</ol>
<p>Not too bad!</p>
</body>
</HTML>
- Save this file as list.htm.
The web page, when resized, will look like this:
List Type
List type defines how the list items are labeled. The default is numerals, starting at 1. You can change this to letters or roman numerals. You can also mix list types within one list if you specify the type for each list item. TYPE is an attribute of the list, and is defined by
<OL TYPE="list_type">
In this tag, list_type can be any of the following:
- TYPE="1" - Displays list items in numerals. This is the default.
- TYPE="A" - Displays list items in uppercase letters
- TYPE="a" - Displays list items in lowercase letters
- TYPE="I" - Displays list items in uppercase roman numerals
- TYPE="i" - Displays list items in lowercase roman numerals
- Change the previous code so that the list uses type "I".
This only requires the addition of TYPE="I" to the opening <OL> tag, so let's also include a list, of TYPE="a", of some of the HTML spacing techniques. This will produce a list within the previous list.
Lists within lists also follow the rule that they are defined by list tags, and each item has their own item tag. The HTML code looks like:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head><title>My second list page</title>
</head>
<body>
<p>So far, I have commpleted:</p>
<ol TYPE="I">
<li>text</li>
<li>spacing</li>
<ol TYPE="a">
<li>horizontal rule</li>
<li>single space</li>
<li>block quote</li>
</ol>
<li>links</li>
</ol>
<p>Not too bad!</p>
</body>
</html>
and appears in your browser as follows:
