Corrosive Online
- Web Design
- Graphic Design
- Articles
- Tutorials
- Downloads
Tutorials
Website Folder Structure, Links and File Paths
Introduction
Making a mess of structuring your website is the one sure-fire way to cause future stress. If you have files, pages and folders dotted all around your 'Public HTML' folder, as your website grows, it will become increasingly unmanageable and linking pages and files such as CSS, Javascript or PHP can cause a real headache. This is why I have put together this quick guide to creating a logical website struture.
The second part of the tutorial covers how to link files in your website structure together using 'Paths'.
A logical website structure
OK, if you look at the image on the left you should already be able to recognise a structure 'Tree'. It is like the one that appears when you look at the files on your PC or Mac.
When your website is ready to be published on to the web the entire contents need to be viewed by the public so your website structure will need to sit within the Public HTML folder. This folder can have different names, depending on your web hosts, such as 'public_HTML' or 'htdocs'. Your hosting company will provide this information when you sign up so make sure you have it or ask if you don't.
Once you have connected to your Public folder with your favourite FTP (File Transfer Protocol) software you will be able to copy the files that make up your website into the folder.
When a visitor types in the address of your website they are, in fact, asking to enter the Public folder to view the contents. Most web site hosting companies will ask you to call you to call the first page you want visitors to see 'index.html' or 'index.php' (if you are using PHP in your pages).
As this is the case it makes sense for all of the website pages to sit in the Public folder. Look again at the folder structure on the left. It is based on a simple five page business website. There is the index page and four other pages that will be linked together using a 'hyperlinks' in a menu to form the webite.
I know that my simple website will have some images and will be built using CSS (Cascading Style Sheets) so I have created folders to put these in. I also know that I will be using PHP 'includes' files to make my website even easier to update. Finally I will want a javascript 'Modal Box' (such as Lightbox2 or Fancybox) to display larger images from thumbnails on my 'Products' page so I have also created a folder called 'Javascript' for the .js files.
Although I know that I can create sub-folders in the folders such as a folder for product images within the 'Images' main folder, I will stick rigidly to this website structure and I would suggest that you do the same. There is nothing worse than having images, javascript files, HTML pages and so on scattered throughout different folders. Even if you download your Modal Box files and they come zipped in one folder I'd recommend unpacking the folder and putting the images, javascript and CSS files in their respective folders. Don't be tempted just to keep adding things without organising!
In my opinion, you can't go far wrong with a website structure like the one I have shown you here.
Linking pages
Here we have a fairly typical website page structure. Sticking with the five pages of my example business site I want all of the pages to be reachable by all of the other pages. For this I will use a menu created using an unordered list styles with CSS.
What we are really interested in for this tutorial is how to create those links between the pages. Well, we use a little something called 'href'. The href attribute specifies the destination of a link and it must sit within the <a> tag.
Because this website is created with a sensible site structure we know that all of the individual web pages will sit in the root or 'Public' folder. This means that the links will not have to reference any pages within other folders making it easier to create a menu. Here is an example of the code used for the menu;
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="products.html">Products</a></li>
<li><a href="sales.html">Sales</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
The href tells the browser where the page is and the text in between the opening and closing <a> tag is what is displayed in the page.
Linking images
Of course you want your website to have some images. It's not 1995 any more! As I have suggested earlier, keep all of your images in an 'images' folder. You could create sub-folders within this. Maybe 'site images' and then 'catalogue images' or 'thumbnails'. Just make sure that the structure for your images folder makes sense.
Linking images to be displayed in a web page requires the <img> tag. Here is an example;
<img src="images/welcome.jpg">
The attribute 'src' tells the browser where the source folder of the image is located. In this case the 'images' folder.
You've probably noticed that the name of the folder 'images' is followed by a '/' and then the name of the image is given. This is the convention for file paths and is something you'll need to get your head around.
When you are wanting to use images for backgrounds to div tags you will need to link the images in a different way.
Look at the image on the left. In my Cascading Style Sheet I want to use a background image. The image here is a picture of Poppy, one of our slightly mental cats, sitting in a large paper bag!
You should notice from the diagram that the CSS file is inside the CSS folder. The image is in the images folder. This means that the correct path to from the CSS to the image takes it back up to the root or 'Public' folder and then into the images folder to find the picture of Poppy. The CSS looks like this;
background-image: url(../images/poppy.jpg);
You will see here that the file path is a bit longer than it was before. This is because the request for the image has a longer way to go. The '../' tells the request to look up a folder. This brings it to the root or 'Public' folder. Then the 'images/poppy.jpg' explains where to go to next to get the image. I.e. in the images folder.
Linking CSS files
The code for linking CSS (Cascading Style Sheets) follows the same folder path pattern as the previous examples. A link to a CSS file uses the href attribute we saw in the links between pages. Here is an example CSS link for our fictitious five page business site;
<link href="css/layout.css" rel="stylesheet" type="text/css" media="screen">
You'll see that the href is enclosed in a 'link' tag and the path to the CSS file in the CSS folder matches our previous path examples, 'css/layout.css'.
Linking Javascript files
Linking javascript files means using the <script> tag. You will need to tell it that the 'type' of script is 'text/javascript' and use the 'src' attribute that we used previously when linking images into a page;
<script type="text/javascript" src="js/lightbox.js"></script>
This linked javascript file is for the 'Modal Box' (in this case 'lightbox') feature of the products page. It will only need to be referenced in the page where I want to use the lightbox.
Linking PHP 'includes' files
When 'including' a php file into your web pages you will need to use the following;
<?php include("includes/menu.php"); ?>
Hopefully you will spot the 'PHP' tags '<?php' and '?>' and that the file path gives the 'includes' folder as we saw in the demo site structure.
'Absolute' links
A link is an absolute link if the URL or 'Web address' and file name can be found from anywhere on the Web, not just from a single website. Here is an example of an absolute link from the example site that represents an alternative way to link all of the web pages together;
<a href="http://www.business-site.com/index.html">Home</a>
If you clicked on the example link then you would arrive at the index page of 'business-site' independent of it being in the root or 'Public' folder. Absolute links are favoured by some website developers, when it comes to linking pages together, as being better for SEO (Search Engine Optimisation). There is plenty of conflicting advice on this all over the Web so I will leave you to research and make your own choices.
Conclusion
I hope that the main thing readers will take away from this tutorial is about having a logical website structure. Don't get yourself in a mess to start with and understanding file paths and linking will come very easily indeed.
