Web Design in a Nutshell, 3rd Edition

Using relative pathnames in HTML

When pointing to another web page or resource (such as an image) on your own server, it is common to use a relative URL, one that points to the new resource relative to the current document. Relative URLs follow the syntax for pathnames described above. For example, a hypertext link to art.html from another document in the pers directory would look like this:

<a href="art.html">

The URL for the link could also be written starting from the root directory:

<a href="/users/jen/pers/art.html">

Image tags also use pathnames to point to the graphic file to be displayed. For instance, this image tag in the art.html document:

<img src="../../daisy.gif">

points to a graphic named daisy.gif located in the jen directory. Two uses of ../ indicate that the graphic file resides in a directory two levels higher than the current document (art.html).

If you plan on doing your HTML markup by hand, pathname syntax will come naturally after a little practice. If you are using a WYSIWYG authoring tool (such as Macromedia Dreamweaver, Adobe GoLive, or Microsoft FrontPage ), you have the luxury of letting the tool construct the relative URL pathnames for you. Some even have site management tools that automatically adjust the pathnames if documents get moved.