by Andrew Starling
Here's a subject that trips up many people as they climb the first few slippery
rungs of the Web development ladder.
August 30, 2000
File addressing is all about filepaths and the way that images and other files
are referenced in an HTML document using code such as <img src="/image.gif">.
It's also important for hyperlinks. Here's a quick review of the four main methods
of addressing - default, absolute, relative and root.
Default addressing
<img src="image.gif">
This is fine if your image is in the same directory as the HTML file that it's
being pulled into. Images are kept in separate directories on most large sites
because it makes selective uploading and repeated use of images much easier. For
this reason you don't find default addressing used extensively on sites bigger
than a few pages in total size.
We sometimes use it here at the WDJ in specific areas, for example when there's
complicated JavaScript involved and we want to keep the images and HTML pages
in the same directory, just to make life simpler for anybody working on the code
at a later date. It's also useful when working on difficult pages because the
page will show properly when tested on a local machine - you don't have to upload
to the server. But it's not good practice to keep images in the same directories
as HTML files if the image will be reused on a lot of pages.
This kind of addressing is sometimes used on small sites or within limited
areas of big sites for internal hyperlinks too.
Absolute addressing
<img src="http://www.webdevelopersjournal.com/gifs/image.gif">
This is the method to use if you're calling in images from a different server,
not your own. There's no advantage in using it for images held within your own
site and indeed it could slow down your page if a browser goes through the DNS
address conversion process (converting the letters into a numerical IP address)
before it retrieves the image. Calling images off other people's servers without
their permission is called bandwidth theft and is illegal. But it's perfectly
valid if you're invited to do it. Valid examples include pulling in banner adverts
and syndicated content.
Absolute addressing is also used for all external hyperlinks. It's the only
addressing method that works for these.
Relative addressing
<img src="../graphics/image.gif">
The two dots together with the first slash mean "go back one directory
level relative to where we are now", and the next part of the filepath is
an instruction to go forward into a directory called graphics (in this example,
the directory that holds all images). It's a useful method of referencing because
again it means an HTML page can be viewed and tested on a local machine before
it's loaded on to a server. But it can cause problems if you move pages from one
place to another within a site, and it can also be marginally slower than the
next method, so you'll rarely find it used on slick professional sites.
The same applies when using relative addressing for internal hyperlinks. It
has its benefits, but is rare on professional sites.
Root addressing
<img src="/graphics/image.gif">
The initial slash says: "start from the root directory". The root
directory is the one that contains your home page (usually). And again we go forward
from there into the directory called giaphics. This is the most popular method
of addressing on the Internet. Its big disadvantage is that it means pages can't
be tested properly on a local machine, at least not without a special set-up,
because the root directory of your site and of your local machine are unlikely
to be the same. Most HTML editing programs, on the other hand, will recognise
your site root directory or allow you to specify it, so they still give you a
proper WYSIWYG rendering, but regular browsers won't show your pages properly
until you've put them on a server.
Capitals
And that's all you need to know about file addressing. There's just one more
thing to watch out for, which is the use of capital letters in filenames. PCs
are very flexible about this, and if you call a file IMAGES.GIF or images.GIF
and then address it from your html page as images.gif, it will show up when you
look at your page mounted on your PC. But most servers aren't as flexible and
they'll get confused by the capitals, so your page will pick up errors once it's
live on the server. This is one of the most common errors found on the Web - images
missing because the addresses haven't got the same capital letters as the image
files.
Capital letters in directory names are often less of a problem, but it's good
practice to make sure you always call a file using the correct capitals and small
case letters, because you'll be tripped up time after time if you move off a server
that doesn't bother about them and start working on one that does. Many professionals
use lower case letters only, so if two designers start talking about a file, they
automatically know they can address it as lower case without having to check how
it's written down.
| 
