8.b HyperGraphics

Activity

HyperGraphics

Now we will create a "hyper" graphic button. First, you need to get a copy of an arrow button from the Lesson 8b Image Studio.

You should now have a copy of the image file somewhere on your computer (You should move it to the pictures folder/directory in your workarea).

Next, add the HTML to make the button work:

1.        Open the second HTML file, msh.html in your text editor.

2.        At the bottom, modify the last line to:

<hr>

<a href="index.html#usa"> <img src="../pictures/left.gif"> 

Return to <i>Volcano Web</i></a>

Note: The inlineimage tag (<img...>) is completely within the anchor between the > that marks the end of the URL and the </a> that marks the end of the hypertext. Also note how the <i> tag is used within the active hypertext to emphasize the title of the lesson. And finally, we have used the <hr> tag to put a horizontal rule or a line above the button graphic.

3.        Save the HTML file.

4.        Return to your web browser, and select Open Local from the File menu to read in the msh.html file.

5.        Select Reload from the File menu to update the changes.

6.        Test the hyperlink to the Mount St. Helens page and the new button that should return you to the Volcano Web page.

"Postage Stamp" Images

First, you need to get a copy of the two image files from the Lesson 8b Image Studio. (These files should be stored in your pictures folder/directory of your workarea).

Next, create the postage stamp link in your main text file:

1.        Open the index.html file in your text editor.

2.        Under the heading Long Valley enter the following:

  This field seismometer measures earthquakes associated 

  with subsurface volcanic forces and may help to predict 

  future events. It sits on a plateau known as the "Volcanic 

  Tableland" formed by a major eruption  600,000 years ago.

  <p>

  <a href="../pictures/seismo.jpg"> 

    <img src="../pictures/stamp.gif" ALT="link to large image" 

    WIDTH="62" HEIGHT="85">

    -- [full size image, 55k] --

  </a>

The inline image, stamp.gif acts as a hyperlink to a larger image, seismo.jpg. When a user clicks on either the "postage stamp" or the text "-- [full size image, 55k] --", your web browser will display the larger image in a browser page.

Note the use of the dimensions of the stamp.gif image in the <img...> tag as well as the ALT=... attribute.

In our hypertext link we provide information that this image is 55k in size. By doing this, you provide the viewer the choice if they want to download an image of that size... If the link leads to something that is 1.6 Mb, as a viewer you might want to know that before you tried to view such a large file size.

3.        Save and Reload in your web browser.

Performance

A) Independent Practice

Try to add buttons that link two web pages to each other

ASSIGNMENT

Study in advance to add preformatted text, special characters, and adding footers and E-mail links.