Hyperlinks

Hyperlinks may be regarded as the glue that holds together the web. Hyperlink is the single most important concept behind the web. We will discuss Hyperlinks under the following heads:

1. Absolute
2. Relative
3. Site-Relative
4. Linking within a same document
5. Link which does not take you anywhere

Absolute Hyperlinks

This type of Hyperlinks are used to link pages/sites outside one's domain. For example, if you want to link to my site from yours, you have to write code which resembles the following:

<a href="http://www.indiwiz.com/">indiWiz.com</a>

This would result in the following:

indiWiz.com

The <a> is the anchor tag. The 'href ' attribute specifies the link location. The link location is specified first by the protocol ('http://' - Hyper Text Transfer Protocol), then the domain name, and finally the folder and file name. In the above example we have not given the file and folder name. Take the following example:

<a href="http://www.indiwiz.com/web/index.php">Web Developer's Den</a>

In this, 'web' is the folder name and 'index.php' is the file name.

Relative Hyperlinks

This can be used to link pages within the same site. Suppose there are two files, viz, 'index.html' and 'about.html', and you want to link 'about.html' from 'index.html'. The code for this is (in 'index.html'):

<a href="about.html">About</a>

If 'about.html' is inside the directory 'Me', you will have to give the following code:

<a href="Me/about.html">About</a>

Note the slash. It is the UNIX type, not the Windows type backslash. If the file is placed in a directory behind the folder where 'index.html' is stored, the following code will apply:

<a href="../about.html">About</a>

Site-Relative Hyperlinks

If you are running a web-server in your computer, you can check out the examples presented in this part of the tutorial. Otherwise you have to upload your files to your web host's server and then check.

Consider that you are the owner of the domain 'mydomain.com'. Suppose you have the following folder structure is your site:

http://mydomain.com/Me/Myself/About/

Consider that in the 'About' folder you have a file 'about.html' and in the folder 'Me' you have a file 'me.html'. Now you have to link from your 'about.html' to 'me.html'. If you are using relative linking, you would be giving the following code:

<a href="../../../me.html">Me</a>

But when you are using site-relative link, the same would be:

<a href="/Me/me.html">Me</a>

The beginning '/' represents the starting folder in your web server where you place your HTML files.

Linking Within A Same Document

Suppose you have a top link 'Downloads', which points to the heading 'Downloads Heading' at the bottom of the same document. The link code:

<a href="#download">Downloads</a>

And in the heading 'Downloads Heading' you have to give:

<a name="download">Downloads Heading</a>

The '#' in the href attribute tells the browser that the link is an internal one. The part after the # is the name of the link.

Link Which Does Not Take You Anywhere

You will find a need for such links when you are programming with JavaScript. In HTML you can achieve this by:

<a href="#1">Link Which Doesn't Take U Anywhere</a>

The result:

Link Which Doesn't Take U Anywhere

- Subhash.