Jetzt fehlt nur noch die Auszeichnung des Rezepts des Tages, dann sind wir erst einmal fertig.
Übung: Rezeptseite vorbereiten
- Erstellen Sie einen Unterordner »rezepte«.
- Erstellen Sie darin eine Datei »mulligatawny.html« und nehmen Sie die üblichen Anpassungen vor.
- Passen Sie alle relativen Pfade an. Wir
befinden uns in einem Unterverzeichnis, das bedeutet, alle
relativen URLs, die im Dokument stehen, führen ins Leere.
Wenn Sie die Seite aufbauen und parallel im Browser prüfen,
wie sie aussieht, werden Sie feststellen, dass das Stylesheet
nicht geladen wird, ebenso wenig das Logo. Das liegt daran, dass
die Pfade nicht stimmen. Der relative Pfad zum Logo lautet nicht
mehr
images/logo.png, sondern../images/logo.png. Korrigieren Sie alle Pfade und testen Sie, ob Sie nichts vergessen haben. - Laden Sie die Seite im Browser und lassen Sie uns loslegen!
Wir haben auf allen Seiten der Kochbar links in der Sidebar einen Teaser auf das Rezept des Tages. Dieser Teaser ergibt auf der Rezeptseite jedoch keinen Sinn: Wir sind ja schon dort, wohin der Teaser uns verweisen möchte. Also ändern wir ihn und lassen ihn die Speisekarte anteasern.
<div id="sidebar">
<div id="sidebar-inner">
<div id="contact">
<h2>Kontaktdaten</h2>
<p class="tel">0123 654321-0</p>
<p class="address">Musterstr. 123 – 43210 Musterstadt</p>
</div>
<div id="teaser">
<h2>Speisekarte</h2>
<p>Die Mulligatawny ist eines unserer vielfältigen, internationalen Gerichte. Wir haben noch mehr zu bieten! <a href="../speisekarte.html">Speisekarte ansehen</a></p>
</div>
</div>
</div>
Ein Kochrezept besteht aus mindestens zwei Teilen: den Zutaten und der Zubereitung. Hinzu kommen häufig Hinweise, etwa Vorschläge zu Beilagen, Haltbarkeit oder Aufbewahrung. Anstatt diesen Aufbau mit »langweiligen« Zwischenüberschriften wiederzugeben, können wir die einzelnen Bestandteile mit einer Definitionsliste zusammenfassen. Ich möchte wie folgt vorgehen:
<dl>
<dt>Zutaten für 6 Portionen</dt>
<dd>
<!-- Zutaten -->
</dd>
<dt>Zubereitung</dt>
<dd>
<!-- Zubereitung -->
</dd>
<dt>Hinweis</dt>
<dd>
<!-- Hinweis -->
</dd>
</dl>
Sind Sie damit einverstanden? Ich gebe zu: Das ist eine ungewöhnliche Art, Definitionslisten einzusetzen, die Sie ansonsten im Web zumeist nur bei Standardfällen antreffen wie bei der Auszeichnung eines Glossars oder einer Literaturliste – wenn überhaupt. Aber warum sollten wir das Einsatzgebiet von Definitionslisten nicht sinnvoll erweitern?
Schauen wir uns an, wie wir die dd-Elemente
füllen.
- Die Liste der Zutaten ist unstrittig
eine solche. Allerdings sollten wir uns die Frage stellen, ob
die Einträge der Liste geordnet oder ungeordnet sind.
Denkbar ist beides, wir belassen es jedoch bei der
Auszeichnung mit
ul. - Die Informationen zur Zubereitung sind eine Abfolge von Arbeitsanweisungen, daher können wir sie als geordnete Liste auszeichnen. Auch dies ist eine gewagte Form der Auszeichnung, aber sie ist semantisch korrekt, und warum sollten Webautoren nicht auch hin und wieder ein wenig kreativ sein?
- Der Zubereitungshinweis ist reine
Prosa. Wir könnten ihn als Absatz auszeichnen, aber es
reicht, den Text einfach als Inhalt des
dd-Elements zu notieren.
Das Rezept enthält zahlreiche
Abkürzungen, die wir allesamt mit abbr oder
acronym auszeichnen.
<div id="content">
<h1>Rezept des Tages: Mulligatawny</h1>
<p>Die Mulligatawny ist eine brennend scharfe indische Suppe. Der Name stammt von den Wörtern »Mullaga« und »Thanni« ab, was so viel bedeutet wie »Pfefferwasser«. Es ist eine Hühner-Tomaten-Suppe, die sehr stark mit Curry und Muskatnuss gewürzt ist. Es werden oft Gemüsestreifen, Nüsse und Reis, bisweilen auch Portwein hinzugenommen. Das vorliegende Rezept ist die sanfte, englische Version.</p>
<dl>
<dt>Zutaten für 6 Portionen</dt>
<dd>
<ul>
<li>2 Zwiebeln</li>
<li>2 Knoblauchzehen</li>
<li>1 Bund Suppengrün</li>
<li>1 Petersilienwurzel</li>
<li>1 etwa 5 <abbr title="Zentimeter">cm</abbr> langes Stück frische Ingwerwurzel</li>
<li>1 Suppenhuhn (etwa 2 <abbr title="Kilogramm">kg</abbr>)</li>
<li>2 <abbr title="Liter">l</abbr> Salzwasser</li>
<li>Salz</li>
<li>250 <abbr title="Gramm">g</abbr> junge Möhren</li>
<li>1 Bund Lauchzwiebeln</li>
<li>1 kleiner säuerlicher Apfel</li>
<li>250 <abbr>g</abbr> gekochter Schinken am Stück</li>
<li>1 <abbr title="Esslöffel">EL</abbr> Butter</li>
<li>2 <abbr>EL</abbr> Currypulver</li>
<li>1 bis 2 kleine, rote Chilischoten</li>
<li>300 <abbr>g</abbr> gekochter Langkornreis</li>
<li>2 <abbr>EL</abbr> Zitronensaft</li>
<li>1/2 Bund Petersilie</li>
<li>2 Eier</li>
<li>1/8 <abbr>l</abbr> süße Sahne</li>
</ul>
</dd>
<dt>Zubereitung</dt>
<dd>
<ol>
<li>Zwiebeln und Knoblauch abziehen und grob zerteilen. Suppengrün putzen und grob hacken. Petersilien- und Ingwerwurzel schälen und in Stücke schneiden.</li>
<li>Alles Gemüse mit dem Huhn und dem Salzwasser in einen ausreichend großen Topf geben und zum Kochen bringen. Zugedeckt auf kleiner Flamme 2 bis 2 1/2 Stunden garen, bis das Huhn ganz weich ist.</li>
<li>Das Huhn herausnehmen, die Haut abziehen, das Fleisch von den Knochen lösen und klein schneiden.</li>
<li>Die Brühe sieben, erkalten lassen und entfetten.</li>
<li>Die Möhren putzen und in feine Scheiben schneiden.</li>
<li>Die Lauchzwiebeln putzen, waschen und mit allen saftigen grünen Blättern in etwa fingerbreite Stücke schneiden.</li>
<li>Den Apfel vierteln, schälen, vom Kerngehäuse befreien und würfeln.</li>
<li>Den Schinken in kleine Würfel schneiden.</li>
<li>Die Chilischoten klein hacken.</li> <li>Die Butter in einem großen Topf zerlassen. Das Currypulver und die Chilischoten darin bei schwacher Hitze unter Rühren anrösten.</li>
<li>Möhren, Lauchzwiebeln, Apfel und Schinken zugeben und alles bei mittlerer Hitze unter ständigem Wenden einige Minuten schmoren.</li>
<li>Die Brühe zugießen und kräftig aufkochen. Das Fleisch, den Reis und den Zitronensaft zugeben und zugedeckt auf der abgeschalteten Kochplatte etwa 5 Minuten ziehen lassen. Die Suppe darf nicht mehr kochen!</li>
<li>Die Petersilie waschen und hacken.</li>
<li>Die Eier trennen. Eigelb mit Sahne und etwas heißer Suppe verquirlen und in die Mulligatawny rühren.</li>
<li>Die Suppe abschmecken und mit der gehackten Petersilie bestreut servieren.</li>
</ol>
</dd>
<dt>Hinweis</dt>
<dd>Wer möchte, kann die Mulligatawny auch ohne Fleisch zubereiten. In jedem Fall sollte die fertige Suppe sofort serviert werden, damit der Reis nicht zu weich und die Mulligatawny nicht zu dick wird.</dd>
</dl>
</div>
Abb. 8.41: Die Standardformatierung einer Definitionsliste ist sehr reduziert
Die fertig ausgezeichnete Definitionsliste
sieht sehr langweilig und unübersichtlich aus (siehe
Abbildung 8.41). Wir benötigen allerdings nicht viel CSS,
um sie wie im Entwurf zu formatieren. Wir setzen die richtigen
Außenabstände für ul, ol und li und formatieren
dt-Elemente so, dass sie wie
Überschriften zweiter Ordnung aussehen.
/**
* @section Listen
*/
ul, ol { margin: 1em 0 1em 2em; }
li { margin: 0 0 .5em 0; }
dt {
color: #3C6331;
background-color: white;
font-size: 1.5em;
text-align: left;
font-weight: bold;
text-transform: uppercase;
padding: 0;
margin: 1.5em 0 .5em 0;
}
Wenn Sie dieses CSS in Ihr Stylesheet einfügen, werden Sie feststellen, dass die Hauptnavigation ein wenig von der unteren Kante des Kopfbereichs abrückt. Das müssen wir noch korrigieren:
/**
* @section Hauptmenü
*/
#head ul {
position: absolute;
bottom: 0;
right: 30px;
margin: 0;
}
Übung: Rezeptseite
- Ergänzen Sie die
mulligatawny.htmlund das Stylesheet. - Speichern Sie und betrachten Sie das Rezept im Browser. Die Darstellung sollte dem Entwurf entsprechen.
- Lassen Sie den Validator über die Seite laufen. Wenn er weiterhin nichts bemängelt, ist die gesamte Kochbar fehlerfrei. Sehr gute Arbeit!