HTML | File Paths
A file path specifies the location of a file inside a web folder structure. Its like an address of a file which helps the web browser to access the files. File paths are used to link external resources such as images, videos, style sheets, JavaScript, displaying other web pages etc.
To insert a file in a web page its source must be known. For example, the syntax (<img src=” ” alt=” “>) is used to insert an image file, where the path of the file is mentioned in the source (src).
File paths are of two types:
- Absolute File Paths
- Relative File Paths
Absolute File Paths: It describes the full address(URL) to access an internet file.
<img src=”https://media.geeksforgeeks.org/wp-content/uploads/geek.png” alt=”My Image”>
Example:
html
<!DOCTYPE html><html> <head> <title>Absolute file path</title> </head> <body> alt="My Image" style="width:400px"> </body></html> |
Output:
Relative File Path: It describes the path of the file relative to the location of the current web page file.
Example 1: It shows the path of the file present in the same folder of the current web page file.
html
<!DOCTYPE html><html> <head> <title>Relative file path</title> </head> <body> <h2>File present in the same folder</h2> <img src="images/geeks.jpg" alt="My Image" style="width:400px"> </body></html> |
Output:
Example 2: It shows the path of the file present in a folder above the folder of the current web page file. The image file present in a folder called images and current web page file exists inside a sub folder, then the code will be as follows:
html
<!DOCTYPE html><html> <head> <title>Relative file path</title> </head> <body> <h2>File present in a folder above the current folder</h2> <img src="../images/geeks.jpg" alt="My Image" style="width:400px"> </body></html> |
Output:
Example 3: It shows the path of the file present in a folder which is located at the root of the current sub directories.
html
<!DOCTYPE html><html> <head> <title>Relative file path</title> </head> <body> <h2>File present in a folder which is located at<br> the root of the current subdirectories</h2> <img src="/images/picture.jpg" alt="My Image" style="width:400px"> </body></html> |
Output:
Supported Browser:
- Google Chrome
- Microsoft Edge
- Firefox
- Opera
- Safari
CSS is the foundation of webpages, is used for webpage development by styling websites and web apps.You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.
Please Login to comment...