A website consists of many files: text content, code, stylesheets, media content, and so on. When you're building a website, you need to assemble these files into a sensible structure on your local computer, make sure they can talk to one another, and get all your content looking right before you eventually upload them to a server. This guide discusses some issues you should be aware of so you can set up a sensible file structure for your website.
When you are working on a website locally on your computer, you should keep all the related files in a single folder that mirrors the published website's file structure on the server. This folder can live anywhere you like, but you should put it somewhere where you can easily find it, maybe on your Desktop, in your Home folder, or at the root of your hard drive.
-
Choose a place to store your website projects. Inside your chosen place, create a new folder called
web-projects
(or similar). This is where all your website projects will live. -
Inside this first folder, create another folder to store your first website in. Call it
test-site
(or something more imaginative).
It's important to note that when naming your folders and files, it's better to name them in lowercase with no spaces. This is because:
-
Many computers, particularly web servers, are case-sensitive. So for example, if you put an image
on your website at
test-site/MyImage.jpg
and then in a different file you try to invoke the image astest-site/myimage.jpg
, it may not work. -
Browsers, web servers, and programming languages do not handle spaces consistently. For example, if
you use spaces in your filename, some systems may treat the filename as two filenames. Some servers
will replace the spaces in your filenames with "%20" (the character code for spaces in URLs),
resulting in all your links being broken. It's better to separate words with hyphens, rather than
underscores:
my-file.html
vs.my_file.html
.
The short answer is that you should use a hyphen for your file names. The Google search engine treats a hyphen as a word separator but does not regard an underscore that way. For these reasons, it is best to get into the habit of writing your folder and file names in lowercase with no spaces and with words separated by hyphens, at least until you know what you're doing. That way you'll bump into fewer problems down the road.
The most common things you'll have on any website project we create are an index HTML file and folders to contain images, style files, and script files:
-
index.html
: This file will generally contain your homepage content, that is, the text and images that people see when they first go to your site. This file should be saved in yourtest-site
folder. -
images
folder: This folder will contain all the images that you use on your site. You'll store it in yourtest-site
folder. -
styles
folder: This folder will contain the CSS code used to CSS style your content (for example, setting text and background colors). You'll store this in yourtest-site
folder as well. All your CSS files can be created and saved asfileName.css
. -
scripts
folder: This folder will contain all the JavaScript code used to add interactive functionality to your site (e.g. buttons that load data when clicked). You'll store this in yourtest-site
folder too. All your Javascript files can be created and saved asfileName.js
.
To make files talk to one another, you have to provide a file path between them — basically a route,
so one file knows where another one is. To demonstrate this, we'll show you a basic way that you can
reference an image that you saved in your images
folder:
DOCTYPE html
html lang en
head
meta charset UTF-8
meta name viewport content width=device-width, initial-scale=1.0
title The Grumpy Donkey Websitetitle
head
body
img src images/you-image.png
body
html
The image is inside the images
directory (folder), which is in the
same directory as index.html
. To walk down the file structure from
index.html
to our image, the file path we'd need is
images/your-image.png
. For example, if our image was called
menu-icon.png
, so the file path in this case would
images/firefox-icon.png
There are some general rules for file paths to note:
-
To link to a target file in the same directory as the invoking HTML file, just use the filename,
e.g.
my-image.jpg
. -
To reference a file in a subdirectory, write the directory name in front of the path, plus a
forward slash, e.g.
subdirectory/my-image.jpg
. -
To link to a target file in the directory above the invoking HTML file, write two dots. So for
example, if
index.html
was inside a subfolder of test-site and my-image.jpg was inside test-site, you could reference my-image.jpg fromindex.html
using../my-image.jpg
. -
You can combine these as much as you like, for example
../subdirectory/another-subdirectory/my-image.jpg
.
The Windows file system tends to use backslashes, not forward slashes, e.g.
C:\Windows
. This doesn't matter in HTML — even if you are
developing your website on Windows, you should still use forward slashes in your code.