Einführung HTML
20.01.2015 Sd 31
Bilder / Grafiken 1
<img src=„Bild1.jpg“ width=„350“ height=„300“
border=„4“ align=„right“ alt=„Hinweis zum Bild“>
<img> hat keinen Endetag
Das Bild wird immer in dem Ordner gesucht, in dem sich die HTML-Datei befindet, ansonsten muss man den richtigen Pfad angeben.
Das Attribut alt sollte nicht fehlen. Es gibt einen Hinweis, falls das Bild nicht gefunden wird
border: Rahmen um das Bild
Einführung HTML
20.01.2015 Sd 32
Bilder / Grafiken 2 Attribut align im img-Tag:
<p> <img src=„Bild1.jpg“ align=„right“
alt=„Hinweis zum Bild“> </p>
Attribut align im p-Tag:
<p align=„left“> <img src=„Bild1.jpg“
alt=„Hinweis zum Bild“> </p>
Aufgabe: Füge vor und hinter dem img-Tag Text ein und
beobachte den Textfluss, wenn das Attribut „align“ im p-Tag oder im img-Tag steht
Einführung HTML
20.01.2015 Sd 33
Bilder kacheln / Hintergründe
1. Bild mit 3 mal 3 Pixel mit Grafik-Programm erzeugen 2. <body background=„Hintergrund01.jpg>……..</body
1. Bild mit 1200 mal 3 Pixel mit Grafik-Programm erzeugen 2. Farbverlauf erzeugen, z.B. mit „Photofiltre“ (freeware) 3. <body background=„Hintergrund02.jpg>……..</body
Als Ergebnis ergeben sich „gekachelte“ Bilder (d.h., das Bild wird solange kopiert, bis der Bildschirm gefüllt ist). Damit kann man z.B. auch aus einem sehr kleinen Bild einen ganzen Bildschirm füllen, ohne dass man das
„Kacheln“ direkt sieht.