In the previous article, we discussed how to create links in your pages. Before you begin to insert links into your documents, it is important to understand how to create links that point to internal and external
pages. There are basically two ways to address these links. You are going to either reference these links by absolute or relative paths.
Absolute paths are easy to use and understand. These links refer to the very specific location, including the domain name. The absolute path to another location is referred to as the URL. For example, the
absolute path to this website's home page is: http://www.itgeared.com/. You always want to specify the absolute path when you are linking to a web page that is on another website. You should not use absolute
paths when linking to pages within your own website. If you do specify absolute paths, you will have a lot of work ahead of you in the event that you change your domain name. In the event that you change your
domain name, it would require that you go back and edit all of your internal links. Therefore, for your internal links, use relative paths instead.
Relative paths are very useful when you want to create links between your pages within the same website. Unlike absolute paths, relative paths do not include the domain name. The advantage to using relative paths
is that you can change your domain name, and your links will continue to work without having to modify them. Of course, if you move files and folders within your site, you will have to update relative paths as well.
Please refer to the following diagram.
Access a resource from the root directory
If you want to reference a resource from the root directory, your relative path will begin with a forward slash "/" followed by the location of the resource. For example, from anywhere in your document, you can
reference the img1.jpg file by referring to it as so: href="/images/img1.jpg".
Access a resource in a sub-directory
If you want to create a link to the submit.htm page from the index.htm page, you can do so using this relative path: href="forms/submit.htm". Notice that a forward slash "/" is not included before the directory "forms". If you
do not include a forward slash, the browser will refer to the resource in a sub-directory from your current location.
Access a resource in another directory
There may be instances where you do not necessarily want to reference the location from the root, and the resource is not in a sub-directory. Let's say you are currently
developing the submit.htm page in the "forms" directory and you want to link to the img1.jpg file. You can use a relative link as follows: href="../images/img1.jpg". Notice that this time, we added ".." before
the first forward slash. This tells the browser to go "up" one directory, then move down into the "images" directory to access img1.jpg.
Access a resource in the same directory
Finally, if you want to reference another resource that is in the same directory
as the source file, you can simply reference the path as follows: href="filename.ext". If you do not specify any information before the filename, the browser will assume that the
resource is located in the same directory.
Recommended Books & Training Resources