Поддержка сайта

Высокие позиции в поисковой системе, на прямую зависят от развития вашего сайта.

Продвижение сайтов

Эффективность стратегий продвижения подтверждается сотрудничеством с крупными клиентами и отзывами о нашей работе.

Создание сайтов

Мы делаем сайты быстро, недорого и профессионально. От работы с нами, у вас останутся только положительные эмоции.

Внутристрочные изображения

.

Для добавления внутристрочного изображения используется такая разметка:

img src=divers-circlе.jpg width=200 height=162 alt=Группа дайверов тренируется/

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

Структура элемента img

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

img — название элемента. Помните, что это — пустой элемент, и соответствующий закрывающий тег для него не требуется. Закрывающий слеш / нужен здесь для того, чтобы удовлетворять правилам синтаксиса XHTML, и обозначает, что этот элемент — «самозакрывающийся». С использованием типа документа HTML, который мы выбрали для учебного сайта, можно опустить закрывающий слеш без вреда для разметки.

src — атрибут, указывающий источник изображения: расположение и название файла, к которому должен обратиться браузер, чтобы показать изображение. В нашем примере файл носит имя divers-circle. jpg.

alt — очень важный атрибут, о котором мы поговорим чуть позже.

height и width — эти атрибуты сообщают браузеру размеры, в которых должно быть показано изображение. Это особенно важно для пользователей с медленным интернет-соединением: браузер может как бы заранее «зарезервировать» место, необходимое для загрузки изображения. Если вам когда-либо приходилось загружать страницы с изображениями на небольшой скорости, то вы видели, как страница «перестраивается» в ожидании рисунка с неуказанными высотой и шириной. Это неприятно.

Атрибуты height и width очень важны, но, в отличие от src и alt, не являются необходимыми. Однако ввиду их полезности большинство разработчиков используют эти атрибуты.

Атрибут alt, с которым изображение становится доступным каждому. В нашем проектном сайте элемент img имеет атрибут alt со значением Группа дайверов тренируется. Для чего он нужен? Все просто: атрибут alt представляет собой альтернативную текстовую версию изображения, которую большинство людей увидят на экране. Я сказал «большинство», так как есть люди, которые не смогут увидеть само изображение. Например:

слепые или слабовидящие пользователи Интернета (см. пункт «Экранные дикторы: Интернет можно слушать» подраздела «Веб-доступность» этого раздела);

пользователи с медленным интернет-соединением, у которых изображения загружаются долго (до окончания загрузки вместо рисунка отображается текст из атрибута alt);

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

Во всех этих примерах атрибут alt предлагает пользователям альтернативный путь получения нужной им информации. На рис. 5.1 показано, что увидят пользователи из второго и третьего пунктов списка.

Если у пользователей сайта медленное интернет-соединение, а страница загрузится в виде, показанном на рис. 5.1, то они смогут прочитать альтернативный текст и, основываясь на этом описании, решить, ждать загрузки изображения или перейти по ссылкам куда-нибудь еще. Этот атрибут помогает также тем, кто установил в браузере флажок Не загружать изображения. Если описание интересно, то пользователь сможет загрузить рисунок (в Internet Explorer зайдите в Сервис — Свойства обозревателя — Дополнительно и в разделе Мультимедиа установите флажок Показывать изображения).

Рис. 5.1. Вот что отображается вместо рисунка при медленном интернет-соединении

Для слепых и слабовидящих пользователей эта настройка необходима. Она позволяет им получить полную информацию о содержимом страницы.

.

Читайте так же:
Not found