Protokoll vom 22.05.2014

Heute haben wir uns mit dem Einbinden und Gestalten von Bildern beschäftigt. Normalerweise behandelt HTML jedes Element als einzelnen Block. Fügt man ein Bild nach einem Text und dann wieder einen Text ein, so werden alle drei Elemente einzeln untereinander dargestellt. Text – Bild – Text, ohne dass der Text von selbst um das Bild herum fließen würde. Dafür haben wir aber was … nämlich „float“.

Float oder nicht float? – das ist hier die Frage
Zum Einbinden von Bildern steht ja bereits etwas im letzten Artikel, hier geht es jetzt um das Gestalten mittels „float“ und das Verlinken eines Bildes mittels <a>-Tag. Um den Bildern über CSS mitzuteilen, wo sie sich positionieren sollen und wie sich umliegender Text verhalten soll, kann der CSS-Befehl „float“ eingesetzt werden.

Beispiel:

.floatrechts { float:right; }

Mit dieser CSS-Klasse ließe sich einem Bild (geht natürlich z.B auch bei Divs) mitteilen, dass es nach rechts „floaten“ (quasi schweben) soll und dass umliegender Text um das Bild (links) herumfließen soll. Natürlich ist es sinnvoll, der CSS-Klasse in so einem Fall z.B. noch ein margin-left mitzugeben, damit Bild und umliegender Text einen Abstand bekommen und nicht direkt an einander kleben.

Bildunterschriften mit Divs erstellen
Wir haben auch festgestellt, dass es mit den Techniken, die wir bisher kennengelernt haben, nicht so einfach möglich ist, eine brauchbare Bildunterschrift (nicht Bildtitel und dergleichen, sondern eine richtige Box mit Bildunterschrift) zu erzeugen. Dazu kann ein Div eingesetzt werden, in dem sich das Bild und der Text für die Bildunterschrift befinden. Hier ist ein wenig Kreativität gefragt 🙂

Bilder mit Links versehen
Dann haben wir uns mit dem Verlinken eines Bildes beschäftigt. Es sollte also ein Bild eingebunden und mit einer Website oder einem anderen Ziel verbunden werden. Dazu muss man nichts weiter tun, als einen ganz normalen <a>-Tag mit href zu benutzen und statt des Linktextes einen kompletten <img>-Tag einzubauen. Fertig.

Das sieht dann z.B. so aus:

<a href=“Link zu einer Website“ target=“_blank“><img src=“Link zu einem Bild“ alt=“das ist ein Bild“></a>

Hier ist anstelle eines Textes wie „hier klicken“ kurzerhand ein Bild eingefügt worden.

So, genug für heute.