Kodokon kodokon.com

Links und Bilder

Erstelle Links zu anderen Seiten und zeige Bilder mit den Tags a und img an.

7 Min. · 3 Fragen

Diese Lektion in Kodokon öffnen

Das "HyperText" in HTML ist genau die Fähigkeit, Seiten mit Links miteinander zu verbinden. Ein Link wird mit dem <a>-Tag erstellt (kurz für anchor, Anker). Sein Ziel wird durch das Attribut href (hypertext reference, Hypertext-Referenz) angegeben, das eine URL enthält: die Adresse einer Webseite, wie https://en.wikipedia.org. Der Text zwischen <a> und </a> wird anklickbar.

HTML
<p>My favorite pages:</p>
<a href="https://en.wikipedia.org">Visit Wikipedia</a>
<a href="contact.html">See the contact page</a>
Ein Link zu einer anderen Website, dann ein Link zu einer Seite auf deiner eigenen Website.

Um ein Bild anzuzeigen, verwendest du das <img>-Tag. Es ist ein selbstschließendes Tag: Es hat keinen Inhalt und kein schließendes Tag - alles steht im Tag selbst. Zwei Attribute sind unverzichtbar. src (source, Quelle) gibt an, wo sich die Bilddatei befindet. alt (alternative text, Alternativtext) beschreibt das Bild in Worten: Dieser Text wird angezeigt, wenn das Bild nicht geladen werden kann, und er wird von den Screenreadern vorgelesen, die sehbehinderte Menschen benutzen.

HTML
<img src="images/cat.jpg" alt="A sleeping ginger kitten">
<img src="logo.png" alt="My site's logo">
<img src="beach.jpg" alt="A beach at sunset">
Drei Bilder: src gibt die Datei an, alt beschreibt sie in Worten.

Du kannst beides kombinieren: Ein Bild, das in einem <a>-Element steht, wird anklickbar. Genau das tun die Logos von Websites - sie bringen dich zurück zur Startseite, wenn du sie anklickst.

HTML
<a href="https://en.wikipedia.org">
  <img src="wiki-logo.png" alt="Wikipedia logo">
</a>
Ein anklickbares Bild: Das img-Element steht im a-Element.

Wissenscheck

Stelle sicher, dass du die wichtigsten Punkte dieser Lektion behalten hast.

  1. Welches Attribut enthält die Zieladresse eines Links?
    • src
    • href
    • alt
    • lang
  2. Wofür ist das alt-Attribut eines Bildes da?
    • Das Bild beschreiben, falls es nicht angezeigt wird
    • Die Größe des Bildes festlegen
    • Die Adresse der Bilddatei angeben
  3. Hat das <img>-Tag ein schließendes Tag?
    • Ja, du musst immer </img> schreiben
    • Nein, es ist ein selbstschließendes Tag
    • Nur wenn das Bild groß ist