Externe Links verweisen auf andere Websites und verwenden normalerweiseeine vollständige URLEine URL kann auf HTML-Dateien, Textdateien, Bilder, Textdokumente, Video- und Audiodateien oder alles
andere verweisen, was im Web vorhanden ist.
Für Links verwenden wir den Anker-Tab <a> und das href-Attribut. Dieses definiert einen Link zu einer
Ressource als Referenz-URL. Generell und besonders bei Bildern sind die Lizenzbedingungen und notwendigen
Quellenangaben zu beachten.
Hier verweist innerhalb eines Absatzes ein Link auf die Wikipedia Hauptseite oder einfach so:
Wikipedia Hauptseite.
Ein externer Link kann also so aussehen:
<a href="https://de.wikipedia.org/">Wikipedia</a>
Das Attribut href enthält das Ziel des Links. Der sichtbare und anklickbare Linktext steht
zwischen öffnendem und schließendem <a>-Tag.
Ein Link kann auch als Überschrift markiert werden:
Soll eine externe Website in einem neuen Tab oder Fenster geöffnet werden, kann das Attribut
target="_blank" verwendet werden. Aus Sicherheitsgründen gehört bei externen Zielen auch
rel="noopener noreferrer" dazu. Bei manchen Webseiten ist dies erforderlich, damit sie geöffnet
werden können, sonst erscheint die Fehlermeldung: Dieser Inhalt ist blockiert. Setze dich mit dem Websiteinhaber in Verbindung, um das Problem zu
beheben.
Code-Beispiel:
<a href="https://de.wikipedia.org/"
target="_blank"
rel="noopener noreferrer">
Wikipedia in neuem Tab
</a>Auch Icons, Fotos oder andere Bilder können als Link verwendet werden. Hier ist ein Beispiel für einen Bild-Link, der auf die Firefox-Seite von Wikipedia verweist. Für einen Bildlink verwenden wir zusätzlich das <a>-Element. Dieses umschließt mit der Ziel-url die Bilddatei, auf die mit dem <img>-Element verwiesen wird:
<figure>
<a href="https://de.wikipedia.org/wiki/Mozilla_Firefox">
<img
src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png"
width="10%"
height="auto"
alt="Feuerfuchs Docs">
</a>
<figcaption>Dies ist ein Bildlink – klick mich!</figcaption>
</figure>
Die Bilder werden zu einem Ort aus dem Internet oder dem Server (hier = Festplatte vom PC) verlinkt. Eine gute Anleitung für relative Pfadangaben steht unter: Referenzieren_in_HTML
Die allgemeinen Infos zu Bildern stehen im Kapitel Bilder.
Dies erfolgt über das <a>-Element und das mailto:URL-Schema. In seiner einfachsten und am häufigsten verwendeten Form mailto:gibt ein Link die E-Mail-Adresse des beabsichtigten Empfängers an. Zum Beispiel:
Send email to nowhereDer Code lautet <a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>. Wenn jetzt ein Fehlerhinweis kommt, solltest du ihn behebem können. Falls nicht, lies den Absatz zu den Externen Links nochmal genau durch. Tatsächlich ist die E-Mail-Adresse optional. Wird der Name weggelassen (href =„mailto:“), wird vom E-Mail-Client des Benutzers ein neues Fenster für ausgehende E-Mails ohne Zieladresse geöffnet. Dies ist für einen „Teilen“-Link nützlich.
Es lassen sich weitere Angaben zum Betreff oder zum Inhalt der E-Mail übergeben. Leider wird das etwas unübersichtlich. Hilfe bietet ein Mailto-Link-Generator. Ihr gebt Betreff und Text normal ein und kopiert das generierte Code-Schnipsel in euren HTML-Editor.
Seiteninterne Verweise funktionieren ähnlich wie "Textmarker" in WORD". Der Verweis kann auch in einer anderen HTML-Datei stehen. Dann wird diese Zieldatei geladen, und der Browser springt an die entsprechende Stelle, z.B. zu den Quellenangaben.
<a href="./info.html#quelle">Quellenangaben</a>.Damit das funktioniert muss an die entsprechende Stelle der Zieldatei eine id gesetzt werden. Wichtig: #quelle im Link und id="quelle" im Ziel müssen buchstabengetreu gleich sein — auch Groß-/Kleinschreibung zählt. Ohne dieses passende id lädt der Browser zwar info.html, findet aber kein Sprungziel und zeigt deshalb den Seitenanfang. Beispiel für den Code der Zieldatei:
<p id="quelle">
Quellen für den Einstieg in HTML:
</p>Interne Seiten sollten immer im selben Tab geöffnet werden, damit die Navigation der Website nachvollziehbar bleibt.