File Paths
A file path describes the location of a file in a web site's folder structure.
An HTML file path is used to describe the location of a file in a website folder. File paths are like the address of a file for a web browser.
We can link any external resource to add to our HTML file with the help of file paths such as "images", "file", "CSS file", "JS file", "video" etc.
The src or href attribute requires an attribute to link any external source to HTML file.
Types of File Paths:
It specifies that picture.jpg is located in the same folder as the current page.
It specifies that picture.jpg is located in the images folder in the current folder.
It specifies that picture.jpg is located in the images folder at the root of the current web.
It specifies that picture.jpg is located in the folder one level up from the current folder.
File paths are used on webpages to link external files like:
Images
Style sheets
JavaScript
Web pages
Types of File Paths:
Absolute File Paths
Relative File Paths
Absolute File Paths:
Absolute file path specifies full URL address.
Example:
<!DOCTYPE html>
<html>
<body>
<h2>Using a Full URL File Path</h2>
<img src="https://www.example.com/logo-192x192.png"
alt="Logo Alt Text" style="width:200px" />
</body>
</html> Relative File Paths:
The relative file path specifies to a file which is related to the location of current page.
Example:
<!DOCTYPE html> <html> <body> <h2>Using a Relative File Path</h2> <img src="/logo-192x192.png" alt="Logo Alt Text"> </body> </html>
This is how a file path points to a file in the images folder located in the current folder.
Example:
<!DOCTYPE html> <html> <body> <h2> Using a Relative File Path </h2> <img src="images/logo-192x192.png" alt="Logo Alt Text"> </body> </html>