Structuring your site

Web sites often take on a life of their own. For many people, building an extensive Web site becomes a personal hobby. Others become involved in building a large Web site to support an organization they belong to or even a small business. When you start building a site with several pages, the files multiply in a hurry. Be careful to keep them organized. Remember to save each image as a separate file. In addition to pictures, you might want to create icons for making links instead of words. Each icon is a separate file.

Think what your home computer would be like if you didn't have folders to manage all the documents and applications that you've accumulated. It would be tough to sort through all your files each time you wanted to find something. The same is true of your files on a server. Once you start putting many files on a server, sorting them out becomes a problem. The good news is you can organize files in folders on the server just as you can on your home computer. Furthermore, you can upload an entire site, so what's on the server is organized the same way it is on your home machine.

Typically people start by putting everything in the same folder. Rachel Jones's index.html has one associated image file; if both were on the desktop of her home computer and she sent them both to the server, they would look like Figure 14.7.

If Jones were hand-coding her file, the link to the image file on index.html would be IMG SRC="whale.jpg".

But if Jones plans to expand her site in the future, she might want to create a separate folder named "images" and put whale.jpg in it (see Figure 14.8, page 256).

Using an images folder, however, requires telling the browser that whale.jpg is in a different folder. The command IMG SRC="images/whale.jpg" means that whale.jpg is in a folder named "images."

Let's say that Jones plans to put other Web sites on her account and wants to keep the files that create her home page in a folder called "home." She wants to keep her images in a separate folder, so her directory would look like this:

In order for a browser to find whale.jpg, it would have to go to another folder at the same level as the home folder, which contains index.html. The command IMG SRC=". . / images/whale. jpg" means "go up one level, find the folder images, then find the whale.jpg file." If an image doesn't show up when you put the site on the server, it's probably because you haven't given the browser the correct instructions to find it. These problems are usually easy to fix if you have a basic knowledge of how HTML works.