http://jendryschik.de

UX, Usability und Webstandards

Suche
SucheMenü

Schritt 2: Logo

Hinweis: Diese »Einführung in XHTML, CSS und Webdesign« ent­spricht der zwei­ten Auf­lage des gleich­na­mi­gen Buches, das im Dezem­ber 2008 im Ver­lag Addison-Wesley erschie­nen ist. Die Inhalte sind mittlerweile veraltet, fast alles hat sich weiterentwickelt. Seit einigen Jahren gibt es HTML5, von XHTML redet niemand mehr, und auch die Entwicklung und Unterstützung von CSS ist um Einiges weiter. Auch fast alle Grundlagentexte müsste man schon lange fortschreiben. Falls Sie die Texte dennoch lesen möchten, behalten Sie das bitte im Hinterkopf.

Zurück zur Startseite und zum Inhaltsverzeichnis des Buchs

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>
Listing 8.3: Auszeichnung des Logos


Abb. 8.7: Logo

Beachten Sie den Inhalt des alternativen Attributs: Der Text »Kochbar« ist genau der, der auf der Grafik zu lesen ist.

Übung: Logo auszeichnen

  1. 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.
  2. Ergänzen Sie Ihre index.html mit der Auszeichnung des Logos.
  3. 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>
Listing 8.5: Es ist eine gute Idee, das Logo als Hauptüberschrift auszuzeichnen

Übung: Logo als Hauptüberschrift

  1. Ergänzen Sie Ihre index.html.
  2. Speichern Sie und betrachten Sie das Ergebnis im Browser. Die Seite sollte so aussehen wie die in Abbildung 8.8 gezeigte.
  3. 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.


Abb. 8.8: Schritt 2

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!