in this lesson you will tow main types of paths in html Relative or Absolute.
Relative means the file path is related to the web page path, but Absolute means the file path is not related to the path of the web page it could be in another server or from another website.
For Visual Explain! Here Is This Video:
| Path | Description |
|---|---|
| 1- <img src=”picture.jpg”> | picture.jpg is located in the same folder as the current page |
| 2- <img src=”images/picture.jpg”> | picture.jpg is located in the images folder in the current folder |
| 3- <img src=”/images/picture.jpg”> | picture.jpg is located in the images folder at the root of the current web |
| 4- <img src=”../picture.jpg”> | picture.jpg is located in the folder one level up from the current folder |
HTML File Paths
A file path describes the location of a file in a web site’s folder structure. File paths are used when linking to external files like:
- Web pages
- Images
- Style sheets
- JavaScripts
Absolute File Paths
An absolute file path is the full URL to an internet file.
Example:
<img src="https://www.safhatech.com/images/picture.jpg" alt="example_image"> Relative File Paths
A relative file path points to a file relative to the current page. In this example, the file path points to a file in the images folder located at the root of the current web.
Example:
<img src="/images/picture.jpg" alt="safhatech_image"> In this example, the file path points to a file in the images folder located in the current folder.
<img src="images/picture.jpg" alt="safhatech_image"> In this example, the file path points to a file in the images folder located in the folder one level above the current folder.
<img src="../images/picture.jpg" alt="safhatech"> Best Practice
It is best practice to use relative file paths (if possible).
When using relative file paths, your web pages will not be bound to your current base URL. All links will work on your own computer (localhost) as well as on your current public domain and your future public domains.
This post is one of the HTML5 for deep understanding course. where we will learn every common elements from basic to the advanced element.
In addition each lesson has a video which you could visit and watch for more practicing and for deep understanding.
We hope that we could give the best for you and for the deep and easy understanding.
You could follow the series from our website SAFHATECH.com and go to categories and then programming and then Choose the course you want then just click next post to go step by step.
Finally we hope every thing is works as you suspect.
Consequently You could follow us at :
Website URL: https://www.safhatech.com/
Youtube: https://www.youtube.com/channel/UCIVzh6iykNowNcOUT5Gfasw
Twitter: http:// https://twitter.com/safhatech
Instegram: https://www.instagram.com/safhatech
Facebook: http:// https://www.facebook.com/Safhatech-487171875443687
Phone:967772223681
