File Management
A website contains various types of files, with different types of content and roles: files that contain text, code, media files, style files, etc.
When building a website, we need to assemble these files into a sensible structure and ensure they can communicate with each other.
I will explain how to set up a file structure and what aspects you should pay more attention to.
Where should website files be placed on your computer?
When working on a website, you should keep all files in a single folder that reflects the structure of the site that will be published on the server.
You can place this folder anywhere, preferably in an easily accessible location, such as on the desktop.
You can name this folder "Web Projects", and inside it, create another folder named "Project 1" and place or create inside it all the files related to that specific project.
File Names and Spacing
Experts recommend naming folders and files using lowercase letters and no spaces between words, because:
- Many computers, especially servers, are "case sensitive" and will consider, for example, Imaginea-mea.jpg to be a different file than imaginea-mea.jpg, in which case things won't work as expected.
- Browsers, web servers, and programming languages handle spaces between words differently. If you use spaces in file names, some systems may treat these files as multiple files. Some servers will replace spaces in file names with "%20" (the character code for spaces in a URI—Uniform Resource Identifier—a string that identifies a specific resource), and thus links will be broken. It is recommended to separate words with a hyphen (my-file.html) and not use underscores (my_file.html).
Google prefers hyphens and treats them as word separators.
Therefore, it's best to get used to writing all folder and file names in lowercase and without spaces between words, at least until you know exactly what you're doing and why. This way, you'll encounter far fewer problems.
What File Structure Should a Website Have?
The most common files in a project structure are:
- index.html – this file is essentially the homepage of any website, although it's not strictly mandatory to use this name;
- images folder – this folder will contain all the images you'll use in the project;
- styles folder – this folder will "house" the files containing CSS code;
- scripts folder – in this folder you'll place files containing JavaScript code.
To begin, reproduce the simple structure described above on your own computer. It should look something like this:
Save the following image – star.svg in the images folder.
☞ Users of computers running Windows may have trouble seeing file extensions, because there's an option called "Hide extensions for known file types". If you can't see file extensions, you'll need to change this setting by checking the appropriate box in Explorer: View >> File name extension.
File Paths
To make files communicate with each other, you need to provide the correct paths—to create a communication channel, a route—so that one file knows where another is located. It may sound complicated, but it's really not.
To demonstrate this, we'll insert a bit of HTML into our index.html file and make it display an image.
Open the index.html file in Notepad and insert the code below, even if you don't yet understand what the code does. You'll understand later when we analyze the structure of a web page in more detail.
The line img src="" alt="test image" is the HTML code used to insert an image into the page. We need to correctly specify the path to the image we want to display.
The image should be located in the images folder, which is in the same directory as the index.html file.
We need to tell the index.html file to look for the image star.svg in the images folder like this: images/star.svg.
All that's left to do now is to insert the path images/star.svg between the quotation marks of the src="" attribute, like this: img src="images/star.svg" alt="test image"
Save the index.html file and double-click to open it in your browser. You should see a web page displaying an image, like in the example below:
Click on the - Preview - tab to see what is displayed on the page.
Here are some general rules about file paths:
- To link to a target file (image.jpg) located in the same directory as the index.html file, use only the target file name: image.jpg,
- To link to a target file (image.jpg) located in a subdirectory, write the name of the directory before the path, a forward slash, and the target file name: subdirectory/image.jpg. Similarly, if there are multiple directories, the path would look like: subdirectory1/subdirectory2/image.jpg
- To link to a target file (image.jpg) located above the index.html file, to reach the same level, start the path with two dots, a forward slash, and the file name like this: ../image.jpg. Just like in the previous case, you may encounter paths like: ../../subdirectory/image.jpg, or ../subdirectory1/subdirectory2/image.jpg, any combination being possible depending on the folder structure.
For now, this is all you need to know about file paths.