Select Lesson
Absolute
Root-Relative
Document Relative
More:
Linking Files and Review Lesson Notes
Absolute
Root-Relative
Document Relative
More:
File Paths
Understanding the file path between the document you're linking from and the document or asset you're linking to is essential to creating links.
In this example the page we are creating is stored in a folder named after our codename, which is in the c folder.
There are three types of link paths:
Absolute, document-relative, and root-relative file paths
Absolute
Absolute paths provide the complete URL of the linked document. An absolute path is necessary when you are linking to a document on another server.
The absolute path for our document is:
http://codeavengers.com/c/codename/project.html
If you were wanting to link an image from google images or any other outside source to your page, you would use an absolute path.
ie. <img src="http://www.codeavengers.com/image/codeavengers.jpg">
Root-Relative
Root-relative path describes the path from the site's root folder to a document.
Root-relative URLs always start with a slash, to specify that the root is where we're starting from.
The root relative path for our document is:
/c/jenna2/project.html
Document Relative
Document relative paths are relative to the location of the html page they are on.
The document relative path for this example is:
project.html
To link to resources in a different folder you can use ../
which means go back a folder.
For example, if the profile page URL is:
http://codeavengers.com/c/jenna2/project.html
and the logo image is:
http://codeavengers.com/images/logo.png
the following code adds the logo to the profile page with a document relative path:
<img src="../../images/logo.png">
../../images
means go back 2 folders then go into the images folder.
More:
The following article contains a good explanation of the 3 types of files paths used in HTML:
About linking and navigation Adobe
Be aware that if you are using root-relative references, your site will not work if you are testing locally without running a local web server.
CA level 1, lesson 10.4 and 10.5 introduce file paths. This intro is fairly light. This is something teacher may want to explain in more detail in class.
Our IDE guide can help you with making your own website inside a root folder.
Resources
Guide
- download
- new file
- upload media
- rename
- delete
Run Ctrl+Enter
Check Ctrl+Shift+Enter
Reset Ctrl+Backspace
Redo Ctrl+Y
Cut Ctrl+X
Copy Ctrl+C
Paste Ctrl+V
Find Ctrl+F
Find & replace Ctrl+F+F