File structure

From the position of the developer, the site can be conditionally divided into two levels - logical and physical. At a logical level, a site is a collection of web pages, united by a single design, style and links. At the same time, at the physical level, the site is also a set of files of different types - the composition can include programs, documents, images and much more. Thinking and creating a convenient file structure helps not only the developer to optimize their work, but also the visitor better understand the structure of the site.

For simplicity, we assume that we are dealing with a site that is made with the help of html-files, without any web programming.

Before creating folders and files in the root of the site, you need to develop a site structure - what sections and subsections will be present, as they will be called. For an example, we give a diagram of the site dedicated to optimizing graphics.

• Home page
• Graphic File Formats
• Image resolution
• Optimization in Photoshop
• Optimizing GIF
• Optimizing JPEG format
• Anti-aliasing
• Cutting Images
• List of terms

Each section is one HTML document that you should create and give it a name. The names of files are better called Latin symbols without spaces in lowercase. This approach guarantees universality and availability on different platforms.

Before assigning file names, you should consider some settings for the web server under which the site will operate. This includes: which file will be downloaded first, whether access to individual files will be closed, how errors will be tracked, and other similar issues.

Which file should I upload first

Usually the site view begins with the main page. If there are a lot of different files in the root of the site, how does the web server know what to download automatically? Of course, if the path to the file is specified directly, no questions arise. But in most cases, the website address is indicated briefly, without extra files at the end. Then the server settings are read, and it is determined which file should be shown with a name and whether it is available. Typically, this file has the names index.html, index.htm, default.htm, in general, the list can be continued. In order not to complicate your life by calculating which file is more important, you can install it yourself using the .htaccess file, placing it in the root of the site. This file is a configuration file for the popular Apache web server and is a plain text document. In it it is necessary to write such line.

Where through the space the file names are indicated, which should be viewed for availability and run automatically. After that, when you specify the path to different files and folders, the browser will open documents, as shown in the table (the protocol protocol http: // is omitted for brevity).

As you can see from the table, even if the path to the file is not completely specified, the web server itself will supply the missing values. This can be used, creating links to different documents, their performance will not affect this.

Remarks

Deny access to folders

To prevent visitors from viewing information in separate folders on the site, which is sometimes necessary to restrict access to service information and improve the security of the site, there are two main ways. The first is to create an empty index.html file and place it in the desired folder. As mentioned above, this file will be loaded first when selecting the path to the folder. And if it is empty, you will not be able to see anything superfluous. The second way is to use the .htaccess file again, which should be placed in the desired folder. Do not be surprised, this is a universal file and can be placed in any number and anywhere on the site.

In it it is necessary to write the following information.

When the browser opens a folder containing such a .htaccess file, the visitor will see an error warning with the number 403, meaning that access to this location is prohibited.

Images

All images used on web pages are accepted to be stored in a folder named images or img. Such a tradition systematizes the material, breaking it into blocks. It turns out that there is one storage place for pictures, another for scripts, another for styles.

Tracking errors

If all links are created correctly, the so-called "broken links" never occur, when the link leads to a file whose path or name is incorrect. However, this error with the number 404 can arise simply when the address of the page is incorrectly written. In this case, it would be good to slip the user with an error message so that he would not worry and believed that everything could be corrected. To do this, create a separate web page, which will be shown exactly when such an error occurs. You can link the process of error occurrence and our file can be again using the root .htaccess. The following line is added to it.

The file name is called err404.html and is located in the root of the site, the slash (the / character) is written before the file name.

File structure of the site

Let's return now to the site, the file structure of which should be created. There are two different approaches. In the first case, each section corresponds to an html document located at the root of the site. The path to it will look like www.mysite.ru/optimize.html. Alternatively, you can create folders that correspond to specific sections. Each folder contains an index.html file. Since this file is not required in the address, the path will look like www.mysite.ru/optimize. In Fig. 1 and Fig. 2 shows two sets of organization files on the site.

Fig. 1. Organization of documents on files	Fig. 2. Organization of files by catalogs

What structure to prefer depends only on the will of the creators of the site.

Additional Files

On any site can not do without additional files, usually placed in the root of the site. This includes files designed to perform certain tasks and have a mandatory name, as well as files whose name is determined by the developers.

Required names

Index.html - the name of the main page, as well as the web pages placed in folders, which should be opened when they are specified in the address. This name, as already mentioned, can vary depending on the type of web server and its settings. But usually it is just that.

.htaccess - the configuration file of the Apache web server. The specified server is the most popular and widespread in the world, therefore this file can be found everywhere. There are, of course, exceptions.

Robots.txt - a file designed for search engines. When indexing a site, first of all it is searched. An example of a ban for all search engines is to visit the cgi-bin and images site folders.

Favicon.ico - an icon of the site, it appears near the site's address when you enter it in the "Favorites" section of the browser. This is a 16-by-16-pixel ICO image.

Optional names

Stylesheet - no site is no longer without the styles, usually placed in a separate file. This arrangement offers several advantages: it is easy to change the appearance of elements on all pages, changing parameters in only one place, the file is cached and loaded faster, the total amount of all documents is reduced. The file with the style usually has the extension css.

Conclusion

Although the names of some service files depend on the server settings and can vary from site to site, these principles are typical for most of them. For dynamic sites, the content of which is generated using a program, the so-called "engine", the structure will be slightly different from the one given. However, in this case too, the service files, such as style sheets, .htaccess, favicon.ico, robots.txt, will remain in place.