Chapter 5 - Links

                            

[Chapter 4] << [CONTENTS] >> [Chapter 6]

This lesson introduces the basics of using text and images as hyperlinks within and between HTML documents.

• Hyperlinks - An Introduction
• Text Hyperlinks
• Relative Versus Absolute Pathnames
• Image Hyperlinks
• Image Borders
• Image Maps
• E-Mail Hyperlinks

Hyperlinks - An Introduction

The chief power of the Web comes from its ability to link from one web page or site to any other regardless of where (ie. which computer server) they physically reside. This can be achieved by the use of hyperlink tags. Though only text could be so tagged in earlier versions of HTML (hence the origins of the name HyperTEXT Markup Language), today any text or image can serve as a hyperlink to any another page, site or even an e-mail address, jumping to the appropriate resource when clicked on.
To add a link, the <A HREF=> and </A> tags are used. These tags bracket a portion of text or an image which will serve as a hyperlink, with the "HREF=" attribute identifying the destination URL.

Text Hyperlinks

To link with text simply bracket the desired word or phrase with the <A HREF=> and </A> tags. Typically, though not always, hyperlinked text is displayed in browsers with an underline, as illustrated below:

HTML Code		Browser Display
<A HREF=http://www.harshdroid.com/comics/dilbert/> Check out today's Dilbert comic!</A>		Check out today's Dilbert comic!

Relative Versus Absolute Pathnames

An important point to remember when creating links is to make sure the correct URL is given. In order to provide a link to documents in other directories, the complete path from the current document to the linked document must be indicated. For example, a link to a file called "dilbert.html" located in the subdirectory "comics" would be written as:

<A HREF="comics/dilbert.html">Dilbert Comic</A> These are called relative links because the path to the file being linked to is specified relative to the location of the current file. The absolute pathname (ie., the complete URL) of the file could also be used, but relative links are more efficient in accessing a server. They also have the advantage of making documents more "portable" -- for instance, several web pages stored in a single folder on a local computer, with relative hyperlinks between each other, could be uploaded to a web server together, where the links would continue to work just as they do within a locally stored copy.
The exception to this is when links are made to websites on other servers the absolute pathway must be given (ie., the complete URL).
Thus the relative pathway for this page is:



<A HREF="lesson5.htm"> Whereas the absolute pathway is:



<A HREF="www.alternetwebdesign.com/htmltutorial/lesson5.htm">

Image Hyperlinks

Instead of using text as hyperlinks, images may be used instead. This method of providing visual clues to links is becoming increasingly common on the Web. To do this, simply surround the image tag with hyperlink tags, in the same way a text link is tagged:

HTML Code		Browser Display
<A HREF=http://www.unitedmedia.com/comics/dilbert/> <IMG SRC="dilbert.gif" WIDTH=78 HEIGHT=72 BORDER=0></A>

Image Maps

Image mapping is a method of hypertext linking different parts of an image with the use of pixel coordinates to denote the areas. With an image map, a single image can provide many links to a number of different URLs.
Below is a sample image map as it appears in HTML code and within a browser window:

HTML Code		Browser Display
<MAP NAME="links"> <AREA HREF="lesson1.htm" SHAPE="RECT" COORDS="10,11,121,39"> <AREA HREF="lesson2.htm" SHAPE="RECT" COORDS="10,48,121,73"> <AREA HREF="lesson3.htm" SHAPE="RECT" COORDS="10,78,121,106"> <AREA HREF="lesson4.htm" SHAPE="RECT" COORDS="10,114,121,137"> <AREA HREF="lesson5.htm" SHAPE="RECT" COORDS="10,144,121,170"> <AREA HREF="lesson6.htm" SHAPE="RECT" COORDS="10,172,121,201"> <AREA HREF="lesson7.htm" SHAPE="RECT" COORDS="10,205,121,235"> <AREA HREF="lesson8.htm" SHAPE="RECT" COORDS="10,234,121,266"> </MAP> <IMG SRC="lessons.gif" WIDTH="135" HEIGHT="278" usemap="#links" BORDER=0 NAME="links">

E-Mail Hyperlinks

In order to create a link which launches the visitor's own e-mail program while filling in a specified address, include the "MAILTO:" tag with the desired e-mail address as shown here:

HTML Code		Browser Display
<A HREF="MAILTO:name@server.com">Click here to send e-mail.</A>		Click here to send e-mail.

Share on Google Plus