HTML Links, Connect mulitple pages

HTML Links

If the content of this page exceeds a fixed size, what do I do? Do I push the limit and include the entire tutorial in one page itself? No, I don’t do that. Instead, I write the remaining part of the tutorial in the next page, and I simply provide an HTML link in this page. When someone notices the link, he knows that there’s something left on this page which is available on the next one.

By using HTML link I increase the response time of this page, so that you do not have to wait too much.

The start and end tags of an HTML link are and respectively. This much markup is not enough to create a link. We will have to at least one more attribute of the HTML link element. The reference of the linked document/page is provided by the href attribute of links. The syntax is something like this.

Code
<a href=”nextpage.html”>Next Page</a>

Here “Next Page” is the text we want the user to see. The actual linking is done by the href attribute. Here we can specify the actual location of the nextpage.html file. In other words the browser will interpret this whole thing as this.
I (Browser) have a document named nextpage.html which lies in the same directory as the current page. I have to display a link on the current page for this. The text of the link will be Next Page. When the user clicks this link I will go and look for the nextpage.html document.

Here we can give the location of the nextpage.html in either of the following two ways.

• Using the Absolute path
• The relative path.

HTML Link Paths

Absolute Path – Absolute path is the full address or URL of a file. The examples of an html file “nextpage.html” in the ‘files’ folder in ‘C’ drive would be “C://files/nextpage.html”. Similarly another file “anotherfile.html” in “C” drive would be “C://anotherfile.html”. The absolute path (URL) of an html file stored on tutotrialindia.com would be “http://www.tutorialindia.com/index.php”.

Relative Path – Unlike the absolute path, relative path is the address or URL relative to the current folder or directory. Taking the examples given above, assuming the current folder as files, the path of nextpage.html would be simply “nextpage.html”. The path of the anotherfile.html would be “../anotherfile.html”. If the current directory is the root that is “C” then the relative path of the nextpage.html would be “files/nextpage.html” while that of the anotherfile.html would be “anotherfile.html”. This holds true for the URLs also.

Here while writing the relative path, just keep two things in mind.
By the separator “/” we move down the directory.
By using two dots “..” we move up the directory.
We simply use name to refer to a file or directory in the same directory

Well you see three things instead two as promised. Well, If you keep the first two things in mind, the third will automatically be stored in the nearby block of the brain.

One last thing before we move on to the exercise on absolute and relative path.
Question:- What should one prefer? Should one use the absolute paths always or the relative paths always?
Answer:- Always prefer the relative path. In the beginning one does feel it difficult to write the path of a file relative to any specific directory. With practice it looks very natural and easy to use the relative paths. The major advantage of using relative path is that if you have to move all your files at anytime, you have just to move the root directory of the content. So, where is the relative path used then? Relative path is used when we do not know from where the file is to be accessed. For example in emails the URL is relative.

One more last thing, the browser, our friend, understands absolute paths only. Shocked? Actually what happens that, the browser keeps track of the current folder (It must also have saved the above two rules somewhere :-) ). As soon as it comes across a relative path, it just creates the absolute path by itself.

After this long concept on small topic, see if you can answer the questions on relative and absolute paths correctly in html path exercise .