При использовании вложенности следует помнить, что вложенные элементы должны закрываться до того, как будут закрыты внешние элементы. Так, следующий пример является неверным:
<I>Неправильное закрытие<B> внутреннего элемента</I>
до закрытия внешнего</B>
Блочные и встроенные элементы
Различают также блочные и встроенные элементы (иногда их называют элементами уровня блока и элементами уровня текста). Основным отличием блочных элементов является форматирование их браузером как обособленной части документа. Блочные элементы задаются парными тегами и могут содержать вложенные блочные или встроенные элементы и, естественно, текст.
Встроенные элементы обычно находятся прямо в тексте и могут иметь содержимое или не иметь его. Примерами встроенных элементов могут служить приведенные ранее элементы B и I, а также элементы перевода строки, изображения и т. д. В отличие от блочных элементов, встроенные элементы могут содержать только текст или вложенные встроенные элементы.
1.3. Просмотр HTML-документа
Сам по себе HTML-документ практически нечитабелен для обычного пользователя. Для чего же тогда применяется форматирование документа с использованием HTML? Для просмотра HTML-документов используются специальные программы – браузеры. При открытии HTML-документа браузер распознает теги и учитывает их при отображении текста. Если по каким-то причинам (например, при ошибке в записи тега) тег не распознается браузером, то он игнорируется.
Существует большое количество программ, позволяющих просматривать HTML-документы. Это такие распространенные приложения, как Internet Explorer, Opera, Firefox, Netscape Navigator.
Ниже приведен пример простого HTML-документа (назначение используемых элементов будет рассмотрено далее в книге) (пример 1.1).
Пример 1.1. HTML-документ
<HTML>
<TITLE>Простой HTML-документ</TITLE>
<BODY>
<H1>Заголовок</H1>
Текст страницы
</BODY>
</HTML>
Этот HTML-документ отображается браузером Internet Explorer так, как показано на рис. 1.2.
Рис. 1.2. Отображение HTML-документа
1.4. Универсальный идентификатор ресурса URI
Чтобы полностью понимать, как происходит взаимодействие HTML-документов, переход между страницами и откуда вообще компьютер пользователя получает данные при работе с сетью, нужно рассмотреть, как и к чему осуществляется доступ при помощи Глобальной сети.
Многие виды ресурсов, размещенных в Интернете, независимо от того, являются ли они HTML-документами, рисунками или файлами архива, чаще всего представляют собой файлы на жестком диске компьютера (сервера), подключенного к сети. С каждым ресурсом сопоставляется значение, по которому можно однозначно определить его расположение, – универсальный идентификатор ресурса или URI (Universal Resource Identifier). URI широко используются как при самостоятельном доступе пользователя к ресурсу (когда, например, пользователь сам вводит URI в адресной строке браузера), так и при переходе между веб-страницами. URI также используются в HTML-документе для указания браузеру, где искать ресурсы (например, рисунки), используемые в самом документе.
Примечание
В литературе также часто применяется обозначение URL. Следует отметить, что URI является более общим понятием, включающим в себя URL: любой URL является универсальным идентификатором ресурса и подчиняется тем же правилам, что и URI.
Идентификатор ресурса URI состоит из трех частей: из наименования механизма доступа к ресурсу, доменного имени компьютера и пути файла ресурса. Для пояснения сказанного можно рассмотреть пример:
http://www.somesite.com/info/examples/ex_1.html (http://www.somesite.com/info/examples/ex_1.html)
Здесь можно увидеть, что для доступа к ресурсу, которым в данном случае является HTML-документ, используется протокол HTTP (Hyper Text Transfer Protocol). Ресурс хранится на компьютере, имеющем доменное имя somesite.com в файле ex_1.html, расположенном в папке /info/examples.
При помощи URI можно также ссылаться на части HTML-документов, например:
http://www.somesite.com/info/examples/ex_1.html#description (http://www.somesite.com/info/examples/ex_1.html#description)
При использовании этого URI можно получить доступ к части HTML-документа, имеющей имя description (то, как создавать имена для фрагментов HTML-документов, будет рассмотрено в гл. 5).
URI также позволяют ссылаться на ресурсы в пределах одного компьютера. При этом указывается относительный путь ресурса. Например, чтобы из HTML-документа, расположенного в папке /info/examples, сослаться на файл /info/files/file1.jpg, достаточно задать URI /files/file1.jpg. В HTML-документах при помощи подобных ссылок указываются пути рисунков и других объектов, используемых в документах, но непосредственно не хранимых в них.
В общем случае URI считаются нечувствительными к регистру символов. Однако для полной уверенности в правильности интерпретации URI все же обращайте внимание на регистр символов в URI гиперссылок, рисунков и т. д. Это полезно для устранения таких ситуаций, когда, например, при работе сайта на компьютере под Windows все гиперссылки работают, а при помещении сайта на UNIX-сервер работать отказываются (в UNIX имена файлов чувствительны к регистру).
Глава 2
Структура HTML-документа
В идеальном случае HTML-документ состоит из трех частей, в которых описывается следующая информация:
• данные о версии используемого HTML;
• заголовок документа;
• тело документа.
Выражение «в идеальном случае» означает то, что один или несколько элементов могут пропускаться: если HTML-документ содержит хоть какой-то текст, пусть без информации о версии, без заголовка и без явного указания тела документа, то браузер все равно отобразит информацию, содержащуюся в этом документе, при этом применяя к тексту еще и форматирование. Правда, в этом случае заведомо неизвестно, насколько исказится содержимое документа.
Итак, полноценный (полный, стандартный) HTML-документ должен содержать все три указанные элемента структуры или хотя бы два последних элемента. Далее приводится пример простейшего HTML-документа, содержащего все указанные структурные элементы (пример 2.1).
Пример 2.1. Задание структуры HTML-документа
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN»>
<HTML>
<HEAD>
<TITLE>HTML-документ</TITLE>
</HEAD>
<BODY>
<H1>Заголовок</H1>
<P>Первый абзац