Учебник по HTML и CSS

HTML

CSS

Статьи

Полезное


Статьи

Основы HTML
Текст
Изображения
Ссылки
Списки
Таблицы
Формы
Фреймы
Основы CSS
Рецепты CSS
Оформление таблиц
Основы верстки
Табличная верстка
Верстка с помощью слоев
Использование слоев
Примеры верстки слоями

Альтернативный текст

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

Рис. 1. Альтернативный текст до загрузки изображения

Браузеры также отображают альтернативный текст в виде подсказки, появляющейся при наведении курсора мыши на изображение (рис. 2).

Рис. 2. Вид всплывающей подсказки

Замечание

Вид всплывающей подсказки, а именно, ее цвет, фон, шрифт и др. параметры задаются с помощью настроек операционной системы и не могут быть изменены через HTML-файл.

Для создания альтернативного текста используется параметр alt тега <IMG>, как показано в примере 1.

Пример 1. Добавление альтернативного текста

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<body>
<a href="index.php">
<img src="home.gif" alt="Возврат на главную страницу">
</a>
</body>
</html>

Замечание

Текст в параметре alt обязательно должен быть взят в кавычки.

Возможно использование переносов в тексте и создание таким образом многострочных подсказок. Для этого требуется всего лишь установить в требуемом месте кода обычные переносы, как показано в примере 2. Лишние пробелы в этом случае надо убрать.

Пример 2. Создание многострочного альтернативного текста

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<body>
<a href="index.php"><img src="home.gif" alt="Вернуться
на главную страницу"></a>
</body>
</html>

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

Замечание

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





На главную









  • При использовании материалов сайта ссылка на comnew.ru обязательна!