HTML Section Three



In this section, we'll be looking at

  1. Hypertext Links
  2. Inserting Graphics
  3. Graphics as Hypertext Links
  4. Mailtos

Creating a text link <A HREF="webaddress">text</A>
Text links (often called "hypertext links") are created by surrounding the URL of another web page with the appropriate tag.

Example: to create a hypertext link to the Blue Skyways as we have here, the HTML would appear as follows:

<A HREF="http://skyways.lib.ks.us/kansas">Blue Skyways</A>

Note that this requires a beginning and ending tag, but unlike other tags we've dealt with, the ending tag differs slightly from the beginning.

<A HREF="URL"> signals to the browser that the link will take the viewer to another location. The URL inside of the quote (" ") tags is simply the destination.


Inserting Graphics <IMG SRC="image">
Inserting a graphic requires the empty tag <IMG SRC="imagename">. For example:

<IMG SRC="http://skyways.lib.ks.us/kansas/images/usflag.gif" WIDTH=153 HEIGHT=83 ALT="US flag" VSPACE=12>

Produces:
US flag

Carefully review the contents of the Image Tag. You should always place the WIDTH and HEIGHT size in pixels to make a dramatic improvement in the time a browser takes to display an image. To obtain these values for your graphic, open an image in Netscape and the pixel width and height is displayed in the title bar. Example: to view the American flag image size in pixels, right-click the image above in Windows and select "View Image" - or hold down the mouse button for Macintosh until a dialogue box appears and select "Open this image."

The ALT tag is provided as a courtesy for your audience who may be viewing your page with graphics turned off. You can also assign vertical VSPACE= and horizontal HSPACE= pixel indicators within the Image tag to provide additional space surrounding the graphic. The above graphic assigns an extra 8 pixels above and below the graphic (pixels are a measurement used for computer graphics).

In summary, here are all of the tags that can be used within the <IMG> tag to format your graphic. There is no preferred order for these:

SRC=" " the physical location of the image on a server
WIDTH= indicates the image pixel width
HEIGHT= indicates the image pixel height
ALT=" " displays text for browsers with images turned off
VSPACE= adds vertical pixel space above and below an image
HSPACE= adds horizontal pixel space to the sides of an image
BORDER= indicates a border for links (can be set at 0)
ALIGN= LEFT or RIGHT moves image accordingly
ALIGN= TOP, MIDDLE or BOTTOM moves text accordingly

Making a graphic a link
Since you learned how to make text into a link, the rule for making an image a link is nearly identical. Simply place an Image tag inside of your link tag. Example:

<A HREF="http://skyways.lib.ks.us/kansas/">
<IMG SRC="http://skyways.lib.ks.us/kansas/images/skybttn.gif" BORDER=0
WIDTH=66 HEIGHT=43 ALT="Blue Skyways" VSPACE=8></A>

Produces an image linking you to the Blue Skyways home page:

Blue Skyways

Making a "Mail To" Tag
You may want to provide your reader a method of communicating with you via e-mail. You could write your e-mail address on the page but a more effective method is a "Mail To" link. Example: send me mail. Select that link and see what happens.

Here's how to create a "Mail To" link:

<A HREF="mailto:crezac@kumc.edu">Let's hear from you!</A>

Creates: Let's hear from you!


Just for Fun
Make an image into a "Mail To:" link you ask? Simply replace text you'd use to create a link with an image tag! Go ahead, try it.

Tiny Hawk

The Jayhawk "mail to" link is coded as follows:

<A HREF="mailto:cscheer@kumc.edu">
<IMG SRC="http://www.kumc.edu/Images/tinyhawk.gif" HSPACE=6 VSPACE=6 WIDTH=46 HEIGHT=45 ALIGN=TOP BORDER=0 ALT="Tiny Hawk"></A>



ASSIGNMENT: Add the above tags to your HTML document.
  1. Create a text link to Blue Skyways from inside your paragraph
  2. Find a graphic and add it to your page
  3. Make your graphic a link to a web site of your choice
  4. Save it, and open it in Netscape

Move on to Section Four

REVIEW
Introduction | Section Two | Section Three
Section Four | Design Considerations