Name folders and files completely 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 as test-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 areas in your filenames with "%20" (the character code for spaces in URIs), resulting in all your links being broken. It's better to separate words with dashes, 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 lowercase with no spaces and with words separated by dashes, at least until you know what you're doing.
What structure should your website have?
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. Using your text editor, create a new file calledindex.html
and save it just inside yourtest-site
folder.images
folder: This folder will contain all the images that you use on your site. Create a folder calledimages
, inside yourtest-site
folder.styles
folder: This folder will contain the CSS code used to style your content (for example, setting text and background colors). Create a folder calledstyles
, inside yourtest-site
folder.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). Create a folder calledscripts
, inside yourtest-site
folder.
Some general rules for file paths:
- 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 oftest-site
andmy-image.jpg
was insidetest-site
, you could referencemy-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
.
No comments:
Post a Comment