Менеджер зображень - тег img

Картинка не просто так вставляється безпосередньо в текст. Браузеру повідомляють її ім`я і вказують, де і як розташувати на екрані. Для цього використовують одинарний HTML-тег img. Він задає місце розташування графічного об`єкта на веб-сторінці.

Якщо багато атрибутів для тегів в принципі не обов`язкові, то тег img повинен володіти принаймні одним параметром - адресою малюнка. Цей атрибут називається src:

• lt; img src = `images / goat.jpg` gt; - В цьому місці з`явиться файл images / goat.jpg, який зберігається в поточній директорії;
• lt; img src = `images / Shape5.jpg` gt; - З таким параметром тега img браузер завантажить зображення, викладене в інтернеті на сайті megasellmag.ru.

атрибути вирівнювання

Для позиціонування зображень на сторінці за допомогою HTML якраз і служить тег img, атрибути якого відповідають за розміщення картинки на сторінці і характер її обтікання текстом.

За замовчуванням браузер розпорядженні зображення в центрі екрана, а текст його НЕ обтікає. Тег img позволітвиразіть свою незгоду з браузером за допомогою атрибута align (вирівнювання).

lt; img src = `images / goat.jpg` align = `left` gt; - Малюнок розташується біля лівого краю сторінки, а текст обійде його справа.

Аналогічним буде поведінка тексту, якщо картинку розташувати праворуч (align = right), посередині (align = middle), зверху (align = top), внизу (align = bottom) і по центру (center).

Відео: HTML для початківців - Урок №6 - Зображення - тег IMG

Параметри відступів і розмірів

Щоб текст не заповзав на картинки, тег img обзавівся спеціальниміатрібутамі -hspace (horizontal / горизонтальні поля) і vspace (vertical / вертикальні поля), що визначають величину відступів тексту від країв зображень в пікселях.

lt; img src = `images / goat.jpg` align = `left` vspace = `15 `hspace =` 30 ` gt;

Картинка не тільки слухняно віддалиться від тексту на зазначену величину, а й відсунеться від краю сторінки, так що краще уникати великих відступів.

Дуже важливі геометричні розміри зображень, які не тільки бажано, але іноді просто необхідно вказувати для коректного відображення картинки. Для цього служать атрибути width (ширина) і height (висота), значення яких задають в пікселях або відсотках.

lt; img src = `images / goat.jpg` width = `625` height = `450` gt;

Якщо вказати тільки ширину, висота буде підібрана автоматично з вихідними пропорціями. Розміри, задані у відсотках, дозволяють розташувати зображення в потрібній частині сторінки, незалежно від розміру вікна браузера, а така необхідність виникає нерідко.

Інші параметри

Атрибут border укладає картинку в рамку зазначеної товщини, чого не робить за замовчуванням браузер.

lt; img src = `images / goat.jpg` width = `500` height = `360` border = `5` gt;

Рамка може мати і, здавалося б, безглузду нульову товщину (border = `0`), але це до тих пір, поки картинка не стане посиланням, коли браузер автоматично обведе її синьою рамкою, не чекаючи вказівок.

lt; a href = `megasellmag.ru` gt; lt; img src = `images / opana.jpg` width = `250` height = `250` gt; lt; / a gt;

Деякі нетерплячі користувачі, розлючені низькою швидкістю інтернету, просто відключать показ картинок. Ось для таких випадків передбачений параметр alt, що дозволяє ввести альтернативний текст, який побачить користувач в квадратику, куди поспішає завантажитися зображення.

Відео: Оптимізація зображень для сайту - Костянтин Хмельов

Якщо не влаштовують можливості параметра alt, тег img може предложітьатрібут longdesc, як значення якого використовують URL-адресу документа з більш детальним описом.

Атрибути usemap і ismap вказують браузеру, що зображенням буде малюнок, на якому гіперпосиланнями є окремі області (карта посилань), тільки параметр usemap визначає навігаційну карту на сервері, а ismap - карту на стороні клієнта.

lt; img src = `images / Quad_Band_Phone.jpg` width = `145` height = `126` alt = `Мобільні телефони` usemap = `# phones` gt;

Відео: HTML / CSS: Урок 2. Робота з зображеннями

Опис посилання 1 на малюнку нижче:

lt; img src = `images / map.jpg` width = `328` height = `236` border = `0` usemap = `# Dvostok` gt; lt; map name = `Primorye` gt;

lt; area shape = `rect` coords = `60, 20,110,50,105,80,35,80 `href =` Lsd022_1.html `target =` _ blank `alt =` Lesozavodsk`gt;

екзотичні елементи

Атрибут lowsrc наказує браузеру завантажити в першу чергу копію (або іншу альтернативу) вихідного зображення з більш низькою якістю і, відповідно, більш "легку". Це хитрощі передбачено на випадок низької швидкості інтернету у користувача. Оригінал, завантажившись, замінює "підробку".

Не так часто використовуваний атрибут galleryimg тега img викликає панель управління зображенням (якщо навести на нього курсор), дозволяючи відкрити стандартну папку "Мої малюнки" і роздрукувати, зберегти або відправити картинку електронною поштою. Відключити панель можна, вказавши параметру galleryimg значення no / false, а включити, встановивши yes / true.

У новій специфікації HTML5 у ряду тегів застаріли деякі параметри. Так, у img атрибути lowsrc, border, longdesc і name відправлені у відставку.