Linking files on the Web

This page is here to describe the differences between relative and absolute linking to files on the web.

[edit] Relative Linking

Relative links specify the location of a file (image, html file, etc) with respect to where you are currently on the web.

(Relative)	<img src="image.jpeg" />
(Relative)	<img src="./image.jpeg" />
(Relative)	<img src="../image.jpeg" />

Examples:

When viewing http://www.unl.edu/barkley/spath/index.shtml
<img src="image.jpeg" />       http://www.unl.edu/barkley/spath/image.jpeg
<img src="./image.jpeg" />     http://www.unl.edu/barkley/spath/image.jpeg
<img src="../image.jpeg" />    http://www.unl.edu/barkley/image.jpeg
<img src="../../image.jpeg" /> http://www.unl.edu/image.jpeg

[edit] Absolute and Site Root Linking

(Site root)	<img src="/barkley/spath/image.jpeg" />
(Absolute)	<img src="http://www.unl.edu/barkley/spath/image.jpeg" />  (Not to be used within SSI <!--#include virtual="" --> statements)

So sometimes it's easier to always use absolute addressing. That way, there is no confusion.

General Rule of Thumb:

Use Absolute or Site Root linking in

• JavaScripts (.js)
• Inside server side included files (sharedcode navigation files etc).

And.. that gives you a little introduction as to the many ways you can specify addresses on the web. Confusing isn't it? good luck!

[edit] Dreamweaver Settings

There are Site Settings within Dreamweaver which will change how it generates the links for files:

Open site preferences for the site. (Site>Manage Sites) then choose the Advanced tab if you aren't there already. And select the option 'Links relative to: Site Root'