Select Lesson
Concepts
File paths
File paths are the addresses of your files and folders.
They tell computers and people where to find your saved documents or pictures.
Understanding the file path between the document you're linking from and the document or file you are linking to is really important when you are creating links.
Remember our coding is all done in HTML files that are saved on the Code Avengers site. If you use an off-line editor it will save it in whatever place you want on your computer.
Below our current html file is stored in the folder Jenna2, which is in the c folder/ directory.
There are three ways to use file paths:
- Absolute,
- Document-relative, and
- Root-relative
You have to know where your two files are stored to make sense of this, so look at the file explorer carefully.
(Remember there are two documents. Your HTML document and file that you want to link to.)
- You can see your own CA files in the projects IDE.
- Your computer has a file explorer : Mac or Windows
Concepts
Absolute paths
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 (a file from the Internet).
The absolute path for our document is:
http://codeavengers.com/c/jeanna2/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, (URL address).
Concepts
Document-relative paths
Document-relative paths start with your HTML page.
(How is the document we are looking for connected (related) to our current document?)
The document-relative path for this example starts at:
project.html (our document) and we want the logo file.
Example:
If the profile page URL is:
http://codeavengers.com/c/jenna2/project.html
and the logo image's URL is:
http://codeavengers.com/images/logo.png
With a document-relative link we don't need the www.codeavengers.com
That is the server and both files are on it.
We can see that image and c are two folders inside the Code Avengers folder (1).
To link to resources in a different folder you can use ../ which means go back a folder. (./ means in this folder)
So we can say go back 2 folders from where this document is saved, there you can find the images folder and the logo is inside that.
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.
Concepts
Root-relative paths
When linking with the root-relative path we start at the site's root folder to a document.
The root folder is the very first folder in the group.
Root-relative URLs always start with a slash, to say that the root is where we're starting from.
/=root folder
The root relative path for our document is:
/c/jenna2/project.html
Look at the image above. We would use this code to add our image to our webpage:
<img src="/c/jenna2/images/logo.png">
Heads Up!
Be aware that if you are using root-relative references, your site will not work if you are testing local files on your PC without running a local web server (like localhost and eclipse).
Extension: Concepts
Extra explanations
our webpage is called project.html and we want to add the image logo.png to our page.
Relative file paths, document-relative and root-relative are more flexible file paths than absolute. Look at this changed file directory.
If jenna2 was moved to another folder, say "d", an absolute link would no longer work, the image isn't at www.codeavengers/c/jenna2/images/logo.png but a relative link would still work because the files are in the same spot relative to each other.
The document-relative path, ./images/logo.png, simply says in the same folder as this .html file find the folder images and find logo.png file.
With the root-relative path, /jenna2/images/logo.png, We could move the jenna2 folder onto a different server, or in a different place on the computer and as long as all the files inside are in the same place the file path will work.