Course Content
HTML Introduction
0/1
HTML Editors
0/1
HTML Basic Tags
0/1
HTML Elements
0/1
HTML Attributes
0/1
HTML Headings
0/1
HTML Paragraph
0/1
HTML Text Formatting
0/1
HTML Meta Tags
0/1
HTML Quotations
0/1
HTML Comments
0/1
HTML Images
0/1
HTML Background
0/1
HTML Colors
0/1
HTML Lists
0/1
HTML Tables
0/1
HTML Forms
0/1
HTML Spell Check
0/1
HTML Media
0/1
HTML Marquees
0/1
HTML CSS
0/1
HTML Links
0/1
HTML Block & Inline
0/1
HTML Classes
0/1
HTML Id
0/1
HTML I frames
0/1
HTML Java script
0/1
HTML File paths
0/1
HTML Layout
0/1
HTML Responsive
0/1
HTML Computer Code
0/1
HTML Tutorial
About Lesson

HTML File Path

In this tutorial, we will learn about working of directories in HTML, ways to locate files and other source files with the help of examples.


File Path

A file path describes the location of a file in a website folder. They are like an address of file for a web browser.
We can link any external resource to add our HTML file with the help of a file path such as a file, CSS file, JavaScript file, Images, Video, Audio, etc.
The src or href attribute requires an attribute to link any external source to an HTML file. To insert a file on a web page its source must be known.


Ways to locate File Path

Path Description
<img src = “picture.jpg”> The picture.jpg file is located in the same folder
<img src = “images/picture.jpg”> The picture.jpg file is located in the images folder in the currrent folder
<img src = “/images/picture.jpg”> The picture.jpg file is located in the images folder at the root of the current folder
<img src = “../picture.jpg”> The picture.jpg file is located in folder one level up from the current folder
<img src = “../../picture.jpg”> The picture.jpg file is located in folder two level up from the current folder

Files attached using File Path

We can attach many file format using file path in an HTML page :

  • Web pages
  • Images, audios and videos
  • Stylesheets
  • Javascript

Types of File Path

There are two types of File Paths :

  1. Absolute File Path
  2. Relative File Path

Absolute File Path

The absolute file path specifies the full address (URL) to access an internet file.

Example :

<!DOCTYPE html>
<html>
  <head>
    <title>Absolute File Path</title>
  </head>
  <body>
    <img src = "https://pixabay.com/photos/boat-lake-nature-water-
mountain-4899802/"
alt = "Image not found">
  </body>
</html>

Output

Image not found

Relative File Path

The relative file path specifies to a file that is relative to the location of the current page.

Example :

<!DOCTYPE html>
<html>
  <head>
    <title>Relative File Path</title>
  </head>
  <body>
    <img src = "../images/Sun.jpg" alt = "Image not found">
  </body>
</html>

Output

Image not found

 

In the above example, the image sun.jpg is located in the folder images which is one level up from the currrent folder.

Exercise Files
No Attachment Found
No Attachment Found
error: Content is protected !!