Сдам Сам

ПОЛЕЗНОЕ


КАТЕГОРИИ







Разметка страницы рецепта





Создайте другой правильно сформированный документ 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

· Заключение

· Контрольные вопросы







Что способствует осуществлению желаний? Стопроцентная, непоколебимая уверенность в своем...

ЧТО ПРОИСХОДИТ ВО ВЗРОСЛОЙ ЖИЗНИ? Если вы все еще «неправильно» связаны с матерью, вы избегаете отделения и независимого взрослого существования...

Система охраняемых территорий в США Изучение особо охраняемых природных территорий(ООПТ) США представляет особый интерес по многим причинам...

Живите по правилу: МАЛО ЛИ ЧТО НА СВЕТЕ СУЩЕСТВУЕТ? Я неслучайно подчеркиваю, что место в голове ограничено, а информации вокруг много, и что ваше право...





Не нашли то, что искали? Воспользуйтесь поиском гугл на сайте:


©2015- 2024 zdamsam.ru Размещенные материалы защищены законодательством РФ.