Группирование элементов
Группирование элементов HTML-страницы является одним из самых мощных, удобных и одновременно простых инструментов для создания качественного сайта.
Тег <DIV> или сгруппированный блок
До сих пор все изученные нами элементы HTML могли содержать только один из типов тегов — либо встроенные (inline, уровня строки), либо блочные (block). А теперь позвольте вам представить тег <DIV>...</DIV>. Сам он является блочным, но вот содержать может как встроенные, так и блочные теги, ну и конечно же обычный текст. Но это еще не все, в отличие от других блочных тегов — <DIV> не добавляет абсолютно никаких внешних полей (отступов) пустого пространства вокруг себя, как это делает, например, тег <P>.
Пример использования тега DIV
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://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>
Результат в браузере
Тег <SPAN> или сгруппированная строка
Тег <SPAN>...</SPAN> является встроенным (инлайн) элементом, который может содержать только встроенные теги и использоваться внутри строк текста.
Пример использования тега SPAN
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://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, но также смысловое и логическое структурирование кода. Например, если у вас есть страница с краткой биографией двух людей, то не надо пихать внутрь одного блока конец биографии первого человека и начало второго. А вот информацию отдельной биографии или ее части вы вполне можете расположить внутри блока, если это необходимо, или вообще их обе заключить в один блок.
Комментарии в HTML
Xтобы проще ориентироваться в HTML-коде, придумали специальные комментарии. Выглядит это так:
<!-- Комментарии -->
Любая информация заключенная в HTML-комментарии не будет обработана браузером и выведена на страницу. Чаще всего их применяют для пояснения того или иного участка кода или для скрытия части самого кода от браузеров, например, при тестировании макета страницы.
Комментарии в HTML можно указывать в любом месте, между любыми тегами, и писать все, что вам заблагорассудится. Но есть несколько ограничений: их нельзя вкладывать друг в друга и писать внутри тела открывающего или закрывающего тега, то есть между скобками < >.
Пример использования комментариев в HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Комментарии в HTML</title>
</head>
<body><!-- Начало тела документа -->
<!--Основной блок-->
<div>
<p>Параграф.</p>
<p>Параграф.</p>
<p>Параграф.</p>
<!-- <p>Параграф.</p>
<p>Параграф.</p>
<p>Параграф.</p> -->
</div><!--/Основной блок-->
</body><!-- Конец тела документа -->
</html>
Дата добавления: 2015-12-11; просмотров: 930;