Dieser Beitrag ist Teil des CSS Kurses.
Hyperlinks sind die Fäden, die das WorldWideWeb zusammenhalten. Sie verlinken von einer Webseite auf die andere. Sie können sich dieses Element wie eine Ankerkette vorstellen, die eine Webseite mit der anderen verbindet. In diesem Beitrag lernen Sie solche Links zu erstellen.
Das HTML Element für einen Link beginnt mit <a> (engl. anchor = Anker) und wird mit </a> abgeschlossen. Dazwischen steht der Text oder die Grafik. Nach dem Klick auf den Text bzw. das Bild wird der Besucher zum Ziel geleitet. Innerhalb des Elements vergeben Sie mit dem Attribut href noch die Referenz, also das Ziel Ihrer Verlinkung.


<a href="https://www.denisreis.com">Homepage</a>

Mit dem Attribut title können Sie eine Beschreibung zu Ihrem Link angeben. Diese wird angezeigt, wenn Ihr Besucher mit der Maus über dem Link verweilt. Mit dem Attribut target können Sie steuern ob die neue Webseite im selben Fenster oder in einem neuen (_blank) Fenster angezeigt werden soll.


<a href="https://www.denisreis.com" title="Startseite" target="_blank">Homepage</a>

Probieren Sie es selbst aus!

Um innerhalb einer Webseite zu springen, können Sie die von Ihnen gewählten IDs oder den Namen eines Bereichs benutzen. Wenn Ihr Inhalt in dem Bereich <div id="inhalt"> steht können Sie mit dem folgenden Code einen Link zu diesem erstellen.


<a href="#inhalt">Zum Inhalt springen</a>

Alternativ können Sie mit dem Attribut name einen Namen für eine bestimmte Position vergeben und dann auf diese verweisen.


<a name="inhalt"></a>

Quellen und weiterführende Literatur:
Peter Müller (2013): Flexible Boxes

Falls Ihnen dieser Beitrag weitergeholfen hat, wäre es eine sehr nette Anerkennung meiner Arbeit wenn Sie z.B. Ihre Bücher über Amazon bestellen würden. Wenn Sie ein Produkt kaufen, erhalte ich dafür eine Provision. Für Sie ändert sich am Preis des Produktes gar nichts. Ich möchte mich an dieser Stelle jetzt schon für Ihre Unterstützung bedanken.

0 Kommentare

Hinterlasse ein Kommentar

An der Diskussion beteiligen?
Hinterlasse uns deinen Kommentar!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.