Links und Bilder einbinden
Mit a und href setzt man Links. Mit img, src und alt bindet man Bilder ein.
Das lernst du heute
- Ich kann einen Link in HTML schreiben.
- Ich kann ein Bild mit src und alt einbinden.
- Ich weiß, warum ein alt-Text wichtig ist.
Das brauchst du schon: Vielleicht hilft dir zuerst diese Lektion: Tags und Elemente
Ein Link steht im Element a. Das Attribut href enthält das Ziel. Der Inhalt des Elements ist der Linktext, den man anklickt: <a href="https://www.example.org">Beispielseite</a>.
Ein Bild steht im Element img. Es hat keinen Inhalt und kein End-Tag. Das Attribut src nennt die Bilddatei, zum Beispiel src="bilder/katze.jpg". Das heißt: Im Ordner bilder liegt die Datei katze.jpg. Das Attribut alt enthält eine kurze Beschreibung des Bildes. Screenreader lesen sie vor. Sie erscheint auch, wenn das Bild nicht lädt.
Wähle Linktexte, die das Ziel nennen, zum Beispiel „Fahrplan der Schulbusse“. „Hier klicken“ sagt zu wenig. Nutze Bilder nur, wenn du sie selbst gemacht hast oder frei nutzen darfst. Fotos von Personen brauchen deren Erlaubnis.
| Zeile | Quelltext |
|---|---|
| 1 | <a href="https://www.example.org">Beispielseite</a> |
| 2 | <img src="bilder/katze.jpg" alt="Eine graue Katze auf einem Sofa"> |
Link und Bild bauen
- Link: Starte mit <a href="…">. Trage das Ziel bei href ein.
- Schreibe den Linktext und schließe mit </a>.
- Bild: Starte mit <img src="bilder/katze.jpg".
- Ergänze alt mit einer kurzen Beschreibung und schließe mit >.
Ich verstehe das noch nicht
Such dir aus, was dir hilft.
Noch einfacher erklärt
Link: a mit href.
Bild: img mit src.
alt: Beschreibung des Bildes.
Ein Beispiel
Ein Wegweiser nennt ein Ziel. Der Link ist der Wegweiser. Der alt-Text ist die Beschreibung für alle, die das Bild nicht sehen.
Schritt für Schritt
Wir schreiben einen Link zur Seite hobby.html mit dem Text „Mein Hobby“.
- Start-Tag: <a href="hobby.html">.
- Linktext: Mein Hobby.
- End-Tag: </a>.
- Zusammen: <a href="hobby.html">Mein Hobby</a>.
Mit einem Bild erklärt
| Attribut | Aufgabe |
|---|---|
| href | Ziel des Links |
| src | Datei des Bildes |
| alt | Beschreibung des Bildes |
Zur Grundlage zurück
- Tags und Elemente – Du kennst Tags und Attribute.
Jetzt zusammen
Wir lösen die Aufgabe gemeinsam. Nutze die Hilfen, wenn du sie brauchst.
Zeig mir den ersten Schritt
Denke an das Element a.
Lösung ansehen
Lösung: href
Jetzt du
Jetzt probierst du es allein.
Zeig mir den ersten Schritt
Wer das Bild nicht sieht, braucht einen Text.
Lösung ansehen
Lösung: eine kurze Beschreibung des Bildes
Tipp: Der alt-Text beschreibt, was auf dem Bild zu sehen ist. Er ersetzt das Bild für Menschen, die es nicht sehen.
Merksatz: a mit href = Link. img mit src und alt = Bild. alt beschreibt das Bild in Worten.
Typischer Fehler: Viele schreiben als alt-Text „Bild“. Das hilft niemandem. Beschreibe, was zu sehen ist.
Mini-Quiz
4 kurze Fragen, ohne Noten. Bei jeder Frage kannst du dir die Lösung ansehen.
Lösung ansehen
Lösung: img
Lösung ansehen
Lösung: Stimmt nicht
Lösung ansehen
Lösung: Fahrplan der Schulbusse
Lösung ansehen
Lösung: den Ordner, in dem die Datei liegt
Geschafft
Links stehen in a mit href. Bilder stehen in img mit src und alt. Der alt-Text beschreibt das Bild.
Kannst du das schon?
Hake ab, was du schon kannst. Was noch fehlt, schaust du dir einfach noch einmal an.
Übungsheft Webseiten mit HTML
Kurz erklärt, 44 Aufgaben in drei Stufen und alle Lösungen. Kostenlos.
Das Heft ist für alle kostenlos – auch wenn gerade kein Geld dafür da ist. Wer es einrichten kann, unterstützt DYS+ Campus mit einem selbst gewählten Betrag. Freiwillig unterstützen