Website Files and Folders: Explaining the Magic

A Website is a Set of Files and Folders that Work Together

When I first started making websites, I had a hard time wrapping my head around the fact that a website is made up of a host of folders and files that work together to make the website.

Before learning to program, when I wanted to create something, I would open up the software to create it, like Microsoft Word or PowerPoint, then drag in the images and write the text, and save the document. Everything was saved in one file. I was completely unaware of the magic behind the scenes that pulled together all of the resources to make a document.

It took me awhile to wrap my head around the fact that a website is a set of files that works together, and the I had to be in charge of the documents and their references to each other.

A website is a set of files and folders that all work together to make the website. The files and folders reference each other based on their location in relation to each other. Generally, you when you create a website, the first thing you do is create a FOLDER for your website. You will put all of the resources for your website into one folder, including the HTML files, the CSS files, and the images and videos you plan to include in the website. Then, as you build your website, the various files connect to each other. It may be helpful to think of the connections as glue that holds your website together.

A website is made up of a set of files in a folder. This image shows how the index.html file is in the overall website folder.
Websites are made up of many files organized into folders. The top folder holds the entire website.

The home page of the website is usually named, index.html. You will place that file “at the root” of the website, which means that it is directly in the primary folder for the website. Then you glue all of the pieces together with reference links. When you make websites, you create references to images, to style sheets, JavaScript files, and to other HTML pages.

Referencing Images

When you create an image, you specify where the image is in relation to the HTML page. So when you would like to display an image from index.html, you will use the source attribute.

<img src=”my-image.jpg”>

However, to keep the images organized, developers usually place the images in a folder called, images, and you must specify that in your src attribute.

<img src=”images/my-image.jpg”>

How does the browser know where the image is? It uses the src reference in the <img decoding=
The browser finds the image to display based on the src attribute in the <img> tag

Referencing the CSS

The same thing happens with the CSS file. You reference it in the link in the website head, and the file needs to be where you referenced it. In the courses I teach, I generally instruct students to include the style.css file at the root of the website.

<link rel=”stylesheet” type=”text/css” href=”style.css”>

However, a larger website may have multiple CSS files, in which case the developer may place the CSS files into a folder called, “css”. That changes the reference to the file. Because the stylesheet is in a folder, you need to include the folder name as well as the file name.

<link rel=”stylesheet” type=”text/css” href=”css/style.css”>

See the pattern? If the file you are referring to is in a folder, then you need to specify that in the reference.

How does the browser know how to find the CSS file for a website? With the link tag.
The browsers knows how to find the CSS reference based on the href attribute in the <link> tag.

Referencing Links

The same thing happens with links in anchor tags (a tags) in the html. Whenever you make an <a> tag, you use the href attribute. For example, if you are working in the home page, and want to create a link to a contact page, you would do it like this:

<a href=”contact.html”>Contact</a>

How does the browser know how to find a link to another page on the website? With the href attribute in the anchor tag.
The browser know how to find the other page based on the href attribute in the anchor tag.

However, if you have dozens of pages in your website, you may want to place some website pages into sub-folders in order to keep your website organized.

As an example, let’s say that you are making a website about penguins, and there are 17 species of penguins. You have one web page for each type of penguin (17 pages), so you place them all of the HTML files in a sub-folder called “penguins”. Because the penguin pages are NOT at the root, you need to specify where they are so that the browser can find them.

<a href=”penguins/blue-penguin.html”>Contact</a>

Absolute and Relative Links

The links we have looked at so far are all called “Relative” links, because how you refer to them is in relation to the page you are referring from. On a live website you can also use the full reference, which is called an absolute reference.

<a href=””>Contact</a>

If you are learning to make websites and need a bit of help, White Buffalo Websites offers low-cost website coaching. Via Zoom meetings, we can help you learn to make websites in either WordPress or in HTML/CSS/PHP. Here is information on our hourly pricing.