Weaving the Web
How to create a basic link
There are three tags that are useful when it comes to creating links <a> (the anchor tag), <area> and <map>. The last two however are related to image maps but I'm not going to cover them here, as you do not need them to make a single image a link. The <a> tag has three main attributes that we are going to concentrate on, href, name and target. There are of course other attributes, but quite a lot of the others are not fully supported by all browsers.
Of the three main attributes of the <a> tag, the href attribute is the most important because it tells the browser which page you want to link to... in the following example, the word link would become clickable and open up the page "link.html" which is located in the same directory as the page you click on.
<a href="link.html">link</a>
Of course, you can also have a clickable image too, just add your image tag in-between the two container tags of <a>...</a>. To get rid of the border that usually comes with graphics linked in this way, simply set the border attribute of the <img> tag to 0 - which is what we have done in this next example.
<a href="link.html"><img src="image.gif" border=0></a>
So, now you know the basics of the link you will need to know the difference between an absolute and a relative URL. An absolute URL is the same as what you would have to type into your browser's address bar to be able to get to a particular web page. You will need to use an absolute URL to make a link to another web site. A relative URL on the other hand is the URL you would use to link to a page on your own server, such links do not need to specify the use of the http:// protocol. The examples above both used a relative URL.
Relative URLs can be rather difficult to understand at first, particularly when you want to use folders to organise your site but still want links to all the pages from each page. When the page you want to visit is in the same folder as the page the link is on, then you only need to use the file name for the href attribute. If the page you want is in the folder above, then you need to include the folder name in the link. If however you wanted to create a link back to your main page from a page in the folder then you would have to add "../" (without the quotes) for each folder you want to back out of.
All of these rules can be applied to a single link, so it is perfectly acceptable to use a relative URL to jump from a page in one folder to a page in another on your server. Becoming familiar with relative URLs can take some practice, but it is worth the effort because it saves you having to type out your full web site URL whenever you want to link to another page in your site. The table below shows 4 pages in a web site. Both index.html and page.html are in the same folder at the root level, however there are also two other folders misc and games that have their own index.html files. To find the relative URL for a particular link between these pages, look down the from column and across to the to - you will then see the relative link you would have to use.
| to | ||||||
| index.html | page.html | games/index.html | misc/index.html | |||
| f r o m |
index.html | -- | page.html | games/index.html | misc/index.html | |
| page.html | index.html | -- | games/index.html | misc/index.html | ||
| games/index.html | ../index.html | ../page.html | -- | ../misc/index.html | ||
| misc/index.html | ../index.html | ../page.html | ../games/index.html | -- | ||
Please note that this table is only to demonstrate the various types of links between documents at different levels. If you are having trouble understanding relative URLs, then I would recommend that you use the absolute URL for your pages until you can. Doing so however will cause problems if you need to change your servers in a hurry.
On one final note there is one common mistake that people new to the idea of HTML links tend to make (yes I even made it myself in the early days!). If you are linking to another web page, make sure you put the http:// part in the URL to tell the browser that it is an absolute URL. If you forget to include it your browser will think that it is a folder on your site and anyone trying to use the link will certainly get an error!
Links within Documents
I'm sure you've all seen them, those very long pages of text you get at information sites. Often such pages are split up into sections and you can click a link to get to the section that you want. Well, I'm going to show you how to do that.
First of all you need to use the name attribute of the <a> tag to name a particular section of code, this is rather similar to making a normal link, only you replace the href attribute with name and assign a name to that section. You can name the fragment anything you like but it should only be one "word" (i.e. no spaces) and only contain letters or numbers. Here are two examples of how you can name a section of the page.
<a name="top"><h3>This is the main heading of a page.</h3></a>
<a name="top"></a><h3>This is the main heading of a page.</h3>
In the first example, you can see that the fragment is the phrase "This is the main heading of the page" - however, by actually putting the heading in the <a> tag, your visitors may think that it is an actual link depending on the style settings of the page. The second example gets around this by having nothing in the <a> tag, the effect is the same but you must remember to close the tag otherwise you may get some rather strange effects on your page!
Once you have named a section of the page, you can link to it like you would a normal page - the only difference is that you have to attach your identifier at the end of a file name by adding # to it... for example.
<a href="#top">back to top</a> (linking to a fragment in the same page)<a href="sitemap.html#map">see the map</a> (to a fragment on another page)<a href="http://www.awebsite.com/index.html#about">about Web Sites</a> (to a fragment at another site)
Targeting your Links
Its one thing having a link to another site or page, but what do you do when you want your link to open up in a new window, or to break out of your frames? This is where the target attribute comes in. All you have to do is to add a target to your link and you've got control over how that link opens. There are certain set values that you should know, these are the constants and they always do the same thing regardless of how many windows you have open.
- _blank
- Opens up the link in a new window and will always create a new window for that link, even if it is open in its own window.
- _top
- Opens up the link in the same window, but will break out of your frameset if you are using frames. You should use this to break out of, or reset frames.
- _self
- Opens the link in the same window, but if you are using frames it will only open the link in the same frame as the link that was clicked. Not needed in links, as this is the default for a link without the
targetattribute set anyway. - _parent
- Only useful for those using frames, to be able to use this effectively you will need to have a good understanding of your frameset as it brakes some of the frames in a complicated frameset, without resetting them all. Because of the complex behaviour of links when using this, it is rarely used.
You can of course name your frames and windows anything sensible, the idea being that if a link opened a window called "new" and another link also wanted to open up in a window called "new", the second link would only create a new window if the window called "new" didn't already exist - otherwise the link would open in there instead.