Der Content besteht aus einer
Überschrift, einer Illustration und einigen Absätzen
mit Links. Wir zeichnen alles der Reihe nach aus und packen die
Elemente in einen div-Container.
Es ist allgemein üblich, die Content-Überschrift als Überschrift erster Ordnung auszuzeichnen.
<body>
<h1><img src="images/logo.png" alt="Kochbar" width="288" height="100" /></h1>
<ul>
<li><strong title="Hier befinden Sie sich gerade.">Startseite</strong></li>
<li><a href="ueber-uns.html">Kochbar</a></li>
<li><a href="speisekarte.html">Speisekarte</a></li>
<li><a href="oeffnungszeiten.html">Öffnungszeiten</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
</ul>
<div id="sidebar">
<div id="contact">
<h2>Kontaktdaten</h2>
<p>0123 654321-0</p>
<p>Musterstr. 123 – 43210 Musterstadt</p>
</div>
<div id="teaser">
<h2>Rezept des Tages</h2>
<h3>Mulligatawny</h3>
<p>Eine ursprünglich sehr scharfe indische Hühnersuppe, gewürzt mit Curry und Ingwer. Wir empfehlen die sanfte, englische Version. <a href="rezepte/mulligatawny.html">Rezept ansehen</a></p>
</div>
</div>
<div id="content">
<h1>Schön, dass Sie vorbei schauen!</h1>
<p><img src="images/gemuese.jpg" width="354" height="233" alt="" /></p>
<p>Wenn Sie gerne gut essen und sich nicht bloß (...)</p>
<p>Mit der Kochbar entdecken Sie einen Tempel (...)</p>
<p>Auf unserer Website erfahren Sie <a href="ueber-uns.html">mehr über die Kochbar</a>, können einen kleinen Blick auf unsere <a href="speisekarte.html">Speisekarte</a> werfen, eine <a href="kontakt.html">Online-Reservierung</a> Ihres Tisches bei uns vornehmen sowie das eine oder andere interessante Rezept entdecken. Sollten Sie überdies noch Fragen haben, finden Sie unsere Kontaktdaten ebenso schnell wie ein praktisches Formular zum <a href="kontakt.html">Versenden einer Nachricht an uns</a>.</p>
<p>Viel Spaß beim Stöbern und Ausprobieren und hoffentlich bis bald bei uns in der Kochbar!</p>
</div>
</body>
Listing 8.10: Content
Die Auszeichnung der Fußzeile stellt uns
vor keine neuen Herausforderungen: Sie besteht aus zwei
Absätzen, deren Zusammengehörigkeit wir mittels eines
umschließenden div-Elements ausdrücken.
<body>
<h1><img src="images/logo.png" alt="Kochbar" width="288" height="100" /></h1>
<ul>
<li><strong title="Hier befinden Sie sich gerade.">Startseite</strong></li>
<li><a href="ueber-uns.html">Kochbar</a></li>
<li><a href="speisekarte.html">Speisekarte</a></li>
<li><a href="oeffnungszeiten.html">Öffnungszeiten</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
</ul>
<div id="sidebar">
<!-- Sidebar -->
</div>
<div id="content">
<!-- Inhalte -->
</div>
<div id="footer">
<p>Beispiel-Website zur <a href="http://jendryschik.de/wsdev/einfuehrung/">Einführung in XHTML, CSS und Webdesign</a> von <a href="http://jendryschik.de/michael/">Michael Jendryschik</a> – © 2000–2008 – <a href="impressum.html">Impressum</a></p>
<p>Design von <a href="http://www.pixelgraphix.de/">Manuela Hoffmann</a>, Texte von <a href="http://www.lindah.de/">Ralf Koyro</a>, Speisekarte von <a href="http://www.roterochs.de/">Konrad Scheller</a></p>
</div>
</body>
Listing 8.11: Fußzeile
Übung: Auszeichnung der Inhalte
- Ergänzen Sie Ihre
index.htmlum den Content und die Fußzeile. - Speichern Sie und betrachten Sie das Ergebnis im Browser. Es sollte so aussehen, wie in Abbildung 8.11 dargestellt.
- Validieren Sie die Seite. Wenn Sie alles richtig übertragen haben, sollte das Dokument fehlerfrei sein (siehe Abbildung 8.12).
Abb. 8.12: Der W3C-Validator bescheinigt uns, dass wir
keine Fehler gemacht haben
Wir haben nun alle Inhalte der Startseite der Kochbar ausgezeichnet. Um die Unterseiten werden wir uns später kümmern. Widmen wir uns nun dem Styling.