 |
| How a website's files can be distributed in directories. |
This tutorial is designed to give some ideas on how a website's files (documents, images, videos, etc.) can be distributed in directories and how resources can reference each other from these different locations.
DIRECTORY STRUCTURE
Regardless of personal preferences, the ways in which a website can be organized depends heavily on its type and scope. In this tutorial we will discuss some models that can help you organize your website files and make updating your website a pleasant job.
It can definitely be a good idea to create a directory on your computer for every project you start. Then every file on a website will fall somewhere within its corresponding folder, regardless of the internal structure you design for them. Having said that, it is important that you do not link your documents to resources outside of the site folder, as these are prone to relocation, especially if you consider the idea of making your website public.
Regarding the layout of the internal structure of your folder, you should consider that putting all files in the main directory (also called "root") may be fine for a small site (say, 5 pages, and 3 images). But if you have to handle 20 pages and 200 images, that organizational model can become a serious problem and make it difficult for you to find a document among so many images. So what you can do in such a situation is to start grouping the files in some way and put them in different directories to make your site a little easier to manage and update.
STRUCTURE FOR SMALL SITES
For small sites, it is best to keep the directory structure simple. For example, let's say you have a site where you display your artwork: a collection of 5 images of your own design. After considering it for a moment, you decide that you will build a single page to display the images, plus the home page and the contact page. This makes a total of 3 pages and 5 images. It's not much, so you can go for the following directory structure:
As you can see, the directory structure consists of a main or root directory that contains a subdirectory called "images". In this organizational model, you put all your art in the "images" directory and all the documents in the "root".
DIVIDING INTO CATEGORIES
The previous structure is clear and simple, and it works very well for the files it needs to contain. But suppose that, in the following months, you continue to create more works of art. Before you know it, you have 100 images and you begin to think that this directory structure is becoming obsolete, to the extent that you have placed more than a hundred files in a single directory.
In this scenario, a viable solution could be to divide your images into thematic groups: "flowers", "people", "animals", "fantasy" and "surrealism". In this way you can display all the images corresponding to a category on a single page, having one page for each category. Let's see what this looks like.
You can now put each image in its corresponding directory, obtaining an average of 20 images per directory. Furthermore, these directories can be subdivided: for example, the directory, "animals" can contain sub-directories such as "birds", "horses" or "cats".
But just when you start to feel good about this structure, adding and adding new categories as needed, your friends start asking you to give them a chance to show their work on your site. You really like this idea, but after a little consideration, you realize that the current directory structure will not be enough.
DIVIDING INTO SUB-SITES
A good idea to solve the problem presented in the previous paragraph is to use the models proposed in the previous sections but as sub-sections of the site, resulting in a small site for each of the artists that show their work in it. In this scheme, each artist will have a directory with all their images and pages properly organized. Let's take a look at this so that we can better continue with a clearer picture.
Now, pay attention to the "artists" folder. This is an addition that provides organization and expansion possibilities, making the structure more flexible in the face of the inclusion of new artists. And the "index.html" file inside the "artists" folder contains a document that shows all the artists present on the site. Placing this file there is appropriate in a sense of belonging: it is the list of artists; it should be present in the "artists" directory.
So far, you have seen three possible structures for three different situations, but there are many more. You could, for example, add categories for each artist's images or use categories first and place the artists within them.
Designing the file structure on a website is about finding solutions to an organizational problem. And one particular thing about solutions (or more specifically, about approaches) is that there is always more than one. So the approaches proposed in this document are at best one option among many.
Must Read, HTML Articles
What are HTML Tags and Attributes?
The Structure of the HTML Document.
Grouping and Content structure in HTML
0 Comments