BHAK & BHAS Bludenz

Grundkurs HTML & CSS

Bilder einfügen


Girl 1

Bisher haben wir - abgesehen von Hintergrundbildern - nur mit Text gearbeitet. Gute Internetseiten können jedoch durch den Einsatz von Bildern in vielen Fällen noch besser werden. Diese bindet man mit dem <img>-Tag ein, zB:

<img src="girl1.jpg"> würde das Bild girl1.jpg laden, wenn es im selben Verzeichnis wie die HTML-Datei läge. Da wir aber für Bilder ein Unterverzeichnis namens images angelegt haben, muss der Befehl den Pfad ebenfalls beinhalten, also:

<img src="images/girl1.jpg">. Man stellt in diesem Fall einfach den Namen des Unterverzeichnisses, gefolgt von einem forward-slash, vor den Dateinamen. Liegt die Bilddatei eine Hierarchieebene tiefer, so nimmt man beispielsweise <img src="images/girls/girl1.jpg"> usw. Befindet sich die Quelle allerdings in einer höheren Ebene, so muss die Pfadangabe nach diesem Muster abgeändert werden: <img src="../girl1.jpg">. Hier liegt das Bild außerhalb des Ordners, in dem die HTML-Files sind. Dies ist zwar nicht günstig, aber möglich. Manche Webserver erlauben übergeordnete Pfade allerdings nicht, weil diese Erlaubnis Hackern das Leben eine Spur erleichtert. Es entspricht zudem eher der Logik eines Projekts, alle HTML-Dateien in einem Verzeichnis zu haben, das in Unterverzeichnissen die Files enthält, auf die beim Laden zugegriffen wird.

Würden wir XHTML schreiben, dann müsste der Tag lauten: <img src="images/girl1.jpg" />. Er würde mit der Zeichenfolge Leerschritt Slash geschlossen.

Das Bild oben wurde mit folgendem Befehl geladen und platziert: <p style="text-align: center;"><img src="images/girl1.jpg" alt="Girl 1" height="190" width="150"></p>. Das Attribut alt= hat den Sinn, einen Text anzubieten, falls der Surfer die automatische Anzeige von Bildern in seinem Browser abgeschaltet hat. Ein solches Verhalten ist nicht so selten, wie man denken möchte, vor allem bei Surfern, die nur über ein langsames Modem und eine teure Verbindung verfügen. Ihnen gibt der Wert "Girl 1" einen Hinweis darauf, was sie erwarten können, wenn sie das Bild nachladen. Die Angabe der Höhe und der Breite des Bildes beschleunigt den Seitenaufbau im Browser, da der Text nach dem Laden des Bildes nicht neu positioniert werden muss, weil bereits vorher der Platz für das Image ausgespart wurde.

Bilder können auch umrandet werden. Dazu dient das Attribut border="XXX". Die Zahl definiert die Rahmenstärke in Pixel. Wenn das Bild als Link dient, wird es automatisch in der Linkfarbe umrandet. Wenn das den optischen Eindruck der Seite stört, muss der Rahmen mit border="0" ausgeschaltet werden. Ein Beispiel für einen Rahmen gefällig? <img src="images/girl2.jpg" alt="Girl 2" height="225" width="150" border="5" title="A Cutie!">. Dieser Tag beinhaltet ein zusätzliches Attribut, nämlich title= und den dazugehörenden Wert "A Cutie!". Der Sinn dieser Maßnahme wird klar, wenn man im Microsoft Internet Explorer mit der Maus über das Bild fährt und dort bleibt: Es erscheint ein sogenannter Tooltip, wie man ihn aus der kontextsensitiven Hilfe mancher Programme kennt. Verwendet man title nicht, so zeigen moderne Browser den Wert des Attributs alt an. Netscape Navigator kennt das Attribut title nicht und zeigt daher immer nur den Wert von alt als Tooltip. Opera zeigt alt nicht an, dafür den title. Genau so verhalten sich auch Mozilla und Firefox. Das Attribut title ist übrigens auf fast jeden Tag anwendbar. Man sollte es halt nicht übertreiben. Schieb einfach mal die Maus auf diesen Absatz ...

Girl 2

Mit CSS können wir bei Rändern wesentlich mehr anfangen. Es stehen uns sämtliche Möglichkeiten für Rahmen zur Verfügung, auch Farben und verschiedene Formen. Nehmen wir folgendes Beispiel her: <img src="IMAGES/GIRL7.JPG" width="150" height="225" alt="Girl 7" style="border: 7px #dfdfdf ridge;">.

Girl 7

Girl 3Bisher haben wir Bilder jeweils frei platziert, ohne Text daneben. Das ist nicht immer erwünscht. Deshalb kann das Attribut align= mit den Werten "left|right" eingesetzt werden, um den Text umfließend zu formatieren. Das vollständige Umfließen eines Bildes mit Text oben, links, rechts und unten ist mit einfachem HTML nicht möglich. Ein Weg aus dem Problem liegt im Einsatz von Tabellen. Dazu später mehr.

Wenn man vermeiden will, dass der Text zu knapp neben dem Bild beginnt, so kann man die CSS-Formatierung margin verwenden. Der vollständige Tag für das links erscheinende Bild lautet:

<img src="images/girl3.jpg" alt="Girl 3" border="0" width="150" height="183" align="left" style="margin-right: 10px; margin-top: 5px; margin-bottom: 5px;">. Er steht unmittelbar nach dem einleitenden <p>. Links brauchen wir keinen Rand, an den anderen Seiten ist er empfhlenswert, um die Optik zu verbessern. Was wäre, wenn er woanders im Absatz stünde, zB nach dem Wort formatieren? Man sehe - mit neuem Mädchen natürlich:

Bisher haben wir Bilder jeweils frei platziert, ohne Text daneben. Das ist nicht immer erwünscht. Deshalb kann das Attribut align= mit den Werten "left|right" eingesetzt werden, um den Text umfließend zu formatieren.Girl 4 Das vollständige Umfließen eines Bildes mit Text oben, links, rechts und unten ist mit einfachem HTML nicht möglich. Ein Weg aus dem Problem liegt im Einsatz von Tabellen. Dazu später mehr. Dieses Mal habe ich das Bild mittels align="right" nach rechts gerückt und mit Hilfe von style="margin-left: 10px; margin-top: 5px; margin-bottom: 5px;" noch einen Abstand nach links, oben und unten definiert.

Wenn man neben einem Bild nur eine kurze Erklärung anbringen will, dann verwendet man die Attribute align="top|middle|bottom". Am Ende des jeweiligen Textes empfiehlt sich der Einsatz von <br clear="all"> bzw. <br clear="all" /> in XHTML, damit der folgende Text garantiert erst nach dem Bild weitergeht.



Aufgabe 14

Öffne im Windows-Editor die Datei geruest.htm und füge eine Überschrift 2 in Monotype Corsiva mit Courier New als Zweitfont in der Größe 20pt und zentriert mit dem Text Bilder, Bilder, Bilder! ein.
Darunter platzierst Du im ersten Absatz mit dem Font Comic Sans MS links girl5.jpg und einen Text, der länger als das Bild ist und einen Abstand seitlich von 7 Pixeln aufweist.
Im zweiten Absatz mit dem Font Univers und dem Ersatz Trebuchet MS in der Größe 12pt platzierst Du nach ca. 50 von ca. 200 Worten Text rechts das Bild girl6.jpg mit einem Rand von 3 Pixeln, einem Abstand rundum von 5 Pixeln und dem <title="Traumhasi!">. Die Größenangaben ermittelst du entweder in Paintshop Pro oder im Phase5 HTML-Editor. Die Texte erfindest Du selbst.
Speichere das Ergebnis mit dem <title> Bilder als uebung11.htm.