We could dump everything in one folder and our HTML code wouldn’t mind, so long as our file paths were set up correctly, but this will get very confusing for us rather quickly. We can easily create a clean, organized file tree for our website that will not only make our lives easier, but improve the experience for our visitors. Normally the best system is the one that works better for you. This is only true if you never plan on sharing your work with someone else, or if you do not expect to use other people’s code.
A basic website only should require one file called index.html But a website with a lot of different components will require multiple folders for each part of the website.
An Example of a Good File System
-
MainWebsite
-
css
- style.css
- white-theme.css
-
js
- script.js
- sliding-page.js
-
images
- favicon
-
- favicon-16x16.png
- favicon-32x32.png
- background.png
- coolstuff.jpeg
-
sub-pages
- personal
-
- personal-index.html
- personal-school.html
- people
-
- people-index.html
- people-school.html
- index.html
- coolstuff.html
-
css
Now that you have a killer file system, its time to link it all together.
The best way to link files together is by relative linking. When using relative file paths, your web pages will not be bound to your current base URL. All links will work on your own computer (localhost) as well as on your current public domain and your future public domains.
In this example the file path points to a file in the images folder located at the root of the current web:
<img src="/images/background.jpg" alt="background">
In this example the file path points to a file in the images folder located in the current folder:
<img src="images/coolstuff.jpg" alt="coolstuff">
In this example the file path points to a file in the images folder located in the folder one level above the current folder:
<img src="../images/picture.jpg" alt="Mountain">
Sithum Dissanayake
@Coding_Flow