The HTML Lab
Of course without hyperlinks a webpage would hardly be considered as such. A link can be to another webpage, to a text file or Word document, to an image or a piece of streaming media. In all cases such links are provided by the <A></A> tags. This tag differs from most others in that it MUST contain additional information within the tag itself - namely the address information of the link in question. The tag takes this general form:
A hyperlink can refer to an external webpage, a local webpage, or to a bookmark or internal link.
<A HREF="http://www.somewebpage.com">Text to display for link.</A>
When a hyperlink refers to a webpage on another server somewhere (as in the example above) it is said to be an external link and as such it must contain the full URL of the target page i.e. http://www.w3c.org. Of course, the easiest way to enter a full accurate URL is simply to navigate to the page in question and highlight the URL in the browsers address bar and press the CTRL key along with the C key - CTRL+C. Use CTRL+V to paste the address into the editors hyperlink dialog box.
A hyperlink can refer not only to a webpage that resides on another server but also quite often to a page that is part of the current web. This local or internal hyperlink functions exactly as an external hyperlink although the URL for the link itself my be constructed somewhat differently. Unless the designer decides to enter absolute URLs (see below) for his/her links the links will be relative links. A relative link display not the full URL of the webpage in question but rather the relative path in folders to this file from the source page. So, for example, The relative link from THIS webpage (the full URL of which is http://www.qvcc.commnet.edu/lab/hyperlinks.html) to the colleges homepage (http://www.qvcc.commnet.edu/index.html) would be <A HREF="../index.html">. This essentially tells the browser to move up one folder (that's what the "../" means) and look for the file named index.html.
The advantage inherent in this scheme is that not only are the links shorter and easier to read but, also, they are portable. Meaning that, so long as the same files are in the same relative position in folders on your harddrive, or zip drive, or any other media, they will work just as well. Essentially you can carry your website along with you in your pocket.
Some hyperlinks point not to another webpage at all but rather to another location within the current document. These hyperlinks rely on a previously defined "bookmark" or "anchor" within the current document that serves as the target for the hyperlink. These bookmarks use the same <A> tag but with a different internal identifier - the "name" property. For example the following is a bookmark defined on this page:
<a name="External_Links">External Links</a>
A link created to go to this bookmark would look like this:
<a href="#External_Links">External Links</a>
Where the "pound sign" (#) identifies this hyperlink as a local bookmark. Try it. A bookmark can also be combined with a external or internal link to not only take the user to another page but also to a specific location within that page. Try it. The link would then look like this:
<a href="basic.html#HTML_Markup_Tags">Try it</a>
An image may also be used as the reference point or "clickable" part of a hyperlink. This is accomplished by simply placing the <IMG> tag within the opening <A> and closing </A> tags. For example:
<a href="../starting.asp">
<img border="0" src="apple.jpg" alt="Starting Points">
</a>
Here the reference to the image file "apple.jpg" is enclosed by the hyperlink tags for the page "starting.html" in a directory one folder above the current one. Click on the apple image below for a demonstartion. For more on images in general see the images page.
An absolute hyperlink contains the FULL URL address of a webpage.
As mentioned earlier the address of a particular local webpage can be given in one of two ways. As either a relative or absolute URL. The absolute URL will include the full address for the file while the relative link will only display the relative path within the current website to the file in question. The following two links each point to the same file relative to THIS page:
<a href="http://www.qvcc.commnet.edu/index.html">QVCC Homepage</a>
<a href="../index.html">QVCC Homepage</a>
Either link will work but there are some differences. First of all, the absolute link will always work (so long as this page continues to reside on this website) but it will always point to the file on the server. There are many cases, however, where it might be preferable to develop a website locally, on you own hard drive prior to placing it on a web server for the rest of the world to access. In this case the use of an absolute link poses a problem making it difficult to test local navigation. Each hyperlink will take you back to the server rather than the local page you are trying to develop.
Another form of hyperlink is the MAILTO tag which is used when you wish to include an e-mail link to a particular user. This link, which takes the generic form:
<a href="mailto:someone@some.address.edu">Disply Name</a>
will attempt to load the users default e-mail program with the e-mail address included in the link preloaded into the TO field on the e-mail message when someone clicks on the "Display Name" text. What this link will NOT do is send a message where the users default e-mail program is web based (Hotmail, Yahoo, etc.). In this case the link will attempt to load whatever e-mail program it finds on the computer (probably Outlook Express) but the user will be unable to send the message unless they properly configure the mail client.
last update:
02/26/2004
by: michael lynch
