Hyperlinks

Hyperlinks

A History of Hyperlinks

Hyperlinks are the keys that unlock information on the Web.

The original reason HTML was developed was to enable researchers working in the early days of the Internet to better format and share information in the form of web pages. Style tags provided the means to format the document and hyperlinks provide the means to navigate within one document or between documents. A hyperlink consists of two parts; first, the full address of the external or internal link and second, the text or image that is displayed on the page. By separating the link from the display we are able to use simpler, more descriptive names in place of a long, incomprehensible web address. For example the address http://www.qvcc.commnet.edu/home.html can be replaced with QVCC Home Page.

Hyperlinks are created using the HTML anchor tags <A></A> along with their attributes (either NAME or HREF). Using either Netscape Composer or Microsoft FrontPage the process is accomplished by highlighting an area of text, or an image, and clicking on the 'make hyperlink' icon on the toolbar.

Internal Hyperlinks

Internal hyperlinks provide a means of navigating around a long webpage.

An internal hyperlink is one that takes us to a new location within the current open web page. They provide a wonderful means to maneuver through the information we've presented on our pages. They are easy to set up, understand and use.

Before we can establish an internal hyperlink first we must create either a 'bookmark' (Microsoft terminology) or a 'target' (Netscape terminology). A bookmark (or a target) defines the place within the text (a bookmark must refer to some text, not an image) where we want to maneuver to. We do so by using the <A></A> anchor tags along with the NAME attribute. For example the header for this section is defined as a bookmark with the following HTML code:

<a name="Internal Hyperlinks">Internal Hyperlinks</a>

In this case we defined a bookmark around the text 'Internal Hyperlinks' called 'Internal Hyperlinks' (although we could have used any descriptive phrase we wished, such as 'bookmark one'). Notice that the name we choose for our bookmark is enclosed in quotation marks. In either Microsoft Frontpage or Netscape Composer we create a bookmark (or a target) by highlighting the text where we want to create our bookmark and selecting Bookmark from the EDIT menu (or Target from the INSERT menu).

Once a bookmark is defined we can establish a hyperlink to it again using the anchor tags <A></A> and the HREF attribute as in:

<a href="#Internal Hyperlinks">Internal Hyperlinks</a>

Notice in this case that the href attribute (hyperlink reference) is enclosed again in quotation marks but also begins with a pound sign #. This identifies the link an an internal bookmark. In Frontpage you establish the hyperlink by first selecting the text (or image) to serve as the link, then click on the 'Create Hyperlink' Icon. From the dialog box that appears select the bookmark you've previously defined from the dropdown list box titled 'bookmark'. In Composer select the named target from the bottom section of the hyperlink dialog box.

Another common use for bookmarks is to provide a means to return to the top of a long webpage by defining a bookmark at the top of the page and then linking to it at various points within the document. The small, round buttons adjacent to each of the headers in this page serve such a function.

External Hyperlinks

A URL provides a unique address for every resource on the web.

An external hyperlink is one that opens a webpage located on a remote computer. They provide the links that tie the Web together and also rely on the HTML anchor tags <A></A>. They differ from internal links only on the hyperlink reference (href) used. In this case the href will include the full address of the remote resource using the URL (Uniform Resource Locator) of the resource. URLs are a standard means of addressing computers on the Internet. A URL will generally consist of three parts: an Internet Protocol, a unique computer name, and the name of the directory and/or file requested. For example the URL;

http://www.qvcc.commnet.edu/home.html

is the full address of the QV homepage. Breaking the URL down into its component parts we have first the Internet protocol http:// which stands for Hyper Text Transfer Protocol. This basically says that we are looking for an HTML webpage (other less common protocols include ftp:// for File Transfer Protocol and mailto:// for the e-mail protocol). Second comes the name of the computer where our college webpage is located www.qvcc.commnet.edu. Lastly comes the name of the actual homepage file home.html. (Web pages generally end in either .html or just .htm).

An easy way to correctly enter hyperlinks to remote resources is to copy the address of the resource directly from the address bar of your browser by highlighting the address and pressing CTRL-C then paste the address into the hyperlink dialog box pressing CTRL-V.

Linking from an Image

An image can also serve as a hyperlink. Highlighting an image and clicking on the 'Create Hyperlink' icon will open the hyperlink dialog allowing you to specify a target. Right-clicking on an image and selecting image properties will also allow you to specify a hyperlink location. Once an image has been defined as a hyperlink it will have a default hyperlink-colored border (usually blue) around it. If you would rather the image not have this border, go to the image properties dialog and set the border thickness to 0. An example of an image tag used as a hyperlink:

In this case the link refers to a bookmark (#Top) and not a remote link.

Absolute versus Relative Links

When a hyperlink refers to a resource by its full address such as:

http://www.qvcc.commnet.edu/home.html

it is said to be an absolute reference. Sometimes though, it is useful to refer to images or webpages by indicating their location relative to the page where the link exists. Such references are called relative hyperlinks and may look something like this:

../start/starting.html

This form of reference tells the browser to go up one directory level from its current position ( .. ), find the folder titled 'start' ( /start ) and in that folder locate the page entitled 'starting.html'. The main advantage of using relative hyperlinks is that they allow you to create and test entire websites on-disk without having a server to answer http: requests.

Additional Resources

Return to QVCC Home page.

last update: 02/25/04 by michael lynch