Lesson Outcomes

After completing this lesson, learners will be able to:

• Explain the concept of files and folders in web development.
• Describe how files are organised in a project.
• Define file paths.
• Differentiate between absolute and relative file paths.
• Apply correct file paths in HTML.

Overview

In web development, files and folders are used to organise website content such as HTML pages, images, and other resources.

Understanding how files are structured and how to reference them correctly is important because:

• Web pages need to link to other files
• Images and media must be displayed correctly
• Projects must be organised for easy management

File paths are used in HTML to locate and connect these files.

1. Files and Folders in Web Development

A website is made up of different files stored in folders.

1.1 Files

Files contain content or code.

Examples include:

• HTML files (.html)
• CSS files (.css)
• JavaScript files (.js)
• Image files (.jpg, .png)

1.2 Folders

Folders are used to organise files.

They help developers:

• Keep projects structured
• Group related files
• Manage large projects easily

Example folder structure:

project/
 ├── index.html
 ├── images/
 │    └── logo.png
 └── css/
      └── style.css

2. What is a File Path?

A file path is the location of a file in a folder structure.

It tells the browser where to find a file.

File paths are used in HTML for:

• Images
• Links
• Stylesheets
• Scripts

3. Types of File Paths

There are two main types of file paths.

3.1 Absolute File Path

An absolute path gives the full address of a file.

Example:

<img src="https://example.com/images/logo.png">

Characteristics:

• Includes the full URL
• Used for external resources
• Works from any location

3.2 Relative File Path

A relative path gives the location of a file based on the current file.

Example:

<img src="images/logo.png">

Characteristics:

• Based on current folder
• Shorter and easier to manage
• Commonly used in projects

4. Navigating File Paths

Relative paths use symbols to move between folders.

Common Path Symbols

• ./ → current folder
• ../ → parent folder

Examples

1. File in same folder:

<img src="image.jpg">

2. File in a subfolder:

<img src="images/photo.jpg">

3. File in a parent folder:

<img src="../image.jpg">

5. Importance of File Paths

File paths are important because they:

• Ensure files are correctly linked
• Allow images and resources to load
• Help organise project structure
• Prevent broken links

Incorrect file paths can cause:

• Missing images
• Broken links
• Errors in web pages

6. Best Practices for File Organisation

To manage files effectively:

• Use clear and meaningful folder names
• Keep files organised in folders
• Use consistent naming conventions
• Avoid spaces in file names
• Use relative paths for internal files

Good organisation improves development efficiency.

Key Notes

• Files store content such as HTML, CSS, and images.
• Folders organise files into structured groups.
• A file path shows the location of a file.
• Absolute paths use full URLs.
• Relative paths are based on the current file location.
• Symbols like ./ and ../ help navigate folders.
• Correct file paths are essential for linking resources.
• Good file organisation improves project management.