Знакомство с HTML и CSS

Часть 1. Создание html-документа. Добавление абзацев. Назначение стилей элемента body

1. Создание каркаса документа XHTML 1.0 Transitional.

На начальном этапе мы рекомендуем воспользоваться простейшим (не специализированным) текстовым редактором, который не окажет вам абсолютно никакой помощи по вводу HTML-тэгов и атрибутов - зато вы получите возможность обратить внимание на каждую деталь, что наверняка окажется полезным в дальнейшей работе. Предлагаем использовать, например, WordPad. Откройте редактор и сразу сохраните пустой еще файл под именем Lab1.htm в какую-либо папку, которую вы создали специально для лабораторных работ по данному курсу.

Введите определение типа документа XHTML 1.0 Transitional, затем элемент html, а внутри него - head (с заголовком) и body - пока без содержимого. Напоминаем, что определение пустого элемента состоит из открывающего и следующего сразу за ним закрывающего тэга. Примеры этих элементов имеются в первой лекции. Советуем не копировать (на этот раз), а набрать вручную - это дает некоторую гарантию того, что вы будете помнить то, как код должен выглядеть и быстрее находить в нем ошибки (с которыми вы рано или поздно столкнетесь).

2. Ввод заголовка и абзаца текста.

В теле документа (внутри элемента ). Следите за соответствием открывающих и закрывающих тэгов - каждый элемент должен либо соседствовать с другими элементами, либо быть полностью вложенным - "пересекаться" элементы не могут.

Сохраните документ и откройте в браузере. Мы изучаем стандартные средства HTML, и они должны одинаково работать во всех браузерах. Однако в первую очередь обычно проверяют веб-страницы в Microsoft Internet Explorer (сокращенно IE или, как он стал называться позже, Windows Explorer), который уже много лет лидирует по популярности среди пользователей Интернет. Рекомендуем использовать последнюю версию этого браузера (на момент написания курса - 8.0). Необходимо также делать проверку и в других браузерах - профессионалы держат под рукой все современные (и многие старые) версии всех популярных браузеров. По крайней мере, в одном из современных ориентированных на стандарты браузеров проверку делать имеет смысл (помимо IE) - дело в том, что во многом из-за своей популярности IE ведет себя наиболее нестандартно - это обусловлено стремлением его разработчиков "не обрушить Web", а поддерживать совместимость с прошлыми версиями различных спецификаций (многие из которых содержат ошибки).

Если в вашей работе заголовок не выделяется форматированием из остального текста, то, вероятнее всего, где-нибудь тэг забыт или закрыт не там, где нужно.

3. Добавление таблицы каскадных стилей.

Браузер отображает текст черным цветом на белом фоне, начиная с левого верхнего угла окна (точнее, как правило, делая отступ в 2 пиксела со всех сторон) во всю его ширину. Изменим этот стиль по умолчанию на собственный.

Добавьте в раздел head элемент style с атрибутом type="text/css". Добавьте в него пустое правило для элемента body:

<style type="text/css">
  body {
  }
</style>

Теперь по порядку назначим при помощи этого правила элементу body следующий ряд свойств:

Уберем рамку справа и снизу, назначив свойствам 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." />

Атрибуты элемента сообщают браузеру:

Согласно спецификации, атрибуты src и alt для элемента img являются обязательными.

2. Вставка подписи с гиперссылкой.

Далее вставьте абзац с произвольным небольшим текстом (выполняющим функцию подписи). Внутри абзаца, после текста подписи, вставьте гиперссылку. на какую-либо Интернет-страницу, либо на локальный HTML-файл.

3. Вставка элементов логического форматирования.

Добавьте заголовок второго уровня с произвольным текстом и неупорядоченный список с двумя-тремя элементами. Просмотрите результат в браузере - вероятно, в список проникли отступы первых строк, определенные ранее для всех элементов в body (ведь это свойство наследуется вложенными в контейнер элементами). Очевидно, отступы первых строк должны быть определены не для всех элементов без разбора - достаточно, чтобы их имели абзацы и заголовки:

p, h1, h2 {
  text-indent: 40px;
}

Переопределите правило для отступа первой строки указанным образом.

Сделаем врезку в документе - блок текста, выделенный особым форматированием - как правило, гарнитурой и начертанием. Вставьте в документ элемент blockquote (цитату) с произвольным текстом из 1-2 предложений. Создайте правило для элемента blockquote, задающее для него другую гарнитуру (например, Serif ) и начертание (например, italic ).

Вставьте в документ последний, относительно длинный, абзац. Сделайте в нем выделения при помощи элементов логического форматирования strong и span. Определите какую-либо аббревиатуру ( abbr ).

Элементу span назначьте атрибут class="greenspan". Добавьте правило стиля с селектором класса, делающее цвет текста в элементе этого класса зеленым и подчеркнутым:

.greenspan {
    color:Green;
    text-decoration:underline;
}

Вот примерный результат. Обратите внимание на аббревиатуру (в данном примере - "NSCE") - она может иметь точечное подчеркивание и отображает подсказку (определенную атрибутом title ) при наведении указателя.

Часть 3. Применение каскадных правил. Центрирование элементов, добавление границ и полей

1. Создание рамки изображения.

Добавьте стилевое правило для элемента img, включающее тонкую сплошную серую рамку и поле:

img {
  padding: 10px;
  border: 1px solid #777;
}

2. Центрирование изображения с подписью

Поместите изображение (элемент img ) и его подпись (следующий элемент p ) в секцию, т.е. создайте пустой элемент div и переместите в него элементы img и p (вместе с элементом a ). Теперь позиционируем секцию горизонтально по центру страницы - для этого нужно явно задать ее ширину и затем установить автоматические отступы слева и справа. Ширина секции равна ширине изображения плюс удвоенный отступ изображения плюс удвоенная толщина рамки изображения.

Добавьте элементу div атрибуты class="pic" style="width:689px": стилевое правило, центрирующее секцию, имеет смысл определить для множества (класса) секций; а ширина секции привязана к ширине изображения, поэтому атрибут ширины лучше определить во встроенном стиле. Для класса pic стиль должен выглядеть следующим образом:

.pic {
  margin-left: auto;
  margin-right: auto;
}

Проверьте, что получилось в результате.

3. Добавление рамки и фона абзацу.

Создайте стилевое правило для абзаца, помещенного в секцию с классом pic:

.pic p {
}

Селектор .pic p означает: элемент p, находящийся на произвольном уровне вложенности в элемент класса pic.

Определите в этом стилевом правиле следующие свойства:

В качестве последнего штриха визуально отделим абзацы друг от друга буквицей: