The B. Davis Schwartz Memorial Library

CREATING LINKS

Linking to Other Sites

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

<a href="http://www.whitehouse.gov/WH/Welcome.html">the President</a>

The browser will display it like this: Let's go visit the President.

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:

<a href="http://www.liu.edu/cwis/cwp/library/html/intro.htm">Robert's HTML Guide</a>

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

<a href="intro.htm">Robert's HTML Guide</a>

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:

<a href="../libhome.htm">C.W. Post Library</a>

This will link to the Reference Department's page:

<a href="../ref/refhome.htm">Reference Department</a>

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:

<a name="middle">Linking to the Middle of a Page</a>

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

<a href="links.htm#middle">Linking to the middle of a page</a>

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:

<a href="#abs">above</a>

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:

<a href="../libhome.htm"><img src="lib-icon.gif"></a>

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.

[Sample image map graphic that you can't see]               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:

<img src="linksmap.gif" usemap="#MYMAP">

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

<img src="linksmap.gif" usemap="#MYMAP">
<MAP name="MYMAP">

</MAP>

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:

<img src="linksmap.gif" usemap="#MYMAP">
<MAP name="MYMAP">

<! before you begin>

<! websites>

<! getting started>

</MAP>

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

<img src="linksmap.gif" usemap="#MYMAP">
<MAP name="MYMAP">

<! before you begin>
<area shape="rect"

<! websites>
<area shape="circle"

<! getting started>
<area shape="poly"

</MAP>

Add in the address of the link:

<img src="linksmap.gif" usemap="#MYMAP">
<MAP name="MYMAP">

<! before you begin>
<area shape="rect"
href="before.htm"

<! websites>
<area shape="circle"
href="www.htm"

<! getting started>
<area shape="poly"
href="started.htm"

</MAP>

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:

<img src="linksmap.gif" usemap="#MYMAP">
<MAP name="MYMAP">

<! before you begin>
<area shape="rect"
href="before.htm"
coords="23,20,85,57">

<! websites>
<area shape="circle"
href="www.htm"
coords="60,102,31">

<! getting started>
<area shape="poly"
href="started.htm"
coords="137,19,197,125,130,126,144,90,93,71">

</MAP>

That's all there is to it. Make sure that you have all the quotation marks and angle brackets in the correct places as shown above. The finished example is at the beginning of this section. For more examples, you can look at the "marble" bar at the bottom of this page, as well as the library map and campus map.




Previous Section
Table of Contents
Next Section



Return to the Library Home Page

HTML by Robert Delaney
rdelaney@aurora.liunet.edu



     Return to Long Island University Home Page                        
                Return to  C.W. Post Campus Home Page