Scribd
Upload
2 views2 pages

AbsoluteVs RelativePaths

The document explains the differences between absolute and relative file paths. Absolute paths provide the full path to a file, making them suitable for linking online resources, while relative paths link files based on their location relative to the current web page, ensuring links remain valid if files are moved together. It emphasizes avoiding absolute local paths due to their restriction to specific computers, recommending relative paths for better portability.

Uploaded by

yahyairshaid6
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2 views2 pages

AbsoluteVs RelativePaths

The document explains the differences between absolute and relative file paths. Absolute paths provide the full path to a file, making them suitable for linking online resources, while relative paths link files based on their location relative to the current web page, ensuring links remain valid if files are moved together. It emphasizes avoiding absolute local paths due to their restriction to specific computers, recommending relative paths for better portability.

Uploaded by

yahyairshaid6
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

Absolute and relative files

1. Absolute file path

• An absolute file path contains the full path or URL to the file, starting from the root directory or
web server.

• When to use: best for linking external resources (e.g., online images or files stored on specific
places on the web).

• How it works: no matter where the web page is located, the link works as long as the online
resource stays available.

• Examples:

1. URL-based absolute path (online resource):

<img src="https://www.mywebsite.com/images/MyLogo.png" alt="Logo">

➔ This will work anywhere, because it links directly to the image on the
web.

2. Local absolute path (stored on your computer):

<img src="C:/Users/Bayan/Documents/website/images/MyLogo.png" alt="Logo">

➔ Problem: this only works on your computer. If you move the file or
open it from another machine, the link will break.

2. Relative File Path

• A relative file path refers to a file relative to the location of the current web page.

• When to use: ideal when the files (e.g., images, CSS) are saved within the same folder structure
as the web page.

• How it works: if the files and the webpage are moved together, the links remain valid because
the relationship between files doesn’t change.

Example of relative file path:

1. Folder Structure:

/Website folder (contains the webpage index.html and images folder)

└──> index.html (homepage)

└──> images/

└──>MyLogo.png

2. HTML code in index.html

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

Bayan H. Takruri
3. How this works:

o This path tells the browser to look for the logo.png file in the images folder, which is in
the same directory as index.html.

o If you move the entire "website" folder (e.g., to a USB or another computer), the image
link will still work.

Why avoid absolute local paths for hyperlinks to local files?

• Absolute local paths (e.g., C:/Users/) are restricted to a specific computer or directory.

o So, if the files are moved or opened from a different machine, the paths won't work.

• Relative paths are better in this situation because they allow your project to be moved without
breaking the links.

Summary

Type Use case Example Works after


moving files?

Absolute Linking to online <img src="https://mywebsite.com/MyLogo.png"> Yes


URL resources

Absolute Referencing a file <img src="C:/Users/bayan/website/images/MyLogo.png"> No (Breaks on


Local on your computer another
computer)

Relative Path Linking files in the <img src="images/Mylogo.png"> Yes (if folder
same folder structure stays
structure the same)

You can also check this link to get the idea

https://www.youtube.com/watch?v=hxto_sRZsBg&ab_channel=kootkot

Bayan H. Takruri

You might also like