Подивіться на будь-яку веб-сторінку онлайн сьогодні, і ви помітите, що вони поділяють деякі спільні риси. Одна з цих спільних рис - зображення. Правильні зображення так багато додають до презентації на сайті. Деякі з цих зображень, наприклад логотип компанії, допомагають маркувати сайт і пов'язують цю цифрову сутність з вашою фізичною компанією.
Щоб додати зображення, значок або графіку на веб-сторінку, слід використовувати тег у HTML-коді сторінки. Ви розміщуєте
IMG
позначте у своєму HTML саме те місце, де ви хочете, щоб графіка відображалася Веб-переглядач, який відображає код сторінки, замінить цей тег на відповідний малюнок після перегляду сторінки. Повертаючись наприклад з логотипом нашої компанії, ось як ви можете додати це зображення на свій сайт:
Атрибути зображення
Дивлячись на код HTML вище, ви побачите, що елемент містить два атрибути. Кожен з них необхідний для зображення.
Першим атрибутом є «src». Це буквально файл зображення, який ви хочете відобразити на сторінці. У нашому прикладі ми використовуємо файл з назвою «logo.png». Це зображення, яке веб-браузер буде відображати при відображенні сайту.
Ви також помітите, що перед цією назвою файла ми додали деяку додаткову інформацію, «/images/». Це шлях до файла. Початкова коса риса вказує серверу заглянути в корінь каталогу. Потім він буде шукати теку з ім'ям «images» і, нарешті, файл з ім'ям «logo.png». Використання теки з назвою «images» для зберігання всієї графіки сайту є досить поширеною практикою, але шлях до файлу буде змінено на той, який має відношення до вашого сайту.
Другим обов'язковим атрибутом є текст «alt». Це «альтернативний текст», який відображається, якщо зображення з якоїсь причини не завантажується. Цей текст, який у нашому прикладі говорить «Логотип компанії», буде відображатися, якщо зображення не завантажується. Чому це сталося? Різноманітність причин:
- Неправильний шлях до файла
- Некоректна назва файла або орфографічна помилка
- Помилка передачі
- Файл було вилучено з сервера
Це лише декілька можливостей, чому вказане зображення може бути відсутнє. У цих випадках наш альтернативний текст буде відображатися замість.
Альтернативний текст також використовується програмним забезпеченням для читання з екрану, щоб «прочитати» зображення відвідувачеві з ослабленим зором. Оскільки вони не можуть бачити зображення, як ми, цей текст дозволяє їм дізнатися, що це за зображення. Ось чому потрібен додатковий текст і чому в ньому має бути чітко вказано, що це за зображення!
Поширеною помилкою щодо альтернативного тексту є те, що він призначений для цілей пошукової системи. Це неправда. Хоча Google та інші пошукові системи читають цей текст, щоб визначити, що це за зображення (пам'ятайте, що вони також не можуть «бачити» ваше зображення), вам не слід писати альтернативний текст, щоб звертатися виключно до пошукових систем. Автору чіткий альтернативний текст, призначений для людей. Якщо ви також можете додати деякі ключові слова в тег, які звертаються до пошукових систем, це нормально, але завжди переконайтеся, що альтернативний текст служить своєю основною метою, вказавши, яке зображення призначене для тих, хто не бачить графічний файл.
Інші атрибути
The
IMG
Тег також має два інші атрибути, які можна використовувати під час розміщення графіки на веб-сторінці - ширина і висота. Наприклад, якщо ви використовуєте редактор WYSIWYG, такий як Dreamweaver, він автоматично додає цю інформацію для вас. Ось приклад:
ШИРИНА
і
ВИСОТА
атрибути повідомляють переглядачу розмір зображення. Потім браузер точно знає, скільки місця в макеті потрібно виділити, і він може перейти до наступного елементу на сторінці під час завантаження зображення. Проблема з використанням цієї інформації у вашому HTML полягає в тому, що ви не завжди хочете, щоб ваше зображення відображалося з таким точним розміром. Наприклад, якщо у вас є чуйний веб-сайт, розміри якого змінюються залежно від екрану відвідувача і розміру пристрою, ви також хочете, щоб ваші зображення були гнучкими. Якщо ви вкажете у своєму HTML-коді, що таке фіксований розмір, вам буде дуже важко перевизначити чуйні медіа-запити CSS. З цієї причини і для підтримки поділу стилю (CSS) і структури (HTML) рекомендується НЕ додавати атрибути ширини і висоти в свій HTML-код. Одне
зауваження: якщо ви не увімкнете цих інструкцій за розміром і не вкажете розмір у CSS, браузер все одно покаже типове зображення.
Під редакцією Джеремі Жирара