Теперь - внимание! Порядок следования закрывающих тегов должен быть обратным тому, в котором следуют теги открывающие. Говоря иначе, теги со всем их содержимым должны полностью вкладываться в другие теги, не оставляя "хвостов" снаружи.
Если же мы нарушим это правило и напишем такой HTML-код (обратите внимание на специально перепутанный порядок следования открывающих тегов):
<P>Приветствуем на нашем Web-сайте всех, кто занимается
<EM><STRONG>Web-дизайном</EM></STRONG>! Здесь вы сможете найти
. . .
Web-обозреватель может отобразить нашу Web-страницу неправильно.
НА ЗАМЕТКУ
Нужно сказать, что современные Web-обозреватели "умеют" исправлять мелкие ошибки Web-дизайнера. Но именно мелкие!
Осталось выучить несколько новых терминов. Тег, в который непосредственно вложен данный тег, называется родительским, или родителем. В свою очередь, тег, вложенный в данный тег, называется дочерним, или потомком. Так, для тега <EM> в приведенном далее примере тег <P> - родительский, а тег <STRONG> - дочерний. Любой тег может иметь сколько угодно дочерних тегов, но только один родительский (что, впрочем, понятно - не может же он быть непосредственно вложен одновременно в два тега).
Элемент Web-страницы, в который вложен элемент, создаваемый данным тегом, называется родительским, или родителем. А элемент Web-страницы, который вложен в данный элемент, - дочерним, или потомком. То же самое, что и в случае тегов.
Уровень вложенности того или иного тега показывает количество тегов, в которые он последовательно вложен. Если принять за точку отсчета тег <P>, то тег <EM> будет иметь первый уровень вложенности, т. к. он вложен непосредственно в тег <P>. Тег <STRONG> же будет иметь второй уровень вложенности, поскольку он вложен в тег <EM>, а тот, в свою очередь, - в тег <P>. В сложных же Web-страницах уровень вложенности иных тегов может составлять несколько десятков.
Уровень вложенности тегов в HTML-коде обозначают с помощью отступов, которые ставят слева от соответствующего тега и создают с помощью пробелов (листинг 1.3). На отображение Web-страницы они никак не влияют.
Листинг 1.3
<BODY>
<H1>Справочник по HTML</H1>
<P>Приветствуем на нашем Web-сайте всех, кто занимается Web-дизайном! Здесь вы сможете найти информацию обо всех интернет-технологиях, применяемых при создании Web-страниц. В частности, о языке <STRONG>HTML</STRONG>.</P>
</BODY>
Здесь сразу видно, что теги <H1> и <P> вложены в тег <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>. Важная, должно быть, персона... Вот он:
<!DOCTYPE html>
Метатег <!DOCTYPE> задает, во-первых, версию языка HTML, на которой написана Web-страница, а во-вторых, разновидность данной версии. Так, существуют мета- теги <!DOCTYPE>, указывающие на HTML 5, "строгую" и "переходную" разновидности HTML 4.01 (это предыдущая версия языка HTML, еще действующая на данный момент) и язык XHTML (ответвление HTML, имеющее несколько другой синтаксис).
Так вот, метатег <!DOCTYPE html>, который мы поставили в начало нашей Web- странички, указывает на HTML 5. Будем работать только с самыми новыми технологиями! Долой всякое старье!
Атрибуты HTML-тегов
Последний важный вопрос, который мы здесь рассмотрим, - атрибуты HTML- тегов. После этого мы пока что закончим с HTML и обратимся к принципам современного Web-дизайна.
Посмотрим на тег <META>, задающий кодировку Web-страницы:
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
Здесь мы видим, что между символами < и >, помимо имени тега, присутствуют еще какие-то данные. Это атрибуты тега, задающие его параметры. В частности, два атрибута данного тега <META> указывают, что документ представляет собой Web-страницу, и задают ее кодировку.
Каждый атрибут тега имеет имя, за которым ставится знак равенства, и значение данного атрибута, взятое в двойные кавычки. Так, атрибут с именем HTTP-EQUIV имеет значение "Content-Type", говорящее о том, что данный метатег задает тип документа. А атрибут с именем CONTENT имеет значение "text/html; charset=utf-8", обозначающее, что данный документ представляет собой Web-страницу, и указывающее, что она набрана в кодировке UTF-8.
Атрибуты тегов бывают обязательными и необязательными. Обязательные атрибуты должны присутствовать в теге в обязательном порядке. Необязательные же атрибуты могут быть опущены; в таком случае тег ведет себя так, будто соответствующему атрибуту присвоено значение по умолчанию.
Атрибуты HTTP-EQUIV и CONTENT тега <META> обязательные - кому нужен метатег без метаданных... А вот атрибут ID, поддерживаемый практически всеми тегами HTML, необязательный, он используется только в особых случаях:
<H1 ID="header1">Справочник по HTML</H1>
В частях II и III, работая со стилями CSS и Web-сценариями, мы будем активно пользоваться атрибутом тега ID. А пока что оставим его в покое.
Ранее мы изучили три правила написания HTML-кода. Добавим к ним еще шесть.
- Имена атрибутов тегов могут быть написаны как прописными (большими), так и строчными (малыми) буквами. Традиционно в языке HTML имена атрибутов тегов пишут прописными буквами, а их значения - строчными, если, конечно, значение не чувствительно к регистру букв.
- Имена атрибутов тегов пишут между символами < и > после имени тега и отделяют от него пробелом или разрывом строки. Если в теге присутствуют не- сколько атрибутов, их отделяют друг от друга также пробелами или разрывами строки.
- Внутри имен атрибутов не должны присутствовать пробелы, в противном случае Web-обозреватель посчитает, что это не один атрибут, а несколько.
- Значение атрибута тега пишут после его имени и заключают в двойные кавычки. Между именем атрибута тега и его значением ставят знак равенства.
- Между именем атрибута тега, знаком равенства и открывающими кавычками могут присутствовать пробелы или разрывы строк.
- Символы двойных кавычек недопустимы и не должны присутствовать в обычном тексте, иначе Web-обозреватель посчитает следующий за ними текст значением атрибута тега.
На этом пока закончим с HTML. В последующих главах части I мы продолжим его изучение.
Программы, которыми мы будем пользоваться
Поговорим о программах, с которыми будем работать. Не считая Блокнота (или аналогичного текстового редактора), таких программ две: Web-обозреватель и Web-сервер.
Web-обозреватель
Web-обозревателей на свете довольно много. Но если отбросить старые и специализированные, останется всего пять: Microsoft Internet Explorer, Mozilla Firefox, Opera, Google Chrome и Apple Safari.
Разумеется, все эти программы поддерживают языки HTML, CSS (язык описания каскадных таблиц стилей) и JavaScript (язык, на котором пишутся Web-сценарии). Большинство этих программ поддерживает некоторый набор возможностей HTML 5 и CSS 3 (новая версия CSS):
- Mozilla Firefox - начиная с версии 3.5;
- Opera - начиная с версии 9.5;
- Google Chrome - начиная с версии 2.0.158.0;
- Apple Safari - начиная с версии 4.0.
НА ЗАМЕТКУ
Отдельные возможности HTML 5 и CSS 3 начали поддерживаться и в более ранних версиях этих программ. Однако, чтобы успешно просматривать Web-страницы, которые мы будем создавать в процессе изучения этой книги, следует использовать указанные версии или более новые.
А что же Microsoft Internet Explorer? Поддерживает ли он HTML 5 и CSS 3 на данный момент? К сожалению, нет. Поддержку HTML 5 и CSS 3 обещают лишь в вер- сии 9.0, которая сейчас только разрабатывается.
Но какой же Web-обозреватель нам выбрать? Какой угодно из перечисленных представителей "передовой четверки" - Firefox, Opera, Chrome или Safari. А лучше - сразу все, чтобы удостовериться, что наши Web-страницы в любом из них отображаются правильно.
Web-сервер
Когда мы тестировали нашу первую Web-страницу, то прекрасно обошлись без Web-сервера, открыв ее прямо в Web-обозревателе. Но в дальнейшем, особенно когда мы начнем реализовывать подгрузку содержимого, Web-сервер все-таки нам понадобится. Многие Web-сценарии нормально работают только в том случае, если Web-страница загружена с Web-сервера. Это сделано ради безопасности.
Так что давайте займемся поиском подходящего Web-сервера.
К счастью, долго искать нам не придется. В составе Windows XP/2003/Vista/Se7en поставляется вполне серьезный Web-сервер Microsoft Internet Information Services. Он исключительно прост в установке и настройке, а его возможностей нам вполне хватит.
Как установить и запустить Internet Information Services, описано в документации, поставляемой в составе Windows. Настраивать его, как правило, не нужно - он сразу после установки "бросается в бой". Более того, Web-сервер Microsoft после установки создает небольшой тестовый Web-сайт, корневая папка которого находится по пути C:\Inetpub\wwwroot. Этой папкой мы и воспользуемся для тестирования наших Web-страничек.
НА ЗАМЕТКУ
Если вам не нравится Internet Information Services, вы можете использовать любой другой. Например, популярный Web-сервер Apache, хотя его придется настраивать сразу после установки.
Вообще, какой именно Web-сервер установлен, не принципиально. Главное - чтобы он был.
Теперь испытаем свежеустановленный Web-сервер в действии. Для этого нам понадобится любая программа управления файлами (например, поставляемый в составе Windows Проводник). Откроем в ней корневую папку созданного при установке Web-сайта (в случае Internet Information Services это папка C:\Inetpub\wwwroot).
ВНИМАНИЕ !
Если вы пользуетесь Internet Information Services, поставляемым с Windows Vista или Windows Se7en, то имейте в виду, что папка C:\Inetpub\wwwroot защищена UAC (User Access Control, управление доступом пользователя) - новой системой защиты ключевых папок и файлов, встроенной в эти операционные системы. Поэтому вам придется сначала запустить Проводник или иную программу управления файлами, которой вы пользуетесь, от имени администратора. Для этого достаточно щелкнуть на яр- лыке этой программы правой кнопкой мыши, выбрать в появившемся на экране контекстном меню пункт Запуск от имени администратора (Run As Administrator) и положительно ответить на предупреждение UAC.
Удалим из корневой папки все имеющиеся там файлы, чтобы они нам не мешали. И скопируем туда нашу первую Web-страницу 1.1.htm.
Теперь откроем выбранный ранее Web-обозреватель и наберем в нем интернет- адрес http://localhost/1.1.htm. Интернет-адрес http://localhost идентифицирует наш собственный компьютер (локальный хост), а /1.1.htm - указание на файл 1.1.htm, хранящийся в корневой папке Web-сайта.
Если мы все сделали правильно, Web-обозреватель отобразит нашу Web-страницу (см. рис. 1.3). Значит, Web-сервер работает.
Что дальше?
В этой главе мы познакомились с современными веяниями в Web-дизайне, узнали о концепции Web 2.0, поняли, как работает Интернет в целом и WWW в частности, начали изучать язык HTML, создали свою первую Web-страницу, и выбрали себе для работы Web-обозреватель и Web-сервер. В общем, неплохо стартовали...
Теперь на какое-то время мы оставим в покое принципы и концепции и сосредоточимся на практике, а именно на HTML. В следующей главе мы рассмотрим средства структурирования текста: абзацы, заголовки, списки и цитаты. Так сказать, научимся делить текст на "куски".
ГЛАВА 2. Структурирование текста
В предыдущей главе мы прошли "ударный" курс современного Web-дизайна, концепции Web 2.0, интернет-технологий и языка HTML. Мы выучили много новых терминов, создали свою первую Web-страничку и даже испытали в действии собственный Web-сервер. Теперь мы готовы к любым трудностям. В этой главе мы продолжим изучение языка HTML и рассмотрим средства для структурирования текста - разбиения его на отдельные значащие фрагменты, имеющие различное назначение и несущие различный смысл. Такими фрагментами являются абзацы, заголовки, списки и цитаты.
Абзацы
Если оформить текст в виде большого монолитного "куска", его вряд ли кто-то будет читать. Такой "кусок" текста выглядит как высокий черный забор, за которым не видно ни единой мысли автора, забор без единой дверцы, без единой щелочки.
Именно поэтому текст всегда разбивают на абзацы. Небольшие, включающие по несколько связанных по смыслу предложений, они доносят авторский текст посте- пенно, по частям, от простого к сложному. В общем, превращают непроницаемый "забор" в читабельный текст.
Как мы уже знаем из главы 1, язык HTML для создания абзаца предоставляет парный тег <P>. Содержимое этого тега становится текстом абзаца:
<P>Я - совсем короткий абзац.</P>
<P>А я - уже более длинный абзац. Возможно, Web-обозреватель разобьет меня на две строки.</P>
Абзац HTML отделяется небольшим отступом от предыдущего и последующего элементов страницы. Если абзац полностью помещается по ширине в родительский элемент Web-страницы, он будет выведен в одну строку; в противном случае Web- обозреватель разобьет его текст на несколько более коротких строк.
Абзац - это независимый элемент Web-страницы, который отображается отдельно от других элементов. Такие элементы Web-страницы называются блочными, или блоками.
Правила отображения текста абзаца Web-обозревателем:
- два и более следующих друг за другом пробела считаются за один пробел;
- перевод строки считается за пробел;
- пробелы и переводы строки между тегами, создающие блочные элементы, никак не отображаются на Web-странице. (Благодаря этому мы можем форматировать HTML-код для более удобного чтения, в том числе ставить отступы для обозначения вложенности тегов.)
Эти же правила справедливы для других блочных элементов, которые мы изучим в этой главе.
Настало время попрактиковаться. Давайте создадим главную Web-страницу нашего первого Web-сайта - справочника по HTML и CSS. Откроем Блокнот и наберем в нем HTML-код, приведенный в листинге 2.1.
Листинг 2.1
<!DOCTYPE html>
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<TITLE>Справочник по HTML и CSS</TITLE>
</HEAD>
<BODY>
<P>Справочник по HTML и CSS</P>