Bilder in HTML-Dokumenten
Aufgabe
Analysiere den Quelltext und nimm dabei folgende Änderungen vor:
- Ersetze das aktuelle Bild eines Mikrofons durch das Bild „note.png“
- Verringere die Breite des Bilds und verschiebe es an den linken Bildrand.
-
Man kann auch ein Bild aus dem Internet einfügen, indem man nach src die Adresse des Bildes einfügt.
Suche im Internet nach einem geeigneten Bild, klicke mit der rechten Maustaste darauf und wähle „Bildadresse kopieren“ und. Füge das Bild im Editor in src = " – Link hier her – " (Rechtsklick einfügen) ein. - Natürlich kannst du auch ein Bild von deinem Computer hier auf der Seite hochladen und dann in die Webseite einfügen.
Vielleicht hast du dich schon gewundert, warum der Tag für das Einfügen eines Bildes nicht mit einem schließenden Tag endet. Zudem steht in den spitzen Klammern neben dem Wort <img> noch Zusatzinformation.
Die HTML-Syntax erlaubt diese Möglichkeit bei bestimmten Tags.
Einzel-Tags mit Attributen
Das <img>-Tag ist ein Einzel-Tag, das kein Schließtag benötigt.
Innerhalb des <img>-Tags gibt man Attribute (Eigenschaften) für ein Bild an.
In dem Beispiel
<img src="Hogwarts.png">
bedeutet src "source" (englisch für Quelle) und gibt den Speicherort des Bildes an.
