Bilder in ein HTML Dokument einfügen
Wie du am Steckbrief sehen kannst, kann man auch Bilder in ein HTML Dokument einfügen.
Aufgabe 1
Analysiere den Quelltext und nimm dabei folgende Änderungen vor:
- Schreibe eine Überschrift "Das ist der Hogwarts-Express:".
- Füge unter der neuen Überschrift ein weiteres Bild mit der Quelle "Zug.png" ein.
- Schreibe eine kleinere Überschrift "Hier lebt Harry:".
-
Man kann auch ein Bild aus dem Internet einfügen, indem man nach src die Adresse des Bildes einfügt.
Hier findest du z.B. ein Bild von Hogwarts. Klicke mit der rechten Maustaste auf das Bild und wähle "Bildadresse kopieren" und füge diese 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.
