Страница рецепта
Для целей этого примера мы создадим только страницу рецепта sponge cake — можете создать другие самостоятельно, используя эту страницу в качестве шаблона.
Клиент предоставил рецепт sponge в текстовом файле, который выглядит следующим образом:
Simple Sponge Cake
Ingredients
3 eggs
100g castor sugar
85g self-raising flour
Notes on ingredients:
Caster Sugar - Finely granulated white sugar.
Self-raising flour - A pre-mixed combination of flour and leavening agents (usually salt and baking powder).
Method
1. Preheat the oven to 190°C.
2. Grease a 20cm round cake pan.
3. In a medium bowl, whip together the eggs and castor sugar until fluffy.
4. Fold in flour.
5. Pour mixture into the prepared pan.
6. Bake for 20 minutes in the preheated oven, or until the top of the cake springs back when lightly pressed.
7. Cool in the pan over a wire rack.
Разметка страницы рецепта
Создайте другой правильно сформированный документ HTML, и сохраните его как stepbystep-recipe.html. Добавьте следующие заголовки.
<h1>Simple Sponge Cake</h1>
<h2>Ingredients</h2>
<h3>Notes on ingredients</h3>
<h2>Method</h2>
Список ингредиентов содержит несколько позиций, но порядок не имеет значения. Поэтому имеет смысл использовать неупорядоченный список. Добавьте следующий код в тело (body) документа HTML:
<h2>Ingredients</h2>
<ul>
<li>3 eggs</li>
<li>100g castor sugar</li>
<li>85g self-raising flour</li>
</ul>
Замечания по ингредиентам (notes on the ingredients) присутствуют для уточнения, что из себя представляют ингредиенты. Необходимо связать ингредиент — термин — с его определением. Список определений как раз подходит для этой цели. Добавьте следующий код в документ HTML, ниже неупорядоченного списка предыдущего шага:
<h3>Notes on ingredients</h3>
<dl>
<dt>Castor Sugar</dt>
<dd>Finely granulated white sugar.</dd>
<dt>Self-raising flour</dt>
<dd>A pre-mixed combination of flour and leavening agents (usually salt and baking powder).</dd>
</dl>
Метод приготовления должен очевидно следовать единому правильному порядку, поэтому он должен быть упорядоченным списком — добавьте следующий код в документ HTML, ниже списка определений:
<h2>Method</h2>
<ol>
<li>Preheat the oven to 190°C.</li>
<li>Grease a 20cm round cake pan.</li>
<li>In a medium bowl, whip together the eggs and castor sugar until fluffy.</li>
<li>Fold in flour.</li>
<li>Pour mixture into the prepared pan.</li>
<li>Bake for 20 minutes in the preheated oven, or until the top of the cake springs back when lightly pressed.</li>
<li>Cool in the pan over a wire rack.</li>
</ol>
Оформление страницы рецептов
Клиент очень доволен, но хочет чтобы определения были выделены жирным шрифтом, чтобы было легче читать. Добавьте следующий код в заголовок (head) документа HTML:
<style>
dt {
font-weight: bold;
}
</style>
Страница должна теперь выглядеть примерно как на рисунке 16.3:
Рис. 16.3. Готовая страница рецепта с определениями терминов, выделенными жирным шрифтом
Можно посмотреть живой пример страницы здесь (http://dev.opera.com/articles/view/16-html-lists/stepbystep-recipe.html).
Вот все и закончено!