HTML File Path


What is a path? In simple manner we can say a path is a way to the certain destination. For example there is a bridge over a river then bridge is path to walk over the river from one bank to another.
Similarly file path is a URL to access certain location where required file or files are stored. Like C:\webserver\htdocs\index.html.

HTML file path describes the location of a file folder structure of a website. HTML file path are used to create link with external file. We can use HTML file path to

1.Create Web pages links
2.Create Image links
3.Create Hyperlinks
4.Create link to Other Language Source like Style sheet, Java Script etc.

HTML file path Types


There are two different kinds of HTML file path

1.Absolute file path
2.Relative file path

Absolute file path


An absolute file path is a complete (absolute) URL that can be access from every location on your website. This kind of URL can be access through web and this is why it contains the http or https protocols.

Below is an example of absolute file path.

Example - 1


<!DOCTYPE html>
<html>
<head>
 <title>HTML5 - File Path</title>
 
</head>
<body>
 <h1>Example of a Absolute HTML File Path</h1>
 <img src = "https://www.progrramers.com/images/example.jpg" alt = "progrramers">
 <a href = "https://www.progrramers.com">Progrramers</a>
</body>
</html>


Absolute file path URL has a certain stating point and ending point.

Tips: Absolute URL is very much useful on low budget websites to avoid the bandwidth issue. Low budget webhosting can create several bandwidth issues. Using images from another free CDN services like Google Drive or Facebook is very much helpful to load images faster.

Below is another example of absolute file path but this is not recommended while you are developing a website.

Example - 2



 <img src = "c:\user\progrramers\web\img\example.jpg" alt = "progrramers">
 <a href = "c:\user\progrramers\web\pages\file_path.html">Progrramers</a>
  



In above example you can see the image linked with an absolute URL but this can create a deep problem. After using this URL your webpage is bound to the current URL. The links on the website is not relative to the local host or current public domain.

Relative URL


A relative file path points to file or files which is relative to current webpage.

Below is an example of relative URL

Example - 3

<img src = "img\example.jpgalt = "progrramers">
<a href = "file_path.html">Progrramers</a>





Relative file path has not certain starting point but it has a certain ending point. When using relative file paths, your web pages will not be bound to your current base URL. All links will work on your own computer or local host as well as on your current public domain and your future public domains.
Read below example very carefully it will help you to understand the best use of file path. In below example 'example.jpg' is an image file.


Path File destination
<img src = “example.jpg”> example.jpg file is located in the same folder where current HTML Document is located.
<img src = “img/example.jpg”> example.jpg file is located inside a folder named ‘img’. ‘img’ folder is located where current HTML Document is located.
<img src = “/img/example.jpg”> example.jpg file is located inside a folder named ‘img’. ‘img’ folder is located in the root of the web. For example on your computer c:\ is root directory and c:\img is the root path of the image file that can be accessed as “/img/example.jpg”.
<img src = “../img/example.jpg”> example.jpg is located in the folder one level up from the current folder


Try yourself on your text editor it'll help you to understand lot better.

HTML File Path




Related Topics

Related Topics

progrramers-logo

progrramers

Hello friends! Progrramers is a tutorial site of w3 programming. If you like this tutorial site please encourages us by sharing this site links with your friends and nears & dears who want to learn web development and give us like on our Facebook page. If have any question please type in to comment box or send us message on social media sites via below given social links. Thank you, have a nice learning.

Post A Comment:

0 comments: