Materialien zum Unterricht

Bilder einfügen

Wappen im Kopf einfügen

Bilder werden in HTML nicht direkt in das Dokument eingefügt, sondern es wird an der entsprechenden Stelle auf das Bild verwiesen.

<img src="wappen.png" >

img ist der Tag für das Bild. Das Attribut src gibt die Quelle des Bildes an (source). Als Eigenschaft wird dem Attribut der Name der Bilddatei übergeben.

Damit ein Bild schnell und ordentlich aufgebaut wird, muss es auf die Größe skaliert werden, in der es auf der Seite erscheinen soll.

Man kann ein Bild auch größer als die gewünschte Darstellung auf dem Server ablegen und mit width und height die Größe anpassen. Das ist aber pure Verschwendung, da das große Bild erst übertragen wird und dann klein gequetscht wird

Zum Verkleinern eignet sich jedes Bildberarbeitungsprogramm oder der Bildbetrachter IrfanView.

Lade das Bild wappen.png.
Verkleinere das Bild auf eine Höhe von 80 px. Die Breite muss sich proportional ändern.
Speichere das Bild im Ordner der HTML-Seite!
Binde das Bild im Quelltext ein:
Damit das Bild in gleicher Höhe wie die Schrift angeordnet wird, muss es vertical in die Mitte gerückt werden.
```
<img src="wappen.png" style="vertical-align:middle" />
```

Bild im Text einfügen

Lade das Bild burgberg.jpg, verkleinere es und füge es direkt nach dem <main>-Tag ein.

Damit das Bild ordentlich in den Text eingebunden wird, muss es nach rechts verschoben werden und der Text muss am Bild vorbeifließen. Das erreicht man, in dem man dem Bild die Formatierung

"float:right"

gibt.