Organising your web site files is as important as organising real documents.

The hard disk on your PC is divided up into folders (or directories) like folders in a filing cabinet. These folders contain documents (files) and other folders. When you set up your web site you can usually have one or more levels of folders. You can then put all related files in the same folder, this makes it easier to maintain your site.

  • You can "hide" certain folders from search engines and web browsers by using entries in a robots.txt Link opens in a new window file, or other methods available through your host. This might be a useful place to temporarily store old versions of some pages, or revised versions still being developed.

The diagram below represents the possible structure of how your web site could look on your PC. On your ISP's server the directory containing all your files (in this case called "web") would be your home (root) or domain directory.



 system folder


HTML File index.html

HTML File welcome.html


 system folder


HTML File index.html

HTML File job.html


HTML File index.html

HTML File baby.html

HTML File kids.html

HTML File xmas.html


HTML File index.html

HTML File newyork.html

HTML File paris.html

HTML File rome.html


HTML File index.html

HTML File cat.html

HTML File dog.html

HTML File fish.html


HTML File index.html

Image File eifeltower.jpg

Image File icon.gif

Image File puppy.jpg


In this example the folders each contain files relating to a specific subject. The images folder contains all the gif and jpg images. If you want to link to another file or image you need to give the location of the file correctly.

  • The folders you you divide your web site in to might be reflected in the sections and sub-sections in your navigation structure.

For files in the same folder you only need to use the file name, so If you want to put a hyperlink to the page welcome.html in index.html, you would put:

<a href="welcome.html">Our Welcome Page</a>

If you want to put a hyperlink to the page dog.html in welcome.html, you would put:

<a href="pets/dog.html">Our Dog</a>

This tells the browser dog.html is one level down the folder structure in the pets folder.

Note that you use the forward slash / character, this is accepted format for the type of computer your web page files will be stored on.

If you want the image icon.gif to appear in welcome.html (in the root directory) in the HTML code you would put:

<img src="images/icon.gif">

This tells the browser icon.gif is stored one level down the folder structure in the images folder.

If you want puppy.jpg to appear in dog.html, you would put:

<img src="../images/puppy.jpg">

The two dots and forward slash tell the browser to go up one level in the folder structure. It then goes back down one level to the images folder to find puppy.jpg.

These are all called relative URLs, because they are relative to the URL of the file that contains the link.

The folder containing the images also has an index.html file. If someone typed the web address for the images folder without specifying a file name they will see the default file. If there was no default file they would be presented with a list of the contents of the folder. The index.html file in this directory could be a conventional web page - perhaps for picture thumbnails - or it could be a warning message suggesting pressing the "Back" button.