Using Folders to keep order

How Do I .........??

-- Use Folders --



With a website, organization is very important. You may say, "Well, I only have a few pages." and that might be so, however, It has been my experience that web pages are like rabbits, and tend to multiply quickly.

So, it is better to get started on the right track and not have to go back and do a lot of rewriting.

There are as many ways to do a website as there are websites, but, there are a few things you can do right up front to make life easier.

The main folder of any website has to contain the index.html page and it doesn't hurt to have the style.css file there also. If you are using any JavaScript, it could also go there.

If you have Graphics on the pages, (and who doesn't?) there will be a folder called graphics for them. I like to keep my pictures separate, so there will be a folder called pictures. If you have two very different kind of pictures, say, some Albro pictures and some Cobbe pictures, it would be a good thing to have two folders in your pictures folder. Let's call them albro, and cobbe.

Now, on our index.html page we want to put a picture somealbro.jpg and one of somecobbe.jpg.

The code to do that will be something like:
<img src="pictures/albro/somealbro.jpg"> and <img src="pictures/cobbe/somecobbe.jpg">

Notice how the browser is told to look in a folder named pictures for a folder named albro which will have the file in it to display. It does the same thing to find the cobbe file.


Sooner or later you'll have a folder somewhere with an HTML file in it. You'll discover that you no longer can read a graphic with <img src="graphics/filename.jpg"> and chances are your stylesheet will not work on that file either. What has happened?

With your graphic link written like this:
<img src="graphics/filename.jpg">, your file is looking for the graphics folder at the same level it's at. But, the path to the graphics folder isn't there, it's up one level. So, our image link must be written:
<img src="../graphics/filename.jpg">. The ../ tells the file that it must go up one level to find the graphics folder. The same holds true for the Stylesheet file. It must have href="../style.css" not href="style.css"in the line in the head of the page.

If you have a folder within a folder, which would be down 2 levels from the root directory, you would add another ../ to the links, thus:

<img src="../../graphics/filename.jpg">

Any link to a file in the main (root) directory will be written thus.