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.
File Path
A file path describes the location of a file in a website folder. They are like an address of file for a web browser.
We can link any external resource to add our HTML file with the help of a file path such as a file, CSS file, JavaScript file, Images, Video, Audio, etc.
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
| Path | Description |
|---|---|
| <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
- Stylesheets
- Javascript
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.
Example :
<!DOCTYPE html>
<html>
<head>
<title>Absolute File Path</title>
</head>
<body>
<img src = "https://pixabay.com/photos/boat-lake-nature-water-mountain-4899802/" alt = "Image not found">
</body>
</html>Output
Relative File Path
The relative file path specifies to a file that is relative to the location of the current page.
Example :
<!DOCTYPE html>
<html>
<head>
<title>Relative File Path</title>
</head>
<body>
<img src = "../images/Sun.jpg" alt = "Image not found">
</body>
</html>Output
In the above example, the image sun.jpg is located in the folder images which is one level up from the currrent folder.
Next Tutorial
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 Layout.