HTML Chapter 6                                             revised     10/11/06                                                                    

Exercise 1

Creating Ordered Lists

Ordered lists are also called numbered lists.  Each line in the list is numbered automatically when viewed in the browser.  Some examples of lists are step-by-step instructions and outlines.

 

Ordered lists use the <OL>, </OL>, and <LI> tags. The <OL> and </OL> tags define where the list should start and end.  They also add blank lines before and after the list.  The <LI> tag is used at the beginning of each line in a list.

 

The example below shows the list you will create in this exercise.

 


How to Create a Banana Split

1.      Place a cut-up banana in a bowl.

2.      Put three scoops of your favorite ice cream on top of the banana.

3.      Pour your favorite syrup on top of the ice cream.

4.      Sprinkle with your favorite candy or chopped nuts.

 

 

The source code shown below was used to produce the ordered list.  Notice the <LI> tag before each entry. Your browser uses the <LI> tags to automatically number each item in the list.

 


<BODY>

How to Create a Banana Split

<OL>

<LI>Place a cut-up banana in a bowl.

<LI>Put three scoops of your favorite ice cream on top of the banana.

<LI>Pour your favorite syrup on top of the ice cream.

<LI>Sprinkle with your favorite candy or chopped nuts.

</OL>

</BODY>

 

To create the ordered list, do the following steps.

  1. Use your HTML template file and enter the above code between the body tags. 
  2. Title this web page Chapter 6 Exercise 1a
  3. Save this document as chap 6 exer 1a lastnameinitial
  4. View the document in your Web browser.

  5. Correct the document if does not look like the following:

 

 

Creating Unordered Lists

Unordered lists, or bulleted lists, are used when items do not need to be listed in any particular order. Some examples of unordered lists are grocery lists and “to do” lists.

 

Unordered lists use the <UL>, </UL>, and <LI> tags. The <UL> and </UL> tags define where the list should start and end. They also add blank lines before and after the list. The <LI> tag is used at the beginning of each line in a list.

 

Notice the <LI> tag is used in ordered and unordered lists. For ordered lists, the <LI> tag produces a numbered step. In an unordered list, the <LI> tag produces a bullet.

 

To create an unordered list, do the following steps:

  1. In your text editor, open chap 6 exer 1a lastnameinitial
  2. Change the title to Chapter 6 Exercise 1b
  3. Delete the body text.
  4. Key The following animals can be found in the zoo. Then press Enter.
  5. To begin the unordered list, key <UL> and press Enter
  6. To create the first item in the list, key <LI>Lions and then press Enter.
  7. To create the second item in the list, key <LI>Elephants and then press Enter.
  8. Repeat the above steps to add Zebras, Rhinos, and Snakes.
  9. To end the unordered list, key </UL>.
  10. Save the document as chap 6 exer 1b lastnameinitial
  11. View the document in your browser

  12. Correct the document if does not look like the following:

 

 

Exercise 2

Creating Definition Lists

Definition lists, or glossary lists, are used to define words or terminology.  Items in a definition list typically include two parts. The first part, a name or title, is displayed on a line by itself.  The second part, sometimes called the definition, begins on a new line.

 

The definition list is started and ended using the <DL> and </DL> tags. The <DT> list is used before each definition term, and <DD> is used before each definition description.

 

To create a definition list, do the following steps.

  1. In your text editor, open chap 6 exer 1a lastnameinitial
  2. Change the title to Chapter 6 Exercise 2
  3. Delete the body text.
  4. Key The following is a list of commonly used computer terms. Then press Enter.
  5. To begin the definition list, key <DL> and press Enter.
  6. To create the first term in the list, key <DT>CPU and then press Enter.
  7. To create the definition for CPU, key <DD>Central Processing Unit and then press Enter.
  8. To create the next definition term, key <DT>RAM and then press Enter.
  9. To create the definition for RAM, key <DD>Random Access Memory and then press Enter twice.
  10. Use the above steps to add the following terms and definitions to the list:

 

DOS                Disk Operating System                                                                    

CD-ROM       Compact Disc Read-Only Memory

URL               Uniform Resource Locator

 

TIP: Adding blank lines in your text editor may make the list easier to read. Remember, blank lines in the text editor will not appear on your Web page.

 

  1. To end the definition list, key </DL>
  2. Save the document as chap 6 exer 2 lastnameinitial
  3. View the document in your Web browser.
  4. Correct the document if does not look like the following:

 

 

Exercise 3

 

In this exercise you will create a Web page using the tags you learned in this chapter.

 

Ordered List (Numbered List)

<OL>…</OL>

Unordered List (Bulleted List)

<UL>…</UL>

List Item (Used with Ordered and Unordered Lists

<LI>

Definition List

<DL>…</DL>

Definition Term

<DT>

Definition Description

<DD>

 

Using the tags in the table above, do the following:

 

  1. In your text editor, open chap 5 exer 3 lastnameinitial
  2. Position your insertion point after the tag </BLOCKQUOTE> and then press Enter.
  3. Key My favorite activities include: and then press Enter.
  4. Create an unordered list for five of your favorite activities.
  5. Create a horizontal line after the unordered list.
  6. Save the document as chap 6 exer 3 lastnameinitial and view the Web page in your browser.
  7. Make the desired changes.
  8. Press Enter after the horizontal line tag.
  9. Key My least favorite activities are: and then press Enter.
  10. Create an ordered list for five activities you dislike.
  11. Create a horizontal line after the ordered list.
  12. Resave the document and then refresh the page in your browser.

 

You may need to use the scroll bars to see your whole page.

 

  1. Make any desired changes to your document. Remember to save the document when you are finished.

 

Exercise 4

 

Make a web page in HTML with:

An ordered list titled Important Things to Remember about HTML and list at least 5 items.

An unordered list titled HTML programming mistakes and list at least 5items.

Create a definition list titled Computer Terms and define these terms:      HTML, CD-R, CD-RW, DVD

If you do not know these terms, use the Internet to find their meaning.

Give this web page an appropriate title.

Save it as chap 6 exer 4 lastnameinitial