3. Знакомство с html и css

Цель. Практически изучить структуру HTML-документа, научиться подключать таблицы стилей и настраивать внешний вид страницы при их помощи.

Содержание

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

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

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

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

Часть 2. Вставка изображения, гиперссылки и элементов логического форматирования

1. Вставка изображения.

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

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

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

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

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

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

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

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

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

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

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

В теле документа (внутри элемента body) введите элемент заголовка первого уровня с произвольным текстом. Затем введите элемент абзаца - также с произвольным текстом. Изучая технику применения веб-технологий, мы в данном курсе абстрагируемся от содержания и используем, как правило, бессмысленный заполняющий текст - исторически для дизайнеров это "Lorem ipsum" (см. http://www.lipsum.com). Следите за соответствием открывающих и закрывающих тэгов - каждый элемент должен либо соседствовать с другими элементами, либо быть полностью вложенным - "пересекаться" элементы не могут.

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

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