HTML File Paths – Solved Practice Questions

By /

Introduction

HTML file paths tell the browser where to find files such as images, videos, audio, CSS files, JavaScript files, and webpages. You can use relative paths, absolute paths, parent folders, and root-relative paths. In this chapter, you’ll practice using different file paths with simple solved examples.

Question 1

Problem Statement

Display an image stored in the same folder as the HTML file.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Same Folder File Path</title>
</head>
<body>

    <h1>My Image</h1>

    <img src="flower.jpg" alt="Flower">

</body>
</html>

Output

My Image

[Flower Image]

Step-by-Step Explanation

  • flower.jpg is located in the same folder as the HTML file.
  • Only the file name is required.
  • This is the simplest type of relative file path.

Question 2

Problem Statement

Display an image stored inside an images folder.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Image Folder</title>
</head>
<body>

    <h1>Nature</h1>

    <img src="images/tree.jpg" alt="Tree">

</body>
</html>

Output

Nature

[Tree Image]

Step-by-Step Explanation

  • images/ represents a folder.
  • tree.jpg is inside the images folder.
  • The browser first opens the folder, then loads the image.

Question 3

Problem Statement

Display an image stored one folder above the current HTML file.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Parent Folder</title>
</head>
<body>

    <h1>Company Logo</h1>

    <img src="../logo.png" alt="Logo">

</body>
</html>

Output

Company Logo

[Logo Image]

Step-by-Step Explanation

  • .. means go to the parent folder.
  • The browser moves one folder up.
  • Then it loads logo.png.

Question 4

Problem Statement

Display an image located inside the images folder of the parent directory.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Parent Folder Image</title>
</head>
<body>

    <h1>Sunset</h1>

    <img src="../images/sunset.jpg" alt="Sunset">

</body>
</html>

Output

Sunset

[Sunset Image]

Step-by-Step Explanation

  • .. moves to the parent folder.
  • images/ opens the images folder.
  • sunset.jpg is loaded from that folder.

Question 5

Problem Statement

Link another HTML page stored in the same folder.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>HTML Link</title>
</head>
<body>

    <h1>Home Page</h1>

    <a href="about.html">About Us</a>

</body>
</html>

Output

Home Page

About Us

Step-by-Step Explanation

  • href="about.html" points to another HTML file.
  • Both files are stored in the same folder.
  • Clicking the link opens about.html.

Question 6

Problem Statement

Link a CSS file stored inside the css folder.

HTML Code

<!DOCTYPE html>
<html>
<head>

    <title>CSS File Path</title>

    <link rel="stylesheet" href="css/style.css">

</head>
<body>

    <h1>Welcome</h1>

</body>
</html>

Output

Welcome
(Text is styled using style.css)

Step-by-Step Explanation

  • css/ is the folder containing CSS files.
  • style.css is the stylesheet.
  • The browser loads the CSS file before displaying the webpage.

Question 7

Problem Statement

Connect a JavaScript file stored inside the js folder.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript File Path</title>
</head>
<body>

    <h1>Learning HTML</h1>

    <script src="js/script.js"></script>

</body>
</html>

Output

Learning HTML
(JavaScript file loaded successfully)

Step-by-Step Explanation

  • js/ is the JavaScript folder.
  • script.js is loaded using the src attribute.
  • The browser executes the JavaScript after loading it.

Question 8

Problem Statement

Display an image using an absolute URL.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Absolute File Path</title>
</head>
<body>

    <h1>Online Image</h1>

    <img
        src="https://example.com/images/flower.jpg"
        alt="Flower">

</body>
</html>

Output

Online Image

[Flower Image]

Step-by-Step Explanation

  • The complete web address is called an absolute URL.
  • The browser downloads the image directly from the website.
  • The image will only appear if the URL is valid and accessible.

Question 9

Problem Statement

Open a webpage using a root-relative file path.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Root Relative Path</title>
</head>
<body>

    <h1>Website Menu</h1>

    <a href="/courses/html.html">HTML Course</a>

</body>
</html>

Output

Website Menu

HTML Course

Step-by-Step Explanation

  • / represents the website’s root folder.
  • The browser starts searching from the root directory.
  • It then opens the courses folder and loads html.html.

Question 10

Problem Statement

Create a webpage that loads an image, CSS file, JavaScript file, and another HTML page using file paths.

HTML Code

<!DOCTYPE html>
<html>
<head>

    <title>HTML File Paths Example</title>

    <link rel="stylesheet" href="css/style.css">

</head>
<body>

    <h1>My Website</h1>

    <img
        src="images/logo.png"
        alt="Website Logo">

    <br><br>

    <a href="about.html">About Us</a>

    <script src="js/script.js"></script>

</body>
</html>

Output

My Website

[Website Logo]

About Us

(CSS and JavaScript loaded successfully)

Step-by-Step Explanation

  • css/style.css loads the stylesheet.
  • images/logo.png loads the website logo.
  • about.html opens another webpage.
  • js/script.js loads the JavaScript file.
  • All file paths are relative paths because they are based on the current HTML file’s location.

Key Takeaways

  • A file path tells the browser where a file is located.
  • Relative paths are based on the current HTML file.
  • Absolute URLs contain the complete web address.
  • ../ moves to the parent folder.
  • / starts from the website’s root folder.
  • CSS files are linked using the <link> element.
  • JavaScript files are added using the <script> element.
  • Images are displayed using the <img> element.
  • HTML pages are connected using the <a> element.
  • Organizing files into folders keeps projects clean and easy to manage.

Frequently Asked Questions (FAQs)

1. What is a file path in HTML?

A file path tells the browser where to find a file such as an image, CSS file, JavaScript file, or another webpage.

2. What is a relative file path?

A relative file path is based on the location of the current HTML file.

3. What does ../ mean?

../ moves one folder up to the parent directory.

4. What is an absolute URL?

An absolute URL is the complete web address of a file, such as:

https://example.com/images/photo.jpg

5. What is a root-relative path?

A root-relative path starts with / and begins from the website’s root directory.

6. How do you link a CSS file?

Use the <link> element with the href attribute.

7. How do you add a JavaScript file?

Use the <script> element with the src attribute.

8. Can images be loaded from another website?

Yes. You can use an absolute URL if you have permission to use the image and the URL is publicly accessible.

9. Which type of file path is most commonly used?

Relative file paths are commonly used because they make projects easier to move between folders and servers.

10. Why should I organize files into folders?

Using folders for images, CSS, JavaScript, and HTML files makes projects easier to maintain and understand.

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Related Posts

Scroll to Top