Absolute Path Versus Relative Path | An Exercise

Exercise on Absolute and Relative Paths

The home directory of my website “http://tutorialindia.com” is “docs”. I created two folders inside it and named them as images and css. I put the logo of the website logo.gif in the images folder. I have put a file index.html in each of the folders. Now I want to provide a link of logo.gif in all these three html files. I have written the HTML code for it as below
Code

<a href=”xxx”> Tutorial India Logo </a>

and pasted it in all the three html files.

Can you guess the xxx if I have

Used absolute path

1. Inside the docs
2. Inside the images
3. Inside the css

Used a relative path

1. Inside the docs
2. Inside the images
3. Inside the css

Try if you got the HTML path concept write. Do not worry If you did not get all of them right. You will learn all of them when you check the answer section.

I wrote the followings as the paths for the logo.

Absolute path of logo.gif

1. Inside the docs – "http://tutorialindia.com/images/logo.gif"
2. Inside the images - same as above
3. Inside the css - same as above

Relative path of logo.gif

1. Inside the docs – "images/logo.gif"
2. Inside the images - “logo.gif”
3. Inside the css – “../images/logo.gif”

Explanation:

The answer of the first question is just the complete URL of the logo.gif, just a piece of butter!

The answers for the questions (a) and (b) of are also easy. For the path of the file logo.gif relative to the folder css, we first added two dots “..” and then added the slash “/” to indicate the coming section is down the directory. Finally we have the name of the image file. You should have gotten it write, if you remember the two things I talked about before the exercise.