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:
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 t hat you can use a list to organize these links neatly.
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 a technical point, there is no difference between it being a picture and it being text - you just use slightly different tags.
PREVIOUS | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | NEXT |