Архив рубрики: Блочные теги

Тег BODY — основной блок страницы

Элемент BODY

Начальный тег: не обязателен, Конечный тег: не обязателен

Определения атрибутов

background = uri[CT]
Нежелателен. Значение этого атрибута — URI, указывающий на изображение. Это изображение является фоном (для визуальных браузеров).
text = color[CI]
Нежелателен. Этот атрибут устанавливает цвет текста (для визуальных браузеров).
link = color [CI]
Нежелателен. Этот атрибут устанавливает цвет текста гипертекстовых ссылок, по которым Вы не переходили (для визуальных браузеров).
vlink = color [CI]
Нежелателен. Этот атрибут устанавливает цвет текста ссылок, по которым Вы переходили (для визуальных браузеров).
alink = color [CI]
Нежелателен. Этот атрибут устанавливает цвет текста ссылок, когда они выбраны пользователем (для визуальных браузеров).

Атрибуты, определяемые в любом другом месте

  • id, class (идентификаторы в пределах документа)
  • lang (информация о языке), dir (направление текста)
  • title (заголовок элемента)
  • style (встроенная информация о стиле)
  • bgcolor (цвет фона)
  • onload, onunload (внутренние события)
  • onclick, ondblclick, onmousedown, onmouseup, onmouseover,
    onmousemove, onmouseout, onkeypress, onkeydown,
    onkeyup(внутренние события)

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

ПРИМЕР НЕЖЕЛАТЕЛЬНОГО ИСПОЛЬЗОВАНИЯ:
В следующем фрагменте кода HTML показано использование нежелательного атрибута. Он устанавливает белый цвет фона, черный цвет текста и красный цвет гиперссылок изначально, цвет фуксии при активизации ссылок и коричневый для ссылок, по которым Вы переходили.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
   "http://www.w3.org/TR/REC-html40/loose.dtd">
<HTML>
<HEAD>
 <TITLE>Динамика популяции</TITLE>
</HEAD>
<BODY bgcolor="white" text="black"
  link="red" alink="fuchsia" vlink="maroon">
  ... тело документа...
</BODY>
</HTML>

Используя таблицы стилей, того же эффекта можно достичь следующим образом:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<HTML>
<HEAD>
 <TITLE>Динамика популяции</TITLE>
 <STYLE type="text/css">
  BODY { background: white; color: black}
  A:link { color: red }
  A:visited { color: maroon }
  A:active { color: fuchsia }
 </STYLE>
</HEAD>
<BODY>
  ... тело документа...
</BODY>
</HTML>

Использование внешних (связываемых) таблиц стилей обеспечивает гибкость при изменении представления без пересмотра источника документа HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<HTML>
<HEAD>
 <TITLE>Динамика популяции</TITLE>
 <LINK rel="stylesheet" type="text/css" href="smartstyle.css">
</HEAD>
<BODY>
  ... тело документа...
</BODY>
</HTML>

Кадры и тела документов HTML. В документах, содержащих кадры, элемент BODY заменяется элементом FRAMESET.

Теги H1, H2, H3, H4, H5, H6 — заголовки

Заголовки: Элементы H1, H2, H3, H4, H5, H6

Начальный тег: обязателен, Конечный тег: обязателен

Атрибуты, определяемые в любом другом месте

  • id, class (идентификаторы в пределах документа)
  • lang (информация о языке), dir (направление текста)
  • title (заголовок элемента)
  • style (встроенная информация о стиле)
  • align (выравнивание)
  • onclick, ondblclick, onmousedown, onmouseup, onmouseover,
    onmousemove, onmouseout, onkeypress, onkeydown,
    onkeyup(внутренние события)

Заголовок кратко описывает содержание раздела, которому он предшествует. Информация из заголовка может использоваться агентами пользователей, например, для автоматического построения оглавления документа.

В языке HTML существует шесть уровней заголовков: H1 - наиболее важный — и H6 - наименее важный. Визуальные браузеры обычно отображают более важные заголовки более крупным шрифтом.

В следующем примере показано, как использовать элемент DIV для того, чтобы связать заголовок с последующим разделом документа. Это позволит Вам определить стиль для раздела (цвет фона, шрифт и т.д.) с использованием таблиц стилей.

<DIV id="forest-elephants" >
<H1>Лесные слоны</H1>
<P>В этом разделе мы обсуждаем менее известных лесных слонов.
...продолжение раздела...
<DIV id="forest-habitat" >
<H2>Ариал</H2>
<P>Лесные слоны не живут в деревьях, а среди них.
...продолжение раздела...
</DIV>
</DIV>

Эту структуру можно представить с использованием информации о стиле, например:

<HEAD>
<TITLE>... название документа ...</TITLE>
<STYLE type="text/css">
DIV.section { text-align: justify; font-size: 12pt}
DIV.subsection { text-indent: 2em }
H1 { font-style: italic; color: green }
H2 { color: green }
</STYLE>
</HEAD>

Пронумерованные разделы и ссылки
Язык HTML не генерирует номера разделов из заголовков. Это может выполняться агентами пользователей. Вскоре языки описания таблиц стилей, такие как CSS, предоставят авторам возможность управления генерацией номеров разделов

Некоторые люди считают пропуск уровней заголовков дурным тоном. Они принимают порядок заголовков H1 H2 H1, но не принимают порядок H1 H3 H1, поскольку пропущен уровень H2.

Тег P — абзац в тексте страницы

Абзацы: элемент P

Начальный тег: обязателен, Конечный тег: необязателен

Атрибуты, определяемые в любом другом месте

  • id, class (идентификаторы в пределах документа)
  • lang (language information), dir (направление текста)
  • title (заголовок элемента)
  • style (встроенная информация о стиле)
  • align (выравнивание)
  • onclick, ondblclick, onmousedown, onmouseup, onmouseover,
    onmousemove, onmouseout, onkeypress, onkeydown,
    onkeyup(внутренние события)

Элемент P представляет абзац. В нем не могут содержаться элементы уровня блока (включая и сам элемент P).

Мы призываем авторов не использовать пустой элемент P. Агенты пользователей должны игнорировать пустые элементы P.

Тег HEAD — служебная часть сайта

Тег HEAD

Начальный тег: не обязателен, Конечный тег: не обязательно

Определения атрибутов

profile = uri [CT]
Этот атрибут указывает местоположение одного или нескольких профилей метаданных, отделяемых пробелами. Для расширения в будущем агенты пользователей должны предполагать, что значение является списком, хотя в данной спецификации значащим считается только первый URI. Профили обсуждаются ниже в разделе о метаданных.

Атрибуты, определяемые в любом другом месте

  • lang (информация о языке), dir (направление текста)

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

Что такое HTML-тэги?

Тэги это метки, которые вы используете для указания браузеру, как он должен показывать ваш web-сайт.

Все тэги имеют одинаковый формат: они начинаются знаком «<»

Обычно имеются два тэга — открывающий и закрывающий. Различие в том, что в закрывающем имеется слэш «/».

Всё содержимое, помещённое между открывающим и закрывающим тэгами, является содержимым тэга.

Но, как говорится, из каждого правила есть исключения, и в HTML также имеются тэги, которые являются и открывающими, и закрывающими. Эти тэги не содержат текста, а являются метками, например, перенос строки выглядит так:
<br />

HTML — это тэги, и ничего кроме тэгов. Для изучения HTML нужно изучить различные тэги.

Теги DIV и SPAN — группировка

Группировка элементов: элементы DIV и SPAN

Начальный тег: обязателен, Конечный тег: обязателен

Определения атрибутов

href = uri [CT]
Этот атрибут указывает ресурс, предоставляющий дополнительную информацию о содержимом элемента DIV или SPAN.

Атрибуты, определяемые в любом другом месте

  • id, class (идентификаторы в пределах документа)
  • lang (информация о языке), dir (направление текста)
  • title (заголовок элемента)
  • style (встроенная информация о стиле information)
  • align (выравнивание)
  • onclick, ondblclick, onmousedown, onmouseup, onmouseover,
    onmousemove, onmouseout, onkeypress, onkeydown,
    onkeyup(внутренние события)

Элементы DIV и SPAN вместе с атрибутами id и class обеспечивают общий механизм добавления в документы структуры. Эти элементы определяют встраиваемую информацию (SPAN) или информацию уровня блока (DIV), но не налагают никаких других выражений для представления контекста. Таким образом, авторы могут использовать эти элементы с таблицами стилей, атрибутамиlang и т.д..

Предположим, Вы хотите сгенерировать документ в формате HTML на основе базы данных информации о клиентах. Поскольку HTML не включает элементов для идентификации таких объектов как «клиент», «номер телефона», «адрес электронной почты» и т.д., мы используем элементы DIV и SPAN для достижения нужных эффектов структуры и представления. Для структурирования информации мы могли использовать элемент TABLE следующим образом:

<!-- Пример данных из базы данных о клиентах: -->
<!-- Имя: Stephane Boyera, Тел.: (212) 555-1212, Email: sb@foo.org -->

<DIV id="client-boyera">
<P><SPAN>Информация о клиенте:</SPAN>
<TABLE>
<TR><TH>Фамилия:<TD>Boyera</TR>
<TR><TH>Имя:<TD>Stephane</TR>
<TR><TH>Тел:<TD>(212) 555-1212</TR>
<TR><TH>Email:<TD>sb@foo.org</TR>
</TABLE>
</DIV>

<DIV id="client-lafon">
<P><SPAN>Информация о клиенте:</SPAN>
<TABLE>
<TR><TH>Фамилия:<TD>Lafon</TR>
<TR><TH>Имя:<TD>Yves</TR>
<TR><TH>Тел:<TD>(617) 555-1212</TR>
<TR><TH>Email:<TD>yves@coucou.com</TR>
</TABLE>
</DIV>

Затем мы легко сможем добавить объявление таблицы стиля для настройки представления этих записей.

Другой пример см. в разделе об атрибутах class и id.

Визуальные агенты пользователей обычно помещают символ перевода строки перед и после элементов DIV, например:

<P>ааааааааа<DIV>ббббббббб</DIV><DIV>ввввв<P>ввввв</DIV>

что обычно генерируется как:

ааааааааа
ббббббббб
ввввв

ввввв