Introduction

So far all the things we’ve been linking in our webpages have been located in the same place (in the same folder). If we always had to do this it would be very inconvenient. Imagine a website with hundreds of pages and hundreds of picture and all of them had to be in the same folder. It would be really hard to find and work with all those files.

Using Folders

Web pages are better organized by using folders and dividing the files up among them. We just need to tell the browser where to look by specifying a path (sequence of folders to enter to locate a file) with the filename. When we have used images, we have always put them in the same folder. For example: <img src="vwbug.jpg">. In this example, it is not necessary to specify the path because the file vwbug.jpg is in the same folder as the web page.

What if we wanted to put all our images in another folder called images? Then our image tag would look like this: <img src="images/vwbug.jpg">. The path "images/" before the filename tells the browser to find the file vwbug.jpg inside the images folder.

Subfolders

Now let’s imagine that we have so many images that we want to separate them into multiple subfolders. We could create a subfolder for boats, a subfolder for airplanes, and a subfolder for cars. We would then put each image file into the correct subfolder within the main folder images. Our image tag for the vwbug.jpg file would look like this: <img src="images/cars/vwbug.jpg.>

Parent Folders

If you need to reference a file that is in a parent folder (up one level from the current folder), you may add ../ to your path, which means, “move up one folder and find the file.” For example, to reference an image in the folder above the one the web page is in, you would use, <img src="../vwbug.jpg">.

Also note that you may move up a folder and then descend into another like this: <img src="../boats/destroyer.jpg">. And to ascend multiple folders, you may use the parent folder path multiple times like this: <img src="../../logo.jpg">. The image logo.jpg would be located up two folders from the current one.