Direktnavigation

Weitere Infos

Sie lesen:
LB Teil 1 (2009)

Little Boxes Teil 1 (Cover)

Aktuell (2015)
Einstieg in CSS

Einstieg in CSS (Cover)


2. Auflage!

Einstieg in CSS (Cover)

Beispielseiten

Detailinfo

Inhaltsbereich

4.2 Die Wegbeschreibung zur Grafik: img

Das Element zum Einfügen einer Grafik heißt img, kurz für "Image" (»Bild«). Es gibt keinen Ende-Tag </img>, stattdessen wird der Tag wie auch beim meta-Element im head mit der Zeichenfolge Leerstelle – Schrägstrich – größer als beendet:

<img src="logo.gif" alt="Little Boxes" width="222" height="32" />

Der <img>-Tag im Quelltext der Webseite enthält lediglich die Wegbeschreibung zur Grafikdatei. Grafik und Webseite bleiben also – anders als auf Papierseiten – getrennte Dateien.

Die Attribute zu img

Das Element img kennt jede Menge Attribute, hier eine kurze Erklärung der wichtigsten:

  • src="bildname.jpg"
    Das erste und wichtigste Attribut zu <img> sind die Buchstaben src, was für Source steht und »Quelle« heißt. src enthält die Wegbeschreibung zur Grafikdatei. Nur ein Dateiname bedeutet, dass die Grafikdatei im selben Ordner liegt wie die Webseite.
  • alt="Alternativer Text"
    Die Eingabe eines alternativen Textes ist Pflicht. Er wird angezeigt, wenn die Grafik nicht (oder noch nicht) dargestellt wird. Möchten Sie aus irgendeinem Grund keinen alternativen Text angeben, schreiben Sie einfach alt="".
  • width und height: Breite und Höhe der Grafik
    width und height sind zwei wichtige Attribute. Sie sagen dem Browser, wie viel Platz er für die Grafik reservieren soll, schon bevor er sie erhalten hat. Die Werte für width und height sollten der tatsächlichen Pixelgröße der Grafik entsprechen.
  • title="Text für die kleine gelbe Quickinfo"
    Das Attribut title ist optional und sorgt wie bei den Hyperlinks für die kleinen gelben Quickinfo-Kästchen, wenn der Mauscursor das Bild berührt. Der Internet Explorer nutzt dazu übrigens – sofern kein title-Attribut definiert wurde – fälschlicherweise den Wert des Attributs alt.

img verhält sich wie ein Inline-Element und hat keinen integrierten Zeilenumbruch. In der folgenden Übung ergänzen Sie die Beispielseite um eine einfache Grafik, die anstelle des Textes »Little Boxes« als h1-Überschrift in die Seite eingebunden wird. Die im Beispiel verwendete Grafik
finden Sie auf der CD bei den Beispieldateien oder oben links auf dieser Webseite. Rechtsklick auf das Logo, Grafik speichern unter oder wie immer das in Ihrem Browser heißt, und dann im Übungsordner speichern.

ToDo: Eine Grafik als Überschrift einbinden
  • Speichern Sie die Grafik logo.gif im selben Ordner wie die Beispielseite index.html.
  • Ändern Sie dazu den Quelltext der Seite wie folgt:

    <h1>
    <img src="logo.gif" id="logo" alt="Little Boxes" width="222"
    height="32" />
    </h1>

  • Speichern Sie die Seite und betrachten Sie sie in einem Browser.

Um die Grafik später im CSS besser auswählen zu können, bekommt sie im HTML eine ID mit einem aussagekräftigen Namen (id="logo"). Und so sieht die Webseite jetzt im Browser aus:

Abbildung 4.4: index.html mit einer Grafik als Überschrift
Abbildung 4.4: index.html mit einer Grafik als Überschrift

Ein Logo als Überschrift?

Wenn das Logo aus dem Beispiel nicht angezeigt wird, stellen einige Browser den alternativen Text als h1-Überschrift dar. Auf diese Weise bleibt das Logo der Site auch ohne Grafik als solches erkennbar:

Dekorationsgrafiken per CSS als Hintergrundbild einbinden

Beim Einfügen von Grafiken lautet eine Grundregel, dass inhaltlich relevante Grafiken wie das Logo im Beispiel per img in den HTML-Quelltext eingebunden werden sollten. Grafiken, die ausschließlich zur Dekoration dienen, werden im CSS als Hintergrundgrafik eingebunden.