## 06. Атрибуты тегов

На этой странице:

- Зачем нужны атрибуты
- Разбор кода примера

### Зачем нужны атрибуты

Открывающие теги могут содержать атрибуты. С их помощью можно менять свойства объекта, которому соответствует тег.

Атрибуты записываются внутри открывающего тега через пробел от его имени в виде отдельного ключевого слова или ключевого слова, знака “=” и параметра (значения атрибута).

Порядок следования атрибутов в теге не важен. Разделителем атрибутов также является пробел.

Атрибут действует от открывающего тега, в котором он задан, до закрывающего или только внутри тега, если тег не имеет парного.

Например, тег, рисующий горизонтальную линию, может содержать атрибут `size`, меняющий толщину линии. Если этот атрибут не задан, горизонтальные линии имеют толщину в два (или три, в зависимости от браузера) пиксела. Задавая разные параметры для атрибута `size`, можно получить целую коллекцию линий, разных по толщине:

Команда | Вид линии на экране
--- | ---
`<HR size=1>` |
`<HR>` |
`<HR size=5>` |
`<HR size=20>` |

Атрибут меняет свойство элемента, работающее по умолчанию.

Например, по умолчанию браузер рисует линии “объёмными”. Можно вывести линии “плоскими”, если использовать атрибут `noshade`:

Команда | Вид линии на экране
--- | ---
`<HR size=1 noshade>` |
`<HR noshade>` |
`<HR size=5 noshade>` |
`<HR size=20 noshade>` |

Стандарт рекомендует записывать значение атрибутов в прямых (“технических”) кавычках, двойных или одинарных:

`size="1" color='red' title="Здание школы"`

Внутри кавычек одного типа могут располагаться кавычки другого типа:

`title='Здание школы "Пионер"'`

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

`size=1 color=red src=pic.gif`

### Разбор кода примера

Давайте посмотрим, какие теги использованы для вывода на экран текста, посвященного заметке из газеты “Станок”.

Рассмотрим подробнее некоторые элементы.

Атрибуты `bgcolor` и `text` в теге `<BODY>` задают, соответственно, цвет фона документа и цвет текста. В приведённом примере задаётся белый цвет для фона и чёрный для текста. А следующий код, наоборот, задаёт чёрный цвет для фона и белый для текста:

Элемент `<BLOCKQUOTE>...</BLOCKQUOTE>` служит для оформления больших цитат. Браузер выводит его на экран как блок с отступами слева и справа.

Внутри открывающего тега записан атрибут `style`. Этот атрибут служит для задания свойств элементу при помощи механизма CSS (подробнее о CSS рассказано в теме 2).

В данном случае для экранного блока указана рамка (`border`), сплошная (`solid`), толщиной в 1 пиксел (`1px`) и задано расстояние между содержимым и рамкой в 10 пикселов (`padding:10px`):

Внутри цитаты `<BLOCKQUOTE>...</BLOCKQUOTE>` открывается еще одна цитата, но уже без рамки. При помощи стилевого свойства `color` задаётся красный цвет для текста внутри этого элемента:

Основная цитата завершается абзацем, в котором текст выровнен по правой границе при помощи атрибута `align=right` в теге `<P>`. Имена авторов выделены при помощи элемента `<EM>...</EM>`, который браузер отображает курсивом:

В приведённых HTML-программах использованы коды специальных символов (подробнее о них рассказано в разделе Специальные символы урока “08. Оформление текста”):

Название символа | Вид | Мнемоника | Код
--- | --- | --- | ---
Неразрывный пробел |  | `&nbsp;` | `&#160;`
Тире | — | `&mdash;` | `&#8212;`
Левая кавычка «ёлочка» | « | `&laquo;` | `&#171;`
Правая кавычка «ёлочка» | » | `&raquo;` | `&#187;`
Номер | № | `` | `&#8470;`

вверх