Уроки WEB-Строительства

\|УРОК 15\| - Группировка элементов

Вступление

Давайте возьмем файл из предыдущего урока и выровнять все по центру.
Правим:

<html>
 <body bgcolor=white text=black>
  <H4 align=center>Песенка Винни-Пуха</H4>
   <a href="index.html">
    <img align=center 
	 src="vinnie.jpg" alt="Винни-Пух" width=232 height=304 border=0>
   </a>
   <p align=center>
    <S>Если б мишки были пчелами</S><br>
    <B><I>То они бы нипочем</I></B><br>
    <BIG>Никогда бы не подумали</BIG><br>
    <SMALL><U>Так высоко строить дом</U></SMALL><br>
  </p>
  <p align=center><TT>Конец</TT></p>
 </body>
</html>

Запускаем и видим вполне ожидаемый результат:

Песенка Винни-Пуха

Хуже всего, конечно, то, что не выровнялся рисунок (потому что в возможных значениях аттрибута align для тега <img> нет center). Выхода два:Либо запихнуть картинку в абзац, либо.... Уберем все аттрибуты align и внесем такие изменения:

<html>
 <body bgcolor=white text=black>
  <div align=center>
   <H4>Песенка Винни-Пуха</H4>
    <a href="index.html">
     <img src="vinnie.jpg" alt="Винни-Пух" width=232 height=304 border=0>
    </a>
    <p>
     <S>Если б мишки были пчелами</S><br>
     <B><I>То они бы нипочем</I></B><br>
     <BIG>Никогда бы не подумали</BIG><br>
     <SMALL><U>Так высоко строить дом</U></SMALL><br>
   </p>
   <p><TT>Конец</TT></p>
  </div>
 </body>
</html>

Снова запускаем и, о чудо, все на своих местах!

Песенка Винни-Пуха

Необходимые пояснения

Как же получилось, что вместо четырех аттрибутов align и невнятного результата мы использовали всего один и увидели то что хотели?
Всему виной тег <div></div>, который служит для группировки различных элементов документа. Таким образом, мы можем сгруппировать несколько элементов и задать им всем сразу одно и то же выравнивание, например. Вообще говоря, самое мощное применение группировки - это задание стиля, но это - предмет рассмотрения Уроков CSS. Однако, даже одного выравнивания хватает. Во-первых, сокращается количество писанины, а во-вторых - упрощает структуру документа.

Хотелось бы еще упомянуть о теге <span></span>, который также служит для группировки элементов и имеет сходные с <div></div> свойства. Разделение - чисто на уровне структуры документа. Тег <span></span> определяет встраиваемую информацию, а тег <div></div> - информацию уровня блока.

Сухой остаток

1. Теги <span></span> и <div></div> служат для группировки элементов с целью улучшения структуры документа.