16. File/Folder Structure

So we’ve basically built a beautiful index page that will serve as the basis of our web site. If we want all our other pages to look the same then you can see it’s pretty important to get the initial HTML file and style sheet right. Once you’re happy with those files, we need to set up a file and folder structure like this:

The big thing to notice about this structure is that we have a folder called “html” that is going to contain all the pages for this website except “index.html“. This is to get us in the habit of organising our files and folders neatly and ensuring that the first page you open is clear.

Inside our “html” folder we are going to hold the three files referred to in our menu, but rather than create them all right now, I suggest just making one copy of “index.html” and renaming it “about.html“. Once we’ve mostly finished it, we can copy and paste the remaining files.

Link Correction
Let’s start by correcting and finishing all the links in our “index.html” file. Our menu doesn’t have any links set up and so we should correct our menu to be something like:

<li><a href="index.html">Home</a></li>
<li><a href="html/products.html">Products</a></li>
<li><a href="html/about.html">About</a></li>
<li><a href="html/contact.html">Contact</a></li>

Hopefully you’re remembering our relative addressing which tells the browser how to find the files we require. Once you’ve applied these changes our “index.html” file is complete…yay!

Next up is to correct “about.html“, this one will actually require some important alteration. Let’s start with the links to our CSS and JS file:

<link rel="stylesheet" type="text/css" href="../css/style.css" />
<script src="../js/behaviour.js" async="async"></script>

Here we have used some relative referencing methods that may be unfamiliar, but don’t let it scare you. Whenever you see the phrase “ . . / ” it simply directs a link to go backwards a folder. If you needed to go backwards multiple folders then you just string lots of them next to each other.

The reason we’ve had to use this backwards referencing is because the CSS and JS files are located in folders not within the “html” folder where “about.html” is located. Don’t ever let this concern you though, setting up neat folder structures is FAR more important than twisty looking link references!

We now need to correct the menu in our “about.html” page…it will look slightly different to the one found in “index.html“:

<li><a href="../index.html">Home</a></li>
<li><a href="products.html">Products</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>

If you think about what our folder structure looks like from the perspective of “about.html” you can see that “index.html” is backwards a folder whereas, “products.html” and “contact.html” are sitting right next to us in the same folder.

File finalisation
And now that we’ve corrected the links in “about.html” we can copy and paste it to create “contact.html” and “products.html“. Since we waited to make these until “about.html” was finished, our links are going to be correct! You’re blessed with my hindsight but when creating a website, these little tips won’t always be realised in time and thus more thorough site planning is crucial in larger projects!

The last thing you need to do is edit what’s written in “page-header” for each of your pages so that it reflects the page you’re on and VOILA!!! You’re done.

Leave a Comment

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>