17. Изображения в html

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

Введение

В этом курсе мы поговорим о вещах, которые делают дизайн Web привлекательным — об изображениях. К концу этого курса вы узнаете, как добавлять в Web-документы визуальную информацию доступным образом (чтобы люди с недостатками зрения могли, тем не менее, использовать информацию сайта), и как и когда использовать строковые изображения для применения информационных или фоновых изображений при компоновке страницы. Можно загрузить используемые в этой лекции файлы примеров отсюда (http://dev.opera.com/articles/view/17-images-in-html/code.zip) — я использую эти файлы в ходе изложения учебного материала. Лекция имеет следующее содержание:

Изображение говорит больше чем тысяча слов - так ли это?

Различные типы изображений в Web - содержательные и фоновые изображения

Элемент img и его атрибуты

• Создание альтернативного текста с помощью атрибута alt

• Добавление полезной информации с помощью атрибута title

• Использование longdesc для описания сложных изображений

• Быстрый вывод изображения при определении размеров с помощью width и height

Только это о строковых изображениях

Фоновые изображения с помощью CSS

• Как применять фоновые изображения с помощью CSS

Заключение

Контрольные вопросы

Изображение говорит больше чем тысяча слов - так ли это?

Очень соблазнительно использовать на своем Web-сайте много визуальной информации. Изображения являются отличным способом создания настроения у посетителя, и иллюстрации являются прекрасным способом сделать сложную информацию легче для восприятия для зрячих учеников.

Недостаток изображений в Web состоит в том, что не все пользователи Web могут их видеть. В прошедшие дни, когда изображения стали впервые поддерживаться браузерами, многие посетители сайтов отключали вывод изоображений, чтобы уменьшить объем трафика и быстрее перемещаться в сети — соединения Web были когда-то очень медленными, и нужно было платить большие деньги за каждую проведенную в сети минуту. Хотя это не слишком распространено сегодня, но мы ушли еще не слишком далеко.

• Люди, использующие мобильные устройства, могут по прежнему отключать вывод изображений из-за маленького экрана и стоимости загрузки данных.

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

• Другие посетители могут быть из другой культуры и не понимать используемые пиктограммы.

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

Поэтому очень важно выбирать изображения из разумных соображений и использовать их, когда уместно. Еще более важно убедиться, что вы всегда предлагаете запасной вариант для тех, кто не может видеть изображения. Имеются дополнительные пояснения по проблемам неправильного использования пиктограмм и изображений в лекции "Перемещение в Web и меню" в дальнейшем в этой серии. Пока давайте посмотрим, какие доступны технологии для добавления изображений в документ HTML.