HTML File Paths

HTML File Path is used to describe the location of a file in a websites folder.

HTML File Path is very important section. Without proper understanding of HTML File Path it is very difficult to work with large applications. In this topic we will understand what is HTML File Path and, how many type are path and how we can write HTML File Path in best way. So let’s start.

Type of File Used in HTML

There are many types of files are used in HTML, below we are listing few of them which uses most frequently.

  • Web Pages: HTML Web Page File - .html
  • Style Sheets: CSS File - .css
  • JavaScript: JavaScript File - .js
  • Image: Image File - .jpg,.png,..
  • Jquery: Jquery File - .js

File paths are used on webpages to link external files like

Types of HTML File Path

File path means location of a file in project directory. In HTML File Path system we can define file path in 2 way:

  • Absolute HTML File Path
  • Relative HTML File Path

Absolute File Paths

An absolute file path is the full URL to an internet file including domain name, means eject location on server, see below example.

<!DOCTYPE html>
<html>
  <body>
    <img src="https://www.gdatamart.com/img/pic.jpg" />
  </body>
</html>

Relative File Paths

A relative file path points to a file relative to the current page. In this example, the file path points to a file in the img folder located at the root of the current web

<!DOCTYPE html>
<html>
  <body>
    <img src="../img/pic.jpg" />
  </body>
</html>

There are three condition for a file location

  1. File can be in same folder for which we are looking for
  2. File can be in upperside folder:
    • 1 level up,
    • 2 level up, ....
  3. file can be innerside folder:
    • 1 level in,
    • 2 level in, ....

Same Level

If both file are at same level means in same folder then we can directly pass the name of file.

UP Level

As we know the file for which we are looking for can be, 1,2,3.. level up diection, in such case we use

  • 1-level: path ../folder_name/file_name
  • 2-level: path ../../folder_name/file_name

Note: the ../ is used for one level up, if ther are 5 level up then we have to use ../ 5-times

Down Level

If file for which we are looking lies in 1,2,3.. step in down folder then the path will be

  • 1-level down: path folder_name/file_name
  • 2-level: path folder_name1/folder_name2/file_name

Attribute & Description

Attribute Attribute & Description
<img src="pic.jpg"> It specifies that pic.jpg is located in the same folder as the current page.
<img src="img/pic.jpg"> It specifies that pic.jpg is located in the img folder in the current folder.
<img src="/img/pic.jpg"> It specifies that pic.jpg is located in the img folder at the root of the current web.
<img src="../pic.jpg"> It specifies that pic.jpg is located in the folder one level up from the current folder.

As a Developer

As a developer always try to write relative file path, it is good practice to write it because just imagine a condition, for some reason if you are changing you domain the you do not need to warry about file path, otherwise you needs to change all.

Policy

GDATAMART.COM is optimized for learning & job information; The users try to improve your knowledge and practical experience through this site but we cannot warrant full correctness of all content... Learn More → | Sitemap →

© 2020 GDATAMART | All Rights Reserved