Изображения
Как бы были скучны Web-страницы без изображений 🙁 , сегодня мы научимся добавлять их на страницу.
Содержание
Элемент <img />
Элемент <img /> пустой, поэтому он записывается в виде одиночного тега:
|
1 |
<img /> <!-- Оба тега объединены в один. --> |
У элемента <img /> есть два обязательных атрибута: alt и src и необязательный атрибут lowsrc. Сейчас мы их и рассмотрим.
Источник изображения — атрибут src
Атрибут src указывает путь к файлу, который добавляется на Web-страницу. Например, так можно добавить на Web-страницу файл «fade.png»:
|
1 |
<img src="fade.png" /> <!-- Таким образом добавляется картинка. --> |
Понятно, что если путь к файлу не указан, предполагается, что он находится в текущей папке.
Если в текущей папке есть папка «images» с файлом «fade.png», для добавления его на Web-страницу следует написать такой код:
|
1 |
<img src="http://images.rambler.ru/logo-r.gif" /> <!-- Таким образом добавляется картинка с абсолютным адресом. --> |
Заменяющий текст — атрибут alt
В среднем, до 25% рисунков не отображается. Обычно это связано с проблемными линиями связи. Для рекламных картинок — баннеров — причина зачастую кроется в перегрузке сервера. Иногда картинка просто отсутствует либо не может быть отображена обозревателем. Во всех таких случаях на месте изображения будет находиться заменяющий текст.
Если Ваш посетитель отключил загрузку картинок либо использует неграфический: текстовый или речевой обозреватель, заменяющий текст является единственной информацией об изображении, поэтому им пренебрегать нельзя.
Даже после окончания загрузки заменяющий текст играет роль. Он отображается как всплывающая подсказка к картинке.
В атрибуте alt указывается краткое и ёмкое описание изображения. Текста, приведённого в атрибуте, должно быть достаточно для принятия решения о том, следует ли загружать изображение.
Атрибут alt является обязательным и должен присутствовать во всех элементах <img />.
Компактный вариант — атрибут lowsrc
Человек сохраняет заинтересованность в течение 10–15 секунд. Если за эти несколько секунд Вы не сумеете убедить своего посетителя в важности своего ресурса, Вы рискуете этого посетителя потерять.
Для избежания этого неприятного явления Вам необходимо сделать начало страницы максимально интересным и обеспечить его быструю загрузку. То есть, в течение 10 секунд от начала загрузки на странице должны быть элементы, дающее о ней представление, и хотя бы первые абзацы текста.
Немалую роль играет и расположение на таком «быстром» варианте страницы низкокачественных изображений, которые дадут представление о более качественных, но и более объёмных иллюстрациях.
Низкокачественный вариант изображения задаётся атрибутом lowsrc. Как значение этого атрибута указывается путь к файлу с низкокачественной, значит маленькой по объёму версией картинки. Этот вариант будет отображаться до окончания полной загрузки страницы, после чего будет заменён более качественным изображением.
|
1 |
<img lowsrc="no-detail.jpeg" src="high-quality.png" alt="Какая-то картинка." /> <!-- Использование атрибута lowsrc --> |
Вы не сможете просмотреть этот эффект на домашнем компьютере, так как высококачественное изображение будет загружено с жёсткого диска за доли секунды.
Использование атрибута lowsrc желательно для больших рисунков, которые будут грузиться несколько минут.
Графические ссылки
Для того, чтобы сделать изображение ссылкой, его необходимо разместить между тегами элемента <a>. Например, таким образом можно сделать ссылку на поисковую службу «Рамблер»:
|
1 2 3 |
<a href="http://www.rambler.ru/"> <!-- Началась ссылка. --> <img src="http://images.rambler.ru/logo-r.gif" /> <!-- Элемент ‹img /› включается в элемент ‹a›. --> </a> |
То есть, мы расположили изображение внутри тегов ссылки.