Writing HTML |
About |
Index |
previous |
next |
Lists, Lists, Lists
Lists are used to present items of information in an easy-to-read
format. In fact, there is a list right here, lurking under the next
heading!
Objectives
After this lesson, you will be able to:
- Identify HTML codes for creating uordered, ordered, and nested
lists for a WWW document.
- Place different list types within your HTML document and view
the changes within your WWW page.
Lesson
HTML Lists
Many WWW pages display lists of items- these may be items
preceeded with a "bullet" (Unordered) or a sequentialy numbered list
(Ordered).
These lists are easy to format in HTML, and they may even be nested
(lists of lists) to produce an outline format. Lists are also handy
for creating an index or table of contents to a series of documents
or chapters.
Unordered Lists
Unordererd Lists, or ul tags, are ones that appear as a list
of items with "bullets" or markers in the front. The bullet marks
will depend on the particular version of your WWW browser and the font
specified for displaying normal WWW text (i.e. for Macintosh, the
bullets are the option-8 character- in Times font this is a small
square, in Geneva it is a large round dot).
Here is an example of an unordered list:
My Unordered List:
And this is the HTML code for producing this format:
My Unordered List:
<ul>
<li> Item 1
<li> Item 2
<li> Item 3
</ul>
The <ul> tag marks the beginning and end of the list,
and the <li> indicates each list item.
Ordered Lists
Ordered lists are ones where the browser numbers each successive list
item starting with "1." Note that the only difference is
changing the ul tag to ol tag. Using the example
from above:
My Ordered List:
- Item 1
- Item 2
- Item 3
And this is the HTML code for producing this format:
My Ordered List:
<ol>
<li> Item 1
<li> Item 2
<li> Item 3
</ol>
Nested Lists
Ordered Lists and Unordered lists can have different levels, each
will be indented appropriately by your WWW browser. Your major concern will be
to verify that each list is properly terminated and the nesting order
is correct. Here is an example of an unordered list with sublevels of
other lists:
Nested Unordered List
- This is the first item
- This is the second item
- This is the first sub item of the second item
- And this is a sub item of a sub item
- Getting lost yet?
- This is the second sub item of the second item
- This is the third sub item of the second item
- This is the third item
And this is the HTML code for producing this format:
<ul>Nested Unordered List
<li>This is the first item
<li>This is the second item
<ul>
<li> This is the first sub item of the second item
<ul>
<li> And this is a sub item of a sub item
<li> Getting lost yet?
</ul>
<li> This is the second sub item of the second item
<li> This is the third sub item of the second item
</ul>
<li>This is the third item
</ul>
Nested Lists - Mixing them togther
An Ordered List can include a nested Unordered List:
Nested Unordered List
- This is the first item
- This is the second item
- This is the first sub item of the second item
- An this is a numbered sub item of a sub item
- An this is another numbered subItem of a sub item
- Getting lost yet?
- This is the second sub item of the second item
- This is the third sub item of the second item
- This is the third item
And this is the HTML code for producing this format. Note how the
HTML has been idented to make it easier to read:
Nested Unordered List
<ol>
<li>This is the first item
<li>This is the second item
<ul>
<li> This is the first sub item of the second item
<ol>
<li> An this is a numbered subItem of a sub item
<li> An this is another numbered sub item of a sub item
<li> Getting lost yet?
</ol>
<li> This is the second sub item of the second item
<li> This is the third sub item of the second item
</ul>
<li>This is the third item
</ol>
Placing Lists in Your HTML Document
Note: If you do not have the working document from the previous
lesson, download a copy now.
Using the list tags, you will now add an Ordered and an
un-Ordered list to your Volcanoes! page.
- Re-open your workspace (if not already opened).
- Open your HTML document in the text editor.
- Under the
Volcano Terminology
header we will use an
un-ordered list to display examples of technical words used in the
study of volcanoes. Go to this section in your HTML document.
- First add the following sentence.
How many do you know?
- Now, enter the HTML code to create the list of terms:
<ul>
<li>caldera
<li>vesicularity
<li>pahoehoe
<li>rheology
<li>lahar
</ul>
- Now we will use an ordered list to define the required parts of
the assignment in this lesson. Under the
Research
Project
heading, enter the following: (HINT- this might be a
good time to copy and paste from the WWW page, unless you enjoy
typing in text!)
Your mission is to find information and report on a volcano,
other than the ones listed above, that has erupted in the last
100 years. Your reports must include:
<ol>
<li>Type of volcano
<li>Geographic location
<li>Name, distance, and population of nearest major city
<li>Dates of most recent and most destructive eruptions.
<li>Other events associated with the recent eruptions
(earthquakes, floods, mudslides, etc)
</ol>
<p>
Then, write a one page description on the major hazards to humans
in the vicinity of this volcano. Speculate on what you would do
if you were in charge of minimizing the risk to the population.
- Save your HTML file and Reload in your WWW browser.
Check Your Work
You may want to compare your document with a sample for this section. If your list is
different than the list in the sample, review how you entered your
list in your text editor. Make sure it matches the instructions in
the Placing Lists in Your HTML Document section of this
lesson.
Review Topics
- How are lists valuable in a WWW document?
- What is the HTML tag code for a unordered list?
- What is the tag code for a ordered list?
- How might you set up a nested list?
- What steps did you use in adding a list to your HTML document?
Independent Practice
You may want to experiment with changing the Ordered List you create
to Unordered. Also,
insert an Ordered or an Unordered list of items to your own WWW
document. Be sure to verify that it displayes correctly in your WWW browser.
Can you create a list that includes sublists?
Coming Next....
Making it more than text-- adding graphics to your page.
| Lesson Index |
previous lesson "Stylized Text" |
next lesson "Graphics" |
Writing HTML Lesson 6: Lists, Lists, Lists
©1995
Maricopa Center for Learning & Instruction (MCLI)
Maricopa County Community College District, Arizona
The Internet Connection at MCLI is
Alan Levine--}
Comments to levine@maricopa.edu