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.
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”>
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.
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>
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=”https://worldpenguins.com/penguins/blue-penguin.html”>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.