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.
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.
Advantages
Different documents can access the same media files. This saves space.
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 dont 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 youll have to spend about 10 minutes learning how HTML references its files.
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.
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.
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. Dont worry about this as HotDog takes care of all these matters automatically when you upload your files to the Net. |
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:
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:
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 doesnt matter what the parent directory is above your html directory, this is the key advantage of relative addressing over absolute addressing.
TIP |
|
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)
Q1. Htmlfiles.
Q2. downloads, htmlfiles, text files.
Q3. "audio/giants.wav".
Q4. "htmlfiles/graphics/elise.gif".
Q5. "../text files/peter.txt".