Сделайте всплывающую подсказку с текстом "Хороший сайт", который появляется когда вы наводите указатель мыши на абзац, как показано на рис. 1.
Рис. 1
Атрибуты задаются в начальном тэге элемента и состоят из имени и значения, которые отделяются друг от друга знаком равно (=). Например в атрибуте href="http://www.wm-school.ru/" href
является именем, а http://www.wm-school.ru/
значением.
HTML-теги могут содержать один или несколько атрибутов. Атрибуты добавляются в тег для того, чтобы информировать браузер о том, как данный тег должен отображаться в html-документе.
Рассмотрим следующий пример:
В этом примере используется тег <abbr>, который предназначен для обозначения аббревиатуры или акронима. В начальном теге элемента дополнительно был добавлен атрибут. Этот атрибут содержит заголовок для элемента.
Имя атрибута title. В этом примере, мы дали ему значение Язык гипертекстовой разметки
.
Атрибут title может (необязательно) использоваться в любом HTML - элементе, чтобы предоставить дополнительную информацию о содержимом элемента.
При использовании атрибута title, большинство браузеров будет отображать его значение как "всплывающую подсказку", когда пользователь наводит указатель мыши на элемент.
Вы уже знаете, что изображения вставляются в Web-страницы с помощью одинарного тега <img>. Атрибут alt добавляется внутрь тera <img> и определяет для добавленноrо на WеЬ-страницу rpaфическоrо элемента альтернативный текст. Этот текст называется альтернативным, поскольку может отображаться на экране как альтернатива самому изображению.
В следующем примере вы увидите, как браузер работает с атрибутом alt, когда появляется «отсутствующее» изображение. Если рисунок не может быть найден или по какой-то причине не загружается, вместо него выводится значение атрибута alt. Поменяйте имя файла с изображением с orange.jpg на pencil.jpg. На самом деле такого файла не существует, поэтому вы получите «отсутствующее» изображение.
Вы можете добавить сразу несколько атрибутов к элементу.
Вот пример сложения двух атрибутов к элементу <a>(который используется для создания гиперссылки на другую веб - страницу).
<a href="http://www.wm-school.ru" title="Лучшие уроки HTML!">HTML Tutorials</a>
Атрибут href
определяет расположение веб - страницы, на которую ведет ссылка.
Мы также используем атрибут title
для того, чтобы обеспечить некоторую консультационную помощь для пользователя в виде всплывающей подсказки.
Указывать атрибуты можно только внутри открывающих тегов и если атрибутов несколько, то между ними ставится пробел. При этом нельзя в одном теге задавать два одинаковых атрибута, даже если у них разные значения, то есть дублировать их запрещено. Атрибуты, как и теги, нечувствительны к регистру, то есть их допустимо писать заглавными и строчными буквами. Значения атрибутов можно брать в необязательные двойные (" ") или одинарные кавычки(' ').
W3C рекомендует использовать кавычки в HTML, и требует применение кавычек для более строгих типов документов, таких как XHTML.
Иногда бывает необходимо использовать кавычки. В этом примере атрибут заголовка не будет отображаться правильно, так как в значении атрибута содержатся пробелы:
Как и в случае с тегами, рекомендую вам всегда писать атрибуты в нижнем регистре и брать их значения в кавычки. |
Чаще всего в HTML используются "двойные кавычки", но вы можете использовать и 'одинарные'. Иногда вам придется использовать одинарные кавычки, если в значении есть часть, которая отдельно должна быть заключена в кавычки:
<abbr title="Hypertext 'Markup' Language">HTML</abbr>
Можно наоборот:
<abbr title='Hypertext "Markup" Language'>HTML</abbr>
Ниже представлен список некоторых атрибутов, которые стандартны для большинства html-элементов:
Атрибут | Значение | Описание |
---|---|---|
align | right, left, center | Горизонтальное выравнивание тегов |
valign | top, middle, bottom | Вертикальное вырвнивание тегов внутри HTML-элемента. |
background | URL | Расположение фонового изображения |
id | Уникальное имя | Уникальное имя для использования с каскадными таблицами стилей. |
class | правило класса или стиль класса | Классифицирует элемент для использования с каскадными таблицами стилей. |
width | Числовое значение | Определяет ширину таблиц, изображений или ячеек таблицы. |
height | Числовое значение | Определяет высотуу таблиц, изображений или ячеек таблицы. |
title | Текст подсказки | Текст, отображаемый во всплывающей подсказке. |
Полный список всех атрибутов для каждого элемента HTML, указан в нашем справочнике: HTML Атрибуты.
Вы познакомились с тегами, необходимыми для создания простейшей HTML-страницы, а также с атрибутами и их значениями, которые очень важны для корректного отображения документа, оптимизации и продвижения в поисковиках.
Пришло время повторить изученное и выполнить несложные задания:
Сделайте всплывающую подсказку с текстом "Хороший сайт", который появляется когда вы наводите указатель мыши на абзац, как показано на рис. 1.
Рис. 1
Измените размер изображения до 200 пикселей в ширину и 150 пикселей в высоту.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Размеры изображения</title>
</head>
<body>
<img src="smile.jpg" width="100" height="75">
</body>
</html>
Измените нижеприведенный код так, чтобы при щелчке кнопкой мыши по тексту "Это ссылка на сайт", вы перешли на главную страницу сайта www.wm-school.ru.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ссылка на веб-сайт</title>
</head>
<body>
Это ссылка на сайт
</body>
</html>
Создайте для изображения альтернативный текст "Смайлик", который будет показан при наведении указателя мыши на картинку или если картинка не загрузится.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Альтернативный текст</title>
</head>
<body>
<img src="noimage.jpg" width="100" height="50">
</body>
</html>