Тег img вставляє в html-документ
зображення збережені в файлах з найбільш популярними розширеннями – .gif, .jpg, .png та .bmp.
Синтаксис: <img
src="шлях до графічного файлу" атрибут="значення" />
Обов’язкові атрибути:
Приклади використання атрибуту src:
<img
src="imege.jpg"> – зображення відображається в реальному вигляді;
<img src="http://cs40526.vk.me/v4051278/4b9/bLyULuTpllg.jpg"> –
зображення знаходиться на веб-сервері в лапках вказана URL-адреса;
<img
src="img/imege.jpg"> – зображення знаходиться в папці, яка
знаходиться в місці де зберігається веб-сторінка;
<img
src="../img/imege.jpg"> – папка в якій зберігається зображення
знаходиться в ієрархії папок вище ніж папка в якій зберігається веб- документ
alt - вказує
альтернативний текст для зображення (який буде показаний, якщо у відвідувача
відключений показ графіки), зміст атрибуту alt
активно використовується пошуковими системами і вимовляється голосовими
браузерами, тому якісно описуйте картинку.
Інші атрибути:
align - вказує розташування зображення щодо тексту або інших об'єктів, може приймати
значення:
1.
left - зображення
вирівнюється по лівому краю;
2.
right - зображення
вирівнюється по правому краю;
3.
top - вирівнює
верхню лінію малюнка по верхньому рядку тексту;
4.
bottom - вирівнює
нижню лінію малюнка по нижньому рядку тексту;
5.
middle - вирівнює
середину малюнка по центру рядка тексту;
border - вказує товщину рамки навколо зображення або прибирає її зовсім (при border =
"0" рамка не показується);
height - вказує висоту зображення;
width - вказує ширину зображення;
hspace - вказує горизонтальний відступ від зображення до тексту чи іншого об'єкта;
vspace - вказує вертикальний відступ від зображення до тексту чи іншого об'єкта;
lowsrc - вказує шлях до зображення більш низької якості для попереднього перегляду;
usemap - вказує, що зображення є навігаційної картою (image map). Таке зображення може
містити кілька різних посилань;
ismap - вказує, що зображення є навігаційної картою (image map), оброблюваної
сервером. Як правило, в таких випадках воно є посиланням на серверний скрипт.
title – текст, який виводиться разом з картинкою, у вигляді підказки.
Приклад <!DOCTYPE html>
<html>
<head>
<title>Приклад тегу img</title>
</head>
<body>
<img src ="linux.jpg" width="154" height="190" align="left"> Файл з малюноком розміщено в томуж каталозі, що і файл html. Тому шлях до файлу (атрибут src є відносним (без http). Тег img має атрибут align з параметром left. Тому малюнок розташовано зліва від тексту.
</body>
</html>
<head>
<title>Приклад тегу img</title>
</head>
<body>
<img src ="linux.jpg" width="154" height="190" align="left"> Файл з малюноком розміщено в томуж каталозі, що і файл html. Тому шлях до файлу (атрибут src є відносним (без http). Тег img має атрибут align з параметром left. Тому малюнок розташовано зліва від тексту.
</body>
</html>
Часті помилки. Атрибут alt не тільки допоможе тим, у кого
відключено показ зображень. Його відсутність – порушення специфікації html
4.01, тобто тег img без атрибуту alt використовувати не можна.
Додаткові зауваження. Не забувайте
правильно вказувати атрибути до тегу img. Наприклад, height і width потрібні для того, щоб браузер міг зарезервувати простір для
малюнку – тоді він продовжить завантажувати html-документ, не чекаючи повного
завантаження зображення.
Немає коментарів:
Дописати коментар