Basic Web Page Writing Step 16 - HyperGraphic Links

Basic Guide For Writing Web Pages -- Introduction / Table Of Contents / Previous Page / Next Page

Basic Web Page Writing Step 16
HyperGraphic Links

In step 14 and 15 you saw how to create links to jump to a sections of your page and also jump to different documents on World Wide Web. In both steps you created hypertext to create the hyperlink to these pages and sites. Pictures can also act as hyperlinks and add more meaning to the links.

Starting with this step, you will see some neat features that you can add to your pages. The steps are not necessarily in any particular order and you may jump from one to another to see how to do each of the features.

This step will show you how to use Graphics instead of text to create the hyperlink by using a graphic button instead of text.

A HyperLink Graphic Button

You should already know who to use text to create a hyperlink. If not, you can review steps 13 through 15. Now you will use in-line graphics as in step 11 to create a hyperlink graphic.

This is done by putting the tags for the in-line image inside the hypertext portion of the anchor tags.
See Below:

<A HREF="name.htm"> <IMG SRC="picture.gif"> text to display</a>

In the following example you will jump to a page called graphic.htm. You can use the usflag.gif file you downloaded in step 10. We'll also use the Name= command from step 14 to so we can get back to this spot when we return from the graphic page. The name we'll use is jump1

<A NAME="JUMP1" HREF="graphic.htm"> <IMG SRC="usflag.gif"> text to display>

Go to Graphic Page

Now when someone clicks on the text or the flag, they will go to the new page.
It's not necessary to have both a graphic and text, but for people viewing your page without graphics on, it does make it look better and lets them know what to do.

Using Small Graphics to Link to Larger Ones

There are times when you really want a large image to be available, but you may want to give the person viewing your page a preview of the picture before they take the time to view the large one. One way to do this it to create a small version of the larger picture. It can be done easily with any number of graphic programs.

You will create an in-line image like you did in step 11 and use the small image to call up the larger one on a separate page. To do this example you need a large and small picture.
Below are copies of a large and small picture of a freeway. Click on each once to display/download the GIF file to your computer. (If your forgot how to download see the instructions)

Save them in the same directory as your HTML text file as carsmall.gif and carbig.gif.

The following example will use the small picture to link to the big picture.

<A HREF="carbig.gif"> <IMG SRC="carsmall.gif"> " See Full Size Picture"</A>

This will produce:

See Full Size Picture

When a person clicks on the graphic image they see the small picture of the cars. When they click on the "See Full Size Picture" text, they are then shown the larger picture on a separate page. Give it a try!!

Using a graphic button is a nice way to dress up you page, but don't get carried away with graphics. To much of a good thing can get tiring to others. Experiment with different types of links until you feel comfortable with them.

In step 17 you will see how to create the different colors and backgrounds you saw in some of the example pages.

STEP 17 -- Background And Foreground Colors

Basic Guide For Writing Web Pages -- Introduction / Table Of Contents / Previous Page / Next Page

created by Larry Curreri,

last modified: January 14, 2002

This page hosted by Get your own Free Home Page

Basic Guide For Writing Web Pages -- Introduction / Table Of Contents / Previous Page / Next Page