На момент сейчас ваше определение изображения должно выглядеть приблизительно следующим образом:
<img src="images/logo.png" alt="PSD-Tutorials.de" />
Однако img-элементу должны (и должно) быть назначены некоторые атрибуты. Сначала это будет alt. Здесь определенный текст будет отображаться браузером, если изображение по каким-то причинам не будет загружено.
К сожалению, с атрибутом alt часто возникают недопонимания. Атрибут alt действительно предназначен только для случая, когда изображение не отображается. Некоторые браузеры, однако, отображают значение атрибута alt во всплывающем окне, когда указатель мыши находится на изображении.
Это поведение неверное. Для таких подсказок предназначен атрибут title. Соответствующее определение будет выглядеть следующим образом:
<img src="images/logo.png" alt="PSD-Tutorials.de" title="Das Logo von PSD-Tutorials.de" />
В этом случае значение title перекрывает значение alt.
Задание размеров
Многие в HTML уже решают не через атрибуты, а с помощью CSS. Однако определение размеров здесь не входит. Ширина и высота указываются без изменений при помощи двух атрибутов width и height. Вот пример:
<img src="images/logo.png" alt="PSD-Tutorials.de" title="Das Logo von PSD-Tutorials.de" width="200" height="150" />
Если не указать единицы измерения у width или height, браузер будет интерпретировать числовые значения как значения в пикселях. Таким образом, в предыдущем примере изображение будет иметь ширину 200 пикселей и высоту 150 пикселей. Также можно использовать процентное значение.
<img src="images/logo.png" alt="PSD-Tutorials.de" title="Das Logo von PSD-Tutorials.de" width="20%" height="15%" />
Процентные значения относятся к доступному месту для отображения. Если не указаны размеры, браузеры показывают изображения в их оригинальном размере.
Изображения и абзацы текста
Когда вы размещаете изображения в сочетании с обычным текстом, нужно быть осторожным.
<p><img src="logo.png" alt="" width="180" height="150" /> Этот текст будет отображаться рядом с изображением.</p>
Элемент img является так называемым встроенным элементом. Изображения могут быть помещены непосредственно в текст. Если графика выше высоты строки, текст будет выровнен браузером в пределах строки. По умолчанию текст выравнивается снизу по отношению к изображению.
Выравнивание текста в старых версиях HTML можно было изменить при помощи атрибута align. Пожалуйста, больше не используйте его, так как он был исключен из стандарта HTML5. Вместо этого используйте возможности CSS, которые предоставляются вам. Так вы можете, например, обтекать текст вокруг изображения.
Длинное описание
HTML предлагает вам возможность добавить к изображению подробное описание. Это всегда полезно, когда к изображению действительно требуются какие-либо пояснения. Вы можете хранить дополнительную информацию в разных местах и ссылаться на нее.
Дополнительная информация может быть размещена в разных местах.
<img src="bild1.png" alt="Diagramm 1" title="Diagramm 1" longdesc="#diagramm" />
Предполагается, что на странице существует область с идентификатором diagramm.
Наиболее распространенным вариантом, вероятно, является тот, в котором информация хранится во внешнем файле.
<img src="bild1.png" alt="Diagramm 1" longdesc="diagramm1.htm" />
Однако здесь возникают проблемы с поддержкой браузеров. Кроме того, кажется, что этот атрибут ставит перед браузерными производителями вопрос, как они могут его легко реализовать.
В реальности это не совсем удобно и понятно, к примеру, в Firefox. Если изображение имеет атрибут longdesc, обычные посетители страниц вначале не понимают этого. Им приходится щелкнуть по изображению правой кнопкой мыши.
После этого в контекстном меню появится пункт Показать описание. При выборе этого пункта будет показана дополнительная информация, указанная в longdesc. Как я уже сказал, это работает в Firefox, но это, безусловно, не изящно.
Опера, кстати, решила эту проблему похожим образом. Если в этом браузере щелкнуть правой кнопкой мыши на изображение, то появится запись Длинное описание.
Это ведет к указанным дополнительным сведениям.
WC3 также предлагает указать длинное описание в виде URL-адреса данных.
<img src="logo.png" alt="W3C" longdesc="data:text/html;charset=utf-8;,%3C!DOCTYPE%20html%3E %3Chtml%3E%3Chead%3E%3Ctitle%3EDescription%20of%20the%20W3C%20Logo%3C/title%3E%3C/head%3E %3Cbody%3E%3Cp%3EA%20blue%20capital%20letter%20%22W%22%20with%20kerning%20so%20it%20 touches%20a%20blue%203%2C%20followed%20by%20a%20black%20shadow%20of%20a%20white%20 capital%20letter%20C%20all%20on%20a%20white%20background%3C/body%3E%3C/html%3E" />
Если вы еще не имели опыта работы с этими URL-адресами данных, вы можете найти подробную информацию по адресу http://de.wikipedia.org/wiki/Data-URL.
Определение описаний изображений
До сих пор в HTML не было никаких средств определения подписей к изображениям и группировки изображений. Именно эта сторона изменилась с появлением HTML5. Здесь были введены два новых элемента figure и figcaption.
Чтобы предварить: элемент figure не предназначен исключительно для использования с изображениями. Фактически этот элемент можно использовать для любых элементов, дополняющих документ. Это могут быть, например, помимо изображений, диаграммы, примеры кода и видео.
Помимо figure есть также figcaption. С их помощью можно предоставить альтернативное описание для содержимого, недоступного для определенных групп пользователей.
Вот пример использования двух элементов figure и figcaption:
<figure> <img src="logo.jpg" width="200" height="150" alt="PSD-Tutorials.de" /> <figcaption>Это наш новый логотип.</figcaption> </figure>
Просмотр результата в браузере дает следующий результат:
Как браузеры обрабатывают эти два элемента, остается на их усмотрение. В общем, конечно, вы можете снова воздействовать на отображение с помощью CSS.
Внутри элемента figure можно вставлять любое количество изображений или других элементов. Однако в элементе figure должен быть только один элемент figcaption. Вот пример:
<figure> <img src="logo.jpg" width="200" height="150" alt="PSD-Tutorials.de" /> <img src="logo_gross.jpg" width="400" height="250" alt="PSD-Tutorials.de" /> <figcaption>Это наш новый логотип.</figcaption> </figure>
Таким образом, вы можете также поместить несколько изображений в элемент figure.
Особенно в отношении логической структурированности веб-сайтов и контента в HTML5 существует множество нововведений. Вы также узнаете об этом подробно в течение этой серии.
