HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов

Дронов Владимир

Сразу же откроем созданную Web-страницу в Web-обозревателе — так мы сразу сможем определить, нет ли ошибок. Если ошибки все-таки есть, исправим их.

Пока что наша Web-страничка содержит одни абзацы. Первое, что мы должны в нее добавить, — это…

Заголовки

Помимо абзацев, большой текст для удобства чтения и поиска в нем нужного фрагмента обычно делят на более крупные части: параграфы, главы, разделы. HTML не предоставляет средств для такого структурирования текста. Но он позволяет создать заголовки, которые делят текст

на части, по крайней мере, визуально. Как в обычной "бумажной" книге.

Прежде всего, уясним, что в HTML есть понятие уровня заголовка, указывающее, насколько крупную часть текста открывает данный заголовок. Всего таких уровней шесть, и обозначаются они числами от 1 до 6.

— Заголовок первого уровня (1) открывает самую крупную часть текста. Как правило, это заголовок всей Web-страницы. Web-обозреватель выводит заголовок первого уровня самым большим шрифтом.

— Заголовок второго уровня (2) открывает более мелкую часть текста. Обычно это большой раздел. Web-обозреватель выводит заголовок второго уровня меньшим шрифтом, чем заголовок первого уровня.

— Заголовок третьего уровня (3) открывает еще более мелкую часть текста; обычно главу в разделе. Web-обозреватель выводит такой заголовок еще меньшим шрифтом.

— Заголовки четвертого, пятого и шестого уровней (4–6) открывают отдельные параграфы, крупные, более мелкие и самые мелкие соответственно. Web- обозреватель выводит заголовки четвертого и пятого уровня еще меньшим шрифтом, а заголовок шестого уровня — тем же шрифтом, что и обычные абзацы, только полужирным.

На Web-страницах небольшого и среднего размера обычно применяют заголовки первого, второго и третьего уровня. Меньшие уровни используются только на очень больших Web-страницах, содержащих сложно структурированный текст.

Для создания заголовка 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>

Мы просто заменили теги в соответствующих фрагментах 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>