❮❮ PREV NEXT ❯❯

HTML - File Path

While using Mac OS or Windows OS in your laptop, you have come across folders. Folders are the places where you store your files. And to access those files from command prompt, you need to provide the complete file path.

And the same concept applies for HTML file path as well. Even for webpages, we group the html files and keep them in folders. And to access those html files, file path is needed.

File Path in HTML

Let us take the example of www.learnerslesson.com. Where the file Java-Basic.htm is kept in a folder called JAVA.

And to access that file, you need to provide the full path in anchor tag(i.e. <a>).

Example :

<html>
	<body>
		<a href = "https://www.learnerslesson.com/JAVA/Java-Basic.htm">
			Click here to access Java file
		</a>	
	</body>
</html>

Output :

So, if you see the above output, on clicking, Click here to access Java file you are taken to the HTML file https://www.learnerslesson.com/JAVA/Java-Basic.htm.

And this is because of the file path you have specified in the anchor tag(i.e. <a>).

Types of File Paths in HTML

There are two types of file paths in HTML:

Absolute File Path

Relative File Path

Absolute File Path in HTML

An absolute file path in HTML is the full URL address for a file. Exactly the same one we have seen in the above example.

<a href = "https://www.learnerslesson.com/JAVA/Java-Basic.htm">

Let us also see how an absolute file path works for images.

Absolute File Path in HTML with Images

Example :

<html>
	<body>
		<img src = "https://www.learnerslesson.com/PYTHON/Images/Python-OOPS1.png"/>	
	</body>
</html>

Output :

So, in the above example we have used the complete path of the image, Python-OOPS1.png that is stored in the folder PYTHON -> Images.

Relative File Path in HTML

In case of relative file path, you don't have to write the entire file path. Rather you can mention the path of the file relative to the present web page.

Sounds tough?

Let us simplify with the below example.

Example :

<html>
	<body>
		<img src = "Images/myImage.png"/>	
	</body>
</html>

Output :

So, in the above code, we haven't mentioned the complete file path of the image. Rather specified the partial file path only.

<img src = "Images/myImage.png"/>

So, the question is, how are we getting the complete file path?

Well! This is relative file path in HTML. Just remember, every webpage has a folder in it. Similarly, our website www.learnerslesson.com also has a folder and files in it.

And the file, myImage.png is searched in the Images folder of the current webpage.

<img src = "Images/myImage.png"/>

❮❮ PREV NEXT ❯❯