До цього моменту ваше визначення зображення мало виглядати приблизно так:
<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="Логотип від PSD-Tutorials.de" />
У цьому випадку значення title накладається на значення alt.
Розміри
У HTML тепер на багато менше визначається через атрибути, а зазвичай вирішується за допомогою CSS. Визначення розмірів не належить сюди. Висоту і ширину визначаються без змін за допомогою атрибутів width і height. Отже, наведемо приклад ще раз:
<img src="images/logo.png" alt="PSD-Tutorials.de" title="Логотип від PSD-Tutorials.de" width="200" height="150" />
Якщо не вказати одиницю вимірювання для width або height, то браузер інтерпретуватиме числові значення як піксельні. У попередньому прикладі зображення має ширину 200 пікселів і висоту 150 пікселів. Можливе також відсоткове значення.
<img src="images/logo.png" alt="PSD-Tutorials.de" title="Логотип від 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="Діаграма 1" title="Діаграма 1" longdesc="#diagramm" />
Тут вважається, що на сторінці є область з ID diagramm.
Найпоширенішим може бути варіант, коли інформацію зберігають у зовнішньому файлі.
<img src="bild1.png" alt="Діаграма 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, які ви детально дізнаєтеся у цьому циклі навчання.
