Absolute and relative links in html?

Question

Can someone explain me in detail what is the difference between absolute and relative links in html? and also explain me what is the meaning of ("../../images/logo.jpg" ) 2 dots and slashes in this syntax? why and when to use this type of path having dots and slashes.

plz instead of giving some outside links referring to these questions of mine, try to explain here in detail if possible, although some in depth explaination from other sites will also do if they have written it in easy to understand english. lolz.. otherwise it will be like me moving in circles.. as i didn't understand above mentioned things from some online tutorial in the first place. :D

thanks in advance

Answer 1

Ok, let's say your homepage is at the following address:

http : // www . mysite . com / personal / files / index.html



Your homepage (index.html) will be in the "files" folder.

http : // www . mysite . com / personal / files /



And you have all your pictures saved in the following folder:

http : // www . mysite . com / images /



If you reference a picture from your homepage (index.html), you will use the following:

Absolute: http : // www . mysite . com / images / logo.jpg

Relative: .. / .. / images / logo.jpg



../ = Go up one folder.

index.html is in the "files" folder. (http : // www . mysite . com / personal / files /)

../ will point to http : // www . mysite . com / personal /

The next ../ will go up another folder.

It will point to http : // www . mysite . com /



Then, from there, you simply go into the images folder, and point to the image you want.





************************



Absolute:

If you move your website to another host, none of your links will work, and none of your pictures will display.

Even if your file/folder structure stays the same, it won't work.

You will have to change each and every link/reference to the new site.



Relative:

If you move your website to another host, all your links will still work, and all your pictures will still display, as long as the file/folder structure stays the same.

Answer 2

An absolute link begins with http:// and is the complete URL of the page or image that's being linked.



A relative link does not begin with http:// Instead, it shows where the file being linked is located relative to the page where the clickable link is located.



So, say I had a page somewhere called at, say, http://www.example.com/index.html



And say there were a couple of links on that page. The first link was A HREF="http://www.example.com/first_page.html" That would be an absolute link. The next link is to just A HREF=another_page.html" That would send you to a page called "anotherpage.html" in the same subdirectory as index.html was located.



The various dots and slashes you might see are just directing the browser to a different subdirectory. So I could have either image src="http://www.example.com/images/foo.jpg" (an absolute link) or image src="/images/foo.jpg" (a relative link).

Answer 3

If you use MS Windows, you are probably used to seeing file paths like: C:\user\public_html\index.html



Maybe that looks odd to you because you don't have a folder named public_html, but the example makes sense, right? Well, on a unix or unix-like system, paths are a bit different. Everything starts at / instead of at C:\, the slashes face the other way, and the "home" folder is used similar to "my documents". The previous example would look something like:



/home/user/public_html/index.html



Now, imagine the public_html folder has another file in it besides index.html called my_pic.jpg. If you want to link to that, you'll just use link. The computer knows where to find that file because it will check the directory it's already in (the public_html directory in this example). If the file is somewhere else, you need to tell the computer where to look for it.



../ means to look one level up. The public_html folder is inside the user folder, so if we use ../ it means to look in the user folder.

Answer 4

the ../../ indicates that it is a RELATIVE link. It is linking you to a different document RELATIVE to the directory that you are in now. everytime you see a ../ it means go UP one level in the directory tree.



So in your example, the logo.jpg file is located, relative to the directory the page is residing on, 2 levels

up, and in that level, within the images directory



By contrast, an ABSOLUTE link specifies the entire directory structure that the file resides in (this is called being fully qualified).



For example,

http://www.myweb/data/images/logo.jpg would be fully qualified and therefore an absolute link whereas

../../images/logo.jpg would lead you to the same spot on that page, but this is a relative link.



Wikipedia has a very good explanation of relative vs absolute linking. I find it easier to use absolute linking, especially if your directory structure has lots of sublevels.

Answer 5

Mr Hartzer seems to be responsive to what he's conversing approximately. while you're desirous to get spidered and listed thoroughly, absolute linking is a thank you to circulate. yet, there are situations the place that's probably no longer the needed result. ultimate needs.

Answer 6

When you use an absolute reference, it tell the computer exactly where to look for the file regardless of what directory the computer is currently in. Say I am in a directory "http:/docs/web/mytrips" and I want to link to a picture in a totally different directory like "http:/mystuff/pictures/vacation/cancun". I would have to type the entire path in for the computer to find the picture because it is not located somewhere close to the current directory. Also if the picture was on another drive (or server), there is no way to see that drive or server except an absolute reference.



However if the files is close to my web page, I can use a relative reference. Say I am in "http:/docs/web/mytrips" and the picture is one directory down in "http:/docs/web/mytrips/cancun/pic.jpg", I can reference the picture using just "/cancun/pic.jpg". The computer will start in its current directory and look for "cancun", move to the directory and then look for "pic.jpg".



When you put a web page on a server, you will want to use relative references because you have no clue what the directory structure is outside of our site and its root directory. You would only use absolute references to refer to something outside of your server.



There are two special commands you can use to move. One of them is "." and the other is ".."



The single dot (".") will take you to the root directory of your computer or site. On your computer that would be the root of the C drive (C:/). On a web server it would be the highest directory to which you have rights (the "root" of your site). To get from "http:/docs/web/mytrips" to "http:/mystuff/pictures/vacation/cancun" I could use "./mystuff/pictures/vacation/cancun". That would take me to the "root" and then down the other path.



The double dot ("..") takes me up one directory. If I was in the directory "http:/mystuff/pictures/vacation/cancun" and did a ".." it would move me up to "http:/mystuff/pictures/vacation" If I did a "../../" it would move me up two directories, from "http:/mystuff/pictures/vacation/cancun" to "http:/mystuff/pictures". I could then follow that with a different path off that directory to get to somewhere else. If I was in "http:/mystuff/pictures/vacation/cancun", I could use "../../family/reunion" to get to the directory "http:/mystuff/pictures/family/reunion".



The ".." can be useful when your site is on a server because often the host will have scripts that you can use on your page that are located outside of the directories to which you have rights. You can not see them or known what the called (keeps you from hacking them). But you can call them by going to the root of your site and then backing up one directory with a "../" and then go down that outside directory to your script. Something like "../php/mailscript".