Most of the time, you will be needing to work with file paths on links, images, videos, audios and a lot of others.
A file path just as the name may relate is simply the path leading to where a file or document is existing either on the internet or your local computer. In simpler terms, it is where all the various files you may be needing to develop your webpage are located.
To help you understand file paths, we have categorize them into two namely,
1. Absolute File Paths
2. Relative File Paths
Absolute File Paths
An absolute file path is simply the full path to where a file or resource is located on the internet or your local computer. Such paths are mostly used to access files located or hosted on other websites or servers/computers. For example, to use an image located on stackbeginner.com
for my webpage, I need to specify the full URL to that file which may be,
But that does not mean you cannot use your website's absolute paths on your webpage.
You don't necessarily have issues working with absolute file paths since you simply specify the full path or URL to where a file is located and boom, you have access to it.
Relative File Path
Just as the name connotes, relative file path is a path to a file that is in relation to your webpage. That is, the file is on the same server/computer with your web/HTML document.
Therefore, you may not necessarily need to link up to it absolutely. For example,
<a href='login.html'>LOGIN HERE</a>
In the above examples, an HTML hyperlink is linking to an HTML document(login.html
) existing in same folder as the webpage. On the other hand, an image element was created with an image (tree.png
) existing on the same folder as the webpage.
OTHER EXAMPLES OF RELATIVE FILE PATHS
R - PATH
|img.png||Same folder with the webpage.|
|gallery/img.png||A folder(gallery) in same folder with the webpage houses the file.|
|gallery/pictures/img.png||A folder(gallery) in same folder with the webpage houses another folder(pictures) where the file is located.|
|../img.png||A step backward from the webpage.|
|../gallery/img.png||A step backward from the webpage and then, inside a folder(gallery).|
|../../img.png||Two steps backward from the webpage.|
|../../../img.png||Three steps backward from the webpage.|
- A file path is a link or URL or path to where a file is located.
- We can classify file paths into absolute or relative.
- An Absolute file path is the full name to where a file is located.
- A Relative file path is just the file name or some other basic folders to where a file is located.
- Absolute file paths are mainly used when the file is in another website while relative paths are used when the file is existing in same computer as our website or webpage.
- Understanding file paths helps us know how to access folders and files and then, use them for whatever purposes.