Organising your Website files and Folders

< Previous [Images]

[Audio] Next >

Overview

To help organise a large website the files are usually stored in folders.

Many of the students I have had struggle with how to link files into a website when organised into Folders. This page will look at three common ways a basic website is organised into folders.

  1. All the files are in one folder (MyWebSite0 ).

  2. the HTML files are in the "root" folder and media (images) are in a sub folder (MyWebSite1).

  3. Both the HTML and Media (images) are in separate sub-folders (MyWebSite2).

  1. All the files are in one folder (MyWebSite0 ).

This is the easiest

Linking index.html to Hastings.html

<a href="Hastings.html">Hastings</a>

Linking Hastings.html back to index.html

<a href="index.html">Home page</a>

including an image in your HTML file

<img src = TeMataPeak.jpg">

Notes:

  1. Do not put a "/" in front of your filename, that tells the browser to look at the top of your storage device (e.g., "/Hastings.html", or "/TeMataPeak.jpg"))

  2. Do not have a Drive name e.g. "C:/" at the start of the file name (e.g., "C:/Hastings.html", or "C:/TeMataPeak.jpg")

2. The HTML files are in the "root" folder and media (images) are in a sub folder (MyWebSite1).

This is the preferred way to organise your files.

Linking index.html to Hastings.html (they are in the same folder)

<a href="Hastings.html">Hastings</a>

Linking Hastings.html back to index.html

<a href="index.html">Home page</a>

including an image in your HTML file (images are in a sub folder)

<img src = images/TeMataPeak.jpg">

Notes:

  1. Do not put a "/" in front of your path/filename, that tells the browser to look at the top of your storage device (e.g., "/Hastings.html", or "/images/TeMataPeak.jpg"))

  2. Do not have a Drive name e.g. "C:/" at the start of the image path/name (e.g., "C:/myFolder/MyWebSite1/Hastings.html" )

3. Both the HTML and Media (images) are in separate sub-folders (MyWebSite2).

Linking index.html to Hastings.html (they are in the same folder)

<a href="Hastings.html">Hastings</a>

Linking Hastings.html back to index.html

<a href="index.html">Home page</a>

including an image in your HTML file (HTML are in a sub folder and images are in a sub folder)

<img src = "../images/TeMataPeak.jpg">

The "../"tells the browser to go up one folder then down the images folder

Notes:

  1. Do not put a "/" in front of your path/filename, that tells the browser to look at the top of your storage device (e.g., "/../Hastings.html", or "/../images/TeMataPeak.jpg"))

  2. Do not have a Drive name e.g. "C:/" at the start of the image path/name (e.g., "C:/myFolder/MyWebSite1/Hastings.html" )