Lab 3
Page 8


Adding Hypertext Links to Your Page


Text Links within a page

Sometimes when you have a long web page, you may wish to make a relative link to another place on the page. The links in the list at the top of this page all link to headers within the page. This is accomplished with the <A> (anchor) tag.

Make a relative link by following these directions:

  1. Right before your list of hobbies/interests, type in the following line:
      <A NAME = "hobbies">
    This will create an anchor called "hobbies".
  2. Somewhere near the top of your page type in the following line:
      <A HREF = "#hobbies">A Link to my hobbies</A>
    This creates a link, or hypertext reference, to the "hobbies" anchor.
  3. Save and reload your page to try out your new link.

Text Links to other pages

More often, you will want to link to other interesting sites. From your treasure hunt last week, you should have a few URLs of web sites you think are interesting. To add a link to one of these URLs from your web site, simply type in the following:

<A HREF="url"> Type your text here </A>

Any text that you type in between the <A HREF> and </a> tags will be displayed in blue and be underlined. If the user clicks on this text, he or she will be brought to the url you specified after HREF. For instance, to make a link to t he White House, type in:

<A HREF="http://www.whitehouse.gov"> Click here for the White House! </a>

which will produce:

Click here for the White House!

Try adding at least three hypertext links to your web site. If you have created more than one HTML file, you can link those together. You can also link your pages to the CS111 home page, or to any other interesting web sites you have found. Don't forget that you can use a list to organize these links neatly.


Using Graphics as Hypertext Links

The final topic for this section is how to use pictures as hypertext links. You've already seen how to use the < A HREF> tag to turn text into a hypertext link. But what would happen if, instead of text, you used those tags to surround a picture?

<A HREF="http://www.princeton.edu"> <IMG SRC="pulogotrans.gif"></A>

would produce

"pulogotrans.gif" is the name of the file that the Princeton logo is stored under in our directory. We downloaded it off of the University Center for Human Values web page .

The concept of using an image as a link is exactly the same as that of using text. There is something on the webpage which the viewer can click on to go to the new location. From the technical viewpoint, there is no difference between it being a picture and it being text -- you just use slightly different tags.

  1. Make one of the images on your page link to another page
  2. Try placing the attribute BORDER=0 inside the image tag to see what happens to your graphic link.

PREVIOUS 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 NEXT