Помимо абзацев, большой текст для удобства чтения и поиска в нем нужного фрагмента обычно делят на более крупные части: параграфы, главы, разделы. HTML не предоставляет средств для такого структурирования текста. Но он позволяет создать заголовки, которые делят текст на части, по крайней мере, визуально. Как в обычной "бумажной" книге.
Прежде всего, уясним, что в HTML есть понятие уровня заголовка, указывающее, насколько крупную часть текста открывает данный заголовок. Всего таких уровней шесть, и обозначаются они числами от 1 до 6.
Заголовок первого уровня (<H1>) открывает самую крупную часть текста. Как правило, это заголовок всей Web-страницы. Web-обозреватель выводит заголовок первого уровня самым большим шрифтом.
Заголовок второго уровня (<H2>) открывает более мелкую часть текста. Обычно это большой раздел. Web-обозреватель выводит заголовок второго уровня меньшим шрифтом, чем заголовок первого уровня.
Заголовок третьего уровня (<H3>) открывает еще более мелкую часть текста; обычно главу в разделе. Web-обозреватель выводит такой заголовок еще меньшим шрифтом.
Заголовки четвертого, пятого и шестого уровней (<H4> - <H6>) открывают отдельные параграфы, крупные, более мелкие и самые мелкие соответственно. Web-обозреватель выводит заголовки четвертого и пятого уровня еще меньшим шрифтом, а заголовок шестого уровня — тем же шрифтом, что и обычные абзацы, только полужирным.
На Web-страницах небольшого и среднего размера обычно применяют заголовки первого, второго и третьего уровня. Меньшие уровни используются только на очень больших Web-страницах, содержащих сложно структурированный текст.
Для создания заголовка HTML предоставляет парный тег <hx>, где x — уровень заголовка. Содержимое этого тега станет текстом заголовка (листинг 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>
<h3>Теги HTML</h3>
Мы просто заменили теги <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> Второй пункт внешнего списка</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>Набор правил, определяющих реакцию 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-страничка стала выглядеть симпатичнее.
