LESSON 10

File Paths

Learning objective: Reference files correctly using relative and absolute paths.

Understand

Broken images and links are usually just wrong paths.

A relative path points to a file based on the current file's location: images/cat.png (a subfolder) or ../style.css (up one folder). An absolute path is a full address starting with https://. Relative paths keep your project portable.

Analogy: A relative path is like giving directions from where you stand; an absolute path is the full postal address.

See It in Action

Different ways to point at files:

<img src="images/cat.png">      <!-- into a subfolder -->
<img src="../logo.png">          <!-- up one folder -->
<img src="https://site.com/a.png"> <!-- absolute -->
How it works: images/cat.png looks inside a subfolder, ../ moves up a level, and the https:// version is a complete address to another site.

Try It Yourself

  1. Put an image inside an images folder and link it with a relative path.
  2. Move a file up one level and use ../ to reach it.
  3. Fix any broken image by correcting its path.

Quick Quiz

What does ../ mean in a file path?

Challenge

Organize a project with an images folder and link an image using a relative path.

Success condition: Your image loads correctly using a relative path into a subfolder.