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

На начало урока 9

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 в уроке 10).

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

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

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

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

Название символа	Вид	Мнемоника	Код
Неразрывный пробел		` `	` `
Тире	—		``
Тире	—	`—`	`—`
Левая кавычка «ёлочка»	«	`«`	`«`
Правая кавычка «ёлочка»	»	`»`	`»`
Номер	№		`№`

На начало урока 9