Before we begin building a website, we should give some thought to the organization of the files and folders of our web page. We could dump everything in one folder and our HTML code wouldn’t mind, so long as our file paths were set up correctly, but this will get very confusing for us rather quickly. We can easily create a clean, organized file tree for our website that will not only make our lives easier, but improve the experience for our visitors. We’ll use a graphical user interface for managing files and folders to create our file tree. Your operating system almost certainly comes with one such file manager. I’ll be using Nemo because it is awesome, and it’s the default file manager for Linux Mint. If you are on Windows you’ll likely be using Windows Explorer, and Mac OS users will have a program called Finder. The process is almost exactly the same regardless of your file browser, so you shouldn’t have any problems following along with me.
TIL HTML J4F, And So Can You!
Read Organizing Files and Folder Structure for Web Pages and 16 other revised and expanded HTML tutorials on the go with our convenient E-book (available in PDF, EPUB, and MOBI).
Learn how to build a game board with the table element, make sandwiches with forms, conquer dragons with semantic elements, link to exotic locations, and build up a robot's self esteem with structural markup in this beginner friendly introduction to the essential web development language. Download the Complete E-book Now!
For the purpose of this tutorial, we’ll pretend that we are creating this folder structure on a web server. A web server is the combination of hardware and software that allows your website to be shared with the world. Web servers are outside the scope of this tutorial, so we shouldn’t get too distracted on that point, but it will inform some of the decisions we make when putting our folder structure in place. Lets start by first creating the main folder for our page. This is usually referred to as the root directory because it is the first folder in the file tree of our web page. I’ll create mine in the /var/www directory because that is where it would go if we were putting this on a real web server, but you can create yours anywhere on your computer for now. All you need to do to create a new folder is right click inside of your file browser and select “Create new folder”. Give your folder a cool name like… uh… “website,” yeah that’s cool. It doesn’t really matter what the name of this folder is, because your web server would treat your domain name like the root folder. The domain name “www.mycoolwebsite.com” could be configured to point to the “website” directory, and your visitors would never see the name of that folder.
Open the folder we just made and right click in your file browser again, this time selecting “Create new document”. As tempting as it is to get creative with naming this file, we need this one to be called index.html.
What’s so special about index.html? This is the standard naming convention for the primary HTML file in a directory. This is super cool because a web server will assume that a URL requesting a directory is actually looking for the index.html file. So the web addresses “www.website.com/index.html” and “www.website.com” are exactly the same thing. Neat!
We’re probably going to want more than one page on our website. While we could create more HTML files in the root directory, we can further organize our pages in sub directories. Lets say we are building a section of our website dedicated to robots. We’ll need to create a folder called “robots” and place another index.html file inside of it.
Inside the CSS folder, create another plain text document called “main.css”. To include a CSS file in our HTML page, we’d need to use the link element. Open the root index.html file in your text editor and add a link to the CSS file, like so:
<link type="text/css" rel="stylesheet" href="css/main.css" />
The href attribute can contain an absolute or relative path to your CSS file. Absolute paths are consistent no matter where they are used. For example, an href attribute of “http://www.website.com/css/main.css” would always point to the CSS file located at /website/css/main.css regardless of what HTML page it was used on. If we used the relative path “css/main.css” in a file other than our root index.html file, it would mean something completely different. In our “/website/robots/index.html” file, for instance, “css/main.css” would attempt to load the non-existent file “/website/robots/css/main.css”. We can still use a relative path in this file, but we need to tell it to move back one directory before looking for our css folder. Two periods followed by a forward slash indicate a reverse move through the file tree. So “../css/main.css” would correctly link the stylesheet in our /website/robots/index.html file.
<link type="text/css" rel="stylesheet" href="../css/main.css" />
This same principle applies to all of your assets, be they images, scripts, video, or audio. Don’t worry if you didn’t quite follow what was going on with the link and head elements, we’ll talk more about those later. For now it is only important that you understand how to create files and folders with a file manager, and why organization is essential to creating a killer web application. This may seem like a lot of tedious work just to get a web page started, but staying organized pays off in the long run. With the introduction of HTML boilerplates, a lot of this work has already been done for you anyway.