Materialien zum Unterricht
Bilder 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="mauerturm_200.jpg" width="200" height="307">
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. width und height geben die Höhe des Bildes in Pixeln an. Diese beiden Werte können weggelassen werden, beschleunigen aber den Seitenaufbau.
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.
Als Bildbearbeitungsprogramm eignet sich das kostenlose Gimp. Näheres dazu findet man im Fotokurs.
Lade das Bild mauerturm.jpg. Das Bild ist viel zu groß für eine Internetseite, 777 x 1191 Pixel. Es soll auf ein Breite von 200 px verkleinert werden, die Höhe muss sich proportional ändern. Wähle in Gimp nach dem Laden des Bildes Im folgenden Dialog wird die Breite auf 200 Pixel eingestellt. Die Höhe berechnet sich nach ENTER automatisch. Die X-Auflösung und Y-Auflösung ist für das Web ausreichend, für einen Fotodruck sind 300 Pixel/in notwendig. Nach ist das Bild verkleinert, kann gespeichert und in die Seite eingefügt werden. |
 |
Das Bild sollte im gleichen Verzeichnis wie die HTML-Seiten gespeichert werden.