На протяжении уже нескольких уроков мы кодируем в области тега BODY, в так называемом "теле" документа, но не знаем всех возможностей и особенностей данного тега.

BODY

Описание:

Тег предназначен для вывода информации, которая кодируется в его области. Здесь могут прописываться скрипты, HTML-код, текст и многое другое.

Атрибуты:

alink - цвет активных ссылок
background - фоновое изображения документа
bgcolor - цвет фона
bgproperties - фиксация фонового изображения при прокрутке
bottommargin - отступ от нижнего края
leftmargin - отступ от левого края
link - цвет ссылок
marginheight - аналог topmargin, но для Netscape
marginwidth - аналог leftmargin, но для Netscape
rightmargin - отступ от правого края
scroll - отоброжение скрола или нет
text - цвет текста
topmargin - отступ от верхнего края
vlink - цвет посещённых ссылок

Пример:

Цвет активной ссылки - цвет, в который окрашивается ссылка при её нажатии, то есть чтобы посмотреть действие данного атрибута, нужно нажать на ссылку:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
<title>Тег BODY</title>
</head>
<body alink="green">
<a href="#">ХТМЛ</a> - тот фундамент, который заложен в основу всех сайтов.
</body>
</html>

Видим, что она окрасилась в зелёный цвет. Отлично теперь попробуем прописать фон документу:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
<title>Тег BODY</title>
</head>
<body alink="green" background="/images/bg.jpg">
<a href="#">ХТМЛ</a> - тот фундамент, который заложен в основу всех сайтов.
</body>
</html>

Имеем фоновое изображение bg.jpg, расположенное в папке images (естественно фоновое изображение может находиться и вовсе в другой папке). Если же хотим видеть вместо изображения на фоне обычный цвет, то используем атрибут BGCOLOR:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
<title>Тег BODY</title>
</head>
<body alink="green" bgcolor="#f6f6f6">
<a href="#">ХТМЛ</a> - тот фундамент, который заложен в основу всех сайтов.
</body>
</html>

Имеем сероватый цвет на фоне. Теперь разбираем BGPROPERTIES. Цель данного атрибута - зафиксировать на месте фоновое изображение при прокрутке, если же фиксировать не нужно, то данный атрибут прописывать не стоит:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
<title>Тег BODY</title>
</head>
<body alink="green"background="/images/bg.jpg" bgproperties="fixed">
<a href="#">ХТМЛ</a> - тот фундамент, который заложен в основу всех сайтов.
</body>
</html>

Теперь при прокрутке контента фоновое изображение не будет прокручиваться.

Теперь об отступах. Дело в том, что первоначально в теге BODY заданы верхний и левый отступы, это очень наглядно прослеживается на этом примере. Для остранения этих отступов и существуют два атрибута: topmargin руководит верхним отступом, а leftmargin - левым. Теперь чтобы отступы убрать, нужно обнулить значение этих атрибутов:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
<title>Тег BODY</title>
</head>
<body topmargin="0" leftmargin="0">
<img src="1.jpg" alt="Пример отступов"/>
</body>
</html>

Получаем следующий вариант . Кстати, Netscape не воспринимает данные атрибуты, поэтому специально для этого браузера были придуманы аналогичные атрибуты: marginheight - аналог topmargin, а marginwidth - аналог leftmargin. То есть чтобы убрать отступы и в Netscape, добавляем к topmargin и leftmargin атрибуты marginheight и marginwidth:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
<title>Тег BODY</title>
</head>
<body topmargin="0" leftmargin="0" marginheight="0" marginwidth="0">
<img src="1.jpg" alt="Пример отступов"/>
</body>
</html>

Аналогично и с bottommargin и rightmargin, только они уже отвечают на нижний и правый отступы соответственно.

Иногда бывает необходимость скрыть скролл. Это достигается с помощью атрибута scroll. Сразу хочу сказать, что данный атрибут может принимать лишь два значения: "yes"- отображать, "no"- не отображать. Если же вы не хотите скрывать скролл, то не стоит и вовсе прописывать данный атрибут, так как значение "yes" используется по умолчанию:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
<title>Тег BODY</title>
</head>
<body topmargin="0" leftmargin="0" marginheight="0" marginwidth="0" scroll="no">
Контент...
</body>
</html>

Вернёмся к ссылкам, мы уже знаем, что за цвет активного состояния ссылки отвечает атрибут alink, теперь пора рассказать вам, что за цвет ссылок в обычном состоянии отвечает атрибут link, а посещённых - vlink. Пробуем:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
<title>Тег BODY</title>
</head>
<body alink="green" link="silver" vlink="red">
<a href="#">Ссылка</a>
</body>
</html>

Получаем красный цвет у посещённых ссылок, зеленый цвет у активных и серебристый цвет у ссылок в обычном состоянии.

Цвет текста меняется с помощью атрибута text:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
<title>Тег BODY</title>
</head>
<body text="#333333">
Контент...
</body>
</html>

Аналог CSS

Все манипуляции по прописыванию атрибутов у BODY осуждаются стандартами W3C. Но если вы заинтересованы в некоторых атрибутах, то их можно заменить технологией каскадных таблиц:

body {
background-image: url("images/bg.jpg"); /*Фоновое изображение*/
background-color: цвет; /*Цвет фона*/
background-attachment: fixed; /*fixed - закрепить фоновое изображение, а scroll- нет.*/
margin: 3px 2px 1px 0px; /*1ое значение - верхний отступ, 2ое - правый, 3ее - нижний, а 4ое - левый*/
overflow: hidden; /*Скрыть скролл, а не надо скрывать, то удалите эту строку*/
color: цвет; /*Цвет текста*/
}
body:active {
color: цвет; /*Цвет активных ссылок*/
}
body:link {
color: цвет; /*Цвет ссылок в обычном состоянии*/
}
body:visited {
color: цвет; /*Цвет посещённых ссылок*/
}

Если используете в качестве фона изображение, то background-color стоит удалить, если наоборот, то стоит удалить background-image.