У каждого элемента есть особое назначение и способ применения.

Например, элемент h1 означает «это заголовок верхнего уровня».

Содержимое, которое вы введете между открывающим и закрывающим

тегами

,браузер отобразит на отдельной строке крупным жирным

шрифтом.

Всего в HTML шесть уровней заголовков: h1, h2, h3, h4, h5 и h6.

Выглядят они так:

Заголовок первого уровня

Заголовок второго уровня

Заголовок третьего уровня

Заголовок четвертого уровня

Заголовок пятого уровня

Заголовок шестого уровня

На рис. 5.2 показано, как эти заголовки выглядят в браузере.

Рис. 5.2. Элементы заголовков разного уровня

Элемент p

Элемент p нужен для разделения текста на параграфы. Любой фрагмент

текста, который вы поместите между тегами

, будет отображен как

отдельный параграф, с отступами сверху и снизу. Давайте посмотрим,

что происходит, если элементов

несколько. Для этого добавьте новую

строку в документ page.html (прежние строки показаны серым цветом).

86 Часть I. Основы

Привет, мир!

Моя первая веб-страничка.

Добавим-ка еще параграф.

На рис. 5.3 показана страничка с нашим новым параграфом.

Рис. 5.3. Та же страничка с еще одним параграфом

Обратите внимание, что каждый параграф отображен с новой

строки, а между параграфами сделан отступ. Все это благодаря тегу

.

Пробелы в HTML и блочные элементы

А как наша страничка будет выглядеть без тегов? Давайте посмотрим:

Привет, мир!

Моя первая веб-страничка.

Добавим-ка еще параграф.

На рис. 5.4 показана страничка без тегов.

Рис. 5.4. Та же страничка без HTML-тегов

Мало того что пропало форматирование, теперь весь текст отобра-

жается в одну строку! Дело в том, что в HTML все пробельные символы

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

любые символы, которые отображаются в браузере как пробелы или

5. Основы HTML 87

отступы, — например, это пробел, символ табуляции

и символ перевода строки (тот самый, который вы

вводите, нажимая ENTER или RETURN). Поэтому все

пустые строки, которые вы вставите между фрагмен-

тами текста в HTML-документе, сожмутся до одного

пробела.

Элементы p и h1 — блочные; это значит, что их

содержимое отображается отдельными блоками тек-

ста с новой строки и любое содержимое, идущее после

такого блока, тоже начнется с новой строки.

Строчные элементы

А теперь добавим к нашему документу еще два эле-

мента, em и strong:

На рис. 5.5 показано, как выглядит страница

с новыми тегами.

Привет, мир!

Моя первая веб-страничка.

Добавим-ка еще параграф.

Элемент em отображает свое содержимое курсивом, а элемент

strong — жирным шрифтом. И em, и strong относятся к строчным

элементам, поскольку они, в отличие от блочных элементов, не выводят

свое содержимое отдельной строкой.

Чтобы отобразить текст одновременно жирным шрифтом и кур-

сивом, поместите его внутрь обоих тегов. Обратите внимание, что

в последнем примере теги стояли в такой последовательности:

параграф. Очень важно правиль-

ным образом вкладывать элементы друг в друга: если один элемент

находится внутри другого элемента, то его открывающий тег и его

88 Часть I. Основы

закрывающий тег также должны находиться внутри этого элемента.

Например, такой вариант недопустим:

параграф

Закрывающий тег расположен здесь перед закрываю-

щим тегом . Как правило, браузеры никак не сообщают о подобных

ошибках, однако неправильно вложенные теги приведут к неверному

отображению страниц.

Полноценный HTML-документ

До сих пор мы имели дело лишь с фрагментами HTML, тогда как полно-

ценный HTML-документ должен включать некоторые дополнительные

элементы. Давайте посмотрим на законченный HTML-документ и разбе-

ремся, зачем нужна каждая его часть. Добавьте в файл page.html следую-

щие элементы:

Head — здесь

«шапка

документа»

Title —