Relative vs. Absolute Pathing

Absolute Pathing vs. Relative Pathing (view as Word document)

Whether you are dealing with hyperlinks or images when developing for the web, there are two types of linking items.  The first is absolute and the second is relative.

Absolute Pathing

Absolute pathing is used when you are linking items of different servers.  For example, you may want to have a link on your website to a document on somebody else’s website.  In this case, you would want to provide the exact location of the file.

Your code would look like the following if you want to link to my tutorial on submitting assignments in Blackboard at Mott.

<a href=”http://esweb.mcc.edu/~rbenard/Tutorials/DigitalDropBox/DigitalDropBox.html”&gt; Submitting Assignments </a>

Relative Pathing

Relative pathing is used when you are linking items on the same server.  This is the preferred method.  The reason for this being preferred is that you could move your entire website to someone else’s server or to a different folder without changing one single link.  This also is excellent if you are creating web pages on your local computer and then uploading them to a web server.

If I wanted to link from my tutorials page to the digital drop box page, it would look like the following:

<a href=”DigitalDropBox/DigitalDropBox.html”> Submitting Assignments </a>

Recommended Directory Structure for Web Students

For web students at Mott, I highly recommend the following directory structure show below.  This structure should be the same on your removable storage device and in your web space to reduce confusion and linking errors.

A story board example of what we are doing is as follows:

Story Board Example

On your computer, the directory structure would look like the following:

Directory Structure Example

File Naming

When dealing with the web, naming of files and folders is extremely important.  I recommend the following:

  • Make all file and folder names in lower case
  • No spaces in file or folder names
  • Use the same naming conventions throughout your site (make sure all pages are .html or .htm not one or the other).. Make sure all related folders are named similar as well (lesson1, lesson2, project1, etc.)
Advertisements

Comments are closed.

%d bloggers like this: