In this lesson we'll learn about the standard file and directory (folder) structure used in a typical web site. It's important to have some kind of organized system of files and directories so that updating and maintaining your web application is quick and easy. There are industry standards that developers typically use for the structure and names of files and directories, and we'll look at these in this lesson.
Pre-requisites:
There is a standard directory and file structure we use when we create a web site or web application: there are a standard set of directory and file names we always use to keep site structure consistent and easy to manage.
The main directory that a project's files live in is called the project's root. Do not confuse this with the root directory or folder of your computer, or of the server. Yes, your computer has a root (e.g. C:\) and a server has a root (e.g. terminallearning.com). Additionally, each web project has its own root (and these will be located somewhere off your server's root).
For example, the root of my Fundamentals of Java tutorials is terminallearning.com/java. Notice that the /java directory is located off the root of terminallearning.com. terminallearning.com/java is the root directory from which all of my Java tutorial pages and files are located. If I decided to create a project that allowed you to compile and run simple Java statements from right inside my Java tutorial web site, I might give that project a root location of terminallearning.com/java/runapp. You might have a web server that's not your own, you might be renting web space from a web host. In that case, your server space might have a root of www.hostname.com/yourUsername and you might have a web project whose root is www.hostname.com/yourUsername/myproject. A web project's root does not necessarily have to be off the root of the web server.
Off the root we will see the following directories:
Every directory, including the root of the project, should contain a file called index.html. All web servers are configured to recognize the index.html file, and some can actually recognize several different index files (e.g. index.html, index.htm, index.php, main.html, main.php, etc)
The main index file is the file that will always load when the URL does not contain a specific file name. For example, if the URL requested is https://terminallearning.com/java, then the server will try to locate an index file inside the /java directory and return that to the client. If it can't find one, it might return a 404/NOT_FOUND error or, if the server is configured to allow it, a hypertext listing of all the files in the directory.
Of course, a specific index file can be part of the request too, such as https://terminallearning.com/java/index.html which will, of course, retrieve and return the index.html file inside the /java directory.
Each directory and sub-directory of a project/application that contains HTML files (e.g. not directories like /images or /css) should always have an index file, just in case your user manually goes wandering around your directories!
As mentioned earlier, large web sites will often have several sub-directories to manage different categories of content. For example, the web root for my tutorials is https://terminallearning.com. If you were to use that exact URL, it would take you to the index.html page in that root directory (you likely won't see "index.html" in the browser's address bar, but I assure you that's what you're looking at - to test this, just add index.html to the end of the URL and load that, and you'll see the exact same page).
The web site I use for my tutorials is very large: I have materials for about 7 tutorials. In order to manage the large numbers of files and media for this site, I organize it in the following manner:
In the root of my site there are several directories. The purpose of some of these directories aren't important but I'll outline the ones shown here in case you're curious:
Notice that I have directories for each tutorial that I have materials for, such as devHtml, devCss, java, javafx, etc. There are too many: I couldn't fit them all in the image! Each of these directories contains several html files - most of these are the instructional pages for each lesson in that particular tutorial. But also, each directory has its own index.html page. That way, if a user navigates to one of the tutorial directories, the index.html page will load automatically. Feel free to try it: go to any of the directories https://terminallearning.com/devHtml, https://terminallearning.com/devCss, or https://terminallearning.com/java (they'll open in a new tab/window so you don't lose your place in this tutorial).
Additionally, each of the tutorial directories has its own /images directory. Each tutorial has images that I only use for that tutorial's web pages, so each course directory has its own sub-directory for images. If I kept all of the images for all my courses in the root /images directory, it would be cumbersome and very difficult to find a particular image file: I have hundreds of images!
Note that this is just an example: in reality, there are several other directories/files not shown here. I didn't want to show everything because it would make the image very difficult to read.
In summary, note that it's very likely a large website will be organized in a similar manner. There will always be sub-directories for images, scripts, and CSS styles, and likely also sub-directories for specific categories of content, each of which might also have sub-directories for images, scripts, and styles.
In this tutorial, your web projects will be simple and won't have that many sub-directories. You do have to make sure that your site always has an index file in the root of your site, and also in every content/topical sub-directory. You should also have sub-directories for images and styles (you can skip /scripts since you won't be doing scripts in this course).