Erstellen von Links

Hyperlinks sind eine der spannendsten Innovationen, die das Web zu bieten hat. Sie sind seit Beginn des Web eine Funktion und machen das Web zu einem 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 bei einem Klick oder einer anderen Aktivierung der Webbrowser zu einer anderen Webadresse (URL) wechselt.

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

Ein grundlegender Link wird erstellt, indem der Text oder andere Inhalte innerhalb eines <a>-Elements umwickelt und das href-Attribut verwendet wird, auch bekannt als Hypertext-Referenz oder Ziel, 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>

Dies ergibt das folgende Ergebnis:

Ich erstelle einen Link zur Mozilla-Homepage.

Wie bereits erwähnt, kann fast jeder Inhalt in einen Link umgewandelt werden, sogar Block-Level-Elemente. Wenn Sie ein Überschriftselement in einen Link verwandeln möchten, umwickeln Sie es mit einem Anker (<a>) Element, wie im folgenden Code-Snippet gezeigt wird:

<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>

Dies verwandelt die Überschrift in einen Link:

Wenn Sie ein Bild in einen Link umwandeln möchten, verwenden Sie das <a>-Element, um die Bilddatei zu umwickeln, die mit dem <img>-Element referenziert wird. Das folgende Beispiel verwendet einen relativen Pfad, um eine lokal gespeicherte SVG-Bilddatei zu referenzieren.

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 zu Ihren Links hinzufügen möchten, ist title. Der Titel enthält zusätzliche Informationen über den Link, wie z.B. welche Art von Informationen die Seite enthält oder Dinge, die man auf der Website beachten sollte.

<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 ergibt das folgende Ergebnis und wenn Sie mit der Maus über den Link fahren, wird der Titel als Tooltip angezeigt:

Erstellen Sie ein HTML-Dokument mit Ihrem lokalen Code-Editor und unserer Einführungsvorlage.

• Fügen Sie im HTML-Body ein oder mehrere Absätze oder andere Arten von Inhalten hinzu, die Sie bereits kennen.
• Ändern Sie einige Inhalte in Links.
• Fügen Sie Titelattribute ein.

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

Eine URL oder Uniform Resource Locator ist eine Textzeichenfolge, die definiert, wo sich etwas im Web befindet. Zum Beispiel befindet sich Mozillas englische Homepage unter https://www.mozilla.org/en-US/.

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

Der Root dieser Verzeichnisstruktur wird creating-hyperlinks genannt. 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 Startseite oder Landing Page (eine Webseite, die als Einstiegspunkt für eine Website oder einen bestimmten Abschnitt einer Website dient).

Es gibt auch zwei Verzeichnisse in unserem Root – pdfs und projects. Diese enthalten jeweils eine einzige Datei – 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 an verschiedenen Speicherorten im Dateisystem befinden. Die zweite index.html wäre vielleicht die Haupt-Landingpage für projektbezogene Informationen.

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

• Gleiches Verzeichnis: Wenn Sie einen Hyperlink innerhalb von index.html (der obersten index.html) einfügen möchten, der auf contacts.html verweist, geben Sie den Dateinamen an, auf den Sie verlinken möchten, da er sich im selben Verzeichnis wie die aktuelle Datei befindet. Die URL, die Sie benutzen würden, ist contacts.html:

  html

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

• Gehe in Unterverzeichnisse: Wenn Sie einen Hyperlink innerhalb von index.html (der obersten index.html) einfügen möchten, der auf projects/index.html verweist, müssten Sie in das projects Verzeichnis gehen, bevor Sie die Datei angeben, auf die Sie verlinken möchten. Dies wird erreicht, indem Sie den Namen des Verzeichnisses angeben, dann ein Schrägstrich, dann den Namen der Datei. Die URL, die Sie benutzen würden, ist projects/index.html:

  html

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

• Gehe zurück in übergeordnete Verzeichnisse: Wenn Sie einen Hyperlink innerhalb von projects/index.html einfügen möchten, der auf pdfs/project-brief.pdf verweist, müssten Sie eine Verzeichnisebene nach oben gehen, dann wieder in das pdfs Verzeichnis. Um ein Verzeichnis nach oben zu gehen, verwenden Sie zwei Punkte – .. – so dass die URL, die Sie verwenden würden, ../pdfs/project-brief.pdf lautet:

  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, bekannt als ein Dokumentenfragment, anstatt nur an den Anfang des Dokuments zu verlinken. Um dies zu tun, müssen Sie zuerst einem Element, auf das Sie verlinken möchten, ein id Attribut zuweisen. Normalerweise macht es Sinn, auf eine spezifische Überschrift zu verlinken, sodass dies folgendermaßen aussehen würde:

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

Um dann auf diese spezifische id zu verlinken, würden Sie sie am Ende der URL hinzufügen, vorweg mit einem Hash-/Pound-Symbol (#), 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 die Dokumentfragment-Referenz allein 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, deren Sie im Internet begegnen werden, sind absolute URL und relative URL:

Absolute URL: Zeigt auf einen Ort, der durch seinen absoluten Ort im Internet definiert ist, einschließlich Protokoll und Domainname. Zum Beispiel, wenn eine index.html Seite in ein Verzeichnis namens projects hochgeladen wird, das innerhalb des Root eines Webservers sitzt, 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 nur https://www.example.com/projects/, da die meisten Webserver einfach nach einer Landingpage wie index.html suchen, die geladen werden soll, wenn sie nicht in der URL angegeben ist).

Eine absolute URL zeigt immer auf dieselbe Stelle, egal wo sie verwendet wird.

Relative URL: Zeigt auf einen Ort, der relativ zu der Datei ist, von der Sie verlinken, mehr wie das, was wir im vorherigen Abschnitt betrachtet haben. Zum Beispiel, wenn wir von unserer Beispiel-Datei bei https://www.example.com/projects/index.html auf eine PDF-Datei im selben Verzeichnis verlinken möchten, wäre die URL nur der Dateiname — project-brief.pdf — keine zusätzlichen Informationen nötig. Wenn das PDF in einem Unterverzeichnis innerhalb projects namens pdfs verfügbar wäre, wäre der relative Link pdfs/project-brief.pdf (die äquivalente absolute URL wäre https://www.example.com/projects/pdfs/project-brief.pdf).

Eine relative URL zeigt auf unterschiedliche Orte, abhängig von der tatsächlichen Lage der Datei, auf die Sie sich beziehen – beispielsweise wenn wir unsere index.html Datei aus dem projects Verzeichnis heraus in den Root der Website (die oberste Ebene, nicht in einem Verzeichnis) verschieben, würde der pdfs/project-brief.pdf relative URL-Link darin jetzt auf eine Datei bei https://www.example.com/pdfs/project-brief.pdf zeigen, nicht auf eine Datei unter https://www.example.com/projects/pdfs/project-brief.pdf.

Natürlich ändert sich der Standort der project-brief.pdf Datei und des pdfs Ordners nicht plötzlich, nur weil Sie die index.html Datei verschoben haben – das würde dazu führen, dass Ihr Link auf die falsche Stelle zeigt, sodass er nicht funktioniert, wenn man darauf klickt. Sie müssen vorsichtig sein!

Es gibt einige bewährte Methoden, denen Sie beim Schreiben von Links folgen sollten. Lassen Sie uns diese jetzt ansehen.

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

• Screenreader-Benutzer springen gerne von Link zu Link auf der Seite und lesen Links aus dem Kontext heraus.
• Suchmaschinen verwenden Linktexte, um Zieldateien zu indexieren, daher ist es eine gute Idee, Schlüsselwörter in Ihren Linktext aufzunehmen, um effektiv zu beschreiben, worauf verlinkt wird.
• Visuelle Leser überfliegen die Seite, anstatt jedes Wort zu lesen, und ihre Augen werden auf Seitenelemente, die herausragen, wie Links, gelenkt. Sie finden beschreibenden Linktext nützlich.

Sehen wir uns ein spezifisches Beispiel an:

Guter Linktext: Firefox herunterladen

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

Schlechter Linktext: Klicken Sie hier um Firefox herunterzuladen

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

Weitere Tipps:

• Wiederholen Sie die URL nicht als Teil des Linktexts — URLs sehen hässlich aus und klingen noch hässlicher, wenn ein Screenreader sie Buchstabe für Buchstabe vorliest.
• Sagen Sie nicht "Link" oder "links zu" im Linktext – das ist nur Lärm. Screenreader sagen den Leuten, dass es einen Link gibt. Visuelle Benutzer werden auch wissen, dass es einen Link gibt, weil Links im Allgemeinen in einer anderen Farbe und unterstrichen gestylt sind (dieses Konvention sollte im Allgemeinen nicht gebrochen werden, da Benutzer daran gewöhnt sind).
• Halten Sie Ihren Linktext so kurz wie möglich — dies ist hilfreich, da Screenreader den gesamten Linktext interpretieren müssen.
• Minimieren Sie Fälle, in denen mehrere Kopien desselben Textes an verschiedenen Orten verlinkt werden. Dies kann für Screenreader-Benutzer Probleme verursachen, wenn es eine Liste von Links außerhalb des Kontexts gibt, die mit "klicken Sie hier", "klicken Sie hier", "klicken Sie hier" beschriftet sind.

Wenn Sie auf eine Ressource verlinken, die heruntergeladen (wie ein PDF oder Word-Dokument), gestreamt (wie Video oder Audio) werden soll, oder eine andere potenziell unerwartete Wirkung hat (ein Popup-Fenster öffnet), sollten Sie klare Formulierungen hinzufügen, um Verwirrung zu reduzieren.

Zum Beispiel:

• Wenn Sie in einer Verbindung mit niedriger Bandbreite sind, klicken Sie auf einen Link, und dann startet unerwartet ein mehr megabyte-großer Download.

Sehen wir uns einige Beispiele an, um zu sehen, welche Art von Text hier verwendet werden kann:

<p>
  <a href="https://www.example.com/large-report.pdf">
    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 auf eine Ressource verlinken, die heruntergeladen und nicht im Browser geöffnet werden soll, können Sie das download-Attribut verwenden, um einen Standard-Speicherdateinamen 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>

Für diese Übung möchten wir, dass Sie einige Seiten mit einem Navigationsmenü verlinken, um eine mehrseitige Website zu erstellen. Dies ist eine der üblichen Methoden, mit denen eine Website erstellt wird – die gleiche Seitenstruktur wird auf jeder Seite verwendet, einschließlich desselben Navigationsmenüs, sodass es den Eindruck erweckt, dass Sie am gleichen Ort bleiben und unterschiedliche Inhalte aufgerufen werden.

Sie müssen lokale Kopien der folgenden vier Seiten erstellen, wobei sich alle im selben Verzeichnis befinden. Für eine vollständige Dateiliste sehen Sie das Verzeichnis navigation-menu-start:

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

Sie sollten:

1. Fügen Sie eine ungeordnete Liste an der angegebenen Stelle auf einer Seite hinzu, die die Namen der zu verlinkenden Seiten enthält. Ein Navigationsmenü ist in der Regel nur eine Liste von Links, daher ist dies semantisch in Ordnung.
2. Ändern Sie jeden Seitennamen in einen Link zu dieser Seite.
3. Kopieren Sie das Navigationsmenü auf jede Seite.
4. Entfernen Sie auf jeder Seite nur den Link zu dieser Seite selbst – es ist verwirrend und unnötig, dass eine Seite einen Link zu sich selbst enthält. Ausserdem dient das Fehlen eines Links als eine gute visuelle Erinnerung daran, auf welcher Seite Sie sich gerade befinden.

Das fertige Beispiel sollte ähnlich wie die folgende Seite aussehen:

Es ist möglich, Links oder Schaltflächen zu erstellen, die, wenn Sie sie klicken, eine neue ausgehende E-Mail-Nachricht öffnen, anstatt zu einer Ressource oder Seite zu verlinken. Dies geschieht mit dem <a>-Element und dem mailto:-URL-Schema.

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

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

Dies ergibt einen Link, der so aussieht: E-Mail an nirgendwo senden.

Tatsächlich ist die E-Mail-Adresse optional. Wenn Sie sie weglassen und Ihr href ist "mailto:", wird von der E-Mail-Anwendung des Benutzers ein neues ausgehendes E-Mail-Fenster geöffnet, ohne Zieladresse. Dies ist oft nützlich als "Teilen"-Links, die Benutzer anklicken können, um eine E-Mail an eine von ihnen ausgewählte Adresse zu senden.

Zusätzlich zur E-Mail-Adresse können Sie auch andere Informationen angeben. Tatsächlich können alle Standard-Mail-Headerfelder der mailto-URL hinzugefügt werden, die Sie angeben. Die am häufigsten verwendeten davon sind "subject", "cc" und "body" (das ist kein echtes Header-Feld, ermöglicht Ihnen jedoch, 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, Betreff und Körper enthält:

<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 können einige weitere Tests finden, um zu überprüfen, ob Sie diese Informationen behalten haben, bevor Sie weitermachen – siehe Test your skills: Links.

Das war's vorerst mit Links! Sie werden später im Kurs zu Links zurückkehren, wenn Sie anfangen, diese zu stylen. Als nächstes im HTML werden Sie einige Herausforderungen durchgehen, die Ihr Verständnis der bisher behandelten Themen testen.

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