Server Paths Explained

What is a server path?

A server path is the path through the server's directory structure between two files. In order to link two files together, such as placing an image on a web a page, you need to know the path through the computer from the web page to the image in order to tell the browser where to find it.

When you are building your web site on your computer, the "server path" is the same thing in principle, it's the path from one file to another on your computer. If you set up your web site on your computer as it will be on your hosting company's server space you'll be able to check all your internal links before uploading your site.

Two Types of Paths

In regards to the Internet, there are two kinds of paths, relative and absolute. An absolute path is the full URL to a file. If you had a link on your index page to your picture page, the absolute path might look like this:

<a href="http://www.YourDomain.com/pictures.html">Pics</a>

A relative path points to the location of the file you want to link to in relation to the page being viewed, all within your server space. If the page you're linking to is in the same directory as the page being viewed, then the relative path is simply the page name. Using the relative path for the same page above, you'd code it:

<a href="pictures.html">Pics</a>

So which is best?

Both links take you to the same page, but there's a big difference in the way they perform. By using a relative path, the browser knows to just look within your own web site's server space for the linked file. However, if you use the absolute path, the browser goes back out onto the Internet and finds your site all over again, then finds the file within your directory. So, if you're linking to pages on your own site, using a relative path will make your site respond quicker. It's all about speed!

If you're linking to something off your site, then you must use the absolute path because there is no relative path to use.

What if my file isn't in the same directory?

Good question, Gleeblefumber! You can still use relative paths as long as the file is within your own server space. Look at the table below to see how some relative path variables would work.

Server Path...	What it means...
<a href="page.html">	page.html is located in the current directory.
<a href="tips/page.html">	page.html is located in a folder (directory) called tips. The "tips" folder is located in the current directory.
<a href="tips/other/page.html">	page.html is located in a folder called other that is located in a folder called tips that is located in the current directory.
<a href="../page.html">	page.html is located in a folder one level up from the current directory.
<a href="../../page.html">	page.html is located in a folder two levels up from the current directory.

If you link to a page that is in another folder (directory) on your site, then you can see how to do that in the first three examples. To have a link on a page in one of the other folders go back to the main directory, you can see how that is done in the last two examples.

../ represents one level up to the browser.

Clear as mud now? Well go take a shower, for goodness sakes.

Back | Web Design Tutorials Index

Almost a Newsletter

Changing list hosts. Will post a new subscribe form shortly.

Did you know...

The member's site has about 100 standards compliant HTML and CSS tutorials, 31 handy reference charts, reprintable content, web graphics, exclusive fonts, free software, free ebooks and more? All this for less than 9 cents a day! [ Details ]