This Website Folder Structure Tutorial is essential. First of all an enclosing folder for a website is created. A folder named ‘website’ will suffice for this demonstration.

Website Folder Structure Tutorial. A folder named website.
A folder named ‘website’.

A html document titled ‘index.html’ is created and saved inside this folder named ‘website’.

Website Folder Structure Tutorial. A folder named 'website' with a file named 'index.html'.
A folder named ‘website’ with a file named ‘index.html’.

Another folder named ‘css’ is created and added to the folder named ‘website’.

Website Folder Structure Tutorial. A file system.
A folder named ‘css’ is added inside the folder named ‘website’.

Inside the folder named ‘css’ a file named ‘styles.css’ is added.

Website Folder Structure Tutorial. A 'styles.css' file added to the folder named 'css'.
A ‘styles.css’ file added to the folder named ‘css’.

The ‘styles.css’ file will be the file that contains all the css styles for ‘index.html’.
On line 6 the ‘index.html’ file has a ‘link’ to the ‘styles.css’ file.

There are no files in the ‘styles.css’ file however it is linked to the ‘index.html’. The ‘href’ attribute is the address and name of the file to be located. The ‘css/styles.css’ can be called the path to the file to be linked.

The ‘rel’ attribute is required as it specifies the relationship between the current document and the linked document.

Before a style is added lets take a look at the ‘index.html’ file in the browser.

Website Folder Structure Tutorial. A website heading.
The ‘index.html’ file before any css styles are added to the ‘styles.css’ file which is in the ‘css’ folder.

Open the ‘styles.css’ file in the css folder and add the following css style rule.

Reload the ‘index.html’ file and see the css style is added to the html document.

Website Folder Structure Tutorial. An orange heading.
The style rule added to the ‘styles.css’ file is linked to ‘index.html’ and is therefore displayed.

Website Folder Structure Tutorial

This method is called an external stylesheet. The CSS stylesheet in the ‘css’ folder is being linked to ‘index.html’ by using a ‘<link>’ tag as opposed to using ‘style’ tags in the ‘index.html’.

The next folder to be added is a ‘js’ folder. The ‘js’ folder will hold all the javascript files.

Website Folder Structure Tutorial. A folder structure.
The ‘js’ folder is added in the ‘website’ folder.

A file named ‘script.js’ is then created and added into the folder named ‘js’.

Website Folder Structure Tutorial
A ‘script.js’ file is added to the ‘js’ folder.

On line 10 in the ‘index.html’ file the ‘script.js’ is linked.
Javascript files are linked by using an opening <script src=”js/script.js”> and a closing </script> tag. The opening ‘script’ tag has a ‘src’ attribute which is the path to the file to be linked.

Adding the following code to the ‘script.js’ file will add a paragraph of text to the ‘index.html’ document.

Website Folder Structure Tutorial. Text added from a javascript file.
The link from ‘index.html’ to ‘script.js’ works!

Another folder that needs to be included is an ‘images’ folder to store any images used for the website.

Website Folder Structure Tutorial
A folder named ‘images’ is added to the folder named ‘website’.

Inside the ‘images’ a file named ‘orange-monster.png’ is added.

Website Folder Structure Tutorial
A image of an orange monster is added to the images folder.

On line 10 an ‘image’ tag is added with a ‘src’ attribute that links to the ‘orange-monster.png’ file inside the ‘images’ folder.

Finally here is the ‘index.html’ file loaded into the browser.

Website Folder Structure Tutorial
The ‘index.html’ has linked to the orange monster image inside the images folder and displayed it in the webpage.

And that concludes this Website Folder Structure Tutorial.

Share!Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPin on PinterestShare on RedditShare on Tumblr

Leave a Reply

Your email address will not be published. Required fields are marked *