In Zeiten von komplexen CMS- und Blogsystemen ist es nicht mehr nötig HTML selbst zu programmieren. Es ist aber natürlich hilfreich, wenn man selbst etwas ändern kann. Das beste Beispiel betrifft das Einbinden von Bildern. In der Grundeinstellung sind Bilder oft vernachlässigt. Mit etwas Grundwissen und etwas HTML kann man Bilder und Grafiken optimal einbinden.
Bilder in HTML-Seiten und Blogs einbinden
Der Grundbefehl für Bilder lautet
<img src="text.gif" width="311" height="194" />
Dann beginnt allerdings der Text unten am Bildrand, und ist ganz dicht am Bild. Das schaut nicht besonders schön und auch nicht professionell aus. Ansprechender ist es einen kleinen Abstand zum Bild zu lassen. Zudem sollte der Text in der selben Höhe wie das Bild beginnen. Hierfür fügen Sie die folgende Anweisung in den Bild-Befehl ein:
style="margin: 0px 5px 5px 0px; float: left;border:0;"
Nun hat der Text einen Abstand von 5 Pixeln und fängt am Bildrand an zu fließen. Diesen Textschnipsel können Sie in jedes Bild einfügen der passt fast immer. Damit Sie ihn auch selbst anpassen können ist hier die Erläuterung: margin ist der Abstand, in der REihenfolge wird der Abstand vom Bild nach oben, rechts, unten und links notiert. Also hier Abstand nach rechts und nach unten 5 Pixel. Float: left bedeutet, dass das Bild links steht und der Text es rechts umfließt. Die Border-Anweisung verhindert, dass, wenn Sie das Bild verlinken, ein unschöner Rand um das Bild gelegt wird.
Text unter der Grafik
Möchten Sie dass der Text nicht neben der Grafik beginnt, weil diese zu breit ist, sondern komplett in der nächsten Zeile, dann notieren Sie folgendes nach dem Grafik-Befehl: <br clear=“all“>
Mhh wirklich toller Tipp, dankeschön! Meine Grafiken sahen bisher immer so aus wie das nicht so tolle Probebeispiel – Aber jetzt weiß ich ja wies geht – Wirklich toll für Perfektionisten wie mich 😉