Links

Gateways to New Worlds

Links are the silent architects of the internet — unassuming, yet indispensable. A simple <a> element may seem harmless, but it’s the digital gateway that propels us from one page to another, like wandering through an endless library without ever having to turn a page.

But links can do more than just connect websites. Without links, the internet would be nothing more than a scattered collection of lonely pages, lost in the vast digital void. But with them, it becomes a vast, interconnected web of knowledge, stories, and possibilities — and you hold the key.

Let’s Keep Going

Internal Link
External Link
Email Link

Phone Link
Anchor Link
The Download Link

Links in HTML

From Websites to Emails — How to Connect Content Cleverly and Interactively!

Internal Link

Secrets of the Inner Paths

An internal link is like a mysterious path winding through your own kingdom. It guides you from one page to another without ever leaving the realm. Using a relative path in HTML, you simply point to where it should lead, without revealing the entire URL. For example, you can link to the file about.html at the same level, gracefully escorting your visitor through your domain.

<a href="about.html">About us</a>

External Link

Guides to Distant Worlds

An external link is like a portal to uncharted realms. Using an absolute path in HTML, you open the gate to an unfamiliar resource, and with the magical spell target=”_blank”, this portal opens in a new window or tab. This way, your own world remains undisturbed while your visitor embarks on their journey.

HTML

<a href="https://www.eldoria.com" target="_blank">Eldorias Home</a>

Email Link

Messages on Enchanted Paths

An email link is like a magical messenger who knows the direct route to your inbox. With the mailto: spell inside the <a> tag, the user’s email client opens instantly, ready to send a message your way. One click, and the connection is forged—communication doesn’t get any simpler or more magical than this!

<a href="mailto:mail@text-magic.com">Contact us</a>

Phone Link

The Magic of a Call

A phone link is like a talking mirror that instantly connects you to the other side. With the tel: spell in the <a> tag, the device’s phone app opens seamlessly. One click, and the number is dialed. Communication on mobile devices couldn’t be more effortless—or magical!

<a href="tel:12345678">Phone: 123 456 78</a>

Anchor Link

A Leap Through Magical Portals

Anchor links are like hidden gateways that teleport you instantly to a specific spot on your page. Using the <a> element with an href that starts with #, you can guide the reader straight to any desired section. Just specify the ID of the target area, and voilà—the magical leap is complete. These clever waypoints make navigation a breeze, saving you from endless scrolling—like flipping through a spellbook with a touch of enchantment!

<a href="#ankername">To section...</a>

The Download Link

Effortlessly View and Download Media

The <a> tag isn’t just for linking to images, videos, or documents—it can also offer them directly for download. The download attribute is the secret key. It lets users download files with a single click, and you can even set the filename they’ll receive. A touch of magic for hassle-free sharing!

<a href="media/test.pdf" download>Download PDF</a>

In this lesson, you have learned…

How to use internal links (<a href="about.html">) to guide users specifically within your website.
Why external links (<a href="https://www.flame-greenwood.org" target="_blank">) are important to refer to other websites without leaving your own page.
How to use email links (mailto:) to enable direct communication with a single click.
When to use phone links (tel:) to start calls directly on mobile devices.
How to use anchor links (<a href="#anchorname">) to jump to specific sections within a page.
Why download links (download) are useful for making files directly available for download.

Here you can see the code you’ve practiced – but feel free to experiment! Try out changes, test new ideas, and see what happens. This is your space for tinkering!

The Paths of Connection

Hidden deep in the secret corners of the world, where magic and logic endlessly spar, lie mysterious paths known as links. These unassuming magical portals guide you to distant places, hidden treasures, or mystical resources. To harness their power, you must master the art of crafting them with HTML – a task that seems so simple, it’s bound to come with a catch. If you succeed in mastering these connections, you’ll unlock doors to unknown realms and, perhaps, some surprisingly helpful cat videos.

Your Task: Create Links

Internal Link:
- Use an internal link (href="about.html") in the navigation to link to another HTML page within the same website.
External Link with target=”_blank”:
- Set an external link (href="https://www.example.com") with the target=”_blank” attribute so it opens in a new tab or window.
Email and Telephone Links:
- Include an email link (mailto:info@greenwoodhollow.com) and a telephone link (tel:+49123456789) in the navigation.
Anchor Link:
- Create an anchor link (href="#anchor") in the navigation to jump to a specific section on the same page.
- Add extra text in the last paragraph to make it easier to see in the browser.
Download Link:
- Add a download link (href="img/elixir-of-light.pdf" download) to allow users to download a file.

Open Editor in a New Tab

HTML

<h1>Welcome to Greenwood Hollow</h1>

<p>Internal link to <a href="about.html">About</a></p>

<p>External link to an external page, e.g.: 
    <a href="https://www.flame-greenwood.org" target="_blank">Fantasy Wiki</a>.</p>

<p>Send an email to the Guardian of the Forest: 
    <a href="mailto:seran@flame-greenwood.org">seran@flame-greenwood.org</a></p>

<p>Call the Guardian of the Forest: 
    <a href="tel:+49123456789">+49 123 456 789</a></p>

<p>Jump to the description of the 
    <a href="#anchor">magical paths</a></p>

<p>Download the map of Greenwood Hollow: 
    <a href="assets/img/elixir-of-light.pdf" download>Map</a></p>

<section id="anchor">
    <h2>Description of the Magical Paths</h2>
    <p>The forest paths are diverse and lead to hidden places, accessible only through the right connections. If you add more text here, you’ll notice the effect.</p>
</section>

Let’s Keep Going