Writing HTML | About | FAQ | Alumni | References | Tags | Lessons | back | next |

22. More for Images and Lists

Vaporize those annoying boxes around graphic buttons and:

Objectives

• Create a hyperlinked-graphic without a bounding border.
• Write the HTML for an un-ordered lists that uses different bullet styles
• Write an ordered list that numbers items via capital and small alphabetical letters or large or small Roman numerals
• Modify an ordered list to start counting from any positive value.

Lesson

No Hypertext Borders on Hyperlinked Images

works just like any other hypertext link.

However, the box is sometimes distracting, especially if we have an image that has non-rectangular borders. The user can typically determine if a picture is "hyper" simply by noting a change in the cursor as they move a mouse over the image (it usually changes to a "hand" when it is over an active link).

You can turn "off" the box by adding an attribute to the <img...> tag:

  <a href="bigpict.gif"><img src="lilpict.gif" border=0>

We have two places in our Volcano Web lesson where we have hyperlinked inline images -- do you remember where?

The first is in the usa.html file, where a small image of a seismometer links to a larger sized image. The second is the arrow button on the msh.html page that leads back to the lesson.

1. Open both the usa.html and the msh.html in your text editor
2. Locate the place where we have a small image that links to something else.
3. Modify each <img src=....> tag that is a hyperlink so that it contains a border=0 attribute. For example, in the msh.html file it should look like:

     <a href="usa.html"> 
     <img src="../pictures/left.gif" alt="** " border=0> 
     Return to <i>Volcano Web</i></a>

4. Save and Load the usa.html and msh.html files in your web browser.
5. If the small images have lost their borders but still connect to their intended target when clicked, your job is done.

Bullets for Un-Ordered Lists

 <ul type=xxxx>

• type=circle
• type=square
• type=disc [default bullet for top level list]

<ul type=square>
<li>this is item 1
<li>this is item 2
<li>this is item 3
<li type=circle>
     Hey! how about these bullets?
<li>this is another item
<li>and one more
<li type=disc>
     Hey! how about these bullets?
</ul>

Note that the type specified in the <li type=xxxx> tag is used by all succeeding <li> tags until another bullet type is selected.

We will now change the bullet list style used in our Research Projects page (file proj.html).

1. Open your proj.html file in your text editor.
2. The first list in this file is an Ordered List <ol>...</ol> but we will now change it to an unordered list with circle bullets. Edit your HTML for this first list so that it looks like:

   
     <ul type=circle>
     <li>Type of volcano
     <li>Geographic location
     <li>Name, distance, and population of nearest major city
     <li>Date of most recent eruption and date of most destructive
         eruption
     <li>Other events associated with the last eruption (earthquakes,
         floods, mudslides, etc)
     </ul>

3. Save and Load your file in your web browser. Compare your page with this sample of how your list should like at this point.

Styles and Values for Ordered Lists

Arabic	Capital Letters	Small Letters	Large Roman	Small Roman
<ol type=1>	<ol type=A>	<ol type=a>	<ol type=I>	<ol type=i>
I am first! I am second! I am third! I am fourth! I am fifth!	I am first! I am second! I am third! I am fourth! I am fifth!	I am first! I am second! I am third! I am fourth! I am fifth!	I am first! I am second! I am third! I am fourth! I am fifth!	I am first! I am second! I am third! I am fourth! I am fifth!

We presented an example of using ordered lists within ordered lists to create outlines -- with the type attribute we can have pages with standard format:

1. Cheese in Pre-Historic time
   1. Africa
      1. Afar Triangle
      2. East Coast
   2. Asia
   3. Europe
      1. France
         1. Cave paintings depicting cheese harvesting
         2. Burial rituals inferred from dried cheese remnants
      2. British Isles
   4. North America
2. Cheese in the Middle Ages
   1. King Arthur's Longhorn
   2. Sharp Cheddar for the Crusades
3. Cheese in the Space Age

And finally you can change the numbering sequence within a list by adding a value=z attribute to the <li> tag. Look at this example:

HTML	How it Looks
<ol type=A start=5><i> Important Cheese Laws</i> <li>Cheese Curing Act of 1905 <li>Milk Content Ruling of 1923 <p> <li value=12>Cheese Import Tariff of 1942 <li>Cheese Freshness Codes of 1942 <p> <li value=1>Cheese Values Act of 1789	Important Cheese Laws Cheese Curing Act of 1905 Milk Content Ruling of 1923 Cheese Import Tarif of 1942 Cheese Freshness Codes of 1942 Cheese Values Act of 1789

It may not be exactly clear (especially from this silly example!) when you might use these tags -- just keep them in your mind as potential tools in your web writing. We will demonstrate again on our Research Projects page (file proj.html). If you recall, in our lessons on tables we split the unordered list of reference sites into a two column list. Let's change this to an ordered list and use the type attribute to list them using small letters. Because we have actually two individual lists, see if you can determine why we would use the start attribute as well.

1. Open your proj.html file in your text editor.
2. Look at the table we created under the References section. Change both <ul> and </ul> tags to <ol type=a> and </ol>
3. Now, we have 6 items in the first list so we want the second list to start numbering at 7. Modify the <ol> tag now to read:

     <ol type=a start=7>

4. Save and Reload your file in your web browser. Compare your page with this sample of how your list should like at this point. The first column should list items from "a" to "f" and the second column from "g" to "l"

Check Your Work

Review

1. How do you get rid of the hypertext box that surrounds a graphic that is hyperlinked to another item?
2. How can you change the bullet markers for an unordered list?
3. Do you have to use the same bullet markers for an entire list? If not, how do you change the markers mid-list?
4. How can you create a list that marks items by Roman Numerals?

Independent Practice

<ol>...</ol>

Coming Next....

GO TO.... | Lesson Index | back: "Tables" | next: "Image Maps" |

URL: http://www.mcli.dist.maricopa.edu/tut/tut22.html