|
|
Разметка страницы рецептаСоздайте другой правильно сформированный документ 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:
рецепта с определениями терминов, выделенными жирным шрифтом Можно посмотреть живой пример страницы здесь (http://dev.opera.com/articles/view/16-html-lists/stepbystep-recipe.html). Вот все и закончено! Заключение Теперь вы должны иметь четкое понимание трех различных типов списков в HTML. Используя пошаговый пример вы должны были создать все три типа списков и узнать, как вкладывать списки в элементы списка. Когда вы узнали, как правильно использовать списки HTML, то, вероятно, обнаружите, что используете их все время. Существует много контента в Web, который должен помещаться в списки, но был просто вставлен в базовый элемент с несколькими тегами переноса строки. Эта располагающая к лени практика, которая создает значительно больше проблем, чем решает — поэтому не делайте этого! Вы должны всегда создавать семантически правильные списки, чтобы облегчить людям чтение создаваемых Web -сайтов. Это значительно лучшая практика для каждого, и не в последнюю очередь для себя, когда понадобится обслуживать сайты в дальнейшем. Дополнительное чтение A List Apart: Укрощение списков (http://www.alistapart.com/articles/taminglists/) W3C CSS2: определение list-style-type (http://www.w3.org/TR/REC-CSS2/generate.html#lists) Контрольные упражнения Вы должны суметь ответить на следующие вопросы: · Какие существуют три типа списков HTML? · Когда должен использоваться каждый тип списка? Как выбрать один из них? · Как вкладывать списки друг в друга? · Почему для стилевого оформления списков нужно использовать CSS, а не HTML? Изображения в HTML Аннотация: Разговор о вещах, которые делают дизайн Web привлекательным - об изображениях. О том, как добавлять в Web-документы визуальную информацию доступным образом (чтобы люди с недостатками зрения могли, тем не менее, использовать информацию сайта). А также, как и когда использовать строковые изображения для применения информационных или фоновых изображений при компоновке страницы Введение В этой лекции мы поговорим о вещах, которые делают дизайн Web привлекательным — об изображениях. К концу этого курса вы узнаете, как добавлять в Web -документы визуальную информацию доступным образом (чтобы люди с недостатками зрения могли, тем не менее, использовать информацию сайта), и как и когда использовать строковые изображения для применения информационных или фоновых изображений при компоновке страницы. Можно загрузить используемые в этой лекции файлы примеров отсюда (http://dev.opera.com/articles/view/17-images-in-html/code.zip) — я использую эти файлы в ходе изложения учебного материала. Лекция имеет следующее содержание: · Изображение говорит больше чем тысяча слов - так ли это? · Различные типы изображений в Web - содержательные и фоновые изображения · Элемент img и его атрибуты o Создание альтернативного текста с помощью атрибута alt o Добавление полезной информации с помощью атрибута title o Использование longdesc для описания сложных изображений o Быстрый вывод изображения при определении размеров с помощью width и height · Только это о строковых изображениях · Фоновые изображения с помощью CSS o Как применять фоновые изображения с помощью CSS · Заключение · Контрольные вопросы   Живите по правилу: МАЛО ЛИ ЧТО НА СВЕТЕ СУЩЕСТВУЕТ? Я неслучайно подчеркиваю, что место в голове ограничено, а информации вокруг много, и что ваше право...  Конфликты в семейной жизни. Как это изменить? Редкий брак и взаимоотношения существуют без конфликтов и напряженности. Через это проходят все...  Что делать, если нет взаимности? А теперь спустимся с небес на землю. Приземлились? Продолжаем разговор...  Что будет с Землей, если ось ее сместится на 6666 км? Что будет с Землей? - задался я вопросом... Не нашли то, что искали? Воспользуйтесь поиском гугл на сайте:
|
