Explanation of relative, absolute, network and web paths

Paths can be one of the most confusing aspects of web development. Most web designers are familar with absolute paths and relative paths:

Absolute paths point to files that can be anywhere on the internet. They don’t assume any relative location to the current document. An absolute path to a file will always be the same, no matter where the link to it is located.

Example of an absolute path:

http://yourdomain.com/directoryname/otherfile.htm

Relative paths(“document-relative”), point to files that are on the same server, and where the location with respect will always be the same.

Example of a relative path:

directory3/directory4/otherfile.htm

or

Example of a relative path that points to the parent of the current directory, then down two directories.

../directory3/directory4/otherfile.htm

“../” means “move up one directory from the current one.”

so “../../” means “move up two directories from the current one.”

So, if the current page is located at

http://yourdomain.com/directory1/yourfile.htm

and you add a link to the current page like:

<a href=”directory3/directory4/filename.htm”>Link</a>

your link is actually pointing to:

http://yourdomain.com/directory1/directory3/directory4/yourfile.htm

and, if you use the dot-dot-slash notation:

<a href=”../directory3/directory4/otherfile.htm”>Link</a>

your link points to

http://yourdomain.com/directory3/directory4/otherfile.htm

 

Relative to web root:

What if you want to use the same navigation bar all throughout your site, and your files could be located at different depths away from the web root? You can use this notation:

/directory1name/directory2/filename.htm

Beginning the path with a slash means this path is relative to the web root.

This means no matter where the current page is located on the site, no matter how many folders deep,

and you add a link to the current page like:

/directory3/directory4/otherfile.htm

your link is pointing to

http://yourdomain.com/directory3/directory4/otherfile.htm

What if you see a link like:

C:Documents and SettingsyournameDesktopotherfile.htm

This is a local filesystem path which is ONLY USABLE on one computer. The “C:” refers to a hard drive, and the backward pointing slashes are an indicator that this is a filesystem path, NOT a web path. In other words, it points downward into your computer or server, not outward to the web. These types of paths are often used by mistake by newcomers to Dreamweaver who link to local files without realizing it. However they are also used by server-side scripting languages like ASP and PHP when referring to files within the filesystem. If you use a local filesystem path in your webpages, assuming it points to a file that exists on the server, Internet Explorer will accept it, but other browsers will not.

How about a link like:

\servernamedirectory1directory2otherfile.htm

This is a network filesystem path, referring to a directory on a server on the network.

You may also come across paths like this particularly in ASP scripts:

“.” or “/”

“.”

means simply “the current directory”

“/”

means “the web root”

“..”

means the parent directory