A single web sites contains numerous types of resources that are fetched by web browsers and displayed on the screen. These include:
- HyperText Markup Language (HTML) files
- Cascading Style Sheet (CSS) files
- Image files (jpg, gif, png, svg)
Since a web site can contain hundreds and even thousands of resources, it is important to organize the files on the underlying file system.
As mentioned in the previous lecture, when a user enters a URL in the search field of a browser, part of the URL string specifies a path to the particular resource that they would like displayed in the browser. Since we’re using an Apache web server and the server stores all of the resources in a hierarchal file system, then the path to a resource (if valid) will contains a list of subdirectories from the domain’s root directory (public_html) separated by slashes followed by an optional file name.
For example, on n0code.net I have the following directory structure:
.../public_html/ .../public_html/work/ .../public_html/work/teaching/ .../public_html/work/teaching/courses .../public_html/work/teaching/courses/csci240/ .../public_html/work/service/ .../public_html/play/
Note that the ../ that proceeds public_html just indicates that although public_html is the root directory for the domain, it is not necessarily the root directory of the file system.
When designing the directory structure for my website I took into account the content that I wanted to display on my webpage. By organizing the directory structure in this way I allow users to go directly to the content that they are interested in. For example, if a user wants to see the course web page for CSCI-240, they enter the URL
http://n0code.net/work/teaching/courses/csci240/ into their browser.
As mentioned earlier, if the path portion of the URL does not include a file name, the web server looks for a file named index.html or index.php. Therefore each subdirectory should have its own index.html file. A subdirectory may contain more than one html file as well. For example the csci240 directory contains a file named index.html as well as a file named student_sites.html which contains links to all of my students’ websites. A browser can load each of these file by specifying the name of the file at the end of the path portion of the URL:
I include in these subdirectories resources that are shared across my website. Notice that I do not create a separate subdirectory for html files like I do for the other types of files.
Creating Directories in WebStorm
To create a sub directory in WebStorm, simply right-click the directory for which you want to create a subdirectory (e.g. /public_html) and choose New -> Directory. Then enter the name of the subdirectory and press OK.
Although the steps above create a new directory on your local file system, they do not alter the file system on your server. To force your server to automatically create the subdirectory right-click on the new directory and press Upload to your-server where your-server is the name of your server.