Organizing a website

Practice

This practice will consist of creating a basic directory structure for a website that will contain the document we've been developing in previous practices. We'll consider this site to be a blog-like project where the file created so far, is one of its publications.

Before we even start considering the directory structure, we need to create a folder and throw our file in there. You can name this folder however you want ("myblog", "firstproject", "practice", "root", etc). It's name isn't important, as long as you can identify the website's folder in your computer's file system. Nevertheless, you should be aware that this folder will act as the root of the website.

Creating a folder is a process that may vary depending on the operative system you're using, but never too much. Here I'll explain how to create a new folder in Windows 8, and let you figure out how to do it in other operative systems.

To create a folder in Windows 8, you need to right click on the desktop (or the folder you're in) and, when the context menu deploys, select the options "New" and then "Folder". After that, select a name for your new folder and press ENTER.

That's it. Now throw the the file inside and we're done so far. You should have the following structure:

• root
  Folder
  • example.html
    HTML document

You can now change the name of your file for something more descriptive, like "learning-html.html". This will improove the organization of the website and let you identify the file during an update process. You can choose another name, but take into account that I will refer to this file by "learning-html.html".

It's time to add some folders to this structure. By now, we're only creating a folder named "resources" inside our root, and then two more folders named "images" and "videos" inside the first one. The process of creating a folder is simple and has been treated earlier in this practice. The only particularity in this case is that you should do it inside the proper folder in order to obtain the desired structure. In the end, you should have this structure:

• root
  Folder
  • resources
    Folder
    • images
      Folder
    • videos
      Folder
  • learning-html.html
    HTML document

The next thing to do is to add an index file. In this document, you could introduce yourself to the user and tell him about the subjects treated in your website. But more importantly, this index file is the one that will be displayed whenever a user enters your website for the first time. This is the entrance hall of your website, so better use it to receive your guests.

At this point, the structure should look like this:

• root
  Folder
  • resources
    Folder
    • images
      Folder
    • videos
      Folder
  • index.html
    HTML document
  • learning-html.html
    HTML document

As this is a blog-like website, you're supposed to add at least one article every week. At that pace, your root folder could become a mess very soon. In an attempt to prevent such situation, we're doing a couple of things: first, we're creating a "posts" folder to contain all the articles; and second, we're dividing the articles by month (one folder for each month). For now, we're only adding the folder for the current month, including month and year in its name ("2023-12") to avoid ambiguities.

Lastly, don't forget to move the file to it's new home and check that your structure looks like the following:

• root
  Folder
  • resources
    Folder
    • images
      Folder
    • videos
      Folder
  • posts
    Folder
    • 2023-12
      Folder
      • learning-html.html
        HTML document
    • index.html
      HTML document
  • index.html
    HTML document

As you can see in the previous structure, there's also an "index.html" file inside the "posts" folder. This file is supposed to list all the posts in your website. In the beginning it will only be one file, but as your collection continues to grow, you'll have to think of splitting it in two or more files, a technique known as "pagination".

Here I recommend you to make a break, start creating other documents to fill this structure and link documents each other, in order to consolidate the knowledge gathered so far. When you feel you've had enough, you can move on to the next tutorial.