Альтернативний текст дозволяє отримати текстову інформацію про малюнок при відключеному в браузері показі картинок або під час їх завантаження. Такий текст з'являється раніше самого зображення і дає уявлення про його зміст (рис. 10.3). Потім зарезервоване порожнє поле замінюється картинкою (рис. 10.4).
Вигляд підказки, а саме, її колір, фон, шрифт і ін. Параметри задаються за допомогою налаштувань операційної системи і не можуть бути змінені через HTML-файл.
Для створення альтернативного тексту використовується атрибут alt тега <img> , як показано в прикладі 10.2.
Приклад 10.2. Додавання альтернативного тексту
<!DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> Альтернативний текст </title> </head> <body> <p> <img src="images/ robot.jpg" alt="Дівчинка і робот" width="300" height="388"> </p> </body> </html>
Врахуйте, що текст в атрибуті alt обов'язково повинен бути взятий в лапки, як в даному прикладі.
Не всі браузери відображають альтернативний текст у вигляді підказки. Тому для її створення використовуйте атрибут title (приклад 10.3).
Приклад 10.3. Підказка
<!DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> Атрибут title </title> </head> <body> <p> <a href="index.html"> <img src="images/ home.png" alt="Повернутися на головну сторінку" title="Головна сторінка"> </a> </p> </body> </html>
Як показано в даному прикладі, значення у атрибутів alt і title може відрізнятися, що дозволяє встановити певний текст для різних випадків. Тільки врахуйте, що довгий текст буде « обрізатися » і відображається не весь. Але пошукові системи, для яких іноді і застосовують атрибут title і alt, цілком його читають.