---
title: Erstellen von Hyperlinks
slug: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks
tags:
  - Beginner
  - Guide
  - HTML
  - Learn
  - Links
  - Title
  - absolute
  - hyperlinks
  - relativ
  - urls
translation_of: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks
original_slug: Learn/HTML/Einführung_in_HTML/Erstellen_von_Hyperlinks
---
<div>{{LearnSidebar}}</div>

<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}</div>

<p class="summary">Hyperlinks, kurz Links, sind ein wichtiger Teil des Internets, denn sie machen erst ein Netzwerk daraus. In diesem Artikel zeigen wir Ihnen wie man einen Link erstellt und stellen benutzerfreundliche Anwendungsbeispiele vor.</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">Vorwissen:</th>
   <td>Grundlegende Kenntnisse in HTML und Textformatierung, wie Sie in den Artikeln <a href="/de/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Lerne HTML kennen</a> und <a href="/de/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">Einfache Textformattierung mit HTML</a> abgedeckt werden.</td>
  </tr>
  <tr>
   <th scope="row">Ziel:</th>
   <td>Lernen wie man sinnvoll Hyperlinks einsetzt.</td>
  </tr>
 </tbody>
</table>

<h2 id="Was_ist_ein_Hyperlink">Was ist ein Hyperlink?</h2>

<p>Hyperlinks sind eine der Erfindungen, welche das <em>Internet</em> zu einem einzigen zusammenhängenden Netzwerk machen. Sie sind von Beginn an ein Teil des Netzes (engl. "<em>web</em>") und definieren dieses, indem sie uns erlauben von einem Dokument auf ein anderes Dokument (oder eine andere Quelle) zu verweisen. Auch auf bestimmte Inhalte einer Webseite kann direkt verlinkt werden, genauso wie auch auf Apps per Hyperlink verwiesen werden kann. Fast alles im Internet kann zu einem Link konvertiert werden und mit diesem kann die entsprechende Web-Adresse ({{glossary("URL")}}) im Internet von einem Browser gefunden werden.</p>

<div class="note">
<p><strong>Hinweis</strong>: Eine URL kann auf HTML-Dateien, Textdateien, Bilder, Dokumente, Video- oder Audiodateien verweisen und auf alles andere, was im Internet präsentiert werden kann. Wenn der Browser nicht weiß, wie er mit einer Datei umgehen soll, fragt er nach, ob die Datei geöffnet werden soll, wodurch das öffnen der Datei an ein anderes Programm auf dem Computer abgegeben wird, oder ob sie herunter geladen werden soll, damit man später diese Datei lokal nutzen kann.</p>
</div>

<p>Die Webseite von BBC enthält zum Beispiel eine große Anzahl an Links, welche auf verschiedene Nachrichtenartikel verweisen, aber auch zu verschiedenen Bereichen der Website (Navigation), Login/Registrations-Seiten (für Benutzeraccounts) und mehr.</p>

<p><img alt="frontpage of bbc.co.uk, showing many news items, and navigation menu functionality" src="https://mdn.mozillademos.org/files/12405/bbc-homepage.png" style="display: block; margin: 0 auto;"></p>

<h2 id="Aufbau_eines_Links">Aufbau eines Links</h2>

<p>Ein Link wird ganz einfach erstellt indem man Text, oder auch andere Inhalte, in ein {{htmlelement("a")}}-Element verschachtelt. Diesem Element muss auch noch das {{htmlattrxref("href", "a")}}-Attribut beigefügt werden, welches als Wert die Ziel-Webadresse enthält auf die man verweisen möchte.</p>

<pre class="brush: html">&lt;p&gt;Ich erstelle einen Link zu der
&lt;a href="https://www.mozilla.org/en-US/"&gt; Mozilla Webseite&lt;/a&gt;.
&lt;/p&gt;</pre>

<p>Dies gibt das folgende Resultat:</p>

<p>Ich erstelle einen Link zu der <a class="ignore-external" href="https://www.mozilla.org/en-US/">Mozilla Webseite</a>.</p>

<h3 id="Das_title-Attribut">Das <code>title</code>-Attribut</h3>

<p>Ein weiteres Attribut welches Sie ihren Links womöglich hinzufügen möchten ist <code>title</code>. Darin können Sie Zusatzinformationen zu dem Link angeben. Als Beispiel:</p>

<pre class="brush: html">&lt;p&gt;Ich erstelle einen Link zu der
&lt;a href="https://www.mozilla.org/en-US/"
   title="Der beste Ort um mehr über Mozilla zu lernen und wie jeder dazu beitragen kann"&gt;Mozilla Webseite&lt;/a&gt;.
&lt;/p&gt;</pre>

<p>Das gibt das folgende Resultat (der Text aus dem <code>&gt;title&lt;</code>-Attribut wird als Tooltip angezeigt, wenn man mit dem Mauszeiger darüberfährt):</p>

<p>Ich erstelle einen Link zu der <a class="ignore-external" href="https://www.mozilla.org/en-US/" title="Der beste Ort um mehr über Mozilla zu lernen und wie jeder dazu beitragen kann">Mozilla Webseite</a>.</p>

<div class="note">
<p><strong>Hinweis</strong>: Der Text aus dem <code>&gt;title&lt;</code>-Attribut wird nur durch den Mauszeiger angezeigt, was bedeutet, das Leute die nur die Tastatur benutzen oder Tablet/Smartphone Benutzer, diese Information nicht angezeigt bekommen. Wenn es sich also um eine wichtige Information handelt, wäre es wohl besser diese im normalen Text unterzubringen.</p>
</div>

<h3 id="Aktives_Lernen_Erstellen_Sie_Ihren_einen_Hyperlink">Aktives Lernen: Erstellen Sie Ihren einen Hyperlink</h3>

<p>Es ist Zeit das gelernte in die Praxis umzusetzen: Erstellen Sie bitte ein neues HTML-Dokument lokal in Ihrem Code-Editor. (<a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">das Dokument könnte so aussehen</a>)</p>

<ul>
 <li>Erstellen Sie innerhalb des <code>body</code>-Elements ein paar Absätze oder andere Inhalte, so wie Sie es in den vorherigen Artikeln gelernt haben.</li>
 <li>Machen Sie aus einigen der Inhalte nun Hyperlinks.</li>
 <li>Ergänzen Sie <code>title</code>-Attribute.</li>
</ul>

<h3 id="Blockelemente_als_Links">Blockelemente als Links</h3>

<p>Wie oben schon erwähnt, können Sie fast alle Inhalte in Links umwandeln, auch <a href="/de/Learn/HTML/Einf%C3%BChrung_in_HTML/Lerne_HTML_kennen#Blockelemente_und_Inlineelemente">Blockelemente</a> könne als Verweise fungieren. So könne Sie zum Beispiel ein Bild in einen Link umwandeln indem Sie es in <code>&lt;a&gt;&lt;/a&gt;</code> Tags einbetten.</p>

<pre class="brush: html">&lt;a href="https://www.mozilla.org/de/"&gt;
  &lt;img src="mozilla-image.png" alt="Mozilla Logo welches zur Mozilla Webseite verlinkt"&gt;&lt;/a&gt;
</pre>

<p class="note"><strong>Hinweis</strong>: Sie werden mehr über das Einbinden von Bildern auf Webseiten in einem späteren Artikel erfahren.</p>

<h2 id="Kurzer_Exkurs_zu_URLs_und_Linkpfaden">Kurzer Exkurs zu URLs und Linkpfaden</h2>

<p>Um Linkziele vollständig zu verstehen, müssen Sie zuerst lernen wie URLs und Dateipfade funktionieren.</p>

<p>Eine URL (engl.: Uniform Resource Locator) ist einfach ein String aus Text der definiert wo etwas im Internet zu finden ist. Zum Beispiel ist Mozillas deutsche Webseite unter <code>https://www.mozilla.org/de/</code> zu finden.</p>

<p>URLs benutzen Dateipfade um Dateien zu finden. Diese Pfade geben an, wo in einem Dateisystem eine bestimmte Datei abgelegt ist. Lassen Sie uns ein einfaches Beispiel einer Dateistruktur anschauen (schauen Sie die Struktur von <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/creating-hyperlinks">Erstellen von Hyperlinks</a> an).</p>

<p><img alt="A simple directory structure. The parent directory is called creating-hyperlinks and contains two files called index.html and contacts.html, and two directories called projects and pdfs, which contain an index.html and a project-brief.pdf file, respectively" src="https://mdn.mozillademos.org/files/12409/simple-directory.png" style="display: block; margin: 0 auto;"></p>

<p>Das <strong>Stammverzeichnis</strong>, englisch <strong>root (=&gt; Wurzel)</strong>, dieses Verzeichnisses wurde <code>creating-hyperlinks</code> benannt. Wenn Sie lokal an einer Webseite arbeiten, dann haben Sie ein Verzeichnis (einen Ordner), in dem die ganzen Dateien für diese Webseite abgelegt sind. In diesem Stammverzeichnis hier haben wir eine <code>index.html</code> und eine <code>contacts.html</code>-Datei. Auf einer echten Webseite wäre <code>index.html</code> die Startseite, also die Einstiegsseite zu unserer Internetpräsenz.</p>

<p>Es gibt auch zwei Verzeichnisse in unserem Stammverzeichnis, namens <code>pdfs</code> und <code>projects</code>. Diese enthalten jeweils eine einzelne Datei, einmal eine PDF-Datei (<code>project-brief.pdf</code>) und eine <code>index.html</code>-Datei. Sie sehen, man kann mehrere <code>index.html</code>-Dateien in einem Webprojekt haben, so lange diese in unterschiedlichen Verzeichnissen sind. Die zweite <code>index.html</code>-Datei könnte hier als Einstiegsseite zu projektbezogenen Informationen dienen.</p>

<ul>
 <li>
  <p><strong>Verlinkung im selben Verzeichnis</strong>: Wenn Sie von der <code>index.html</code>-Datei einen Link zu der <code>contacts.html</code>-Datei setzen möchten, welche beide im selben Verzeichnis sind, dann müssen Sie nur den Dateinamen angeben. Die URL die Sie zur Verlinkung benutzen ist also <code>contacts.html</code>:</p>

  <pre class="brush: html">&lt;p&gt;Möchten Sie Kontakt mit uns augfnehmen?
Finden Sie unsere Kontaktinformationen auf unserer &lt;a href="contacts.html"&gt;Kontakt-Seite&lt;/a&gt;.&lt;/p&gt;</pre>
 </li>
 <li>
  <p><strong>Verlinkung in ein Unterverzeichnis</strong>: Wenn Sie von der <code>index.html</code>-Datei im Stammverzeichnis mit einem Link auf die <code>index.html</code>-Datei verweisen möchten, welche in dem Unterverzeichnis <code>projects</code> liegt, dann schreiben Sie das in der URL folgendermaßen: <code>projects/index.html</code> Die Adresse besteht aus dem Namen des Unterverzeichnis, einem Slash und der Zieldatei in dem Verzeichnis:</p>

  <pre class="brush: html">&lt;p&gt;Besuchen Sie meine  &lt;a href="projects/index.html"&gt;Projekt Homepage&lt;/a&gt;.&lt;/p&gt;</pre>
 </li>
 <li>
  <p><strong>Verlinkung in ein höheres Verzeichnis</strong>: Wenn Sie einen Hyperlink von der <code>projects/index.html</code>-Datei zu der <code>pdfs/projects-brief.pdf</code>-Datei setzen möchten, dann müssen Sie ein Verzeichnislevel hoch gehen, um von dort in das Verzeichnis <code>pdfs</code> zu gelangen. Sie gehen in der Verzeichnisstruktur hoch, indem Sie zwei Punkte angeben - <code>..</code>. Die vollständige URL würde als wie folgt aussehen: <code>../pdfs/projects-brief.pdf</code></p>

  <pre class="brush: html">&lt;p&gt;Ein Link zu meiner &lt;a href="../pdfs/project-brief.pdf"&gt;Projektbeschreibung&lt;/a&gt;.&lt;/p&gt;</pre>
 </li>
</ul>

<div class="note">
<p><strong>Hinweis</strong>: Sie können mehrere Schritte kombinieren und so komplexe URL-Pfade angeben, zum Beispiel <code>../../../komplexer/pfad/zu/meiner/datei.html</code>.</p>
</div>

<h3 id="Innerhalb_eines_Dokuments_verlinken">Innerhalb eines Dokuments verlinken</h3>

<p>Es ist möglich innerhalb eines HTML Dokumentes zu einem bestimmten Abschnitt einen Link zu setzen und nicht nur zu dem Dokument selbst. Um dies zu bewerkselligen, müssen Sie erst dem HTML-Element, welches Sie als Linkziel benutzen wollen, ein {{htmlattrxref("id")}}-Attribut geben.
Oft macht es Sinn zu einer bestimmten Überschrift im Dokument zu verlinken. In der Praxis würde das wie folgt aussehen:
</p>

<pre class="brush: html">&lt;h2 id="postanschrift"&gt;Postanschrift&lt;/h2&gt;</pre>

<p>Um zu dieser bestimmten <code>id</code> zu verlinken, können Sie diese am Ende der URL angeben. Sie müssen nur ein Hash- bzw. Rautesymbol davorsetzen, zum Beispiel so:</p>

<pre class="brush: html">&lt;p&gt;Möchten Sie uns einen Brief schicken? Schreiben Sie an unsere  &lt;a href="contacts.html#postanschrift"&gt;Postanschrift&lt;/a&gt;.&lt;/p&gt;</pre>

<p>Sie können diese Art der Referenz auch benutzen, um <em>innerhalb des selben Dokumentes zu verlinken</em>:</p>

<pre class="brush: html">&lt;p&gt;Unsere &lt;a href="#postanschrift"&gt;Postanschrift&lt;/a&gt; kann am Ende der Webseite gefunden werden. &lt;/p&gt;</pre>

<h3 id="Absolute_und_relative_URLs">Absolute und relative URLs</h3>

<p>Zwei Begriffe denen Sie im Internet begegnen werden sind <strong>absolute URL</strong> und <strong>relative URL:</strong></p>

<p><strong>Absolute URL</strong>: Leitet zu einer absoluten, festen Adresse im Internet, inklusive {{glossary("protocol")}} und {{glossary("domain name")}}. Wenn zum Beispiel die HTML-Datei <code>index.html</code> in ein Verzeichnis namens <code>projects</code> hochgeladen wird, welches wiederum im Stammverzeichnis eines Webservers liegt und der Domain Name der Webseite <code>http://www.example.com</code> ist, dann lautet die absolute Adresse der Webseite <code>http://www.example.com/projects/index.html</code>.</p>

<p>Die absolute URL wird immer zu genau der selben Adresse im Internet zeigen, egal wo sie sich befindet.</p>

<p><strong>Relative URL</strong>: Zeigt zu einem Verzeichnis <em>realtiv</em> zu der Datei, in welcher der Link steht, so wie wir es weiter oben im Artikel gemacht haben. Wenn wir zum Beispiel von der Datei <code>http://www.example.com/projects/index.html</code> zu einer PDF-Datei im selben Verzeichnis verlinken möchten, dann brauchen wir nur den Dateinamen angeben (z.B.: <code>project-brief.pdf</code>). Wenn diese PDF-Datei in dem Unterverzeichnis <code>pdfs</code> liegt, welches wiederum in dem Verzeichnis <code>projects</code> zu finden ist, dann würde die relative Adresse wie folgt aussehen: <code>pdfs/project-brief.pdf</code>. Die äquivalente absolute Adresse für die PDF-Datei wäre <code>http://www.example.com/projects/pdfs/project-brief.pdf</code>.</p>

<p>Eine relative URL zeigt auf unterschiedliche Orte, je nachdem wo sich die Datei befindet, in welcher der Link untergebracht ist. Wenn wir zum Beispiel unsere <code>index.html</code>-Datei aus dem <code>projects</code> Verzeichnis in das Stammverzeichnis der Webseite verschieben würden, dann würde die relative URL <code>pdfs/project-brief.pdf</code> darin auf <code>http://www.example.com/pdfs/project-brief.pdf</code> verweisen und nicht mehr auf <code>http://www.example.com/projects/pdfs/project-brief.pdf</code>
</p>

<h2 id="Nutzen_von_Links">Nutzen von Links</h2>

<p>Wie man Links am besten benutzt und ein angenehmes Nutzererlebnis schafft, werden wir uns nun anschauen.</p>


<h3 id="Klare_Benennung_von_Links">Klare Benennung von Links</h3>

<p>Es ist einfach ein paar Links auf eine Webseite zu setzen. Aber das ist nicht genug. Wir müssen dafür sorgen, das alle Benutzer der Webseite diese Links auch benutzen können, egal mit welchem Gerät sie auf die Seite zugreifen. Zum Nachdenken:</p>

<ul>
 <li>Benutzer von Bilschirmlesegeräten springen von Link zu Link auf der Webseite und diese werden ohne Zusammenhang vorgelesen.</li>
 <li>Suchmaschinen benutzen Linktext um die Zieldateien zu indexieren, es ist also gut, wenn der Linktext Schlagwörter enthält die mit dem Inhalt des verlinkten Dokumentes zu tun haben.</li>
 <li>Leser der Webseite scannen die Webseite zuerst durch, anstatt sie direkt Wort für Wort zu lesen. Dabei werden die Augen von hervorgehobenem Text, wie zum Beispiel Links angezogen. Beschreibender Linktext ist sinnvoll, zum schnellen Verständnis worum es auf der Webseite geht.</li>
</ul>

<p>Schauen wir uns ein Beispiel an:</p>

<p><em><strong>Guter</strong> Linktext:</em> <a href="https://firefox.com">Firefox herunterladen</a></p>

<pre class="brush: html">&lt;p&gt;&lt;a href="https://firefox.com/"&gt;
  Firefox herunterladen
&lt;/a&gt;&lt;/p&gt;</pre>

<p><em><strong>Schlechter</strong> Linktext:</em> <a href="https://firefox.com/">Klicke hier</a> um Firefox herunterzuladen</p>

<pre class="brush: html">&lt;p&gt;&lt;a href="https://firefox.com/"&gt;
  Klicke hier
&lt;/a&gt;
um Firefox herunterzuladen&lt;/p&gt;
</pre>

<p>Weitere Tipps:</p>

<ul>
 <li>Wiederholen Sie nicht die URL als Teil des Linktextes, URLs sehen nicht schön aus und Bildschirmlesegeräte geben diese Buchstabe für Buchstabe aus.</li>
 <li>Schreiben Sie nicht "Link" oder "Link zu" in ihrem Linktext. Bildschirmlesegeräte sagen das es sich um einen Link handelt und der Link ist normalerweise als solcher gut zu erkennen. Denn Links sind normalerweise auf eine Weise gestaltet, die sie von der Umgebung absetzt, in einer anderen Farbe und unterstrichen. Diese Konvention sollte auch beibehalten werden, Links sollten immer als solche auf den ersten Blick zu erkennen sein.</li>
 <li>Halten Sie den Linktext so kurz wie möglich - lange Linktexte sind besonders für Benutzer von Bildschirmlesegeräten nervend, denn der Linktext wird immer komplett vorgelesen.</li>
 <li>Vermeiden Sie es den selben Linktext für mehrere Links zu benutzen, die auf unterschiedliche Dokumente verweisen. Benutzer von Bildschirmlesegeräten wird die Navigation erschwert, wenn ihnen mehrmals der Linktext "Klicken Sie hier" vorgelesen wird.</li>
</ul>

<h3 id="Benutzen_Sie_relative_Links">Benutzen Sie relative Links</h3>

<p>Von einem vorangehenden Absatz bekommen Sie vielleich die Idee, dass es gut ist, nur absolute Links zu verwenden, da diese nicht zu toten Links werden können, wenn die Webseite verschoben wird, im Gegensatz zu relativen Links. Es ist aber besser relative Links zu benutzen, wenn Sie innerhalb der <em>selben Webseite</em> verlinken. Um eine <em>andere Webseite</em> zu verlinken müssen Sie natürlich absolute Links benutzen.</p>

<ul>
 <li>Zum einen ist es einfacher den Code später zu lesen und verstehen, denn relative URLs sind meistens viel kürzer als absolute URLs.</li>
 <li>Zum anderen ist es effizienter relative URLs zu benutzen und die Webseite wird insgesamt schneller. Wenn Sie eine absolute URL benutzen, dann wird der Browser eine Anfrage an den Domain Name Server ({{glossary("DNS")}} senden, um herauszufinden, wo die Webseite zu finden ist, was Zeit und Ressourcen in anspruch nimmt (lesen Sie <a href="/de/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Wie das Internet funktioniert</a> um mehr darüber zu erfahren).
Bei einer relativen URL schaut der Browser direkt auf dem selben Server nach der Datei, was um einiges schneller geht, als den Umweg über DNS zu gehen.</li>
</ul>

<h3 id="Klare_Verlinkung_zu_Dateien_die_keine_HTML-Dateien_sind">Klare Verlinkung zu Dateien die keine HTML-Dateien sind</h3>

<p>Wenn Sie zu etwas anderem als einer anderen Webseite verlinken, zum Beispiel einer herunterladbaren Datei (ein PDF oder ein Word-Dokument) oder einem Stream (Video oder Audio) oder ähnlichem, welches unerwartete Effekte hat, wie PopUp-Fenster oder Flash-Animationen, dann sollten Sie das im Linktext deutlich kennzeichnen. Es kann nämlich sehr nervend sein, wenn folgendes passiert:</p>

<ul>
 <li>Wenn Sie eine langsame Internetverbindung haben, einen Link anklicken und auf einmal eine mehrere Megabyte große Datei heruntergeladen wird.</li>
 <li>Wenn Sie keinen Flashplayer installiert haben, auf einen Link klicken und auf einmal auf einer Webseite sind, auf der Flash genutzt wird.</li>
</ul>

<p>Lassen Sie uns ein paar Beispiele anschauen, was für ein Linktext hier genutzt werden kann:</p>

<pre class="brush: html">&lt;p&gt;&lt;a href="http://www.example.com/large-report.pdf"&gt;
  Laden Sie den Verkaufsbericht herunter (PDF, 10MB)
&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="http://www.example.com/video-stream/"&gt;
  Schauen Sie sich das Video an (Stream öffnet in einem separaten Fenster, HD Qualität)
&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="http://www.example.com/car-game"&gt;
  Spielen Sie das Autospiel (benötigt Flash)
&lt;/a&gt;&lt;/p&gt;</pre>

<h3 id="Benutzen_Sie_das_download-Attribut_um_auf_herunterladbare_Dateien_zu_verlinken">Benutzen Sie das download-Attribut um auf herunterladbare Dateien zu verlinken</h3>

<p>Wenn Sie auf eine Datei verlinken, die heruntergeladen werden sollte, anstatt im Browser geöffnet zu werden, können Sie das <code>download</code>-Attribut benutzen, um den Namen der gespeicherten Datei vorzugeben. Hier ist ein Beispiel mit einem Download-Link zu der Windows-Version von Firefox 39:</p>

<pre class="brush: html">&lt;a href="https://download.mozilla.org/?product=firefox-39.0-SSL&amp;os=win&amp;lang=en-US"
   download="firefox-39-installer.exe"&gt;
  Firefox 39 für Windows herunterladen
&lt;/a&gt;</pre>

<h2 id="Aktives_Lernen_Erstellen_Sie_ein_Navigationsmenu">Aktives Lernen: Erstellen Sie ein Navigationsmenu</h2>

<p>In dieser Übung sollen Sie einige Einzelseiten so verlinken, das Sie am Ende eine Webseite mit mehreren Seiten haben, die über ein Navigationsmenü erreicht werden können. Diese Art der Navigation finden Sie auf vielen Webseiten. Die selbe Webseitenstruktur wird auf allen Seiten genutzt, um ein einheitliches Bild einer Webpräsenz zu geben. Wenn Sie auf die Links in der Navigation klicken, scheint sich nur der Inhalt der Webseiten zu verändern, nicht die ganze Seite.</p>

<p>Sie müssen sich lokale Kopien der folgenden vier Seiten machen. Speichern Sie alle in dem selben Verzeichnis (auf GitHub finden Sie unter <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/navigation-menu-start">navigation-menu-start</a> die Liste der benötigten Dateien im Verzeichnis):</p>

<ul>
 <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/index.html">index.html</a></li>
 <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/projects.html">projects.html</a></li>
 <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/pictures.html">pictures.html</a></li>
 <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/social.html">social.html</a></li>
</ul>

<p>Aufgaben:</p>

<ol>
 <li>Fügen Sie eine ungeordnete Liste an dem angezeigten Platz in einer der Dateien ein. Diese Liste soll alle Namen der zu verlinkenden Seiten beinhalten. Ein Navigationsmenü ist tatsächlich nur eine Liste von Links, semantisch ist dies also der richtige Weg eine Navigation zu erstellen.</li>
 <li>Verändern Sie jeden Seitennamen in einen Link.</li>
 <li>Kopieren Sie das fertige Navigationsmenü und fügen es auf alle Seiten ein. </li>
 <li>Auf jeder einzelnen Seite löschen Sie den Link zu der Seite selbst. Es ist sinnlos auf einer Seite einen Link zu sich selbst zu beinhalten. Dazu dient der visuelle Unterschied als Indikator, auf welcher Seite man sich gerade befindet.</li>
</ol>

<p>Wenn Sie fertig sind, dann sollte die Webseite wie folgt aussehen:</p>

<p><img alt="An example of a simple HTML navigation menu, with home, pictures, projects, and social menu items" src="https://mdn.mozillademos.org/files/12411/navigation-example.png" style="display: block; margin: 0 auto;"></p>

<div class="note">
<p><strong>Hinweis</strong>: Falls Sie stecken bleiben und nicht weiter wissen, dann können Sie sich unsere korrekte Lösung anschauen: <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/navigation-menu-marked-up">navigation-menu-marked-up</a></p>
</div>

<h2 id="E-mail_Links">E-mail Links</h2>

<p>Es ist möglich Links oder Buttons zu erstellen, die wenn man Sie anklickt, eine neue ausgehende E-Mail Nachricht öffnen, anstatt zu einer Webseite oder einer anderen Datei zu verlinken. Das wirt bewerkstelligt indem man das {{HTMLElement("a")}}-Element zusammen mit dem <code>mailto:</code> URL Schema benutzt.</p>

<p>In seiner einfachsten und am meisten genutzten Form, gibt ein <code>mailto:</code> Link  einfach nur die E-Mail Adresse des Empfängers an. Beispiel:</p>

<pre class="brush: html">&lt;a href="mailto:niemand@mozilla.org"&gt;Senden Sie eine E-Mail an Niemand&lt;/a&gt;
</pre>

<p>Damit erstellen Sie einen Link der folgendermaßen aussieht:
<a href="mailto:niemand@mozilla.org">Senden Sie eine E-Mail an Niemand</a>.</p>

<p>Tatsächlich ist auch die angabe einer E-Mail Adresse optional. Wenn Sie diese weglassen, also nur <code>mailto:</code> schreiben, dann wird eine neue ausgehende E-Mail erstellt, ohne einen vorgegebenen Empfänger. Dies kann genutzt werden, um <em>Teilen</em>-Links zu erstellen, bei denen Benutzer eine E-Mail an Freunde schicken können.</p>

<h3 id="Details_angeben">Details angeben</h3>

<p>Ausser der E-Mail Adresse können Sie auch andere Informationen angeben. Alle Standard E-Mail Kopffelder können über <code>mailto</code> vorausgefüllt werden, dazu gehören <em>subject</em> (Betreff), <em>cc</em> und <em>body</em> (Um eine vorgegeben Nachricht anzuzeigen). </p>

<p>Hier ist ein Beispiel das cc, bcc, subject und body beinhaltet:</p>

<pre class="brush: html">&lt;a href="mailto:niemand@mozilla.org?cc=name2@rapidtables.com&amp;bcc=name3@rapidtables.com&amp;amp;subject=Der%20Betreff%20von%20der%20Email &amp;amp;body=Die%20Nachricht%20in%20der%20Email"&gt;
  Senden Sie eine E-Mail mit cc, bcc, subject and body
&lt;/a&gt;</pre>

<div class="note">
<p><strong>Hinweis:</strong> Die Werte der Felder müssen URL gerecht geschrieben sein, dass heißt mit speziellen Charakteren anstatt Leerzeichen, Umlauten und Sonderzeichen. Bemerken Sie auch die Verwendung des Fragezeichens (<code>?</code>), um die eigentliche URL von den Feldwerten abzugrenzen und das Und-Zeichen (&amp;), um die Feldwerte voneinander zu trennen. Dies ist Standard URL-Query Notation. Sie werden mehr darüber in einem fortgeschrittenen Modul lernen.</p>
</div>

<p>Hier sind noch ein paar Beispiele für <code>mailto</code> URLs:</p>

<ul>
 <li><a href="mailto:">mailto:</a></li>
 <li><a href="mailto:niemand@mozilla.org">mailto:niemand@mozilla.org</a></li>
 <li><a href="mailto:niemand@mozilla.org,nobody@mozilla.org">mailto:niemand@mozilla.org,nobody@mozilla.org</a></li>
 <li><a href="mailto:niemand@mozilla.org?cc=nobody@mozilla.org">mailto:niemand@mozilla.org?cc=nobody@mozilla.org</a></li>
 <li><a href="mailto:niemand@mozilla.org?cc=nobody@mozilla.org&amp;subject=Dies%20ist%20der%20Betreff">mailto:niemand@mozilla.org?cc=nobody@mozilla.org&amp;subject=Dies%20ist%20der%20Betreff</a></li>
</ul>

<h2 id="Zusammenfassung">Zusammenfassung</h2>

<p>Jetzt haben Sie schon sehr viel über Hyperlinks gelernt! Wir werden uns später im Kurs noch einmal mit ihnen beschäftigen, wenn es darum geht, Links zu gestalten. Als nächstes schauen wir uns noch ein paar HTML-Elemente an, mit denen Text formatiert und semantisch dargestellt werden kann. Um Fortgeschrittene Textformatierung geht es im nächsten Artikel.</p>

<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}</p>