Bilder in Websites einbauen ist einfach – dass sie auch gut aussehen ist jedoch nicht trival. Mit einem kleinen Code-Schnipsel können Sie alle Bilder optimal einbauen. Das Layout wirkt professioneller. Hier mal zwei Beispiele: Der HTML-Code zum Einbau eines Bildes mit der Angabe von Höhe und Breite lautet:
<img src="Bildpfad/bild.jpg" width="100" height="80">
Wenn Sie Höhe und Breite angeben, weiß der Browser von vornherein wie viel Platz er freihalten muss, und baut die Seite gleich richtig auf. Wie Sie sehen wird das Bild jedoch nicht schön umflossen, sondern nur eine Zeile beginnt am Ende des Bildes. Darum sollten Sie den Quelltext immer um die folgende Standardangabe erweitern.
style="margin: 0px 5px 5px 0px; float:left; border:0;"
Der erste Bereich margin gibt die Abstände zum Text an: der erste Wert den Abstand nach oben, der zweite den Abstand nach rechts, der dritte den Abstand nach unten und der letzte den Abstand nach links. float=left gibt an dass das Bild links ist und umflossen wird, und border=0 bedeutet, dass wenn das Bild verlinkt ist kein störender Rand um das Bild gelegt wird. Im oberen Beispiel sehen Sie einen zusätzlichen Rahmen, der hier schwarz ist, aber auch blau oder rot sein könnte. Diesen Codeschnipsel sollten Sie abspeichern und immer parat haben. Natürlich lassen sich Bilder idealerweise über die Styles definieren;-)
