HTML File Path

HTML file path is the address of a file in a website folder structure. It is used to link internal as well as external files through the file path.

File-path is used to link following external links.

-Images
-Web Pages
-Javascript file
-Style sheet file

An HTML file path is categorized into two parts namely absolute path and relative path.

Absolute File Path
Relative File Path

Note:The HTML file path is used to place external link address of the different resources like image, web page, CSS file, js file, etc.

Absolute File Path

An absolute file path is a full URL address of the path.

General Syntax

    <img src="https://picsum.photos/200/300" alt="image" width="300" height="300">

Source Code

      
        <img src="https://picsum.photos/200/300" alt="image" width="300" height="300">

Source Code: Output

Code Explanation

Note: It denotes the full path of the external resources.

Relative File Paths

The relative file path indicates the relative path to the current page. Lets us understand its concept because it is widely used during programming hence it is most useful.

<img src="flower.jpg"> It indicates that flower.jpg is located in the same folder as the current page.
<img src="images/flower.jpg"> It points that flower.jpg is located in the images folder that exists in the current folder.
<img src="/images/flower.jpg"> It points that flower.jpg is located in the images folder that exists at the root of the current web page.
<img src="../flower.jpg"> It indicates that flower.jpg is located in the folder that exists one level up from the current page.

Source Code

      
        <img src="../code-support/image/html-class.png" style="width:300px" alt="Relative File Path">

Code Explanation

Note:A Relative path indicates a file path that is relative to the current page.

Online Test / Quiz

Question set 1

Our Tutorials

Html Tutorial HTML

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4

Materialize CSS Tutorial MATERIALIZE CSS