Folders & Links
The Architect of Digital Bridges
With HTML in your hands, you become the architect of digital bridges. The <a> element and the href attribute are your tools to create magical connections. The <a> element marks the linked text, while href=” “ shows where the journey will take you — be it to a familiar place or a mystical portal leading straight into the depths of another website.
Relative paths are like clues on a treasure map, guiding you from your current position to a nearby treasure. Absolute paths, on the other hand, are like precise teleportations, taking you straight to the destination. Choose wisely, for the right path determines where your journey leads. And no one wants to end up in the digital void, right?
Secret Paths
To Your Internal and External Resources
Relative Paths
Guides for Nearby Adventures
Imagine you’re a slightly lost wanderer, trekking through an enchanted forest in search of a secret spellbook, the Grimoire. A wise, slightly grumpy local decides to make an exception this time and gives you a precise instruction: “Straight ahead, left past the ancient oak, then follow the narrow path to the crumbling house. There, in the spellbook shop, you’ll find the Grimoire you seek.” This kind of guidance is like a relative path in HTML—it gives you step-by-step directions for the next move without revealing the entire journey.
<a href="grimoire.html">Magic Book</a>
Absolute Paths
Coordinates in the Digital World
An absolute path is like an exact waypoint on a map. It doesn’t just point you in the right direction—it leads you straight to the destination, like a lighthouse tirelessly guiding the way, no matter where you’re wandering. No guesswork, no detours, just a crystal-clear, direct route.
<a href="https://www.w3schools.com/">W3Schools</a>
An Example
It’s All About Perspective
Starting Point: index.html
Linking to: about.html –> href=”about.html”
If the files to be linked are on the same level, it’s simple: just provide the filename in the attribute value.
Starting Point: index.html
Linking to: logo.png –> href=”img/logo.png”
If the file to be linked is inside a folder on the same level, include the folder name in the path. Use a slash ( / ) to open the folder, followed by the filename.
Starting Point: style.css
Linking to: logo.png –> href=”../img/logo.png”
If the file to be linked is in a folder one level higher, start with ../ to move out of your current folder, then into the target folder, and specify the file.
In this lesson, you have learned…
- Using relative paths by understanding that their location depends on where the file is stored.
- Applying absolute paths deliberately to specify fixed addresses for files or websites clearly.
- Linking files on the same level without needing to specify additional directories.
- Correctly referencing subfolders in paths to access files stored within them.
- Using ../ to navigate up one level to reach files outside your current folder.
The Paths of Magic
Your Task
Eldria needs your help to connect her magical potions and information seamlessly. Use your knowledge of relative and absolute paths to ensure all parts of her website are correctly linked together.
