Skip to main content

Tips and Tricks

 
Gary Larocque

Objects and Pages, How do I get there?

by Gary Larocque - 2 months ago

HTML has two types of paths that are used to reference objects (image, media file) and pages (folders).

Defining paths in HTML is filled with mystery and intrigue, so please sit back and enjoy the show.

Drum Roll Please!

I would like to introduce two of my closest friends, Absolute and Relative Paths.

Ok, so I went overboard with my introduction but as long as I got your attention.

As I mentioned, HTML has two types of paths that are used to reference objects (image, media file) and pages (IGLOO folders).

Absolute Paths

A path that uses the full URL to point to an object or page.

IGLOO powered community

For example, the absolute path to the IGLOO powered chicklet is:

http://www.igloosoftware.com/download/gallery/img2/poweredbyp

Absolute paths are required when you are sending a visitor to another site.

For example, I came across a blog that interested me on the IGLOO demo community that I wanted to reference. Since it is not part of my community or site I would lnik to it using the relative path like so:

<a href=" http://demo.igloocommunities.com">Visit the IGLOO demo site</a>

Relative Paths

Relative paths are the most common way to link to objects and unlike absolute paths, realtive pathing has two options.

Document Relative Paths

Relative paths allow you to move up and down your site structure.

Site hierarchy

I want to add a link from my pathing_101.html page to the home.html page. As you can see the pathing_101.html page is two folders deep in my site structure.

For each folder I want to travel up my hierachy I need to add: ../ (../ = 1 folder up the site structure )

<a href="../../home.html">Home</a>

One advantage of relative paths is that you can rename a folder and it won't effect the path.

Root Relative Path

Root paths are a nice way to jump to an object in and entirly new section of your site or community without having to count your way around. You always work from the top down when using Root paths.

<a href="/home.html">Home</a>

Now the big question, which one do I use?

Tune in next week for the continuing story of Objects and Pages, How do I get there?

Ok, ok, I will not make you wait. Root pathing is by far the best option for a few reasons,

  1. No counting required
  2. Its less typing
  3. Looks cleaner in your code

Well they're not really reasons, just my personal choice. If we want to get technical, there is one obvious reason for choosing document over root paths and that is when using backend scripting languages like php and asp (include files), but that is another topic all together.

Recommend this Article

Average: 3.5 out of 5 (2 votes)  

Would you like to comment?

Join for a free account, or Sign In if you are already a member.

Recent Contributors


Viewed 221 times