HTML File Paths
An HTML file fileName is used to describe the location of a file in a website folder. File paths are like an address of file for a web browser. We can link any external resource to add in 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.
Following are the different types to specify file paths:
- <img src="picture.jpg"< It specifies that picture.jpg is located in the same folder as the current page.
- <img src="images/picture.jpg"< It specifies that picture.jpg is located in the images folder in the current folder.
- <img src="/images/picture.jpg"< It specifies that picture.jpg is located in the images folder at the root of the current web.
- <img src="../picture.jpg"< It specifies that picture.jpg is located in the folder one level up from the current folder.
- Web pages
- Images
- Style sheets
- JavaScript
- Absolute File Paths
- Relative File Paths
Absolute File Paths
Absolute file fileName specifies full URL address.
output:<!DOCTYPE html>
<html>
<body>
<h4>Using a Full URL File Path</h4> <br>
<img src="https://blogs.nasa.gov/spacestation/wp-content/uploads/sites/240/2019/03/exp59_spacewalker_mcclain_hague_032219.jpg" alt="image" style="width:300px">
</body>
</html>
Using a Full URL File Path
Relative File Paths
The relative file fileName specifies to a file which is related to the location of current page.
<!DOCTYPE html> <html> <body> <h4>Using a Relative File Path</h4><br> <img src="../image/html.jpg" alt="Mountain" style="width:300px"> </body> </html>output:
Using a Relative File Path
Mountain image here📍Always remember to use proper URL, file name, image name, else it will not display on the webpage.
Try to use relative file paths, so that your code will be independent of URL.