HTML File Paths

Used to reference and link various resources such as other HTML files, CSS stylesheets, JavaScript files, images, and other assets within an HTML document.
File paths provide the location or address of the resource on the web server or the local file system, allowing the browser to locate and display the content correctly.
There are two main types of file paths used in HTML:

  1. Relative File Paths
  2. Absolute File Paths

Relative File Paths

Relative file paths specify the location of a resource relative to the current location of the HTML file.
They are shorter and more convenient to use, especially when organizing files within a directory structure.
Relative file paths do not include the protocol (e.g., "http://") or the domain (e.g., "bmreducation.com").

Example
<!DOCTYPE html>
<html>
    <head>
        <title>Referring a file in the same directory Example</title>
    </head>
    <body>
        <link rel="stylesheet" href="style.css" />
        <script src="script.js"></script>
        <img src="image.jpg" alt="Image" />
    </body>
</html>

Example
<!DOCTYPE html>
<html>
    <head>
        <title>Referring a file in the subdirectory Example</title>
    </head>
    <body>
        <link rel="stylesheet" href="css/style.css" />
        <script src="js/script.js"></script>
        <img src="images/image.jpg" alt="Image" />
    </body>
</html>

Example
<!DOCTYPE html>
<html>
    <head>
        <title>Referring a file in the parent directory Example</title>
    </head>
    <body>
        <link rel="stylesheet" href="css/style.css" />
        <script src="js/script.js"></script>
        <img src="images/image.jpg" alt="Image" />
    </body>
</html>

Absolute File Paths

Absolute file paths provide the full URL or file path starting from the web server's root directory or the local file system's root directory.
They include the protocol and domain (for web resources) or the drive letter (for local resources).


Example
<!DOCTYPE html>
<html>
    <head>
        <title>Referring Web URL'S Example</title>
    </head>
    <body>
        <link rel="stylesheet" href="http://www.bmreducation.com/styles/css/bmr.css" />
        <script src="http://www.bmreducation.com/styles/js/mode.js"></script>
        <img src="http://www.bmreducation.com/styles/images/logo.jpg" alt="Image" />
    </body>
</html>

Example
<!DOCTYPE html>
<html>
<head>
  <title>Referring Local Paths Example</title>
</head>
<body>
<link rel="stylesheet" href="file:///C:/projects/website/css/style.css">
<script src="file:///C:/projects/website/js/script.js"></script>
<img src="file:///C:/projects/website/images/image.jpg" alt="Image">
</body>
</html>

Quick Recap - Topics Covered

File Paths
Relative File Paths
Absolute File Paths

Practice With Examples in Compilers

The Concepts and codes you leart practice in Compilers till you are confident of doing on your own. A Various methods of examples, concepts, codes availble in our websites. Don't know where to start Down some code examples are given for this page topic use the code and compile or Try on own Now


Example 1
Example 1 Example 2 Example 3 Example 4 Example 5


Quiz


FEEDBACK