1. HTML-FILE-PATH
  2. HTML FILE PATH
Learn And Understand File Path In HTML

HTML File Path

Basically, the 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.

  1. -Images
  2. -Web Pages
  3. -Javascript file
  4. -Style sheet file

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

  1. Absolute File Path
  2. 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

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

Source Code : Output

image

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.

Example

General Syntax

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

Source Code

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

Source Code : Output

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
Tutorials HTML CSS BOOTSTRAP 5 BOOTSTRAP 4
Performance Evalution HTML Quiz/Test CSS Quiz/Test Bootstrap 4 Quiz/Test Bootstrap 5 Quiz/Test
CSS Frameworks Materialize CSS Pure CSS UiKit CSS Bulma CSS
2021-22 © shapeyourpath.com