Writing HTML | About | FAQ | Alumni | Kudos | References | Tags | Lessons | previous | next |

22. More for Images and Lists

Vaporize those annoying boxes around graphic buttons,

or add extra borders plus:

Objectives

After this lesson you will be able to:

• Create a hyperlinked-graphic without a bounding border
• Place a framing border around an inline image
• 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

Note: If you do not have the working documents from the previous lessons, download a copy now. Also, you may want to first look at the test page to see of your browser supports the tags used in this lesson.

No Hypertext Borders on Hyperlinked Images

In lesson 8e we learned how to make a small graphic image act as a hyperlink to some other web page or a larger size copy of a picture. We noticed that the web browser places a bounding box around the graphic, to identify it as being "hyper" like normal hypertext items:

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 hide the box by adding an attribute to the <img...> tag:

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

In this example, the inline image lilpict.gif acts as a hyperlink to the bigger image bigpict.gif. The border=0 attribute has no meaning if the <img..> tag is not inside of an <a href=...</a> tag.

We have two places in our Volcano Web web site 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.

Putting Borders around Images

And now we show you how to do the opposite of taking away borders; adding BIG THICK borders! You can use the same border=X option to add a border around an image. The number you use for X determines the thickness, in pixels, of the border placed around an image:

8 pixel border on an inline image

<IMG SRC="pictures/disk.gif" WIDTH=48 HEIGHT=40 border=8>

You can also use this on an image that is acting as a hyperlink:

8 pixel border on an inline image, hyperlinked to another page

<A HREF="page.html">
  <IMG SRC="pictures/disk.gif" WIDTH=48 HEIGHT=40 border=8></a>

Bullets for Un-Ordered Lists

In lesson 6 we first created unordered <ul>...</ul> lists. The web browser automatically puts a bullet mark in front of each item -- and the bullets change if we create a list inside of a list. With some web browsers, you can specify in your HTML any of three bullet characters by adding an attribute to the <ul> tag:

 <ul type=xxxx>

where xxxx can be:

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

And here is even more! You can change the type within a list by putting the type attribute in the <li> tag:

HTML	How it Looks
<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 circle bullets? <li type=circle>this is another item <li type=circle>and one more <li type=disc> Hey! how about this disc bullet? </ul>	this is item 1 this is item 2 this is item 3 Hey! how about these circle bullets? this is another item and one more Hey! how about this disc bullet?

In NetScape browsers, the type specified in the <li type=xxxx> tag is used by all succeeding <li> tags that do not have a type attribute until another bullet type is established. However, in Internet Explorer web browsers, list items without a type attribute will revert to the type set in the intitial <ul> tag. Therefore, our recommendation is that if you wish to change the bullet styles wihtin a list is that you set it for each <li> tag that requires a different bullet.

Differences between the web browsers sure make life complicated! And this is another reason you should consider checking your site in more environments that just your own computer.

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

When we first created an ordered list <ol>...</ol> in lesson 6, we saw how the web browser automatically numbers the items, one for each <li> tag. What if we do not always want to use arabic numerals (1,2,3...)? Well, here are the answers, a type=x attribute for the <ol> and <li> tags inside:

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

Another thing we can do with ordered lists is to have them start counting from some other value than 1. To do this, we add the start=y attribute to the <ol> tag. Note that even if we have some other type=x attribute, we still specify the starting value y as "2,3,10,100, etc". Look at some of these examples:

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

Compare your web pages with this sample of how it should appear. If your pages are different from the sample or the hypertext links do not work correctly, review the text you entered in the text editor.

Review

Review topics for this lesson:

1. How do you get rid of the hypertext box that surrounds a graphic that is hyperlinked to another item?
2. How can you put a 20 pixel border around an inline image? What color will it be?
3. How can you change the bullet markers for an unordered list?
4. Do you have to use the same bullet markers for an entire list? If not, how do you change the markers mid-list?
5. How can you create a list that marks items by Roman Numerals?

Independent Practice

Experiment with different bullet markers and numbering styles in the lists of your own web pages. Can you think of some unique ways to use these added features? Can you make a complex outline with "standard" formatting? All of those

<ol>...</ol>

Coming Next....

Map your way from an image... Click n' go hyperlinked sections within a graphic...

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

Writing HTML: Lesson 22: More for Images and Lists
©1994-1999 Maricopa Center for Learning and Instruction (MCLI)
Maricopa Community Colleges

The 'net connection at MCLI is Alan Levine
Comments to alan.levine@domail.maricopa.edu

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