Мы видели несколько тегов HTML и их использование, например теги заголовков.
<h1> <h2>,
тег абзаца
<p>
и другие теги. До сих пор мы использовали их в простейшей форме, но большинство HTML-тегов также могут иметь атрибуты, являющиеся дополнительными битами информации.
Атрибут используется для определения характеристик элемента HTML и помещается внутри открывающего тега элемента. Все атрибуты состоят из двух частей: имя и значение.
имя — это свойство, которое вы хотите установить. Например, абзац
<p>
Элемент в примере содержит атрибут с именем align, который можно использовать для указания выравнивания абзаца на странице.
value — это то, что вы хотите, чтобы значение свойства было установлено и всегда заключалось в кавычки. В приведенном ниже примере показаны три возможных значения атрибута align: по левому краю, по центру и по правому краю.
Имена атрибутов и значения атрибутов нечувствительны к регистру. Однако консорциум World Wide Web (W3C) рекомендует атрибуты/значения атрибутов в нижнем регистре в своих рекомендациях по HTML 4.
<!DOCTYPE html>
<html>
<head>
<title>Align Attribute Example</title>
</head>
<body>
<p align = "left">This is left aligned</p>
<p align = "center">This is center aligned</p>
<p align = "right">This is right aligned</p>
</body>
</html>
Это отобразит следующий результат:
Четыре основных атрибута, которые можно использовать в большинстве элементов HTML (хотя и не во всех):
Атрибут id тега HTML можно использовать для уникальной идентификации любого элемента на странице HTML. Есть две основные причины, по которым вы можете захотеть использовать атрибут id для элемента:
Если элемент имеет атрибут id в качестве уникального идентификатора, можно идентифицировать только этот элемент и его содержимое.
Если на веб-странице (или в таблице стилей) есть два элемента с одинаковыми именами, вы можете использовать атрибут id, чтобы различать элементы с одинаковыми именами.
Мы обсудим таблицу стилей в отдельном уроке. А пока давайте воспользуемся атрибутом id, чтобы различать два элемента абзаца, как показано ниже.
Пример
<p id = "html">This para explains what is HTML</p> <p id = "css">This para explains what is Cascading Style Sheet</p>
Атрибут title дает предлагаемый заголовок для элемента. Синтаксис атрибута title аналогичен объясненному для атрибута id:
Поведение этого атрибута будет зависеть от элемента, который его содержит, хотя он часто отображается в виде всплывающей подсказки, когда курсор находится над элементом или во время загрузки элемента.
Пример
<!DOCTYPE html>
<html>
<head>
<title>The title Attribute Example</title>
</head>
<body>
<h3 title = "Hello HTML!">Titled Heading Tag Example</h3>
</body>
</html>
Это даст следующий результат:
Теперь попробуйте навести курсор на «Пример тега заголовка с заголовком», и вы увидите, что любой заголовок, который вы использовали в своем коде, появляется как всплывающая подсказка курсора.
Атрибут class используется для связывания элемента с таблицей стилей и указывает класс элемента. Вы узнаете больше об использовании атрибута класса, когда будете изучать каскадные таблицы стилей (CSS). Так что пока можно этого избежать.
Значением атрибута также может быть список имен классов, разделенных пробелами. Например :
class = "className1 className2 className3"
Атрибут стиля позволяет указать правила каскадной таблицы стилей (CSS) внутри элемента.
<!DOCTYPE html>
<html>
<head>
<title>The style Attribute</title>
</head>
<body>
<p style = "font-family:arial; color:#FF0000;">Some text...</p>
</body>
</html>
Это даст следующий результат:
На данный момент мы не изучаем CSS, так что давайте продолжим, не особо беспокоясь о CSS. Здесь вам нужно понять, что такое атрибуты HTML и как их можно использовать при форматировании контента.
Есть три атрибута интернационализации, которые доступны для большинства (хотя и не для всех) элементов XHTML.
Атрибут dir позволяет указать браузеру направление, в котором должен двигаться текст. Атрибут dir может принимать одно из двух значений, как показано в следующей таблице:
Значение атрибута:
ltr
Значение: Слева направо (значение по умолчанию).
Значение атрибута:
rtl
Значение: Справа налево (для таких языков, как иврит или арабский, которые читаются справа налево)
Пример
<!DOCTYPE html>
<html dir = "rtl">
<head>
<title>Display Directions</title>
</head>
<body>
This is how IE 5 renders right-to-left directed text.
</body>
</html>
Это даст следующий результат:
Когда атрибут dir используется в теге , он определяет, как текст будет представлен во всем документе. При использовании внутри другого тега он управляет направлением текста только для содержимого этого тега.
Атрибут
lang
позволяет указать основной язык, используемый в документе, но этот атрибут был сохранен в HTML только для обратной совместимости с более ранними версиями HTML. Этот атрибут был заменен на
xml:lang
атрибут в новых документах XHTML.
Значения атрибута lang представляют собой стандартные двухсимвольные коды языка ISO-639. Полный список кодов языков см. в разделе Коды языков HTML: ISO 639.
Пример
<!DOCTYPE html>
<html lang = "en">
<head>
<title>English Language Page</title>
</head>
<body>
This page is using English Language
</body>
</html>
Это даст следующий результат:
Атрибут
xml:lang
является заменой XHTML для атрибута
lang
Значение атрибута
xml:lang
должен быть кодом страны ISO-639, как упоминалось в предыдущем разделе.
Вот список некоторых других атрибутов, которые легко использовать со многими тегами HTML.
Атрибут:
align
Параметры :
right, left, center
Функция: Горизонтальное выравнивание тегов
Атрибут:
valign
Параметры :
top, middle, bottom
Функция: вертикальное выравнивание тегов в элементе HTML.
Атрибут:
bgcolor
Параметры: числовые, шестнадцатеричные, значения RGB.
Функция: помещает цвет фона позади элемента
Атрибут:
background
Параметры :
URL
Функция: Помещает фоновое изображение за элементом
Атрибут:
id
Варианты: Определяется пользователем
Функция: Именование элемента для использования с каскадными таблицами стилей.
Атрибут:
class
Варианты: Определяется пользователем
Функция: Классифицирует элемент для использования с каскадными таблицами стилей.
Атрибут:
width
Параметры: Числовое значение.
Функция: задает ширину таблиц, изображений или ячеек таблицы.
Атрибут:
height
Параметры: Числовое значение.
Функция: задает высоту таблиц, изображений или ячеек таблицы.
Атрибут:
title
Варианты: Определяется пользователем
Функция: "Всплывающий" заголовок элементов.
Мы увидим соответствующие примеры, когда приступим к изучению других HTML-тегов. Полный список тегов HTML и связанных с ними атрибутов см. в разделе Список тегов HTML.