Linking to files in a different directory

Within your website, to link to a file that resides in a different directory (folder), you need to specify the directory name and the file name. You don't need to specify the full url of the destination file (to which the link will point to). You only need to use a relative URL (or relative path, more precisely)-it is relative to the file where the link will be placed.

For instance, assume we have two directories created on this server and accessible as: http://www.scriptingmaster.com/xhtml/, and http://www.scriptingmaster.com/ASP/. Further assume we want to link from a file inside the XHTML directory to a file in the ASP directory. To do this, you only need to specify the following link path:

../asp/file_name.asp

Our directory structure for this linking example is illustrated below:

An example of linking to a file in a different directory

Let's briefly go over this relative linking path. In this linking path, the "../" instructs the browser the destination file is outside of the current directory (XHTML). Please see this page for a review on Relative URL linking. Next, the ASP specifies the directory name of the destination file. Finally, the file_name.asp is the destination file name inside the ASP directory.

How will the browser determine the final destination file when we only are specifying a relative linking path. From the above partial URL syntax (or relative link path), the browser is smart enough to determine the full URL of the destination document. Specifically, if the browser's current page is http://www.scriptingmaster.com/xhtml/some_page.asp (this is the file where the link path is inserted, let's simply refer to this file as the source file), the browser will automatically infer http://www.scriptingmaster.com/ to obtain a full URL (absolute URL): http://www.scriptingmaster.com/ASP/file_name.asp . Notice in our linking path we did not specify domain name or protocol information while the browser inferred this information on its own. The browser will correctly infer the full URL as long as you specify a correct relative path in your source file. If you use an incorrect file path, the browser won't correctly predict the URL to your destination file. Let's work with an example to make this point.

Assume the information used in the previous example is still valid except now we omit "../" (resulting in asp/file_name.asp) in the link path (in the previous example our link path was ../asp/file_name.asp). What is our resulting absolute link, as the browser sees it? The resulting absolute link will be http://www.scriptingmaster.com/xhtml/ASP/file_name.asp instead of http://www.scriptingmaster.com/ASP/file_name.asp. Because we did not specify "../" in our second example, the browser is instructed to find the ASP directory inside the XHTML directory. If the ASP directory does not exist inside the XHTML directory, which it does not in this example, we are left with a broken link (meaning the browser won't be able to access the destination file as it does not exist!). To avoid this problem, make sure your relative link path is correctly pointing to the destination file.

So what is the XHTML syntax for making a link to file outside of the current directory? To make a link, we need four pieces of information: an opening anchor tag, valid relative path to the destination file, clickable text or graphic that will activate the link, and finally, the closing anchor tag. The following shows the complete anchor tag for our original link:

<a href="../asp/file_name.asp">An ASP Page</a>