Creating Lists and Indenting Text




In this lesson, you will learn how to create lists and indent text in your HTML document.

You will need three windows open on your screen at this time. A Netscape window displaying this tutorial, an experimental window to view your HTML document, and a window in which you will type the HTML document.

HTML supports unnumbered, numbered, and definition lists. You can also nest lists.

Unnumbered Lists

To make an unnumbered, bulleted list,
  1. Start the list with the <ul> Tag.
  2. Enter the <li> Tag (list item) before each item you want to list.
  3. End the list with the closing </ul> Tag.

For example, the following source:


looks as follows, viewed through Netscape:


If you want an unnumbered list without the bullets, delete the <li> Tag at the beginning of each list item and put a <br> Tag at the end of each list item.

Click on the window containing your HTML document.
Using the source above, create an unnumbered list without bullets. Save your changes, and open your document in your experimental window.

Numbered Lists

To create a numbered list also called an ordered list, it is identical to creating an unnumbered list except it uses the <ol> and </ol> Tags.

For example, the following source:


looks as follows, viewed through Netscape:


It is your turn now.
Click on the window containing your HTML document.
Create an unnumbered list of three of your favorite musicians and create a numbered list of three of your favorite sports. Save your changes.
When you are done open your document in the experimental window.

Nested Lists

You can nest any type of list inside another list. The following source will display a numbered list inside an unnumbered list.

For example, the following source:


looks as follows, viewed through Netscape:


Definition Lists

A definition list requires three tags:

For example, the following source:


looks as follows, viewed through Netscape:


Indenting Text

You can use the <dl> Definition List Tag
and then use the <dd> Definition Definition Tag for each indented line. You do not need to use the Definition Term Tag.

Another way to display text exactly how you type it in is by using the <pre> and </pre> Preformatted Text Tags. The Web browser will display the text exactly how it is typed in when it is contained in these tags.

For example, the following source:


looks as follows, viewed through Netscape:


Next Topic: Adding Images to Your Document
Main Menu