ресурс для начинающих веб-разработчиков
комплексные веб-услуги по созданию сайтов

Справочный материал по основным языкам программирования и верстки сайтов.

Готовая методика создания простых и сложных динамичных сайтов, с использованием PHP и MySQL.

Использование веб-редактора Adobe Dreamweaver в разработке сайтов.

Использование графических редакторов Adobe Flash, Adobe Photoshop, Adobe Fireworks в подготовке веб-графики.

Разработка веб-сайтов под "ключ".

Разработка отдельных фрагментов сайтов, консультации по вопросам верстки веб-страниц и веб-программирования.

Раздел BODY. Основная часть документа. Теги div и span

Основная часть документа

Тег body

В этом разделе располагается все содержимое документа включающее в себя текст, ссылки, графические, звуковые и другие объекты, расположенные вне раздела заголовка, задаваемого тегом <head>. Часто основной раздел заключают в контейнерный тег <body>, который может встречаться в HTML-документе не более одного раза и не может содержать тег заголовка <head>.

Пример:

<html>
<head>
Здесь располагаются теги раздела заголовка документа
</head>
<body>
Здесь располагаются теги основного раздела документа
</body>
</html>

В окне веб-браузера это будет выглядеть ТАК.

Использование тега <body> не обязательно. Но он обладает атрибутами, с помощью которых можно задать параметры сразу для многих элементов, содержащихся в <body>.

Параметры тега <body>:

  • bgcolor — задает цвет фона веб-страницы. Цвет определяется цифрами в шестнадцатеричном коде. Для каждой составляющей цвета (красного, зеленого и синего) задается значение в пределах от 00 до FF. Эти значения объединяются в одно число, перед которым добавляется символ "#", например, значение #FF0000, соответствует красному цвету, #00FF00 — ярко-зеленому, а #FF00FF — фиолетовому (смесь красного и синего).
  • Пример:

    <html>
    <head>
    <meta charset="utf-8">
    <title>Тег body</title>
    </head>
    <body bgcolor="FF0000">
    Здесь располагаются теги основного раздела документа
    </body>
    </html>

    В окне веб-браузера это будет выглядеть ТАК.

  • background — задает фоновый рисунок для документа, путем указания URL-адреса изображения:
  • <body background = "fon.gif">

    Пример:

    <html>
    <head>
    <meta charset="utf-8">
    <title>Тег body</title>
    </head>

    <body background="../images/fon.gif">
    Здесь располагаются теги основного раздела документа
    </body>
    </html>

    В окне веб-браузера это будет выглядеть ТАК.

  • alink — определяет цвет активной ссылки:
  • <body alink="#0000FF">

    Пример:

    <html>
    <head>
    <meta charset="utf-8">
    <title>Тег body</title>
    </head>

    <body alink="#0000FF">
    Здесь располагаются теги основного раздела документа<br>
    <a href="5.html" target="_blank">Активная ссылка</a>
    </body>
    </html>

    В окне веб-браузера это будет выглядеть ТАК.

  • link — устанавливает цвет уще не просмотренных ссылок:
  • <body link="#000000" alink="#0000FF">

    Пример:

    <html>
    <head>
    <meta charset="utf-8">
    <title>Тег body</title>
    </head>

    <body link="#000000" alink="#0000FF">
    Здесь располагаются теги основного раздела документа<br>
    <a href="5.html" target="_blank">Активная ссылка</a>
    </body>

    </html>

    В окне веб-браузера это будет выглядеть ТАК.

  • vlink — определяет цвет уже просмотренных ссылок:
  • <body vlink="#FF0000" link="#000000" alink="#0000FF">

    Пример:

    <html>
    <head>
    <meta charset="utf-8">
    <title>Тег body</title>
    </head>

    <body vlink="#FF0000" link="#000000" alink="#0000FF">
    Здесь располагаются теги основного раздела документа<br>
    <a href="5.html" target="_blank">Активная ссылка</a>
    </body>

    </html>

    В окне веб-браузера это будет выглядеть ТАК.

  • text — устанавливает цвет текста.
  • Пример:

    <html>
    <head>
    <meta charset="utf-8">
    <title>Тег body</title>
    </head>

    <body text="#FF0000" vlink="#FF0000" link="#000000" alink="#0000FF">
    Здесь располагаются теги основного раздела документа<br>
    <a href="5.html" target="_blank">Активная ссылка</a>
    </body>
    </html>

    В окне веб-браузера это будет выглядеть ТАК.

    Существуют и другие параметры, которые будут рассмотрены по мере изучения языка.

Теги div и span

Для выделения некоторых фрагментов документов, чтобы иметь возможность задать его общие параметры, служат контейнерные теги <div> и <span>. Контейнер <div> может содержать различные элементы (текст, графические изображения, ссылки , объекты и т.д.), а <span> применяется к фрагментам текста.

Общие параметры для элементов, включенных в данные контейнеры, обычно назначаются с помощью таблиц стилей (тег <style> или атрибут style). В частности, можно задать произвольное относительное положение фрагментов документа, в т.ч. и наложение друг на друга, имитируя тем самым наложение слоев. Дополнительно к этому тег <div> имеет атрибут align с возможными значениями center, left, right, позволяющий выровнять весь фрагмент документа по центру, левому и правому краю браузера соответственно.

Пример:

<html>
<head>
<meta charset="utf-8">
<title>Тег div</title>
</head>

<body text="#FF0000" vlink="#FF0000" link="#000000" alink="#0000FF">

<div align="center">
Текст выравнивается по центру<br>
Здесь располагаются теги основного раздела документа
</div>

<a href="5.html" target="_blank">Активная ссылка</a>
</body>
</html>

В окне веб-браузера это будет выглядеть ТАК.