The first part of this page is for you to read.  Make sure you understand it though because you will do something with it at the bottom.

The current folder

You learned about these when it was suggested that you organise your site folder with sub-folders.  This is a normal link:

<a href="textonly.html">text</a>

The browser will look for the page called textonly.html.  It assumes the file is in the same folder as the current page.  The correct way of saying the same thing is this:

<a href="./textonly.html">text</a>

The dot tells the browser to look in the current location (the current folder/directory).  

The parent folder

You can also tell the browser to look in the folder above the current one:

<a href="../textonly.html">text</a>

Two dots stands for the parent directory.  Picture this folder structure:

If you want to link from stocklist.html inside the potatoes folder to the index.html page in the linksite folder it looks like this:

<a href="../index.html">text</a>

You can even go up another level by doing this:

<a href="../../missingpage.html">text</a>

The browser would look for that page in the folder which contains the linksite folder (in the above example there wasn't one).


To access a page in a folder inside the one your current page is in you would do this:

<a href="./oranges/textonly.html">text</a>

The dot says to start in the current folder.  Inside that the browser looks for a folder called oranges and the page should be in there.


Most people will sort of understand that and then immediately forget it.  To avoid that create the folder structure in the above example inside the intermediatesites folder.  Then create the six HTML pages using your template (they can be blank apart from a short sentence describing what they are maybe like this: stocklist.html inside bananas or index.html in the linksite folder etc.).

Then add these links to each page:The links in the index.html in the root folder

The last one is a combination of what is explained above.  Test them all.