Let's consider the hard disk as a tree, with folders (directories) being the branches and leaves being the files.
Now, for example, we have a file X.gif in the folder IMAGES which again, is in mainwebsite_html..... We are also including for example's sake, another folder called FILES which supposedly contains all our other necessary files. Now the tree would look like this
mainwebsite_html
- IMAGES
-- X.gif, Y.gif
- FILES
-- SHOW_IMAGE.html
So we get to know that mainwebsite_html has a folder called images which contains X.gif and Y.gif.
My problem is that I need to access X.gif from a webpage called SHOW_IMAGE.html. Before we go into that, let me explain what relative and absolute paths are. Absolute paths would describe the entire path in total detail and would leave no room for mistakes. A relative path, on the other hand includes a . which means the same directory - or a .. which means one directory above. This means that we can have relatives paths specifying just the file name and give .'s or ..'s as per need.
ABSOLUTE PATH EXAMPLE to show where file X.gif is (accessed from anywhere): mainwebsite_html/images/X.gif (assuming mainwebsite_html is root) But in website reality the absolute path would be http://www.yourdomain.com/images/X.gif
RELATIVE PATH EXAMPLE to show where file X.gif is (accessed from FILES) : ../images/X.gif (indicates - go one folder up i.e. above FILES, to mainwebsite_html, then go to images and then show X.gif)
From this example you would come to know that if I had typed in ./../images/X.gif - it would mean I said remain in folder FILES, then go to mainwebsite_html and then go to images.
now, we use the same methodology in our website HTML code.
in my file SHOW_IMAGE.html, I want to display the image X.gif, so my code would look like this
src=../images/x.gif
simple, no?
now, suppose that this file SHOW_IMAGE.html was in mainwebsite_html , the line would simply read as
src=images/x.gif
Try other examples!
You want to access file image.gif in the images directory of mainwebsite_html from file foo.html
mainwebsite_html
-images
--image.gif
foo.html
Relative path is src=images/image.gif
mainwebsite_html
-images
--image.gif
-folder1/foo.html
Relative path is src=/images/image.gif
mainwebsite_html
-images
--image.gif
-folder1/folder2/foo.html
Relative path is src=../images/image.gif
mainwebsite_html
-images
--image.gif
-folder1/folder2/folder3/foo.html
Relative path is src=../../images/image.gif
Basically the ../images tells the browser to backup/out of a directory to look for images
../../images tells the browser to backup/out of 2 directories to look for images.
