Для создания заголовка HTML предоставляет парный тег <Hn>, где n — уровень заголовка. Содержимое этого тега станет текстом заголовка (листинг 2.2).
Листинг 2.2
<H1>Я — заголовок Web-страницы, самый главный</H1>
<H2>Я — заголовок раздела</H2>
<H3>Я — заголовок главы</H3>
<H4>Я — заголовок крупного параграфа</H4>
<H5>Я — заголовок параграфа поменьше</H5>
<H6>А я — заголовок маленького параграфа. Ой, какие все вокруг большие!..</H6>
Заголовок также относится к блочным элементам Web-страницы. При его выводе на экран Web-обозреватель следует тем же правилам, что и для абзаца.
Заголовки — это то, чего не хватает нашей Web-страничке index.htm. Давайте их добавим (листинг 2.3).
Листинг 2.3
<H1>Справочник по HTML и CSS</H1>
.
<H2>Основные принципы HTML</H2>
.
<H2>Теги HTML</H2>
Мы просто заменили теги <P> в соответствующих фрагментах HTML-кода на теги
<H1> и <H2>. Теперь можем открыть Web-страницу в Web-обозревателе и посмотреть на результат.
Списки
Списки используются для того, чтобы представить читателю перечень каких-либо позиций, пронумерованных или непронумерованных, — пунктов списка. Список с пронумерованными пунктами так и называется — нумерованным, а с непронумерованными — маркированным. В маркированных списках пункты помечаются особым значком — маркером, который ставится левее пункта списка.
Маркированные списки обычно служат для простого перечисления каких-либо позиций, порядок следования которых не важен. Если же следует обратить внимание читателя на то, что позиции должны следовать друг за другом именно в том порядке, в котором они перечислены, следует применить нумерованный список.
Web-обозреватель выводит список с отступом слева. Расстояние между пунктами списка он делает меньшими чем в случае абзацев или заголовков. Также он сам расставляет необходимые маркеры или нумерацию.
Любой список в HTML создается в два этапа. Сначала пишут строки, которые станут пунктами списка, и каждую из этих строк помещают внутрь парного тега <LI>. Затем все эти пункты помещают внутрь парного тега <UL> (если создается маркированный список) или <OL> (при создании нумерованного списка) — эти теги определяют сам список (листинг 2.4).
Листинг 2.4
<UL>
<LI>Я — первый пункт маркированного списка.</LI>
<LI>Я — второй пункт маркированного списка.</LI>
<LI>Я — третий пункт маркированного списка.</LI>
</UL>
.
<OL>
<LI>Я — первый пункт нумерованного списка.</LI>
<LI>Я — второй пункт нумерованного списка.</LI>
<LI>Я — третий пункт нумерованного списка.</LI>
</OL>
Списки можно помещать друг в друга, создавая вложенные списки. Делается это
следующим образом. Сначала во "внешнем" списке (в который должен быть помещен вложенный) отыскивают пункт, после которого должен находиться вложенный список. Затем HTML-код, создающий вложенный список, помещают в разрыв между текстом этого пункта и его закрывающим тегом </LI>. Если же вложенный список должен помещаться в начале "внешнего" списка, его следует вставить между открывающим тегом <LI> первого пункта "внешнего" списка и его текстом. Что, впрочем, логично.
В листинге 2.5 представлен HTML-код, создающий два списка, один из которых вложен внутрь другого. Обратите внимание, где размещается HTML-код, создающий вложенный список.
Листинг 2.5
<UL>
<LI>Я — первый пункт внешнего списка.</LI>
<LI>Я — второй пункт внешнего списка.
<UL>
<LI>Я— первый пункт вложенного списка.</LI>
<LI>Я— второй пункт вложенного списка.</LI>
<LI>Я— третий пункт вложенного списка.</LI>
</UL>
</LI>
<LI>Я — третий пункт внешнего списка.</LI>
</UL>
HTML позволяет вкладывать нумерованный список внутрь маркированного и наоборот. Глубина вложения списков не ограничена.
Еще HTML позволяет создать так называемый список определений, представляющий собой перечень терминов и их разъяснений. Такой список создают с помощью парного тега <DL>. Внутри него помещают пары "термин — разъяснение", причем термины заключают в парный тег <DT>, а разъяснения — в парный тег <DD> (листинг 2.6).
Листинг 2.6
<DL>
<DT>Содержимое</DT>
<DD>Информация, отображаемая на Web-странице</DD>
<DT>Представление</DT>
<DD>Набор правил, определяющих формат отображения содержимого</DD>
<DT>Поведение</DT>
<DD>Набор правил, определяющих реакцию Web-страницы или ее элементов на действия посетителя</DD>
</DL>
Осталось сказать, что списки и их пункты относятся к блочным элементам Web-страницы, и при их выводе на экран Web-обозреватель руководствуется теми же правилами, что и при выводе абзацев и заголовков.
На нашей Web-странице есть несколько абзацев, перечисляющих основные возможности HTML. Превратим их в маркированный список (листинг 2.7).
Листинг 2.7
<UL>
<LI>абзацы;</LI>
<LI>заголовки;</LI>
<LI>цитаты;</LI>
<LI>списки;</LI>
<LI>таблицы;</LI>
<LI>графические изображения;</LI>
<LI>аудио- и видеоролики.</LI>
</UL>
Теперь наша Web-страничка стала выглядеть симпатичнее.
Цитаты
В тексте Web-страницы, которую мы создаем, присутствует большая цитата из Русской Википедии. Давайте ее как-то выделим.
HTML уже приготовил для нас выход из положения — парный тег <BLOCKQUOTE>, внутри которого размещается HTML-код, создающий цитату (листинг 2.8). Web- обозреватель выводит цитату с отступом слева.
Листинг 2.8
<BLOCKQUOTE>
<P>Я — начало большой цитаты.</P>
<P>Я — продолжение большой цитаты.</P>
</BLOCKQUOTE>
Как видим, в тег <BLOCKQUOTE> можно поместить несколько абзацев. Там также могут быть заголовки и списки (если уж возникнет такая потребность). Большая цитата HTML также относится к блочным элементам.
Осталось только сделать то, что было задумано, — оформить цитату (листинг 2.9).
Листинг 2.9
<BLOCKQUOTE>
<P>HTML (от англ. HyperText Markup Language — язык разметки гипертекста) — стандартный язык разметки документов во Всемирной паутине.</P>
</BLOCKQUOTE>
Текст фиксированного формата
Аппетит приходит во время еды. Мы еще не успели доделать свою первую Web- страницу, а уже хотим сделать еще одну. Давайте же ее сделаем. Дадим аппетиту разгуляться!
Новая Web-страница (листинг 2.10) будет посвящена тегу <TITLE>.
Листинг 2.10
<!DOCTYPE html>
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<TITLE>Тег TITLE</TITLE>
</HEAD>
<BODY>
<H1>Тег TITLE</H1>
<P>Тег TITLE служит для указания названия Web-страницы. Он ставится в ее секции заголовка.</P>
<H6>Пример:</H6>
<P>!HEAD!!TITLE!Я — заголовок Web-страницы!/TITLE!
!HEAD!</P>
</BODY>
</HTML>
Здесь мы поместили краткое описание тега <TITLE> и код примера, имеющий такой вид:
!HEAD!
!TITLE!Я — заголовок Web-страницы!/TITLE!
!/HEAD!
Вместо символов < и >, которые, как мы помним из главы 1, недопустимы в обычном тексте, мы поставили восклицательные знаки. В главе 3 мы узнаем, как все- таки вставить в текст недопустимые символы, и заменим их.
Сохраним набранный код в файле с именем t_title.htm и откроем его в Web-обозревателе. И что мы там увидим?
Рис. 2.1. Web-страница t_title.htm в Web-обозревателе. Обратим внимание на код примера
Как видно на рис. 2.1, Web-обозреватель вывел код примера в одну строку и без всяких отступов. Но ведь мы разбили его на три строки и создали отступы с помощью пробелов, чтобы HTML-код лучше читался и сразу была видна вложенность тегов! Что случилось?
Вспомним два правила, которыми руководствуется Web-обозреватель при выводе текста блочного элемента и которые были перечислены в разделе, посвященном абзацам. Эти правила гласят, что два или более следующих друг за другом пробела или переноса строки преобразуются в один пробел и перенос строки считается за пробел. Так Web-обозреватель и поступил: преобразовал переносы строки в пробелы, а последовательные пробелы — в один пробел. И вывел код примера в виде обычного абзаца, который у него поместился в одну строку.
Web-обозреватель все сделал правильно! Просто мы не указали ему, как следует выводить данный текст.
Специально для случаев, когда текст должен быть выведен именно так, как набран, с сохранением всех пробелов и переносов строк,
