Lesson 5(cont'd)

Can I put these together?

You sure can. You can create some neat looking outlines and organizational structures on your Web pages by putting these list elements together. This is called using nested lists. If you'd like to used nested lists, just remember to close each list (<OL> or <UL>). Here is an example of something that you could create:

Main Heading
1. List item 1
  - Bulleted Item 1
  - Bulleted Item 2
2. List item 2
  - Bulleted Item 1
  - Bulleted Item 2
  - Bulleted Item 3
Secondary Heading
1. List item 1
  - Bulleted Item 1
  - Bulleted Item 2
2. List item 2
  - Bulleted Item 1
  - Bulleted Item 2
  - Bulleted Item 3

Here's what the code looks like:

<OL TYPE="A">
<LI>Main Heading
<OL>
<LI>List item 1
<UL>
<LI>Bulleted Item 1
<LI>Bulleted Item 2
</UL>
<LI>List item 2
<UL>
<LI>Bulleted Item 1
<LI>Bulleted Item 2
<LI>Bulleted Item 3
</UL>
</OL>
<LI>Secondary Heading
<OL>
<LI>List item 1
<UL>
<LI>Bulleted Item 1
<LI>Bulleted Item 2
</UL>
<LI>List item 2
<UL>
<LI>Bulleted Item 1
<LI>Bulleted Item 2
<LI>Bulleted Item 3
</UL>
</OL>
</OL>

One of your assignments this week will ask you to create an outline using nested lists.

Definition Lists

There is a third kind of list called a Definition List. The best way to explain it is to show you one. Take a look at this:

Here's What's for Dinner

Salad: Lettuce, tomatoes, carrots and dressing
The Main Course: Grilled chicken, mashed potatoes and green beans
Dessert: A hot fudge sundae

And here's what the code looks like:

<H4>Here's What's for Dinner</H4>
<DL>
<DT><B>Salad</B>
<DD>Lettuce, tomatoes, carrots and dressing
<DT><B>The Main Course</B>
<DD>Grilled chicken, mashed potatoes and green beans
<DT><B>Dessert</B>
<DD>A hot fudge sundae
</DL>

Here's what's happening:

I used an H4 command to create a heading
DL stands for Definition List. It tells the browser that a double tier list is coming up.
DT stands for Definition Term. It's the first tier. I added B tags to make the text bold.
DD stands for Definition Description. It's indented and gives information about the definition term.

It's a nice look. It can come in handy when creating pages, especially when you have a list of terms or definitions to place on a page.

Well, now you know how to create an unordered list, an ordered list and a definition list. I recommend that you use the list commands to present information to your readers in a smoother fashion than writing long drawn-out paragraphs. I use lists all the time, and I think you will find them useful as well as you create Web pages.

A Web Page that Contains Special Characters and Lists

Here is a Web page that summarizes the new material for this week. One of your assignments will ask you to recreate this page. Take a couple of minutes to look over this HTML code to see if you can predict what the page will look like on the browser:

<HTML>
<HEAD>
<TITLE>What I Learned During Week 5</TITLE>
</HEAD>

<BODY BGCOLOR="#99CCFF" TEXT="#000099">
<FONT FACE="arial" SIZE="-1">

<H2>What I Learned During Week 5</H2>

<P><HR>

<H3>Using Spaces</H3>
<P>     This week I learned how to create spaces on Web pages. This can come in handy. For example, I used the special character for a space to indent this paragraph.

<H3>Special Characters</H3>
<P>I can create many special characters in HTML using a list as a reference. Here are 5 of these special characters:

<P>& > ¢ © ½</P>

<H3>Unordered Lists</H3>
<P>Here are a few things that I learned about unordered lists:

<UL>
<LI>They help organize information on Web pages.
<LI>The only tags you need are UL and LI.
<LI>You can create bullets that are circles or squares.
</UL>

<H3>Ordered Lists</H3>
<P>Here are a few things that I learned about ordered lists:

<OL>
<LI>Ordered lists are helpful if you need to present information in a specific order.
<LI>The only tags you need are OL and LI.
<LI>Your lists can be organized by number, by letter, or by Roman numeral.
</OL>

<H3>Definition Lists</H3>
<P>Definition lists give you another way to present information. Here are the 3 tags that you need to create a definition list:

<DL>
<DT><B>DL</B>
<DD>Definition List
<DT><B>DT</B>
<DD>Definition Term
<DT><B>DD</B>
<DD>Definition Description
</DL>

</FONT>
</BODY>
</HTML>

You have now completed the Week 5 Lesson. Please re-read this information until you feel that you really understand it. If you feel like you already understand the information on this page, you are ready to complete your Week 5 Assignments.

Lessons

Assignment 5