Now you have your files stored in the folder you need a way to access them in your HTML code. There is a standard system used on computer systems to do this.
To access a file stored in the same directory you can simply put the name of the file (including the file extension .gif, .jpg, etc.) So assuming we wanted to link to an image called myimage.gif which is stored in the same folder as our HTML code (in My Documents for example) we could use the following line:
<img src=”myimage.gif”>
Note : remember the src stands for SouRCe
As you might imagine storing all your HTML and graphics files in the same directory is not a great idea. Its fine if you only have a few files but any more and you can soon get lost or confused. So it is always a good idea to store your images in a separate folder. So lets say we create a new folder inside the My Documents folder and call it images (makes sense huh?). Inside the images folder we save a new image called myimage2.gif so the directory structure looks similar to the one below.
So how do we link to files within folders? Well assuming the target folder is in the same folder as our HTML we can use the following link:
<img src=”images/myimage2.gif”>
The “/” separates the folder and file names from each other. The browser once again reads this link from left to right. Its tells it to:
- Please try to display an image
-
Go look in the folder images
-
Try to find a GIF file called myimage2.gif
You can use this system to link to files that are stored within folder within folders. Just add each of the folder names to the link:
<img src=”images/navigation/topmenu/button1.gif”>
Advanced Folder Navigation
There may come a time when you want to link to a file that is not within the current folder but stored in its parent folder. Lets say you want to link to myimage.gif from the HTML file test.html in the images folder. You cannot do this with anything seen so far. However you can do it by using the “Jump up a folder!” command (ok so its not really called that but you get the idea).
To jump up a folder you use the “..” command in you link, just as you would to link to anything stored in another folder:
<img src=”../myimage.gif”>
As with sub-folders you can have as many “..” as you need. So you can jump up several folders at a time. Just make sure you separate each jumped folder with a “/” the following jumps up three folders:
<img src=”../../../logo.jpg”>
