Tutorialspoint.dev

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=”http://contribute.geeksforgeeks.org/wp-content/uploads/geek.png” alt=”My Image”>

Example:



<!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.

<!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:
relative file path

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:

<!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:
relative file path

Example 3: It shows the path of the file present in a folder which is located at the root of the the current sub directories.

<!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 the current subdirectories</h2>
        <img src="/images/picture.jpg" alt="My Image" style="width:400px">
    </body>
</html>                    

Output:
relative file path



This article is attributed to GeeksforGeeks.org

leave a comment

code

0 Comments

load comments

Subscribe to Our Newsletter