/    /  HTML File Path

HTML File Path

 

An HTML file path is used to provide the location of a file in a website folder. File paths are like the address of the file for a web browser. We can link any external resource to add in your HTML file or document with the help of file paths such as images, files, CSS files, JS files, videos, etc.

 

Different types to specify file paths:

 

  • <img src=”picture.jpg”> It specifies that picture.jpg or .png is located in the same folder as the current page.
  • <img src=”images/picture.jpg”> It specifies that picture.jpg or .png is located in the images folder in the current folder.
  • <img src=”/images/picture.jpg”> It specifies that picture.jpg or .png is located in the images folder at the root of the current web.
  • <img src=”../picture.jpg”> It specifies that picture.jpg or .png is located in the folder one level up from the current folder.

 

HTML File Paths:

 

File paths are used on webpages to link external files:

  1. Web pages
  2. Images
  3. Style sheets
  4. JavaScript

There are two types of File Paths:

  1. Absolute File Paths
  2. 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.i2tutorials.com/images/nature-1.jpg" alt="image">
</body>
</html>

 

OUTPUT:

 

HTML File Path

 

Relative File Paths:

 

Relative file path specifies a file that is related to the location of the current page.

 

Example:

 

<!DOCTYPE html>
<html>
<body>
<h2>Using a Relative File Path</h2>
<img src="/images/nature-2.jpg" alt="Nature">
</body>
</html>

 

OUTPUT:

 

HTML File Path

 

Example:

 

Image folder located in the folder one level above the current folder.

 

<!DOCTYPE html>
<html>
<body>
<h2>Using a Relative File Path</h2>
<img src="../images/nature-4.jpg" alt="Nature">
</body>
</html>

 

 OUTPUT:

 

HTML File Path

 

Important Points for File path:

 

  • Always you can remember to use proper URL (path), file name, image name, else it will not display on the webpage.
  • YOu can use relative file paths so that your code will be independent of the URL.