Go to main content
Bypass navigation bar HTML Reference HTML Tags HTML Tutorials
Bypass language selection
Bypass location bar

Location: Home > HTML Tutorials > Organizing a website

Bypass main content

Organizing a website

This tutorial is designed to give some ideas about how the files (HTML documents, images, etc.) in a website can be distributed among directories and how the resources can refer to each other from these different locations. I'll also make a small reference on how the files are placed in the server.

Bypass main content

Directory structure

The way you organize a website depends pretty much on the type of website you're building and the way you like to do it, but here we'll provide you some models that you can use to organize your website making each update an easier job. Our recommendation is that you create a main directory in your computer that will contain all the files and sub directories of the site, that you can later upload "as is" to the server.

The first thing you have to think of, is that putting all the files in the root directory may be fine for a site with 5 pages and 3 images. But if you have to handle 20 pages and 200 images, that organization model can turn into a serious problem. So what you can do, is to start grouping the files in some way and placing them in different directories to make your site a little easier to manage and update.

For example, let's say you have a site where you show up your artwork: a collection of 5 images designed by yourself. After think it for a while, you decide that you'll build one page to show the images, plus the home page and the contact page. This makes a total of 3 pages and 5 images. As it's not much, you can actually create this directory structure that will hold your files well organized:

This image shows a directory structure with three documents (contact.html, images.html and index.html) and a folder (img) containing five images. All of these items are located under the root.

So, you've built your directory structure with the root directory and its sub directory "img", you put all the images in the "img" directory and all the HTML documents in the root. This works fine for the next 6 months while you continue to create more of your artwork. Suddently you have 100 images and you begin to realize that this directory structure model is getting obsolete as you have already placed a hundred files in a single directory.

At this point you can live in the mess or you can adopt a new directory structure. For example, you can divide your images into groups thematically: flowers, people, animals, fantasy and surrealism. This way you can show all the images corresponding to a same category in a single page (taking into account that the images are small enough to don't make the page load last an eternity).

This image shows a folder structure with seven documents (animals.html, contact.html, fantasy.html, flowers.html, index.html, people.html and surrealism.html) and a folder (img) containing other five folders (animals, fantasy, flowers, people and surrealism) which contain images. All of these elements are located under the root.

You can put now each image into its corresponding directory, which will give an average of 20 images per directory. And this directories can yet be subdivided (e.g., the "animals" directory can contain a sub directory named "birds").

Just when you're happy with you site, your friends come asking you to give them the opportunity to show their work in your site, which looks like a great idea to you. But again, how do you organize all this information in a way that you don't end up making a mess? Well, a good idea is to use the previous organization exactly as is, but for each one of the artist that will show their work in the site. This will result in one directory for each artist containing their images and document administrated in sub directories.

This image shows a folder structure for the example descripted in the previous paragraph. In the folder "artists", located under the root, you can find one folder for each artist (isaac, me, etc.), and each one of these contain the images folder (img), and three documents (bio.html, contact.html, images.html). Under the root there are also three documents: contact.html, artists.html and index.html

Now you can keep adding and adding sub directories to each artist's directory, and combining structures. Note that this structure may also apply for a website's sections instead of artists.

Never forget that you can create any directory structure that you like, the point is that you feel comfortable managing and updating the files inside of it.


Diseño y desarrollo: Latitud29.com

Links and logos|Contact|Beyond HTML|Tools and resources|Sitemap|Webmaster|Donate