Links
Tore zu neuen Welten
Links sind die heimlichen Architekten des Internets – unscheinbar, aber unverzichtbar. Ein einfaches <a>-Element mag harmlos wirken, doch es ist das digitale Tor, das uns von einer Seite zur nächsten schleudert, als würden wir durch eine endlose Bibliothek reisen, ohne jemals ein Buch umblättern zu müssen.
Doch Links können mehr als nur Webseiten verbinden. Ohne Links wäre das Internet nicht mehr als ein Haufen isolierter Seiten, verloren in der digitalen Unendlichkeit. Doch mit ihnen wird es zu einem riesigen, miteinander verflochtenen Netz aus Wissen, Geschichten und Möglichkeiten – und du hast den Schlüssel in der Hand.
Links im HTML
Von Webseiten bis E-Mails – so verbindest du Inhalte clever und interaktiv!
Interner Link
Geheimnisse der inneren Pfade
Ein interner Link ist wie ein geheimnisvoller Pfad durch dein eigenes Königreich. Er führt dich von einer Seite zur nächsten, ohne das Reich zu verlassen. Mit einem relativen Pfad in HTML gibst du einfach an, wohin es gehen soll, ohne die komplette URL auszuplaudern. So verlinkst du etwa die Datei about.html auf derselben Ebene und führst den Besucher geschmeidig durch dein Reich.
<a href="about.html">About us</a>
Externer Link
Wegweiser zu fernen Welten
Ein externer Link ist wie ein Portal zu unbekannten Welten. Mit einem absoluten Pfad in HTML öffnest du das Tor zu einer fremden Ressource und mit dem target=“_blank“-Zauber öffnet sich dieses Tor in einem neuen Fenster oder Tab. So bleibt deine eigene Welt unberührt, während der Besucher auf Reisen geht.
<a href="https://www.eldoria.com" target="_blank">Eldorias Home</a>
E-Mail Link
Nachrichten auf magischen Wegen
Ein E-Mail-Link ist wie ein magischer Bote, der den direkten Weg zu deinem Postfach kennt. Mit dem mailto:-Zauber im <a>-Tag öffnet sich der E-Mail-Client des Nutzers im Handumdrehen, bereit, die Nachricht an dich zu senden. Ein Klick, und die Verbindung ist hergestellt, denn einfacher kann Kommunikation nicht sein!
<a href="mailto:mail@whiterabbit.com">Contact us</a>
Telefon Link
Das Gespräch per Magie
Ein Telefon-Link ist wie ein sprechender Spiegel, der den direkten Kontakt herstellt. Mit dem tel:-Zauber im <a>-Tag öffnet sich die Telefon-App des Geräts. Ein Klick, und die Nummer ist gewählt. So einfach geht Kommunikation auf mobilen Geräten.
<a href="tel:12345678">Tel.: 123 456 78</a>
Anker Link
Ein Sprung durch magische Tore
Anker-Links sind wie verborgene Portale, die dich blitzschnell zu einem bestimmten Punkt auf deiner Seite teleportieren. Mit dem <a>-Element und einem href, das mit einem # beginnt, kannst du den Leser direkt zu jedem gewünschten Abschnitt deiner Seite schicken. Einfach die ID des Zielabschnitts angeben, und schon ist der magische Sprung perfekt. Diese cleveren Wegweiser machen das Navigieren kinderleicht und ersparen mühsames Scrollen – als ob du durch ein Zauberbuch blättern würdest!
<a href="#ankername">Zum Abschnitt</a>
Der Download-Link
Bequem Medien anzeigen und herunterladen
Mit dem <a>-Tag kannst du nicht nur Links zu Bildern, Videos oder Dokumenten bereitstellen, sondern sie auch direkt zum Download anbieten. Das download-Attribut ist der geheime Schlüssel. Es ermöglicht dem Nutzer, Dateien mit einem Klick herunterzuladen, während du sogar den Dateinamen festlegen kannst.
<a href="media/test.pdf" download>Download PDF</a>In dieser Lektion hast du gelernt…
- Wie du interne Links (
<a href="about.html">) nutzt, um Nutzer innerhalb deiner Webseite gezielt zu leiten. - Warum externe Links (
<a href="https://www.flame-greenwood.org" target="_blank">) wichtig sind, um auf andere Webseiten zu verweisen, ohne die eigene Seite zu verlassen. - Auf welche Weise du E-Mail-Links (
mailto:) einsetzt, um direkte Kommunikation über einen Klick zu ermöglichen. - Wozu du Telefon-Links (
tel:) verwendest, um auf mobilen Geräten Anrufe zu starten. - Wie du Anker-Links (
<a href="#ankername">) einsetzt, um innerhalb einer Seite an bestimmte Abschnitte zu springen. - Warum Download-Links (
download) nützlich sind, um Dateien direkt zum Herunterladen bereitzustellen.
Hier siehst du den Code, den du gelernt hast – aber fühl dich frei, zu experimentieren! Probiere Änderungen aus, teste neue Ideen und sieh, was passiert. Das ist dein Raum zum Tüfteln!
Die Pfade der Verbindungen
Tief in den verborgenen Winkeln der Welt, wo Magie und Logik sich einen ständigen Schlagabtausch liefern, existieren geheime Pfade, die als Links bekannt sind. Diese unscheinbaren Zauberportale führen dich zu fremden Orten, verborgenen Schätzen oder mystischen Ressourcen. Um ihre Macht zu entfesseln, musst du die Kunst beherrschen, sie mit HTML zu knüpfen – eine Aufgabe, die so einfach erscheint, dass sie garantiert einen Haken hat. Schaffst du es, diese Verbindungen zu meistern, öffnest du Türen zu unbekannten Welten und überraschend hilfreichen Katzenvideos.
Deine Aufgabe: Erstelle Links
- Interner Link:
Verwende den internen Link (href=“about.html“) in der Navigation, um zu einer anderen HTML-Seite innerhalb der gleichen Webseite zu verlinken. - Externer Link mit target=“_blank“:
Setze einen externen Link (href=“https://www.flame-greenwood.org“)
mit dem Attribut target=“_blank“, damit er in einem neuen Tab oder Fenster geöffnet wird. - E-Mail- und Telefon-Link:
Verwende einen E-Mail-Link (mailto:info@flame-greenwood.com) und einen Telefon-Link (tel:+49123456789). - Anker-Link:
Erstelle einen Anker-Link (href=“#anchor“) in der Navigation, um zu einem bestimmten Abschnitt auf derselben Seite zu springen. Um es besser im Browser zu sehen solltest du im letzten Paragraphen mehr Text hinzufügen - Download-Link:
Setze einen Download-Link (href=“assets/media/elixir-of-light.pdf“ download), um eine Datei zum Herunterladen bereitzustellen.
<h1>Willkommen in Greenwood Hollow</h1>
<p>Interner Link zu <a href="about.html">About</a></p>
<p>Externer Link zu einer externen Seite z.B:
<a href="https://www.flame-greenwood.org" target="_blank">Fantasy-Wiki</a>.</p>
<p>E-Mail an den Hüter des Waldes senden: <a href="info@flame-greenwood.org">seran@flame-greenwood.org</a></p>
<p>Rufe den Hüter des Waldes an: <a href="tel:+49123456789">+49 123 456 789</a></p>
<p>Gehe zur Beschreibung der <a href="#anchor">magischen Pfade</a> </p>
<p>Download der Karte von Greenwood Hollow: <a href="assets/img/elixir-of-light.pdf" download>Karte</a></p>
<section id="anchor">
<h2>Beschreibung der magischen Pfade</h2>
<p>Die Pfade des Waldes sind vielfältig und führen zu verborgenen Orten, die nur durch die richtigen Verbindungen zugänglich sind. Wenn du mehr Text hineinschreibst siehst du den Effekt</p>
</section>