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

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 —

название

Body — тело

Привет, мир!

документа

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

параграф.

! Sublime Text автоматически ставит отступы при вводе некото-

рых строк кода, как показано в этом примере. По тегам (таким как

,

и т. д.) он определяет, внутри каких элементов нахо-

дится каждая строка, и делает отступы в соответствии с этим.

Перед тегами

рых других редакторов, отступов не ставит.

На рис. 5.6 показан законченный HTML-документ.

Давайте по очереди рассмотрим элементы из файла page.html .

Тег — всего лишь объявление, он сообщает: «это

HTML-документ». Далее следует открывающий тег (закры-

вающий тег

5. Основы HTML 89

HTML-документ должен содержать элемент html верхнего уровня

вложенности.

Рис. 5.6. Законченный HTML-документ

Внутри элемента html находятся элементы head и body. Элемент

head содержит определенную информацию об HTML-документе, напри-

мер элемент title, устанавливающий название документа, — обратите

внимание, что текст на закладке браузера на рис. 5.6 («Моя первая насто-

ящая HTML-страничка») соответствует содержимому title. Элемент

title находится внутри элемента head, который, в свою очередь, нахо-

дится внутри элемента html.

Внутри элемента body находится содержимое, которое отобража-

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

из предыдущего примера.

Иерархия HTML

HTML-элементы подчинены строгой иерархии, которую можно себе

представить в виде перевернутого дерева. На рис. 5.7 в виде дерева пока-

зан наш документ.

в Моя

эб-страничка!

Привет,

первая

мир!

первая

Моя HTML-

страничка!

Рис. 5.7. Элементы страницы с рис. 5.6, показанные в виде дерева

Сверху находится элемент html. Он содержит элементы head

и body. В свою очередь, head содержит элемент title, а body —

элементы h1 и p. Браузер интерпретирует наш HTML согласно этой

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

иерархии. О том, как менять структуру документа, мы узнаем позже,

в девятой главе.

На рис. 5.8 показан другой способ изображения иерархии HTML —

в виде вложенных прямоугольников.

html

head

title

body

h1

p

Рис. 5.8. Иерархия HTML в виде вложенных прямоугольников

Добавим в HTML ссылки

Ранее в этой главе мы узнали, что HTML — гипертекстовый язык. Это

значит, что HTML-документы могут содержать гиперссылки (или просто

ссылки ), ведущие на другие веб-страницы. Такие ссылки можно созда-

вать с помощью элемента a (от английского anchor — «якорь»).

Измените свой HTML-документ, чтобы он соответствовал следу-

ющему примеру: удалите второй элемент p, а также теги em и strong

и добавьте выделенный цветом код, чтобы создать ссылку на интернет-

адрес http://comicsia.ru/collections/xkcd:

Привет, мир!

5. Основы HTML 91

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

Нажмите

сюда

Сохраните файл и откройте страничку в браузере — она должна

выглядеть как на рис. 5.9.

Рис. 5.9. Веб-страница со ссылкой на http://comicsia.ru/collections/xkcd

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

по адресу http://comicsia.ru/collections/xkcd. На-

сладившись комиксами (выберите там тег «программи-

сты» и почитайте смешные истории из жизни разработ-

чиков), кликните на кнопку «назад», чтобы вернуться

к нашей страничке.

Атрибуты ссылок

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

Чтобы браузер знал, куда перейти по клику, мы добавили

элементу a так называемый атрибут . Атрибуты HTML-

документов напоминают пары «ключ-значение» в объек-

тах JavaScript: у каждого атрибута есть имя и значение.

Посмотрите еще раз на созданную нами ссылку:

Нажмите сюда

Href —

В данном случае у атрибута есть имя href и значение "http://

от hypertext

comicsia.ru/collections/xkcd" — то есть веб-адрес.

reference —

На рис. 5.10 показаны все составные части этой ссылки.

гипертексто-

Ссылка отправит вас по любому адресу, который указан в качестве