HTML5 absolute and relative path settings

File Path Settings in HTML

Absolute file path setting in HTML

In HTML form by setting Absolute file path setting means full URL of a file to be given on the src attribute i.e full internet file path.

Example: <img src="http://www.harisystems.com/assets/img/logo.png">


Relative file path setting in HTML

Relative Path setting

In HTML form by setting Relative file path setting means relative to the current page to be given on the src attribute i.e relative file path. The following example will observe that the root folder of the .png file path setting.

Example: <img src="/img/logo.png" alt="harisystems">

File path setting in HTML More Examples

Path setting Examples

In the following example will observe that the current folder of the .png file path setting.

Example: <img src=” img/logo.png”>

In the following example will observe that the path pointing one level above to the current folder of the .png file path setting.

Example: <img src=”. ./img/logo.png”>

In the following example will observe that the path pointing two level above to the current folder of the .png file path setting.

Example: <img src=”. ./. ./img/logo.png”>

leran HTML5 tutorials for beginners
Note

For more details

With all these examples are very important to identify the path settings. All you will learn these by practice very well manner to understand. In suggestion in real time scenarios you need to understand and best usage relative paths of file path addressing. In this situation if you given as absolute path of your local drive and folder paths it may different on server folder drive structures where your application hosting that web site.


Harisystems is optimized for learning, testing and training. courses are designed to be simplified to improve reading and basic understanding for beginners to expert level. Tutorials and examples are constantly reviewed to avoid errors, however we cannot warrant full correctness of all content. if any found need to correct write us at info@harisystems.com. we Harisystems is not responsible for any with this tutorials, While using this site, you agree to have read and accepted our terms of use, cookie and privacy policy. Copyright 2007-2020 by Harisystems. All Rights Reserved.
Copyright © Harisystems 2020