Modul 4
Listen Links und Bilder
Für Ausrüstung oder Lieblingsdinge ist eine Liste übersichtlicher als ein langer Satz. Mit einem Link verweist du auf eine andere Seite. Mit einem Bild zeigst du etwas zu deinem Hobby.
Eine Liste und ein Link Schritt für Schritt
Beginne eine Aufzählung mit <ul>. Schreibe für jeden Gegenstand eine eigene Zeile mit <li> und </li>. Schließe die ganze Liste mit </ul>. Der Browser setzt die Punkte automatisch. Wenn die Reihenfolge wichtig ist, zum Beispiel bei drei Arbeitsschritten, verwendest du ol statt ul.
Ein Link hat zwei Teile. Zwischen den Anführungszeichen bei href steht die Adresse. Zwischen <a …> und </a> steht der Text, auf den man klickt. Schreibe zum Beispiel Zur Webseite unserer Schule. So kann ein Besucher das Ziel schon vor dem Klicken erkennen.
Wie der Browser dein Bild findet
Speichere das Bild zuerst im Unterordner bilder. Der Pfad bilder/hobby.svg bedeutet: Öffne von index.html aus den Ordner bilder und darin die Datei hobby.svg. Liegt dein Foto unter fahrrad.jpg, muss der Pfad bilder/fahrrad.jpg heißen. Auf vielen Servern ist auch Groß- und Kleinschreibung wichtig.
alt beschreibt kurz, was auf dem Bild zu sehen ist, zum Beispiel Rotes Mountainbike auf einem Waldweg. Dieser Text hilft auch Menschen, die die Seite vorlesen lassen. width="320" gibt eine Breite in Pixeln vor. Schreibe unter das Bild zusätzlich, woher es stammt.
ul erzeugt eine Liste mit Aufzählungspunkten, ol eine nummerierte Liste. Jeder Eintrag steht in li. Beim Link enthält href die Zieladresse. Beim Bild enthält src den Dateipfad. alt beschreibt den Bildinhalt in Worten. img hat keinen End-Tag.
Die Bausteine
| Schreibweise | Bedeutung |
|---|---|
| <ul> … </ul> | Liste mit Punkten. |
| <ol> … </ol> | Liste mit Nummern. |
| <li> … </li> | Ein einzelner Listeneintrag. |
| <a href="https://www.htl-lienz.at/">Schule</a> | Ein Link mit lesbarem Text. |
| <img src="bilder/hobby.svg" alt="…" width="320"> | Ein Bild mit Breite und Textalternative. |
Liste Link und Bild im body
<h2>Meine Ausrüstung</h2>
<ul>
<li>Bauteile</li>
<li>Werkzeug</li>
<li>Notizbuch</li>
</ul>
<p><a href="https://www.htl-lienz.at/">
Zur Webseite unserer Schule
</a></p>
<img src="bilder/hobby.svg"
alt="Blauer Modellroboter" width="320">Lege in deinem Projekt den Unterordner bilder an. Kopiere die Kursgrafik hobby.svg hinein. Liegt dein eigenes Foto dort unter hobby.jpg, musst du im src auch bilder/hobby.jpg schreiben. Dateiname und Endung müssen genau passen.
Deine Aufgabe
Arbeite in deinem Ordner mein-hobby weiter. Bearbeite die Schritte der Reihe nach. Verwende dein eigenes Hobby und formuliere eigene Sätze. Speichere nach jedem größeren Arbeitsschritt und sieh dir das Ergebnis im Browser an.
- Ergänze unter einer passenden Überschrift eine ul-Liste mit mindestens fünf Dingen für dein Hobby. Schreibe bei jedem Eintrag in wenigen Worten dazu, wofür du das Ding brauchst.
- Erstelle außerdem eine ol-Liste mit drei Schritten für den Beginn deines Hobbys. Die Schritte sollen in einer sinnvollen Reihenfolge stehen.
- Lege den Unterordner bilder an. Kopiere ein eigenes Foto oder die Kursgrafik hinein. Notiere dir den vollständigen Dateinamen mit Endung, bevor du den img-Tag schreibst.
- Füge das Bild unter einem passenden Absatz ein. Setze src auf deine Datei, ergänze einen treffenden alt-Text und beginne mit width="320".
- Schreibe unter das Bild zwei bis drei Sätze. Beschreibe, was es zeigt und warum es zu deinem Hobby passt. Ergänze die Bildherkunft, zum Beispiel Bild: eigene Aufnahme.
- Füge einen Link zur Schulwebsite oder zu einer passenden Informationsseite ein. Gib ihm einen verständlichen Linktext und erkläre in einem Satz, was dort zu finden ist.
- Speichere und öffne die Seite im Browser. Klicke den Link an und kehre zurück. Wenn das Bild fehlt, vergleiche Ordnername, Dateiname und Endung mit deinem src.
Zwei Listen, ein sinnvoll beschrifteter Link und ein Bild mit Beschreibung und Herkunftsangabe.
Zum Abschluss
Kreuzworträtsel
Sechs Begriffe aus diesem Modul. Ein Kästchen steht für einen Buchstaben. Schreibe groß, ohne Leerzeichen: Ä = AE, Ö = OE, Ü = UE, ß = SS. Fülle das Rätsel auf deinem Handout aus.
Waagrecht →
- 3. Diesen Wert legt width fest. (6 Buchstaben)
- 4. Darauf klickst du, um eine Zielseite zu öffnen. (4 Buchstaben)
- 5. Dieses fügst du mit img ein. (4 Buchstaben)
Senkrecht ↓
- 1. Er zeigt dem Browser den Weg zur Bilddatei. (9 Buchstaben)
- 2. Der Bereich bilder im Projekt ist ein Unter… (gesuchter Grundbegriff). (6 Buchstaben)
- 4. Mehrere li-Einträge bilden gemeinsam eine … (5 Buchstaben)
Drei Abschlussfragen
- Wann verwendest du ul und wann ol?
- Erkläre den Pfad bilder/hobby.jpg.
- Formuliere einen passenden alt-Text für dein eigenes Bild.
Online-Quiz
Zehn Fragen, jeweils eine richtige Antwort. Klicke dich durch und erhalte am Ende deine Punkte mit kurzen Erklärungen. Keine Anmeldung nötig.
Online-Quiz starten · Modul 4