HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов
Шрифт:
Приветствуем на нашем Web-сайте всех, кто занимается
<EM><STRONG>Web-дизайном</EM></STRONG>! Здесь вы сможете найти
.
Web-обозреватель может отобразить нашу Web-страницу неправильно.
НА ЗАМЕТКУ
Нужно сказать, что современные Web-обозреватели "умеют" исправлять мелкие ошибки Web-дизайнера. Но именно мелкие!
Осталось выучить несколько новых терминов. Тег, в который непосредственно вложен данный тег, называется родительским, или родителем.
Элемент Web-страницы, в который вложен элемент, создаваемый данным тегом, называется родительским, или родителем. А элемент Web-страницы, который вложен в данный элемент, — дочерним, или потомком. То же самое, что и в случае тегов.
Уровень вложенности того или иного тега показывает количество тегов, в которые он последовательно вложен. Если принять за точку отсчета тег , то тег <EM> будет иметь первый уровень вложенности, т. к. он вложен непосредственно в тег . Тег <STRONG> же будет иметь второй уровень вложенности, поскольку он вложен в тег <EM>, а тот, в свою очередь, — в тег . В сложных же Web-страницах уровень вложенности иных тегов может составлять несколько десятков.
Уровень вложенности тегов в HTML-коде обозначают с помощью отступов, которые ставят слева от соответствующего тега и создают с помощью пробелов (листинг 1.3). На отображение Web-страницы они никак не влияют.
Листинг 1.3
<BODY>
<H1>Справочник по HTML</H1>
Приветствуем на нашем Web-сайте всех, кто занимается Web-дизайном! Здесь вы сможете найти информацию обо всех интернет-технологиях, применяемых при создании Web-страниц. В частности, о языке <STRONG>HTML</STRONG>.
</BODY>
Здесь сразу видно, что теги <H1> и вложены в тег <BODY>, — видно по отступам.
Секции Web-страницы
Снова вернемся в полному HTML-коду нашей Web-странички. Мысленно удалим из него уже рассмотренный фрагмент и получим листинг 1.4.
Листинг 1.4
<!DOCTYPE html>
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<TITLE>Пример Web-страницы</TITLE>
</HEAD>
<BODY>
.
</BODY>
</HTML>
Здесь применены несколько тегов, которые нам не знакомы. Это так называемые невидимые теги — теги, содержимое которых никак не отображается Web- обозревателем. Они занимаются тем, что хранят сведения о параметрах самой Web- страницы и делят ее на две секции, имеющие принципиально разное назначение.
Секция тела Web-страницы находится внутри парного тега <BODY>. Она описывает само содержимое Web-страницы, то,
А в парном теге <HEAD> находится секция заголовка Web-страницы. (Не путать с заголовком, который создается с помощью тега <H1>!) В эту секцию помещают сведения о параметрах Web-страницы, не отображаемые на экране и предназначенные исключительно для Web-обозревателя.
И заголовок, и тело Web-страницы находятся внутри парного тега <HTML>, который расположен на самом высшем (нулевом) уровне вложенности и не имеет родителя.
Любая Web-страница должна быть правильно отформатирована: иметь секции заголовка и тела и все соответствующие им теги. Только в таком случае она будет считаться корректной с точки зрения стандартов HTML.
Метаданные и тип Web-страницы
Вернемся к сведениям о параметрах Web-страницы, которые находятся в секции ее заголовка. Что это за параметры? И что они задают?
Сначала введем еще пару терминов. Параметры Web-страницы, не отображаемые на экране и предназначенные для Web-обозревателя, назовем метаданными. Это своего рода данные, описывающие другие данные, в нашем случае — Web-страницу. А HTML-теги, которые задают метаданные, называются метатегами.
Прежде всего, в метаданные входит название Web-страницы. Оно отображается в заголовке окна Web-обозревателя, где выводится содержимое данной Web- страницы, и хранится в "истории" (списке посещенных к настоящему времени Web- страниц). Название помещается в парный тег <TITLE> и располагается в секции заголовка Web-страницы:
<HEAD>
.
<TITLE>Пример Web-страницы</TITLE>
</HEAD>
Далее, обычно в секции заголовка расположен особый метатег, задающий кодировку, в которой сохранена Web-страница. Этот метатег имеет "говорящее" имя
<META>:
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
.
</HEAD>
Приведенный тег задает кодировку UTF-8, в которой мы сохранили нашу Web- страничку. Существуют аналогичные теги, задающие кодировки 1251, КОИ-8, кодировка западноевропейских и восточноазиатских языков и др.
НА ЗАМЕТКУ
Кодировка UTF-8 — это разновидность кодировки Unicode, предназначенная для Web-дизайна. Кодировка Unicode (а значит, и UTF-8) может закодировать все символы всех языков, имеющихся на Земле. Именно она в настоящее время чаще всего применяется для создания Web-страниц.
Кстати, вы не заметили ничего странного в теге <META>? У него нет ни содержимого, ни закрывающей пары! Это так называемый одинарный тег, который имеет только открывающую пару. Такой тег действует в той точке HTML-кода, где он сам находится, и либо задает метаданные, либо помещает в соответствующее место Web-страницы какой-либо элемент, не относящийся к тексту. Впоследствии нам будут часто встречаться одинарные теги.
Теперь осталось рассмотреть последний тег, находящийся в самом начале HTML-кода нашей Web-страницы. Этот тег находится даже вне "всеобъемлющего" тега <HTML>. Важная, должно быть, персона… Вот он: