HTML File Path
In this tutorial, we will learn about working of directories in HTML, ways to locate files and other source files with the help of examples.
A file path describes the location of a file in a website folder. They are like an
address of file for a web browser.
The src or href attribute requires an attribute to link any external source to an HTML file. To insert a file on a web page its source must be known.
Ways to locate File Path
|<img src = "picture.jpg">||The picture.jpg file is located in the same folder|
|<img src = "images/picture.jpg">||The picture.jpg file is located in the images folder in the currrent folder|
|<img src = "/images/picture.jpg">||The picture.jpg file is located in the images folder at the root of the current folder|
|<img src = "../picture.jpg">||The picture.jpg file is located in folder one level up from the current folder|
|<img src = "../../picture.jpg">||The picture.jpg file is located in folder two level up from the current folder|
Files attached using File Path
We can attach many file format using file path in an HTML page :
- Web pages
- Images, audios and videos
Types of File Path
There are two types of File Paths :
- Absolute File Path
- Relative File Path
Absolute File Path
The absolute file path specifies the full address (URL) to access an internet file.
<title>Absolute File Path</title>
<img src = "https://pixabay.com/photos/boat-lake-nature-water-mountain-4899802/" alt = "Image not found">
Relative File Path
The relative file path specifies to a file that is relative to the location of the current page.
<title>Relative File Path</title>
<img src = "../images/Sun.jpg" alt = "Image not found">
In the above example, the image sun.jpg is located in the folder images which is one level up from the currrent folder.
We hope that this tutorial helped you develop better understanding of the concept of File-path in HTML.
Keep Learning : )
In the next tutorial, you'll learn about HTML