Linking In HTML

Links are essential to the web. Links are the web. It is very important you get the hang of using links in your site or it will be useless. This article deals with the code for linking. Hopefully there should be a design article which will deal with the recommended use of links in your web site coming soon.. You can link to many 'places': files; e-mails and newsgroups.

A Basic Link

There are two things you need to know when linking to a file: How to link to a file and where that file is. When teaching HTML it is hard to know which to tackle first. I have decided to go with how to link first, but pay attention to everything on this page: it's all useful.

A link in a bit of text is made using the <A> tag. This stands for anchor as you will find out later. You surround the text you want to be the link 'hotspot' with the <A> tags. Then you need to point the link to a 'place' to go when the link is clicked. This is done by the 'HREF' attribute. I'm leaving the HREF attribute blank for the example though as you haven't learnt how to find files yet:

This is simple, and is all you need to know for the moment.

Finding Files

To link to a file you need to know where it is. Every file has a URL, an address where it is stored. There are two methods you can use to link to a file: absolute or relative. It is up to you to decide which method to use... An absolute link takes you to a specific address on the Internet. A relative link will take you to a location relative to the file you are currently at. Absolute links should be used for links to files which you don't have control over, such as a page done by another company, a relative link should be used to point to a file you have control of e.g. another web page you have made.

Absolute URLs

Absolute URLs are easy to put into a link. It is the full address for the file (Including the protocol). It is easy to put one in your web site. Use your browser to navigate to the file you want to link to and copy the URL in the address bar. Paste this address into the 'HREF' attribute of your link:

That's all you need to do.

Relative URLs

Relative URLs should be used for files within your web site because: you may want to change the server that your files are stored on and this would mean updating all your pages had you used absolute URLs. Relative URLs point to files in the same directory (folder), ones in directories 'above' and 'below' the current directory. If you were to link to a page called 'fish.html' in the same directory as the current page then you would use the code:

It is the same for any other file in that directory.

To link to a file that is in a directory that is within the current one then you append the directory name and a slash before the file. For example to link to a file called 'fish.html' that is within a directory called 'animals' in the current directory:

To add in another directory just append it to the front of the URL.

You may want to link to a file in the directory above the current one. To do this you just append two dots (full-stops) to the front of the link:

To go up more than on directory just append another "../" to the front of the URL.

E-Mail and News

You may want to link to an e-mail address or a newsgroup on one of your pages. There are simple to link to as well. You just put a different address in the HREF attribute. For an e-mail address you use "mailto:your@ddress.com" for the HREF, and for news: "news:the.news.group". It's as simple as that.

Anchors

You may have noticed that some pages open up and scroll down to a specific section. This is done using anchors. It is easy to create an anchor in a document. You use the <A> tag again, but without the 'HREF' attribute. Instead you give it a name using the 'NAME' attribute. Such as:

Note: There isn't anything within the A tags. The anchor will be created in the document flow at that point. The next thing you need to do is to link to that point in the page. A hash mark then the name you have specified refers to the anchor. If the link to the anchor is on the same page as the anchor then the code would be:

If it is on a different page then you just append the hash mark to the end of the URL:

Changing Colors

To change the color of all the links within your document you add some attributes to the <BODY> tag. These attributes are 'LINK' 'ALINK' and 'VLINK' which control the colors of links, active links and visited links respectively. You set the color either using a hex code or a color name:

You can link to any type of document you want, use links wisely, don't just link to something because you mention it in your text, link to the resource if it is useful.

HTML TUTORIAL: Next Article - Images in HTML; Previous Article - Formatting Text in HTML