Absolute Path vs. Relative Path

T he most difficult thing to learn for someone beginning to design web pages are "Broken links" or "Bad Paths". Most often the reason for this is not understanding the difference between "Relative" and "Absolute" paths to either call a webpage or a graphic.

http://www.angelfire.com/images/filename.?

www.angelfire.com is the Domain name
images is the Directory name
filename.? is the name of the file

? The question mark would be replaced by the file extension (for example ~ html, gif, jpg, zip, bak, etc.)
For your Information: ~ Domain names are "not case sensitive", but directories and filenames are! (Including file extensions) jpg is not the same as JPG.

T o begin with, lets define the differences between Absolute and Relative paths. For this example lets assume we have an image (img src=) that we have stored in our image directory that is named imageex with a file extension of .jpg Not .JPG.
Remember: Domain names are "not case sensitive", but directories and filenames are! (Including the file extension) jpg is not the same as JPG.

Absolute is the complete or full address of the page or image you are calling
img src="http://www.angelfire.com/images/imageex.jpg"
Relative is just the directory and file name of the page or image you are calling
img src="images/imageex.jpg

Note of Importance ~ in reference to the calling of a web page or image that you have built/designed offline with a page builder. Page builders such as "FrontPage ©" save all their images in your computer and not to your webshell. The path will be completely different and will not appear in a published HTML page until you have the images uploaded to your webshell and the paths changed to that of your online host. If this is a little unclear, grab the below link for a little further insite and clarification of offline editors.
[ Clarification ]

I f you would like to get much further indepth on Absolute vs. relative, just grab the below link and see what The [ Web Diner ] has to say about it.
[ Relative vs. Absolute ]

W e hope our tutorial was easy to follow and we covered everything in detail. If you have any problems with this or anything else, feel free to consult our [ FAQ ] and if you can't find the answer there, [ contact us ].
[ Rate This Page ]