Links
« Previous: Presentational HTML | Next: Lists »
An html document consists simply of plain text. What makes web pages interesting, and useful, is their ability to link to external files.
This can be done in different ways. For example, you can create hyperlinks to different web pages using the
href attribute in the <a> tag,
and you can insert images by linking to the image file using src attribute in the <img> tag.
These attributes tell the browser where to find the file.
Links can be absolute or relative.
| Code | Output |
|---|---|
<p>This is an absolute link:<br /> |
This is an absolute link: This is a relative link: |
Absolute links
Absolutely defined links point to a specific location or address which does not depend on where the current document is saved. This must include the protocol (eg 'http://'), the address of the server (eg 'www.sjhwebdesigns.com'), the directory in which the target file is located (eg 'demo'), and the file name (eg 'monster.html'), separated by slashes. So the full address is written as http://www.sjhwebdesigns.com/demo/monster.html.
Absolute links can also point to a file on your hard drive, eg file:///C/sjhwebdesigns/demo/monster.html. Never do this - the link will not work once the page is transferred to a remote server.
Relative links
Relatively defined links point to a location relative to where the current document is saved.
If you are linking to a page within the same folder as the current page, you only need to specify the file name of the target page. For example, href="target.html".
If the target page is contained within a subfolder, you need to specify the name of that folder, then the file name, separated by slashes - for example href="subfolder/target.html". You can burrow down into further subfolders, to as many levels as you like, eg href="subfolder/anotherfolder/yetanotherfolder/target.html".
If you need to go up to a parent folder, use '../' to go up one level, for example href="../target.html". Again, you can go up as many levels as you like.
In the example above, we go up three levels - '../../../' - all the way back up to the top level of this site. We then point to the folder 'demo', and the file 'monster.html' within that folder.
So, to find monster.html from this page, the link can be written as ../../../demo/monster.html.
If this is starting to make your head hurt, don't worry too much, as it's really a lot more simple than it looks. With a little practice, it'll become second nature. Also, page authoring tools such as Dreamweaver can browse for files and insert the correct link for you; however it helps to understand the principle so that you know where your links are pointing to. In particular, you should make sure that Dreamweaver does not create absolute links to files on your local system - this can happen if you create a link inside a new document before saving it.
Relative links can save a lot of typing as they're usually much shorter, so they should be used to link to files within your own site. They also have the advantage that they will work on your local system as well as the remote site, and even if you transfer your site to a different domain. Absolute links should only be necessary when linking to external sites.
Absolute and relative links work in the same way for the src attribute of the <img> tag as they do for the href attribute of the <a> tag. The difference is that an <a> tag can be linked to any type of document, whereas <img> must reference an image file.
Hyperlinks
Hyperlinks - links to other web pages - are created using the <a> tag.
The location of the target page is specified using the href attribute as described above.
We also have some additional options for hyperlinks:
Opening a link in a new window
Adding the attribute target="_blank" to the <a> tag will make the link open in a new window. While this can sometimes be useful, it can get become very annoying to users if a site constantly pops up new windows. If you do use this, you should tell your visitors that the link will open in another window.
| Code | Output |
|---|---|
<p>See the scary monster (link opens in a new window):<br /> |
See the scary monster (link opens in a new window): |
Email links
You can create an email link by using mailto:name@example.com inside the href attribute.
| Code | Output |
|---|---|
<a href="mailto:name@example.com">email me</a> |
email me |
Be aware that putting your email address on a publicly visible website will leave it open to spam harvesters, and you will almost certainly end up getting prodigious quantities of junk mail as a result. One partial solution to this is to use a utility such as the one at www.knechtology.com/stop-spam/email_encoder.html to encode the value of the href (including the mailto:) into character entities.
Anchors
The <a> tag can also be used to create bookmarks (anchors) within documents, so that the user can jump to different locations on the same page. The anchor is defined using either the name or id attributes.
| Code | Output |
|---|---|
<p> |
Note that # precedes the anchor name in the href attribute (to tell the browser that the link is to an anchor) but not in the name/id attribute.
You need to have lots of space between the anchor and the link to that anchor to see it working, unless you have a particularly tiny screen. A better example is this link to the top of the page.
The title attribute
Links can be made more user-friendly by putting additional information inside the title attribute of the <a> tag. When the user moves their mouse over the link, the text within the title attribute will appear as a tooltip.
| Code | Output |
|---|---|
<a href="http://www.sjhwebdesigns.com"
title="Click here to go to sjhwebdesigns home page">sjhwebdesigns</a>
|
sjhwebdesigns |
The title attribute can also be used in any tag within (and including) the <body> tag (with the exception of the <script> tag).