3. Добавление таблицы каскадных стилей.
Браузер отображает текст черным цветом на белом фоне, начиная с левого верхнего угла окна (точнее, как правило, делая отступ в 2 пиксела со всех сторон) во всю его ширину. Изменим этот стиль по умолчанию на собственный.
Добавьте в раздел head элемент style с атрибутом type="text/css". Добавьте в него пустое правило для элемента body:
<style type="text/css">
body {
}
</style>
Теперь по порядку назначим при помощи этого правила элементу body следующий ряд свойств:
цвет фона (неяркий)
толстую серую рамку
большой отступ - чтобы отдалить рамку от границ окна
небольшое поле - чтобы отделить текст от рамки
крупный размер шрифта (например, 20px)
гарнитуру Comic Sans MS
отступ первой строки
Уберем рамку справа и снизу, назначив свойствам border-bottom и border-right значение none.
После каждого дополнения сохраняйте документ в редакторе (Ctrl-S), переходите в браузер (в котором ваша рабочая страница уже открыта) и нажимайте Обновить (F5), чтобы убедиться в том, что действия достигают желаемого эффекта и не нарушают прежних достижений. Удобно разделить рабочую область экрана так, чтобы одновременно видеть и редактор, и браузер. Добейтесь примерно такого вида:
Часть 2. Вставка изображения, гиперссылки и элементов логического форматирования
1. Вставка изображения.
Сейчас понадобится файл с каким-либо графическим изображением типа GIF, JPG или PNG. Его геометрические размеры должны быть не слишком большими, чтобы оно аккуратно вписывалось в окно браузера. Ширина окна браузера обычно равна полной ширине экрана (если нет полосы вертикальной прокрутки) - например, 1280px. Если от ширины окна отнять удвоенный отступ нашей страницы (поскольку он делается с обеих сторон), толщину рамки и удвоенное поле, то получится максимальная ширина изображения, при которой страница будет полностью помещаться в доступную ширину окна (не требуя горизонтальной прокрутки). Кроме того, потом мы сделаем для изображению рамку с полем, что еще сократит пространство на странице. И, наконец, слишком большие изображения выглядят обычно не очень хорошо - все эти соображения приводят к заключению, что ширину изображения лучше выбирать достаточно небольшой.
Если вы подобрали изображение, определите его ширину и высоту - для этого достаточно навести в Проводнике курсор на этот файл, либо открыть окно его свойств. Если не указать ширину и высоту изображения, браузер может определить их и сам, но для этого ему нужно загрузить это изображение. Возможны ситуации, когда браузеру знать размеры изображения необходимо, но загружать само изображение не нужно - здесь явное указание размеров будет полезным. Еще один полезный момент явного указания размеров в разметке заключается в том, что, компонуя страничные элементы, вы оперируете, как правило, размерами в пикселах, и наличие размеров изображения в разметке страницы помогает вам в этой задаче.
Вставьте в документ (внутри элемента body, но после заголовка и абзаца) элемент img:
<img src="Crataegus.jpg" width="667" height="500" alt="Crataegus L." />
Атрибуты элемента сообщают браузеру:
имя файла (предполагается, что он находится в той же папке, что и документ HTML);
ширину изображения в пикселах;
высоту;
альтернативный текст - который будет показан, если показ рисунков выключен или проговорен, если просмотр выполняется при помощи синтезатора речи.
Согласно спецификации, атрибуты src и alt для элемента img являются обязательными.