Overview
Linking text or an image on a web page creates a way for your viewers to travel from one page to another.
All links on a page will have a distinctive appearance unless it is overridden by the browser or by using Cascading Style Sheets (CSS). There will be an underline beneath the text of the link and it will usually be blue in color. It is also possible to place the <a> tag around an image tag to make that image a link.
<a>
A link (or hyperlink as it is also called) is created with a special <a> tag called an "anchor". It requires a closing tag and is used to delineate the text or HTML content that should be linked on the page. An <a> tag can also be used to mark a section of a web page as a target for another link to jump to. For example, this link will jump to the bottom of this page. If the "name" and "id" attribute is used, the <a> tag is an anchor, but if the "href" attribute is used then it is a link. Both attributes can be used simultaneously.
- Attributes for the
<a>tag:- href - This is the most used attribute for the
<a>tag. This is what is used to create a hyperlink. The value associated with the href attribute should be either a complete or relative address to another web page, a mail link or an anchor name (prefaced with the "#" symbol). See below for more information on how to create these values for your links. - name - This attribute creates an anchor on your page that another
<a>tag can link to. In essence, the use of the name attribute means that you must use two<a>tags; one as the anchor using the name attribute and one as the link to the anchor using the href attribute. To link to an anchor in this way, the href attribute must be set to the name of the anchor prefaced by a "#" or pound sign. For example:<a href="#bottom">Link to the bottom of the page</a>And the anchor tag could look like this:<a name="bottom" id="bottom">This is the anchor text</a>This attribute is depreciated in the latest version of the web standards in favor of the "id" attribute. - id - The creates a unique identifier that distinguishes the <a> tag from every other element on the web page. Since the name attribute is slowly being phased out in the latest browsers, it is best to use both the name and the id attributes together when you create a anchor on your page so that you will be safe with both old and new browsers. Make sure that both attributes have the same value. An example of this is shown above in the "name" attribute information.
- target - This attribute defines where the new web page will be loaded into when the link is clicked on. The options are "_blank", "_parent", "_self", "_top" and a frame's name. The default is "_self". Unless you are using frames (which you shouldn't), the only reason to use the target attribute is with the _blank option.
- _blank - This will cause the link to always open a new browser window. This is useful if you are linking to another site entirely but still want your site to be accessible on the person's computer. Many people find this to be annoying, so use it sparingly.
- _parent - Only used with frames, otherwise it acts like "_self"
- code - This is the normal function of a link. The new page will load in the same window as the original page.
- _top - This ensures that the new page loads in the full screen of the window. Mainly used to "break out" of frames. Otherwise it acts like "_self"
- A frame's name - If you are using frames with your site (they should be used rarely, if at all) then you can enter the frame's name so that the resulting page you are linking to will appear in the appropriate frame window.
- href - This is the most used attribute for the
- Example:
<a href="somewhere.html" name="linktome" id="linktome" target="_blank">Go Somewhere</a>This tag will create both a link and an anchor. The link will go to the page "somewhere.html" and the anchor is named "linktome". The target attribute causes the link to open in a new browser window.
Send an email with a link
Besides linking to another web page or within another location on a page, you can also create a link to an email address. Depending on the browser’s ability, the operating system and the software installed, this will cause the viewer’s email program to automatically load and the email address will be placed in the “send to” field of the new email window.
To do this, type the email address as the value for the "href" attribute and precede it with "mailto:" For example: <a href="mailto:joesmith@somewhere.com">Email Joe</a> There is an unfortunate side effect with doing this, however. There are programs created by "spammers" that scan web pages looking for email addresses within a web page. If it finds one, that email address is added to the spammer's database and that address will begin to be filled with junk. There are ways around this, fortunately. If you are interested, send a message to ETS to learn more.
Relative and absolute links
When you create a link by adding a value to the "href" attribute of an <a> tag, you must be careful that the value will not create a "broken" link, or a link that is not valid. This is a very easy thing to do, especially if you rely on an HTML editor to make these links for you. It is very common that an HTML editor will create a link that points to a location on the computer you are working with instead of the correct location on the web server.
There are two ways to create a link; relative and absolute. An absolute link defines the location of the page completely. For example: <a href="http://www.engr.colostate.edu/ETS/index.html"> This is an absolute link because it includes everything needed to find the location including the protocol, server, directory and file name. Absolute links are easy to use and you rarely have trouble with them. This method must be used if your link points to a location that is not within the web server your pages are on.
On the other hand, relative links take advantage of the fact that the browser already knows where the current document is. And so all that is needed is the relation between the current document and the location of the link. For example: <a href="page.html"> is relative because only the file name is given. The browser knows the location of the current document and so assumes that the file "page.html" is in the same directory as the current document. What if the file you are linking to is not in the same directory? Then you will need to provide either the path to a sub-directory by including the directory's names or use "../" to go "up" a directory from the one you are in. This table may shed some light on this concept:
| The Path | What it means |
|---|---|
<a href="page.html"> |
The file "page.html" is located in the current directory. |
<a href="tips/page.html> |
The file "page.html" is located in a directory called "tips" that is located in the current directory. |
<a href="tips/other/page.html> |
The file "page.html" is located in a directory called "other" that is located in a directory called "tips" that is located in the current directory. |
<a href="../page.html"> |
The file "page.html" is located in a directory that is one level up from the current page. Using the example immediately above, if the current directory was "other", then this path would go one step up to the "tips" directory to find the "page.html" file. |
<a href="../../page.html"> |
The file "page.html" is located in a directory two levels up from the current directory. |
<a href="/page.html"> |
The file "page.html" is located in the "root" of the web server. Notice the slash before the name. This means that the browser will go all the way down to the most basic or "root" level of the web server to find the file. For example: if the current file is located at "http://www.engr.colostate.edu/ets/how/web/links.html" then this link would go to "http://www.engr.colostate.edu/page.html" |
These methods could be used together to find a specific file within your web directory structure. For example: <a href="../../prefs/location/index.html"> would go up two directories and then back down two directories named "prefs" and "location" to find the "index.html" web file.
Web directory locations
A common problem with creating a link using an HTML editor is that your links will work just fine when your web file is on your computer, but when you place the files on the web server, the links all break. This is because your editor is pointing the link to a location on your computer and not the correct location as it should be on the server as illustrated above.
There are a number of locations on the Engineering network that have been set aside for serving web pages via the Internet. These locations are basically directories on the network that have been configured as a location to “serve” web pages via the Internet. The main thing to remember concerning this is that any directory or file that is “up” from the web directory is invisible to the Internet. Or in other words, the only files visible on the Internet are within a web directory that has been created to serve web pages, and any sub-directories it contains. And so any link to a location that is not within that directory will not work. The browser will tell you that the link could not be found.
For example: all faculty, staff and students in the Engineering College have access to a “public_html” directory that has been set aside to serve web pages from within your U:\ drive. So all files placed within the public_html directory can be viewed via the Internet. But any file within your U:\ drive that is not within your public_html directory can not be seen or linked to via the web.
*This line of text is the anchor for the link at the top of the page. This link will jump back to the top again.
