Using Document-Relative Paths
| In a document-relative path, you give the browser directions to the desired page from the current Web page. You do this by stepping the browser through your site's hierarchy. It stands to reason, then, to write a good document-relative path, you need to know the hierarchy of your site. Take the following site structure:
Say that the current page is the home page. A document-relative path to the Movies page from the home page looks like this: <a href="movies/movies.htm">Home Page to Movies</a> while a document-relative path to the Action page within the Movies category looks like this: <a href="movies/action/action.htm">Home Page to Action</a> However, if the current page changes, so does the document-relative path. To go to the Action page from the Movies page instead of the home page, the path becomes: <a href="action/action.htm">Movies to Action</a> As you can see, you don't have to fuss with the http://www or the domain name of your site. A document-relative path assumes all that. All you have to do is direct the browser to the right directory and file, depending on the current page. So it goes for drilling down into the site structure, but what if you want to climb back up? How do you write a document-relative path from the Sci-Fi page to the Movies page? You need a bit of technical nomenclature: <a href="../movies.htm">Sci-Fi to Movies</a> The two dots (..) is computer code for "Go up one level in the site structure." So, if the browser is sitting on the Sci-Fi page and sees two dots in the document-relative path, it understands that it must go back up one level in the hierarchy to find the file movies.htm. Similarly, if you need to go up more than one level, from Sci-Fi all the way to the home page, you need more than one set of double dots: <a href="../../index.htm">Sci-Fi to Home Page</a> This document-relative path instructs the browser to go up two levels in the site structure to find the file index.htm. You can combine upward and downward movement in the same document-relative path. Say you want to go from the Horror page under Movies to the Classical page under Music. Your document-relative path looks like this: <a href="../music/classical/classical.htm">Sci-Fi to Classical</a> In plain English, the browser goes up one level in the hierarchy to find the music folder. It looks inside the music folder for the classical folder, and it looks inside the classical folder for the file classical.htm. The great thing about document-relative paths is that they work offline just as well as they do online. In other words, you can test your site offline in a browser without logging on to the Web, and all the links with document-relative paths work perfectly. The main disadvantage of document-relative paths is that, if you move the page that contains the link to a different level of your site, the link no longer works. Remember, a document-relative path steps the browser up and down through your site hierarchy. If the page no longer holds the same position in the hierarchy, the steps won't match up. You don't have the same problem with absolute paths, since absolute paths don't depend on the browser's current location.
|
