Horje

Tips (Total 4)

1. What is HTML File Paths
2. What does mean HTML File Paths
3. How to create HTML Absolute File Paths
4. How to relative File Paths

# Tips-1) What is HTML File Paths

A file path describes the location of a file in a web site's folder structure.

File Path Examples

Path Description
<img src="picture.jpg"> The "picture.jpg" file is located in the same folder as the current page
<img src="images/picture.jpg"> The "picture.jpg" file is located in the images folder in the current folder
<img src="/images/picture.jpg"> The "picture.jpg" file is located in the images folder at the root of the current web
<img src="../picture.jpg"> The "picture.jpg" file is located in the folder one level up from the current folder

Example of HTML File Paths

 <img src="https://itupto.com/avatar.png" alt="Profile">

# Tips-2) What does mean HTML File Paths

A file path describes the location of a file in a web site's folder structure.

File paths are used when linking to external files, like:

Example of HTML Paths

<img src="https://itupto.com/avatar.png" alt="Profile">

# Tips-3) How to create HTML Absolute File Paths

An absolute file path is the full URL to a file:

Example of HTML Absolute File Paths

Using a Full URL File Path
index.html
Example: HTML 
<!DOCTYPE html>
<html>
<body>

<h2>Using a Full URL File Path</h2>
<img src="https://itupto.com/avatar.png" alt="Profile" style="width:300px">

</body>
</html>

Output should be:

Example of HTML Absolute File Paths

# Tips-4) How to relative File Paths

A relative file path points to a file relative to the current page.

 

Full Example of relative File Paths

In the following example, the file path points to a file in the images folder located at the root of the current web:
index.html
Example: HTML 
<!DOCTYPE html>
<html>
<body>

<h2>Using a Relative File Path</h2>
<img src="https://itupto.com/avatar.png" alt="Profile" style="width:300px">

</body>
</html>

Output should be:

Full Example of relative File Paths

In the following example, the file path points to a file in the images folder located in the current folder:
 <img src="/images/picture.jpg" alt="Mountain">

In the following example, the file path points to a file in the images folder located in the folder one level up from the current folder:
 <img src="../images/picture.jpg" alt="Mountain">


 

Horje