Erstellen von Links

Hyperlinks sind eine der aufregendsten Innovationen, die das Web zu bieten hat. Sie sind seit Beginn des Webs eine Funktion und machen aus dem Web ein Netz. Hyperlinks ermöglichen es uns, Dokumente mit anderen Dokumenten oder Ressourcen zu verlinken, auf spezifische Teile von Dokumenten zu verlinken oder Apps unter einer Webadresse verfügbar zu machen. Fast jeder Webinhalt kann in einen Link umgewandelt werden, sodass beim Klicken oder anderweitigem Aktivieren der Webbrowser zu einer anderen Webadresse (URL) wechselt.

Zum Beispiel enthält die BBC-Startseite viele Links, die nicht nur auf mehrere Nachrichtenartikel verweisen, sondern auch auf verschiedene Bereiche der Website (Navigationsfunktionalität), Login/Registrierungsseiten (Benutzer-Tools) und mehr.

Ein einfacher Link wird erstellt, indem der Text oder andere Inhalte innerhalb eines <a>-Elements umschlossen und das href-Attribut, auch bekannt als Hypertext-Referenz oder Ziel, verwendet wird, das die Webadresse enthält.

<p>
  I'm creating a link to
  <a href="https://www.mozilla.org/en-US/">the Mozilla homepage</a>.
</p>

Das gibt uns das folgende Ergebnis:

Ich erstelle einen Link zur Mozilla-Startseite.

Wie bereits erwähnt, kann fast jeder Inhalt in einen Link umgewandelt werden, selbst Block-Elemente. Wenn Sie ein Überschriftselement zu einem Link machen möchten, umschließen Sie es im folgenden Codebeispiel mit einem Anker (<a>)-Element:

<a href="https://developer.mozilla.org/en-US/">
  <h1>MDN Web Docs</h1>
</a>
<p>
  Documenting web technologies, including CSS, HTML, and JavaScript, since 2005.
</p>

Dadurch wird die Überschrift in einen Link umgewandelt:

Um ein Bild in einen Link zu verwandeln, umschließen Sie das <img>-Element mit einem <a>-Element. Das folgende Beispiel verwendet einen relativen Pfad, um auf eine lokal gespeicherte SVG-Bilddatei zu verweisen.

img {
  height: 100px;
  width: 150px;
  border: 1px solid gray;
}

<a href="https://developer.mozilla.org/en-US/">
  <img src="mdn_logo.svg" alt="MDN Web Docs" />
</a>

Dies macht das MDN-Logo zu einem Link:

Ein weiteres Attribut, das Sie möglicherweise Ihren Links hinzufügen möchten, ist title. Der Titel enthält zusätzliche Informationen über den Link, z. B. welche Art von Informationen die Seite enthält oder Dinge, die auf der Website zu beachten sind.

<p>
  I'm creating a link to
  <a
    href="https://www.mozilla.org/en-US/"
    title="The best place to find more information about Mozilla's
          mission and how to contribute">
    the Mozilla homepage</a>.
</p>

Dies gibt uns das folgende Ergebnis und beim Überfahren des Links mit der Maus wird der Titel als Tooltip angezeigt:

Erstellen Sie ein HTML-Dokument mit Ihrem lokalen Code-Editor und unserer Einstiegs-Vorlage.

• Fügen Sie innerhalb des HTML-Körpers ein oder mehrere Absätze oder andere Arten von Inhalten hinzu, die Sie bereits kennen.
• Ändern Sie einige der Inhalte in Links um.
• Fügen Sie Titelattribute hinzu.

Um Linkziele vollständig zu verstehen, müssen Sie URLs und Dateipfade verstehen. Dieser Abschnitt liefert Ihnen die nötigen Informationen, um dies zu erreichen.

Eine URL, oder Uniform Resource Locator, ist eine Zeichenfolge, die angibt, wo sich etwas im Web befindet. Zum Beispiel befindet sich die englische Startseite von Mozilla unter https://www.mozilla.org/en-US/.

URLs verwenden Pfade, um Dateien zu finden. Pfade geben an, wo sich die Datei, die Sie interessiert, im Dateisystem befindet. Schauen wir uns ein Beispiel für eine Verzeichnisstruktur an, siehe die Verzeichnisstruktur creating-hyperlinks, die unten angezeigt wird:

Der Root dieser Verzeichnisstruktur heißt creating-hyperlinks. Wenn Sie lokal mit einer Website arbeiten, haben Sie ein Verzeichnis, das die gesamte Seite enthält. Innerhalb des Root haben wir eine index.html-Datei und eine contacts.html. In einer echten Website wäre index.html unsere Start- oder Einstiegsseite (eine Webseite, die als Einstiegspunkt für eine Website oder einen bestimmten Abschnitt einer Website dient).

Es gibt auch zwei Verzeichnisse innerhalb unseres Roots – pdfs und projects. Diese haben jeweils eine einzelne Datei in sich – ein PDF (project-brief.pdf) und eine index.html-Datei. Beachten Sie, dass Sie zwei index.html-Dateien in einem Projekt haben können, solange sie sich in unterschiedlichen Dateisystemstandorten befinden. Die zweite index.html wäre vielleicht die zentrale Einstiegsseite für projektbezogene Informationen.

Schauen wir uns einige Beispiele für Links zwischen verschiedenen Dateien in dieser Verzeichnisstruktur an, um verschiedene Linktypen zu demonstrieren:

• Gleiches Verzeichnis: Wenn Sie einen Hyperlink in index.html (der obersten index.html) einfügen möchten, der auf contacts.html verweist, würden Sie den Dateinamen angeben, zu dem Sie verlinken möchten, da er sich im selben Verzeichnis wie die aktuelle Datei befindet. Die verwendete URL wäre contacts.html:

  html

  <p>
    Want to contact a specific staff member? Find details on our
    <a href="contacts.html">contacts page</a>.
  </p>
  

• In Unterverzeichnisse wechseln: Wenn Sie einen Hyperlink in index.html (der oberen index.html) einfügen möchten, der auf projects/index.html verweist, müssten Sie in das Verzeichnis projects hinuntergehen, bevor Sie die Datei angeben, zu der Sie verlinken möchten. Dies wird durchgeführt, indem der Name des Verzeichnisses, dann ein Schrägstrich und dann der Name der Datei angegeben wird. Die verwendete URL wäre projects/index.html:

  html

  <p>Visit my <a href="projects/index.html">project homepage</a>.</p>
  

• Zurück in übergeordnete Verzeichnisse wechseln: Wenn Sie einen Hyperlink in projects/index.html einfügen möchten, der auf pdfs/project-brief.pdf verweist, müssten Sie eine Verzeichnisebene nach oben gehen und dann in das Verzeichnis pdfs hinuntergehen. Um ein Verzeichnis nach oben zu gehen, verwenden Sie zwei Punkte – .. – daher wäre die verwendete URL ../pdfs/project-brief.pdf:

  html

  <p>A link to my <a href="../pdfs/project-brief.pdf">project brief</a>.</p>
  

Es ist möglich, auf einen bestimmten Teil eines HTML-Dokuments zu verlinken, der als Dokumentfragment bekannt ist, anstatt nur auf die Oberseite des Dokuments. Dazu müssen Sie zuerst ein id-Attribut dem Element zuweisen, auf das Sie verlinken möchten. Normalerweise macht es Sinn, auf eine bestimmte Überschrift zu verlinken, sodass dies wie folgt aussehen würde:

<h2 id="Mailing_address">Mailing address</h2>

Um dann zu diesem spezifischen id zu verlinken, würden Sie es am Ende der URL anfügen, vorangegangen von einem Rautensymbol (#), zum Beispiel:

<p>
  Want to write us a letter? Use our
  <a href="contacts.html#Mailing_address">mailing address</a>.
</p>

Sie können sogar den Dokumentfragmentverweis alleine verwenden, um auf einen anderen Teil des aktuellen Dokuments zu verlinken:

<p>
  The <a href="#Mailing_address">company mailing address</a> can be found at the
  bottom of this page.
</p>

Zwei Begriffe, die Ihnen im Web begegnen werden, sind absolute URL und relative URL:

Absolute URL: Zeigt auf einen Standort, der durch seinen absoluten Standort im Web, einschließlich Protokoll und Domainname, definiert ist. Zum Beispiel, wenn eine index.html-Seite in ein Verzeichnis namens projects hochgeladen wird, das sich innerhalb des Root eines Webservers befindet, und die Domain der Website https://www.example.com ist, wäre die Seite unter https://www.example.com/projects/index.html verfügbar (oder sogar einfach nur https://www.example.com/projects/, da die meisten Webserver einfach eine Einstiegsseite wie index.html laden, wenn sie nicht in der URL angegeben ist).

Eine absolute URL wird immer auf denselben Ort verweisen, egal wo sie verwendet wird.

Relative URL: Zeigt auf einen Standort, der relativ zu der Datei ist, von der aus Sie verlinken, mehr wie das, was wir uns im vorherigen Abschnitt angesehen haben. Zum Beispiel, wenn wir von unserer Beispiel-Datei bei https://www.example.com/projects/index.html auf eine PDF-Datei im gleichen Verzeichnis verlinken wollten, wäre die URL einfach der Dateiname — project-brief.pdf — keine zusätzlichen Informationen benötigt. Wenn die PDF-Datei in einem Unterverzeichnis von projects namens pdfs verfügbar wäre, wäre der relative Link pdfs/project-brief.pdf (die entsprechende absolute URL wäre https://www.example.com/projects/pdfs/project-brief.pdf).

Eine relative URL wird auf unterschiedliche Orte verweisen, je nachdem, wo sich die Datei, auf die Sie verweisen, tatsächlich befindet. Zum Beispiel, wenn wir unsere index.html-Datei aus dem projects-Verzeichnis heraus und in den Root der Website (die oberste Ebene, nicht in Verzeichnissen) verschieben würden, würde der relative URL-Link pdfs/project-brief.pdf darin nun auf eine Datei unter https://www.example.com/pdfs/project-brief.pdf verweisen, nicht auf eine Datei unter https://www.example.com/projects/pdfs/project-brief.pdf.

Natürlich wird sich der Standort der project-brief.pdf-Datei und des pdfs-Ordners nicht plötzlich ändern, weil Sie die index.html-Datei verschoben haben — dieser Umstand würde dazu führen, dass Ihr Link an die falsche Stelle führt und er beim Anklicken nicht funktionieren würde. Sie müssen vorsichtig sein!

Es gibt einige bewährte Praktiken beim Schreiben von Links, die Sie beachten sollten. Schauen wir uns diese jetzt an.

Es ist einfach, Links auf Ihrer Seite zu platzieren. Das ist jedoch nicht genug. Wir müssen unsere Links zugänglich für alle Leser machen, unabhängig von ihrem aktuellen Kontext und welchen Werkzeugen sie bevorzugen. Zum Beispiel:

• Benutzer von Screenreadern springen gerne von Link zu Link auf der Seite und lesen Links aus dem Kontext heraus.
• Suchmaschinen verwenden den Linktext, um Zieldateien zu indexieren, daher ist es eine gute Idee, Schlüsselwörter in Ihren Linktext einzufügen, um effektiv zu beschreiben, was verlinkt wird.
• Visuelle Leser überfliegen die Seite, anstatt jedes Wort zu lesen, und ihre Augen werden von Seitenelementen angezogen, die hervorgehoben sind, wie Links. Sie finden beschreibenden Linktext nützlich.

Lassen Sie uns ein spezifisches Beispiel betrachten:

Guter Linktext: Laden Sie Firefox herunter

<p><a href="https://www.mozilla.org/en-US/firefox/new/">Download Firefox</a></p>

Schlechter Linktext: Klicken Sie hier, um Firefox herunterzuladen

<p>
  <a href="https://www.mozilla.org/en-US/firefox/new/">Click here</a> to
  download Firefox
</p>

Weitere Tipps:

• Wiederholen Sie die URL nicht als Teil des Linktexts – URLs sehen unschön aus, und sie klingen noch schlimmer, wenn ein Screenreader sie Buchstabe für Buchstabe vorliest.
• Sagen Sie nicht "Link" oder "Link zu" im Linktext – das ist nur störend. Screenreader informieren die Benutzer darüber, dass es sich um einen Link handelt. Visuelle Benutzer werden auch wissen, dass es ein Link ist, da Links generell in einer anderen Farbe und unterstrichen dargestellt werden (dieses Konvention sollte im Allgemeinen nicht gebrochen werden, da die Benutzer daran gewöhnt sind).
• Halten Sie Ihren Linktext so kurz wie möglich – dies ist hilfreich, weil Screenreader den gesamten Linktext interpretieren müssen.
• Minimieren Sie Vorkommen, bei denen mehrere Kopien desselben Texts an verschiedene Orte verlinken. Dies kann Probleme für Screenreader-Benutzer verursachen, wenn eine Liste von Links aus dem Kontext aufgelistet ist, die mit "klicken Sie hier", "klicken Sie hier", "klicken Sie hier" beschriftet sind.

Wenn Sie zu einer Ressource verlinken, die nicht wie eine "normale Navigation" auf der aktuellen Seite geöffnet wird, sollten Sie in den Linktext klare Worte einfügen, um anzugeben, was passieren wird. Zum Beispiel, wenn Sie eine Ressource herunterladen oder streamen oder wenn der Link ein Popup öffnet oder eine andere potenziell unerwartete Auswirkung hat, sollte dies im Text angegeben werden. Dies ist wichtig für Benutzer mit niedrigen Bandbreitenverbindungen, die das Herunterladen von Ressourcen von mehreren Megabyte vermeiden möchten. Es hilft auch, Erwartungen für Screenreader-Benutzer festzulegen, die möglicherweise nicht wissen, was sonst passiert.

Lassen Sie uns einige Beispiele betrachten, um zu sehen, welche Art von Text hier verwendet werden kann:

<p>
  <a href="/large-report.pdf" download>
    Download the sales report (PDF, 10MB)
  </a>
</p>

<p>
  <a href="https://www.example.com/video-stream/" target="_blank">
    Watch the video (stream opens in separate tab, HD quality)
  </a>
</p>

Wenn Sie zu einer Ressource verlinken, die heruntergeladen und nicht im Browser geöffnet werden soll, können Sie das download-Attribut verwenden, um einen Standard-Speichernamen bereitzustellen. Hier ist ein Beispiel mit einem Download-Link zur neuesten Windows-Version von Firefox:

<a
  href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=en-US"
  download="firefox-latest-64bit-installer.exe">
  Download Latest Firefox for Windows (64-bit) (English, US)
</a>

Links öffnen standardmäßig im selben Tab wie die Seite, auf der sie sich befinden, was es dem Benutzer ermöglicht, mit der Zurück-Schaltfläche des Browsers zur vorherigen Seite zu navigieren. Viele Websites (einschließlich MDN) wählen jedoch, bestimmte Links, insbesondere externe Links, in einem neuen Tab zu öffnen. Dies geschieht, indem das target-Attribut auf "_blank" gesetzt wird.

Firefox is developed by the
<a href="https://www.mozilla.org/en-US/" target="_blank">Mozilla Foundation</a>.

Ob Links in einem neuen Tab geöffnet werden sollen oder nicht, sollte eine bewusste Entscheidung auf der Grundlage von Benutzererfahrungs-Designüberlegungen sein. Hier sind einige Dinge, die Sie beachten sollten:

• Das Öffnen von Links in einem neuen Tab präsentiert die beiden Dokumente gleichzeitig, was für eine "parallele" Navigationserfahrung nützlich ist. Auf der anderen Seite sind Links, die im gleichen Tab geöffnet werden, eher eine Fortsetzung der aktuellen Seite.
• Das Öffnen von Links in einem neuen Tab kann für Benutzer, die gewohnt sind, die Zurück-Schaltfläche zu verwenden, desorientierend sein.
• Selbst wenn Links standardmäßig im gleichen Tab geöffnet werden, können Benutzer immer noch wählen, sie in einem neuen Tab zu öffnen, indem sie Tastenkombinationen oder Kontextmenüoptionen verwenden. Andererseits sind Links, die in einem neuen Tab geöffnet werden, schwerer im selben Tab zu öffnen.
• Screenreader-Benutzer können durch Links, die in einem neuen Tab geöffnet werden, verwirrt werden, da sie möglicherweise nicht realisieren, dass der neue Tab geöffnet wurde, und sie den Kontext über ihren Standort auf der Seite verlieren können.

Ein häufiger Ansatz besteht darin, externe Links in neuen Tabs und interne Links im gleichen Tab zu öffnen. Einige Designer bevorzugen es, alle Links im gleichen Tab zu öffnen. Wenn Sie Links in neuen Tabs öffnen, wird empfohlen, Hinweise für diese Links bereitzustellen, wie ein Symbol neben dem Linktext.

Für diese Übung möchten wir, dass Sie einige Seiten mit einem Navigationsmenü verlinken, um eine mehrseitige Website zu erstellen. Dies ist eine gängige Art und Weise, wie eine Website erstellt wird – die gleiche Seitenstruktur wird auf jeder Seite verwendet, einschließlich des gleichen Navigationsmenüs. Wenn Links angeklickt werden, entsteht der Eindruck, dass Sie sich am gleichen Ort befinden und unterschiedliche Inhalte angezeigt werden.

Sie müssen lokale Kopien der folgenden vier Seiten erstellen, alle im gleichen Verzeichnis. Für eine vollständige Dateiliste siehe das Verzeichnis navigation-menu-start.

• index.html
• projects.html
• pictures.html
• social.html

Sie sollten:

1. Fügen Sie an der angegebenen Stelle auf einer Seite eine ungeordnete Liste hinzu, die die Namen der zu verlinkenden Seiten enthält. Ein Navigationsmenü ist normalerweise einfach eine Liste von Links, daher ist das semantisch in Ordnung.
2. Ändern Sie jeden Seitennamen in einen Link zu der entsprechenden Seite.
3. Kopieren Sie das Navigationsmenü auf jede Seite.
4. Entfernen Sie auf jeder Seite nur den Link zu dieser Seite – es ist verwirrend und unnötig, einen Link zur eigenen Seite einzufügen. Außerdem dient das Fehlen eines Links als guter visueller Hinweis darauf, auf welcher Seite Sie sich gerade befinden.

Das fertige Beispiel sollte folgendermaßen aussehen:

Es ist möglich, Links oder Schaltflächen zu erstellen, die beim Klicken eine neue ausgehende E-Mail-Nachricht öffnen, anstatt zu einer Ressource oder Seite zu verlinken. Dies wird mithilfe des <a>-Elements und des mailto:-URL-Schemas durchgeführt.

In seiner einfachsten und am häufigsten verwendeten Form, gibt ein mailto:-Link die E-Mail-Adresse des beabsichtigten Empfängers an. Zum Beispiel:

<a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>

Das Ergebnis ist ein Link, der so aussieht: E-Mail an nowhere senden.

Tatsächlich ist die E-Mail-Adresse optional. Wenn Sie sie weglassen und Ihr href "mailto:" lautet, wird ein neues ausgehendes E-Mail-Fenster vom E-Mail-Client des Benutzers mit keiner Zieladresse geöffnet. Dies ist häufig für "Teilen"-Links nützlich, die Benutzer anklicken können, um eine E-Mail an eine von ihnen gewählte Adresse zu senden.

Zusätzlich zur E-Mail-Adresse können Sie auch andere Informationen bereitstellen. Tatsächlich können alle standardmäßigen Mail-Header-Felder zu der mailto-URL hinzugefügt werden, die Sie bereitstellen. Die am häufigsten genutzten sind "subject", "cc" und "body" (was kein wahres Header-Feld ist, aber es erlaubt Ihnen, eine kurze Inhaltsnachricht für die neue E-Mail anzugeben). Jedes Feld und sein Wert wird als Abfragebegriff angegeben.

Hier ist ein Beispiel, das cc, bcc, subject und body beinhaltet:

<a
  href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&subject=The%20subject%20of%20the%20email&body=The%20body%20of%20the%20email">
  Send mail with cc, bcc, subject and body
</a>

Hier sind einige weitere Beispiel-mailto-URLs:

• mailto:
• mailto:nowhere@mozilla.org
• mailto:nowhere@mozilla.org,nobody@mozilla.org
• mailto:nowhere@mozilla.org?cc=nobody@mozilla.org
• mailto:nowhere@mozilla.org?cc=nobody@mozilla.org&subject=This%20is%20the%20subject

Sie haben das Ende dieses Artikels erreicht, aber können Sie sich an die wichtigsten Informationen erinnern? Sie finden einige weitere Tests, um zu überprüfen, ob Sie diese Informationen behalten haben, bevor Sie weitermachen – siehe Testen Sie Ihre Fähigkeiten: Links.

Das war's vorerst zu Links! Sie werden später im Kurs zu Links zurückkehren, wenn Sie anfangen, sie zu gestalten. Als nächstes bei HTML werden Sie sich durch einige Herausforderungen arbeiten, die Ihr Verständnis der bisher behandelten Themen testen.

• Zurück
• Übersicht: Strukturierung von Inhalten mit HTML
• Weiter