Опубликовано: 29.09.2010 Последняя правка: 08.12.2015

Группирование элементов

Группирование элементов HTML-страницы является одним из самых мощных, удобных и одновременно простых инструментов для создания качественного сайта. Вообще, с некоторыми моментами группирования вы уже сталкивались в предыдущих уроках, просто не знали, что это так называется. Зато теперь мы уделим этому целый урок.

Тег <DIV> или сгруппированный блок

До сих пор все изученные нами элементы HTML могли содержать только один из типов тегов — либо встроенные (inline, уровня строки), либо блочные (block). А теперь позвольте вам представить тег <DIV>...</DIV>. Сам он является блочным, но вот содержать может как встроенные, так и блочные теги, ну и конечно же обычный текст. Но это еще не все, в отличие от других блочных тегов — <DIV> не добавляет абсолютно никаких внешних полей (отступов) пустого пространства вокруг себя, как это делает, например, тег <P>.

А теперь давайте подумаем, чем же нам может быть полезен этот интересный тег? Ну вот представьте, что вам надо в меню навигации сайта разместить блоки с текстом. Не будете же вы использовать параграфы, это ведь меню, а не статья. Или у вас есть несколько параграфов и надо у последних трех изменить шрифт и выравнивание текста. И что вы будете делать? Прописывать в каждом из них атрибут style? Не надо, лучше посмотрите пример.

Пример использования тега DIV

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Использование тега DIV</title>
</head>
<body>
 <div style="color:#FF00CC; background:#00CCFF; font-size:150%; text-align:center">Меню сайта</div>
 <div style="color:#CCFF00; background:#FF00CC; font-size:150%; text-align:center">Дополнительные разделы</div>

 <p>Параграф.</p>
 <p>Параграф.</p>
 <p>Параграф.</p>
 
 <div style="font-family:Times, serif; text-align:right">
  <p>Параграф.</p>
  <p>Параграф.</p>
  <p>Параграф.</p>
 </div>
</body>
</html>

Результат в браузере

Меню сайта
Дополнительные разделы

Параграф.

Параграф.

Параграф.

Параграф.

Параграф.

Параграф.

Конечно это далеко не все на что способен <DIV> и в процессе обучения мы еще не раз будем к нему возвращаться. А пока давайте рассмотрим еще один тег, с которым вы уже знакомы.

Тег <SPAN> или сгруппированная строка

Да, с тегом <SPAN>...</SPAN> вы уже знакомы и наверняка поняли суть его применения, но без него урок по группированию элементов был бы неполным, так как в первую очередь он предназначен именно для этого.

<SPAN>, как и <DIV>, без атрибутов не добавляет никаких изменений своему содержимому. Но он является встроенным (инлайн) элементом, который может содержать только встроенные теги и использоваться внутри строк текста.

Пример использования тега SPAN

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Использование тега SPAN</title>
</head>
<body>
 <p>
  Обычный текст.
  <span style="color:#FF00CC">
   <strong>Жирный.</strong>
   <em>Курсив.</em>
  </span>
 </p>
</body>
</html>

Результат в браузере

Обычный текст. Жирный. Курсив.

При группировании элементов важно соблюдать не только синтаксис HTML, но также смысловое и логическое структурирование кода. Например, если у вас есть страница с краткой биографией двух людей, то не надо пихать внутрь одного блока конец биографии первого человека и начало второго. А вот информацию отдельной биографии или ее части вы вполне можете расположить внутри блока, если это необходимо, или вообще их обе заключить в один блок.

Домашнее задание.

Немного усложним. Для выполнения задания вы можете использовать любые теги, но только три <DIV> и два <SPAN>. Атрибуты вы должны указывать тоже только внутри этих тегов, за исключением «шапки» документа — там все, как обычно.

  1. Создайте заголовок статьи и двух ее разделов.
  2. В каждом разделе напишите по два параграфа, а под заголовком статьи не надо.
  3. Пусть заголовки разделов будут написаны шрифтом Tahoma синего цвета.
  4. Пусть шрифт первых двух параграфов будет с размером 90%, а вторых двух — 80% и располагается по центру.
  5. В последнем параграфе выделите три фразы — две красным цветом, а одну подчеркнутым шрифтом.

Хотя я и говорил, что запоминать наизусть все уроки не нужно, но что-то же должно было уже отложиться в ваших головках. Давайте-ка проверим.

  1. Что такое блочные и встроенные типы элементов и что значит «один тег содержит другой»?
  2. К какому типу относятся данные теги, и какие типы они могут содержать: <P>, <DIV>, <STRONG>, <BLOCKQUOTE>, <BODY>, <BR>?
  3. Что значит выравнивание содержимого HTML-элементов и к каким типам тегов его можно применять?
  4. Что такое атрибут style, почему мы часто используем именно его вместо других атрибутов и сколько раз его можно указывать в одном теге?
Горизонтальные линии← Содержание →Комментарии в HTML
Учебник HTML