Certified HTML5 Developer Learning Resources Relative URL

Learning Resources
 

Relative URL


A relative URL points to a file/directory in relation to the present file/directory.

Let us understand relative URLs through a small exercise.
Look at the two URL above. We want to include (display) the image file email.gif stored in the images directory of www.webdevelopersnotes.com domain on this (relative_and_absolute_urls.php3 stored in the design directory) page.
There are two ways to do this. We can either refer to it using an absolute URL or use a relative URL. The tag for this image display will be as follows:

Using an Absolute URL in an tag


Using a Relative URL in an tag

Relative pathsor URLs

Relative paths change depending upon what page the links are located on. There are several rules to creating a link using the relative path:

  • links in the same directory as the page have no path information listed
    filename
  • sub-directories are listed without any preceding slashes
    weekly/filename
  • links up one directory are listed as
    ../filename

How to determine the relative path:

  1. Determine the location of the page you are editing.
    This article is located in the/library/weekly folder on my site.
  2. Determine the location of the page or image you want to link to.
    The Beginner's Resource Center is located here: /library/beginning/
  3. Compare the locations and to decide how to point to it
    From this article, I would need to step up one directory (to/library) and then go back down to the beginning directory
  4. Write the link using the rules listed above:

 For Support