File Path system

Step 1: The First Principle (The Fundamental Truth)

The most fundamental truth is this: A website is not one single file.

It's a collection of different files (HTML, CSS, JavaScript, images, videos, fonts) that all need to work together. These files are organized into folders, just like documents on your computer.

Step 2: The Core Problem

Now we have a core problem: If your index.html file needs to display an image named logo.png, how does the HTML file tell the browser where to find logo.png?

You can't just say src="logo.png" and expect it to work every time. What if the logo is in an images folder? What if it's on a completely different website?

The browser needs an exact, unambiguous address to locate the file. A file path is that address.

A) Relative File Paths (The Most Important for Your Projects)

A relative file path gives directions to a file starting from the location of the file you are currently in. You will use this 99% of the time for linking your own files together (images, CSS, other HTML pages).

my-website/
├── index.html
├── about.html
│
├── images/
│   ├── logo.png
│   └── hero.jpg
│
└── pages/
    ├── contact.html
    └── terms.html

Here are the different scenarios: