Bei der bisher beschriebenen Methode Grafiken ein zu binden, sind die Grafiken einfach im Text erschienen.
Dass das, besonders bei großen Bildern, nicht schön ist, ist klar. Natürlich kann man vor und nach dem Bild einfach einen Absatzwechsel einfügen. Dann steht neben dem Bild kein Text. Den Absatz kann man dann linksbündig, rechtsbündig oder zentriert ausrichten. Wie das geht, habe ich im Kapitel Absatzformatierung schon beschrieben. Es funktioniert mit Bildern genau wie mit Texten.
Wenn man möchte, dass der Text das Bild umfließt, verwendet man align="left" bzw. align="right". Das Bild wird dann in der jeweils nächsten Zeile links- bzw. rechtsbündig eingesetzt. Der Text, der im Quelltext nach dem Bild kommt, wird zunächst nach dem Text, der im Quelltext vor dem Bild kommt, weiter geschrieben bis die Zeile voll ist. Dann wird neben dem Bild weiter geschrieben. Auch ein neuer Absatz, eine Tabelle oder ein neues Bild erscheint neben dem Bild. Wenn man möchte, dass der neue Absatz erst unter dem Bild beginnt, muss man, wie bei der Ausrichtung von Tabellen beschrieben, <br clear="all"> als Zeilenumbruch verwenden.
Es gibt noch weitere Ausrichtungsmöglichkeiten nach align=, die aber nicht im Html-Standard enthalten sind und auch nicht von allen Browsern interpretiert werden. Sie sind nur selten sinnvoll und werden hier nicht weiter erläutert.
Besonders bei Bildern ohne transparenten Hintergrund wird es oft als störend empfunden, dass der Text unmittelbar um das Bild fließt. Etwas mehr Abstand wäre schöner.
Mit <img src="blinde.gif" width="358" height="236" align="left" hspace="10" vspace="5"> kann man den Abstand des Bildes zum Text bestimmen. hspace steht dabei für "horizontal space". Das ist englisch und heißt "waagerechter Raum (Platz, Abstand…)". Die Angabe in den Anführungszeichen gibt den Abstand in Pixel an. Entsprechend steht vspace für "vertical space" und heißt senkrechter Abstand. Der senkrechte Abstand gilt oben und unten, der waagerechte gilt links und rechts. Wenn der Abstand oben anders als unten und/oder links anders als rechts sein soll, muss man sich mit Tricks behelfen. Dazu kann man das Bild in eine (rahmenlose, und damit unsichtbare) Tabelle setzten und/oder mit blind.gif's arbeiten. Was das ist erkläre ich im nächsten Kapitel. Außerdem kann das <img>Tag Universalattribute enthalten (margin). Damit kann man das Bild nahezu beliebig positionieren und Abstände einrichten.
Weiter geht's mit dem Kapitel blind.gif.
Um einen Link zu setzen, der direkt auf diese Seite führt,
verwende folgende Url: