Linking to Other Sites

The Anchor Tag <a> </a> enables you to link your pages to other pages. The basic form is:

• <a [begin anchor]
• href= [hypertext reference equals]
• " [quotation mark]
• http:// [hypertext transfer protocol. Other protocols that may be used here are ftp://, gopher://, telnet://, tn3270://, mailto:]
• www.whitehouse.gov [URL address of the website. Note that the case of the letters matters]
• /WH/Welcome.html [directory path and filename of the web page at that website. Note that the case of the letters matters]
• " [end quotation mark]
• > [end of opening anchor tag]
• the President [text that will become a link]
• </a> [closing anchor tag]

This is called an absolute link because it contains the entire address of the page.

Linking within Your Site

You can use absolute links to link between pages on your own website. The absolute link to the beginning of this guide would be:

But you can also use relative links. The relative link to the beginning of this guide would be:

If you leave out the transfer protocal, the URL address, and the directory path, the browser will assume that the link is to a file in the same directory on the same website. If you want to link to a page in a different directory on your site, just include the proper path statement. This will link to the Library's home page:

This will link to the Reference Department's page:

Relative links are a bit easier to use than absolute links. Also, if you ever want to move all your files to another directory or to another web server, you won't have to redo all your links.

Linking to the Middle of a Page

Linking to a specific part of a page is a two step process. First, use the <A> </A> tag with the name command to mark the place on the page that you want to link to:

"middle" can be any word, phrase, number, or letter that you want to use to identify that section.

Then, use the <A> </A> tag as shown above to create the link from some other page, but now include # and the identifying name as part of the filename:

Note that you must use the same case in the link that you used in the name. If you leave off the filename like this:

The browser will assume that you are linking to another part of the same page that the link is on. For more examples of where I used this function, you can check out the table of contents and the Internet Bibliography.

Linking from Graphics

To use a graphic image as a clickable link, enclose the <IMG> tag inside the <A> </A> tags:

See the section on graphics for a more detailed discussion of the use of the <IMG> tag. Several things have been left out here for the purposes of clarity.

Linking from Image Maps

There are two methods you can use to mark off different sections of a graphic to link to different things. Server side image maps have been around the longest and are supported by more browsers, but you'll need the cooperation of your server administrator in order to use them. Client side image maps can be used on your own as part of the HTML, but may not be supported by as many browsers (Netscape 2.0 or higher and recent Internet Explorer are ok). Of course, neither method will be of any use to people with a text browser, so you may want to make some special provisions for them, like including a text menu under the graphic.

Client side image maps are one of the more complicated things in HTML, so you may want to come back to this section later, once you feel more comfortable with the basics.

Suppose we want to make each shape on this graphic, linksmap.gif, link to a different page. First, give your map a name such as MYMAP and include it in the <IMG> tag. Case matters:

(See the section on graphics for a more detailed discussion of the use of the <IMG> tag. Several things have been left out here for the purposes of clarity.)

Now we define what's inside the image map using the <MAP> tag:

Make a note to yourself of what you want each link to be. This is optional, but it can make it easier to understand if you have many areas marked off for links. You must include the exclamation point:

Decide the shape that you want each area to be. There are three shapes that you can use: rectangle, circle, and polygon (which is anything that isn't a rectangle or circle):

Add in the address of the link:

Now comes the tricky part. You have to define the pixel coordinates of each of the areas. Your graphics software may show you the pixel coordinates of a point when you click your mouse on it (or by some other method). Other software exists especially for making image maps and will automatically tell you all the coordinates of any area you indicate. Or you can estimate the coordinates yourself through trial and error.

Rectangle

You need to list the coordinates of the upper left corner and then the lower right corner. In this case, the upper left corner is 23 pixels from the left edge of the image and 20 pixels down from the top (23,20). Note that the distance from the left is written first and then the distance from the top. The lower right corner is 85 pixels from the left edge and 57 from the top (85,57). Therefore the entire coordinate information is 23,20,85,57

Circle

You need to list the coordinates of the circle's center and then the number of pixels from the center to the circle's edge (the radius). In this case, the center is 60 pixels from the left and 102 pixels from the top (60,102). The radius is 31 pixels. Therefore, the entire coordinate information is 60,102,31

Polygon

You need to list the coordinates of every corner. You can start with any corner, but then you must do the rest in order around the polygon. In this case, I started with the top corner, which is 137 pixels from the left and 19 pixels from the top (137,19). I then went clockwise to the next corner (lower right) which is 197 pixels from the left and 125 from the top (197,125). The third corner is at 130,126. The fourth is at 144,90. And the fifth is at 93,71. Therefore, the entire coordinate information is 137,19,197,125,130,126,144,90,93,71

Putting it together: