Введение в HTML - Программирование от RIN.RU

Общие атрибуты элементов HTML

Ряд атрибутов применим к большинству элементов HTML. Эти атрибуты подразделяются на:

Поддержка :		Полное соответствие стандарту (2.0+)
		Полное соответствие стандарту (3.0+)/td>

Атрибут id присваивает элементу имя, уникальное в пределах данного документа. Никакие два элемента не могут иметь одинаковых значений id. Этот атрибут имеет несколько применений в HTML:

В следующем примере атрибут id использован для идентификации двух абзацев:

<P <strong>id="firstp</strong>">Мой первый абзац.</P>
<P <strong>id="secondp</strong>">Мой второй абзац.</P>

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

P#firstp { color: navy; background: transparent }
P#secondp { color: black; background: transparent }

Эти же абзацы могут использоваться как цель в гиперссылках:


См. также <A HREF="#firstp">первый абзац</A>.

Поддержка :		Полное соответствие стандарту (2.0+)/td>
		Списки имен классов игнорируются (4.0+)

Атрибут class указывает, что элемент является членом определенного класса. В отличие от атрибута id любое количество элементов может относиться к одному классу. Далее, элемент может принадлежать к нескольким классам - в этом случае значением атрибута является список имен классов, разделенных пробелами.

Примечание. Большинство обозревателей не поддерживают списки классов, попросту игнорируя такой атрибут class.

Атрибут class особенно полезен в селекторах стилей. Рассмотрим следующий пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<STYLE type="text/css">
  p { font-size: medium }
  p.<strong>note</strong> { font-size: small }
</STYLE>
</HEAD>
<BODY>
<P>Обычный абзац</P>
<P <strong>class="note"</strong>>Примечание</P>
</BODY>
</HTML>

Здесь в заголовке документа заданы размеры шрифта для обычных абзацев и для абзацев класса note (примечание). Теперь для того, чтобы включить в текст примечание, достаточно присвоить соответствующему абзацу (т. е. элементу P) атрибут class="note". Именно так построены все примечания в данном справочнике.

Этот атрибут применим ко всем элементам, кроме BASE, HEAD, HTML, META, PARAM, SCRIPT, STYLE и TITLE.

Стиль элемента: атрибут style

Поддержка :		Полное соответствие стандарту (3.0+)
		Полное соответствие стандарту (4.0+)

Атрибут style позволяет задать стиль элемента внутри его начального тега, например:


Популярным экранным шрифтом является
  <SPAN <strong>style="font-family: Verdana"</strong>>Verdana</SPAN>.</P>

Для использования этого атрибута в заголовок документа должен быть включен метаописатель

<META http-equiv="Content-Style-Type" content="text/css">

В большинстве случаев употребление атрибутов class и id предпочтительнее, т. к. они обеспечивают разделение содержимого документа и стиля его отображения, что обычно упрощает сопровождение разработки.

Этот атрибут применим ко всем элементам, кроме BASE, HEAD, HTML, META, PARAM, SCRIPT, STYLE и TITLE.

Титул элемента: атрибут title

Поддержка :		Полное соответствие стандарту, выводится как подсказка (4.0+)
		Не поддерживается

Атрибут title определяет титул элемента и часто используется обозревателями как подсказка (tooltip), которая выводится на экран, когда курсор помещается на данный элемент. Он особенно полезен в элементах A, LINK, IMG и OBJECT, в которых он указывает на титул связанного или вложенного ресурса. Приведем несколько примеров.

Ссылка на почтовый ящик:

<A href="mailto:yurylukach@homepage.com"
  <strong>title="Пошлите мне свои замечания"</strong>>yurylukach@homepage.com</A>

<A href="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html"
  <strong>title="Библиотека CGI-сценариев"</strong>>CGI.pm</A>

<LINK rel="Alternate" href="index.ru.html" hreflang=ru lang=ru <strong>title="Русская версия"</strong>>

<OBJECT classid="java:Audio.class" codetype="application/java"
  style="width: 400; height: 250"
  standby="Готовы слушать музыку?" <strong>title="Моя любимая песня"</strong>>
  <IMG src="music.gif" alt="" <strong>title="Beatles' Yesterday"</strong>>
  Yesterday - моя <EM>любимая</EM> песня!
</OBJECT>

Атрибут title полезен также с элементами ABBR и ACRONYM, где он позволяет дать расшифровку сокращения. Примеры:

<P>Он весит 80 <ABBR <strong>title="килограммов"</strong> lang=ru>кг</ABBR>.</P>
<ACRONYM <strong>title="Организация Объединенных Наций"</strong>>ООН</ACRONYM>

Поддержка :		Распознается, но игнорируется (2.0+)
		Распознается, но игнорируется (3.0+)

Атрибут lang определяет естественный язык, на котором написаны значения остальных атрибутов данного элемента и его содержимое (а также всех вложенных элементов, не имеющих своего атрибута lang). Хотя этот атрибут поддерживается не слишком широко, он находит все большее применение, например:

Значение атрибута lang не зависит от регистра. Список его возможных значений приведен в Приложении "Коды языков в HTML".

Использование lang также позволяет авторам легко менять стиль текста в зависимости от языка. Например, один из языков в двуязычном документе может изображаться курсивом или произноситься другим голосом в синтезаторе речи. Текст такого документа должен оформляться следующим образом:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
  <TITLE>Welcome - Добро пожаловать</TITLE>
</HEAD>
<BODY>
  <H1><SPAN <strong>lang=en</strong>>Welcome</SPAN> - <SPAN <strong>lang=ru</strong>>Добро пожаловать</SPAN></H1>
  <P <strong>lang=en</strong>>This paragraph is in English.</P>
  <P <strong>lang=ru</strong>>Этот абзац на русском языке.</P>
</BODY>
</HTML>

Основной язык документа может быть задан атрибутом lang в элементе HTML или в поле заголовка HTTP Content-Language.

Этот атрибут применим ко всем элементам, кроме BASE, BR, FRAME, FRAMESET, IFRAME, PARAM и SCRIPT.

Примечание. Атрибут lang не должен использоваться для задания направления вывода текста - оно задается атрибутом dir.

Направление вывода текста: атрибут dir

Поддержка :		Полное соответствие стандарту (5.0+)
		Не поддерживается

Атрибут dir определяет направление вывода текста: слева направо (dir="ltr", по умолчанию) или справа налево (dir="rtl"). Всем символам в кодировке Unicode приписано направление, с тем, чтобы текст отображался правильно. Так, латинские и русские буквы выводятся слева направо, а еврейские и арабские - справа налево.

Стандарт Unicode определяет двунаправленный алгоритм, который должен применяться всякий раз, когда документ содержит символы, выводимые справа налево. Хотя обычно этот алгоритм дает правильное изображение текста, существуют ситуации, когда направление вывода текста приходится задавать явно с помощью атрибута dir.

Допустим, например, что русское предложение содержит ивритскую фразу, которая содержит английскую цитату. В этом случае направление вывода ивритской фразы потребует явного указания направления: ивритская фраза, включая английскую цитату, должна быть заключена в элемент SPAN или BDO с атрибутом dir="rtl".

Этот атрибут применим ко всем элементам, кроме BASE, BR, FRAME, FRAMESET, IFRAME, PARAM и SCRIPT.

Обработчики событий

Поддержка :		Полное соответствие стандарту (4.0+)
		Полное соответствие стандарту (3.0+)

HTML поддерживает обработку многих событий, которые могут происходить на компьютере-клиенте. Для обработки события нужно присвоить элементу соответствующий атрибут, имя которого является именем этого события, а значением - сценарий (либо вызов функции, либо набор операторов). Значение такого атрибута может содержать специальные символы.

Следующий пример использует операторы языка JavaScript для обработки двух событий, связанных с кнопкой "Submit", а именно выводит подсказку в строке состояния, когда курсор мыши попадает на кнопку, и очищает строку состояния, когда курсор мыши оказывается за ее пределами. Обратите внимание, что значения атрибутов заключены в одинарные кавычки из-за того, что двойные кавычки использованы внутри них.

<INPUT type=submit
  onmouseover='window.status="Вы заполнили всю форму?";'
  onmouseout='window.status="";'>

Если документ содержит обработку событий, то язык сценариев, принятый по умолчанию, должен быть задан в заголовке документа в метаописателе

<META http-equiv="Content-Script-Type" content="text/javascript">

Следующие атрибуты событий применимы ко всем элементам, кроме BASE, BDO, BR, FRAME, FRAMESET, HEAD, HTML, IFRAME, META, PARAM, SCRIPT, STYLE и TITLE. Все они связаны либо с нажатием клавиш на клавиатуре, либо с движением мыши и нажатием ее кнопок.

Таблица 1.4.
Стандартные события в HTML
Имя события	Происходит
onclick	при щелчке кнопки мыши на элементе
ondblclick	при двойном щелчке кнопки мыши на элементе
onmousedown	при нажатии кнопки мыши на элементе
onmouseup	при отпускании кнопки мыши на элементе
onmouseover	при попадании курсора мыши на элемент
onmousemove	при движении курсора мыши по элементу
onmouseout	при попадании курсора мыши за пределы элемента
onkeypress	при нажатии и отпускании клавиши на элементе
onkeydown	при нажатии клавиши на элементе
onkeyup	при отпускании клавиши на элементе