HTML Section Three

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


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

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:

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!

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.

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>

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