HTML-Code verstehen

Bilder

Ziele

  • Du erklärst, wie ein Bild in HTML einfügt wird.
  • Du kennst einfache Attribute zur Änderung von Bildeigenschaften.

Einfügen von Bildern

Wenn du ein Bild einfügen möchtest, verwendest du den Tag <img>. Dafür musst du die Quelle (engl. source) angeben, an der das Bild zu finden ist. Ein vollständiger Befehl könnte so aussehen:

<img src="img/mein_bild.jpg">

Setzen von Attributen

Da es sein kann, dass einige Eigenschaften des Bildes wie beispielsweise die Größe noch nicht passen, kann man den Wert der Bildattribute verändern.
Die Breite des Bildes kann man mit width="500" in der Einheit Pixel angeben. Die Höhe wird automatisch im richtigen Seitenverhältnis angepasst. Analog kannst du natürlich auch die Höhe height setzen.

Text kann Bilder umfließen. Ob das Bild links oder rechts vom Text angeordnet wird, lässt sich mit align="right/left" beeinflussen. Die Default-Einstellung, d.h. du gibst dieses Attribut nicht an, ist kein Text links oder rechts neben einem Bild.

Screenshot: eingefügtes Bild im WYSIWYG-Modus Screenshot: eingefügtes Bild im Quelltext-Modus

Öffne dein Dokument sonnensystem.html nachdem du das "Bilder bearbeiten" abgeschlossen hast. Wechsle nun in den Quelltextmodus und suche den Tag <img>.
Versuche aus dem Attribut align herauszulesen, ob Text das Bild links, rechts oder gar nicht umfließt.

Computer-Eule