Hyperlinks

Modules >>
Webpage Construction >>
Hyperlinks

For your assignment, your website must include hyperlinks to other websites on the WWW (absolute hyperlinks) and all of your webpages must contain a link back to your home page (as relative hyperlinks).

There are a few different types of hyperlinks used for navigation: absolute links, relative links, and anchor links. These are described below. If you are using an HTML Editor, you will not have to get involved in coding relative hyperlinks, but it is important that you understand what each of these links are.

Absolute hyperlinks

An absolute hyperlink contains the complete URL for a website. That is, it shows the entire path to the file. For example, http://www.educ.uvic.ca/compined/index.htm is an absolute hyperlink. The first few letters of an absolute URL contains a command that tells the browser what type of resource is requested. An http:// command informs your browser that it is accessing a hypertext file. The next part (www.educ.uvic.ca) is the web server address followed by the folders (there could be one or more) that contain the HTML file to be used. In this case, "/compined" is a folder in which the "index.htm" file is stored. When the home page is named "index.html" or "default.html," you can omit referring to this file in your URL. For example, we could just use the hyperlink http://www.educ.uvic.ca/compined/" and leave out the "index.htm" text, because the browser will search for a default file (usually called index or default) in the last folder mentioned.

Relative hyperlinks

A relative link describes the location of the desired file by referring to the location of that file in relation to the one being viewed. That may sound confusing, so the following example is used. The index.htm file previously mentioned is stored in the "compined" folder on the www.educ.uvic.ca web server. Another webpage stored in that folder is called "intro.htm" Because these two files are stored in the same folder, a link from index.htm to intro.htm does not need to be an absolute hyperlink. Instead, it can just refer to "intro.htm." The browser will look for a file of that name within the same folder.

I keep all of the HTML files for each module stored in its own folder on the Comp-in-Ed website. For example, this webpage is called "hyperlnk.htm" and it is stored in the "html" folder as follows:

/compined/Level1/html/hyperlnk.htm

I store my main pages on the first level as follows:

/compined/intro.htm

If I were to insert a hyperlink on this page that would access the Intro webpage, I could use the absolute link:

http://www.educ.uvic.ca/compined/intro.htm

However, a relative link would be much better to use. If the server name were to change from "www.educ.uvic.ca" to "www.education.uvic.ca," and I had used absolute links, then I would be required to go back and edit ALL of my hyperlinks. Not fun!

In using a relative link to reference a file in a folder that is one level higher than the current file, the link would include two periods and a forward slash. To link to the intro.htm file from this hyperlnk.htm file, I would need to go up two levels, so the relative link would be entered as follows:

../../intro.htm

By using relative links, I can easily move my webpages between servers or easily move them from my computer to a server. A common mistake is to use absolute hyperlinks between webpages created on your computer. When these webpages are uploaded to a server, the absolute links would be referring to a file on your C drive, A drive, etc. For example, that hyperlink might appear as: A:/myfile.htm, but there is no A drive on the web server.

If we were to talk street addresses to get an understanding of absolute and relative hyperlinks, it might be helpful. The address "555 Cypress Street, Victoria, B.C." would be an absolute link. If you were standing on Cypress Street, though, you need only to look for the house number, 555.

Anchor links

The previous two types of links will open a webpage and bring the viewer to the top of that page. Anchor links, on the other hand, will bring a user to a specific location on a page. Often they are used to skip to a lower section of a webpage. You will find anchor links at the top of each module page. The links "prerequisites," "lesson," and "assignment," are anchor links that will skip the user to the different sections of that page. The arrows up are linked to "#top" which will move the user back to the top of the page.

Use the tutorials and help menus available to help you create links in your webpages. Post any questions to the WebBoard or send them to the coordinator if you need help.

Please continue onto the next section on Tables.