Крок 9. Зображення
Розглянемо кілька вказівок шляху до малюнка для розміщення його на веб-сторінці.
Мал. 9.1. Приклад розміщення файлів
Мал. 9.2. Приклад розміщення файлів
У прикладі 9.1 показані кілька способів вказівки шляху до графічного файлу при додаванні зображень на веб-сторінку.
Приклад 9.1. Вставка зображення в документ
альтернативний текст
Альтернативний текст дозволяє отримати текстову інформацію про зображення при відключеною в браузері завантаженні зображень. Оскільки завантаження зображень відбувається після отримання браузером інформації про нього, то альтернативний текст з'являється раніше самого малюнка. Деякі браузери також відображають альтернативний текст у вигляді підказки, що з'являється при наведенні курсору миші на зображення.
Для створення альтернативного тексту використовується параметр alt тега . як показано в прикладі 9.2.
Приклад 9.2. Додавання альтернативного тексту
розміри зображення
Для зміни розмірів зображення засобами HTML передбачені параметри width і height тега (Приклад 9.3). Як значення використовується піксель - елементарна крапка на моніторі.
Приклад 9.3. розміри зображення
Обов'язково задавайте розміри всіх зображень на веб-сторінці. Це дещо прискорює завантаження сторінки, оскільки браузеру немає потреби обчислювати розмір кожного малюнка після його отримання.
Підхід, коли доводиться міняти розміри зображення щодо вихідних, не слід застосовувати часто. Якщо кількість пікселів в зображенні насильно збільшується, то вони ніяк не з'являться з нізвідки і браузеру доведеться, використовуючи алгоритми інтерполяції, добудовувати їх самостійно. Той же алгоритм застосовується і в зворотному випадку, коли необхідно зменшити картинку. Даний підхід зміни розміру зображення отримав термін ресемплірованіе. Якість ресемплірованіе безпосередньо залежить від типу зображення, чим більше воно містить дрібних і контрастних деталей, тим гірше кінцевий результат, який проявляється як розмитість.
Рамка навколо зображення
Навколо зображення можна додати рамку, колір якої збігається з кольором тексту на веб-сторінці. Для цього служить параметр border тега (Приклад 9.4). Як значення вказується товщина рамки в пікселях.
Приклад 9.4. Додавання рамки навколо зображення
Поля навколо зображення
Для будь-якого зображення можна задати порожні поля по горизонталі і вертикалі за допомогою параметрів hspace і vspace. Особливо це актуально при обтіканні малюнка текстом. У цьому випадку, щоб текст не наїжджав щільно на зображення, необхідно навколо нього додати порожній простір (приклад 9.5).
Приклад 9.5. Додавання відступів навколо зображення
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
вирівнювання зображення
Для зображень можна вказувати їх положення щодо тексту або інших зображень на веб-сторінці. Спосіб вирівнювання зображень задається параметром align тега . У табл. 9.1 перераховані можливі значення цього параметра і результат його використання.
Табл. 9.1. Значення параметра align для вирівнювання зображень