What is relative linking?

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.

  • 67 Users Found This Useful
Was this answer helpful?

Related Articles

GD and Imagemagick

GD - What is it? gd is a graphics library. It allows your code to quickly draw images complete...

Apache Redirects (.htaccess)

OverView Note: .htaccess feature is not available with Tomcat Hosting since Tomcat is used...

DNS

JavaPipe Nameservers Name Server IP address Servers NS1.DHSERVER.NET...

Subversion SVN

JavaPipe offers a free subversion repository with its Java Tomcat hosting packages. This...

Can I access my domain without the "www" in front?

Yes. You will be able to access your domain address with or without the "www" in front of the...