Absolute And Relative References

This topic discusses the various advantages and disadvantages of relative vs. absolute referencing (or linking) and then attempts to clearly explain the different HTML syntax behind each method.

The tricks to inserting pictures and other media into your Web page

There are two ways of including media (i.e. pictures, sound etc.) in documents. Some documents like MS WORD actually store the media inside the document while others (such as HTML documents) just point to external media files. Thus the actual media files are not part of the document per se but are stored externally. There are advantages and disadvantages of both and they will be discussed later. This tutorial will explain how HTML files point to their associated media files (or even other HTML files) and the different techniques you can use to point to these files.

The advantages and disadvantages of storing your files externally to a document

Advantages

  1. Different documents can access the same media files. This saves space.

  2. If you change a document, you only have to ship the changed text file (and not the media files). If the files are stored inside the document, the whole document has to be re-shipped.

Disadvantages

You don’t always know what files are associated with your document. Whereas with WORD, if you copy a document to a floppy, you can be sure that you have all the relevant pictures. If you copy an HTML document to a floppy, you have to be careful to include any related media files. The result is you have more control over the files you use. But then you’ll have to spend about 10 minutes learning how HTML references its files.

How files are referenced in HTML

Basically, you need to tell the browser where the media files for the HTML document are stored (HotDog will do this automatically for you). For example, if you insert a picture called elise.gif into your Web page, this file must be referenced or pointed to in some way from the Web page because the image is stored externally.

There are 2 different ways of referencing external files from an HTML file; Absolute and Relative.

Absolute References

Here is an example of the HTML code for inserting an image using an Absolute Reference.

<img src= "file:///C|/Program Files/HotDog5/htmlfiles/graphics/elise.gif">

The HTML code above can be thought of as:

<image source = location> where the location is an absolute position of your file (written in a UNIX format).

The location, file:///C|/Program Files/HotDog5/htmlfiles/graphics/elise.gif, when broken down and translated reveals file:// is just like http://, it just tells the browser to read a file on the local computer and not start surfing the Net.

/C|/Program Files/HotDog5/htmlfiles/graphics/elise.gif is the UNIX translation for

C:\Program Files\HotDog5\htmlfiles\graphics\elise.gif This is just the specific location of the picture.

As you can see, the images position is located precisely on the hard drive. This means, if you preview your HTML file anywhere on your computer, the image will be found. The only problem is that when you upload your HTML file to your server, the directory path “C:/Program Files/HotDog5/htmlfiles/graphics/elise.gif” will not exist and so the image will not be displayed.

Relative References

In order to solve this problem relative referencing is used.

Here is an example of the HTML code for inserting an image using a relative reference.

<img src="graphics/elise.gif">

You can think of a relative reference in an HTML file as “Insert the picture ‘elise.gif’ which is in a directory called graphics, below the current directory.

In this case, when loading your HTML file the browser will look for your images in a directory below your current directory called graphics. This means when you upload your files to the server, provided you store all your images in a directory under your HTML file called graphics, they will be displayed. You can store all images and graphics in the same directory, but this will get messy if you create a large WebSite.

 

 NOTE

You will notice that the direction of the slashes is different in Windows95 and UNIX. Don’t worry about this as HotDog takes care of all these matters automatically when you upload your files to the Net.

Tricks

The whole process of referencing files correctly, even when you upload them to your server, is simple if you mirror the directory structures. If you are uploading a WebSite, HotDog does this automatically for you.

For instance, if your directory structure on your local hard drive is as follows:

Graphics/00000067.gif The current directory is called ‘htmlfiles’. The directory ‘html files’ has child directories called ‘audio’, ‘graphics’, ’other’ and a parent directory called ‘HotDog4’. If you store all your HTML files in the ‘htmlfiles’ directory and all your media in the associated media directories, then when you upload all your work the referencing will still be correct, provided the same directory structure exists on your server.

Say the directory structure of your server is:

Graphics/00000068.gif The children directories of ‘www’ are exactly the same as the directory structure on your local hard drive. This is what is meant by the term ‘mirroring’. In this case your HTML directory structure is mirrored. To demonstrate this, below are correctly referenced images. In each case the image elise.gif is stored in the graphics sub-directory of the HTML directory. On the local computer, the HTML file is stored in the ‘htmlfiles’ directory on the server. The HTML file is stored in the ‘www’ directory.

The correct HTML code to insert the picture elise.gif on the local computer is:

<img src="graphics/elise.gif">

The correct HTML code to insert the picture elise.gif on the server is:

<img src="graphics/elise.gif">

The references are the same because we designed the directory structure to be that way. Of course it doesn’t matter what the parent directory is above your html directory, this is the key advantage of relative addressing over absolute addressing.

 TIP

  • Whenever you create a new document, save it immediately into the default HTML Document Directory. This ensures that HotDog can use relative references because it knows the position of your HTML file.

 

Examples

Graphics/00000069.gif

Using the picture above as your directory structure, answer the following questions:

Q1. What is the parent directory of ‘graphics’?

Q2. What are the children directories of ‘HotDog4’?

Q3. If I create a link to a file called ‘giants.wav’ in the ‘audio’ directory from an HTML file in the ‘htmlfiles’ directory, what would the path be?

Q4. If I create a link to the file ‘elise.gif’ in the ‘graphics’ directory from an HTML file in the ‘HotDog4’ directory, what would the path be?

Q5. If I create a link to the file ‘peter.txt’ in the ‘text files’ directory from an HTML file in the ‘htmlfiles’ directory, what would the path be? (Note, use ‘..’ to mean ‘go up one directory’)

Answers:

Q1. Htmlfiles.

Q2. downloads, htmlfiles, text files.

Q3. "audio/giants.wav".

Q4. "htmlfiles/graphics/elise.gif".

Q5. "../text files/peter.txt".