Embedded Files
Overview
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.
All the files are in one folder (MyWebSite0 ).
the HTML files are in the "root" folder and media (images) are in a sub folder (MyWebSite1).
Both the HTML and Media (images) are in separate sub-folders (MyWebSite2).
- 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:
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"))
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).
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:
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"))
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).
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:
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"))
Do not have a Drive name e.g. "C:/" at the start of the image path/name (e.g., "C:/myFolder/MyWebSite1/Hastings.html" )
Page updated
Google Sites
Report abuse