Absolute paths, relative paths, and images.

Images, folders, and some new terms...

The first quick tip here is to keep all of your images in an images folder.

IMPORTANT NOTE: Side-tracking for a second, don't keep your banners in a folder called ads/ or banners/ as some ad filtering software will be able to take this away when some surfers are looking at your site.

Back to the image folder tip - keeping your images such as banners, full page ad graphics, and logos in a folder called images/ can help to keep you organized. It's also easier to drop in a nice picture protection program into that folder that won't interfere with the html pages.

Three important terms

OK, it's time to get technical now but if you've not fallen asleep by now, then the following few terms shouldn't bake your noodle too much. These are terms that will help you to use your webspace much more efficiently, save you money and disk space at the same time, AND make your websites and pages load a lot faster. Now, that's worth looking at in my book!

A few notes on Paths

If you're putting anything other than plain old text onto a webpage, like an image, then you have to tell the browser where this other page element is stored. When you see a webpage, and there's some cool images on that page, they're not REALLY part of the webpage. That might sound crazy but let's imagine that you have a plain webpage with a picture of your pet dog on it (hey, nothing kinky - this is just an example LOL!) That picture of the dog must be uploaded to your webspace and the webpage has to link TO that picture. You have to add the image's 'path' to the webpage so that the browser can find it and show your surfers the page the way you'd intended it to look.

Absolute Path

There are 2 kinds of path that you can use to link to images on a webpage. The first one we're gonna look at here is called the absolute path. Like most tech terms, I don't find this one very helpful in either understanding or remembering what it means. Try to remember this:

Absolute is the longest route!

Now let's look at what this means. When you give an image on your page an absolute path, the surfer's browser has to take a very long way round to find the picture that's embedded in your webpage. This takes a little longer that the method I'm going to go onto in a second. Here's an example absolute path:

<IMG SRC="http://www.yourdomainhere.com/images/banner1.jpg">

When the browser comes to a line like this on your webpage, it kinda leaves your webpage and then bounces out into the internet again and follows the URL from the very start. You might be thinking that this is a bad idea, but there ARE advantages! (I'll get to those in a sec...) For now, remember that the absolute path requires the browser to take a very long way round to showing the surfer your images. Let's look at the other path now...

Relative Path

Relative paths tell the browser where other things (such as our images!!!) are in relationship to the page that the surfer is currently viewing. Imagine if you were on the telephone to a friend and they asked where your wife/girlfriend/boyfriend/husband was right now, and they were upstairs. You would just say, "they're upstairs". You wouldn't give your full address, as you might write on an envelope, and then tag 'upstairs' on the end. It's ridiculous and would take a long time to have the simplest of conversations!

That's how relative links work. Look at this example.

The webpage you have made is here:

http://www.yourdomainhere.com/mypage.html

And you want to add banner1.jpg from the images folder.

Here's what you'd put:

<IMG SRC="images/banner1.jpg">

That's a relative path to the image. You told the browser where the image was in relationship to your html page. It's the same as saying "this image is in a folder called images and it's name is banner1.jpg". Simple huh? And it's much faster for you and for the browser.

The advantages of both methods!

Relative paths: Image loads faster, less code on the page, faster for you to insert.
Absolute paths: An image can be called from any domain folder, one image can be shown on many pages.

Make sure you understand the idea of relative and absolute paths and play with them both until you can get them working.

TOM ^"^

Enter TOM'S NEWBIE BOOSTER

">