22. More for Images and Lists

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.

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:

<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>

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