Zur Auszeichnung von Grafiken gibt es das
img
-Element. Wir fügen es
direkt nach dem öffnenden <body>
-Tag in unser
Grundgerüst ein. Um Sie nicht mit Redundanz zu langweilen
und um unsere Wälder zu schonen, verzichte ich bei den
folgenden Listings darauf, den gesamten Quelltext
anzuführen, sondern beschränke mich auf die Darstellung
des body
-Elements.
<body> <img src="images/logo.png" alt="Kochbar" width="288" height="100" /> </body>
Beachten Sie den Inhalt des alternativen Attributs: Der Text »Kochbar« ist genau der, der auf der Grafik zu lesen ist.
Übung: Logo auszeichnen
- Es würde zu weit führen, Ihnen in diesem Buch über XHTML und CSS hinaus zu vermitteln, wie Sie mittels eines Grafikbearbeitungsprogramms die benötigten Grafiken aus den Vorlagen herausschneiden. Aus diesem Grund finden Sie alle Grafiken in der richtigen Größe in den entsprechenden Ordnern im Downloadpaket, sodass Sie diese direkt verwenden können. Erstellen Sie in Ihrem Arbeitsordner einen Unterordner »images« und kopieren Sie das Bild hinein.
- Ergänzen Sie Ihre
index.html
mit der Auszeichnung des Logos. - Speichern Sie und betrachten Sie das Ergebnis im Browser.
Haben Sie die Web Developer Toolbar installiert? Dann validieren Sie Ihre lokale Datei (Menüpunkt »Tools > Validate Locale HTML«). Sie werden eine Fehlermeldung angezeigt bekommen:
Line 20, Column 90: document type does not allow element "img" here; missing one of "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "address", "fieldset", "ins", "del" start-tag
Was bedeutet das?
Das Element body
darf laut Spezifikation nur
Blockelemente enthalten. img
ist ein Inline-Element und
folglich an dieser Stelle ohne umgebendes Blockelement nicht
erlaubt. Der Validator gibt Ihnen bereits an, welche Elemente Sie
verwenden dürfen. Die Frage ist nun: Welches dieser Elemente
eignet sich als Container für das Logo? div
oder
p
wären geeignete Kandidaten,
ich bevorzuge jedoch das Element h1
. Ich denke, der
Schriftzug »Kochbar« ist eine gute
Hauptüberschrift. Wie weit wir mit diesem Ansatz kommen und
ob es gegebenenfalls weitere Hauptüberschriften gibt, sehen
wir im Folgenden. Also:
<body> <h1><img src="images/logo.png" alt="Kochbar" width="288" height="100" /></h1> </body>
Übung: Logo als Hauptüberschrift
- Ergänzen Sie Ihre
index.html
. - Speichern Sie und betrachten Sie das Ergebnis im Browser. Die Seite sollte so aussehen wie die in Abbildung 8.8 gezeigte.
- Im Firefox können Sie über die Web Developer Toolbar die Grafiken durch ihre Alternativtexte ersetzen (Images > Replace Images With Alt Attributes). Auf diese Weise sehen Sie, dass »Kochbar« tatsächlich wie eine Überschrift aussieht.
Als Nächstes kommen wir zur
Hauptnavigation und – nach der Auszeichnung des Logos als
Überschrift erster Ordnung – zur nächsten
Überraschung: Wir werden die Navigation als ungeordnete
Liste (ul
) auszeichnen!