✅ HTML Теги зображень - Підтримка та сумісність з атрибутами тегу зображень

Що таке теги зображення HTML?
Фонове зображення

Що таке теги зображення HTML?

У наступній статті буде викладено контур HTML тегів зображень. Я знаю його кліше, але дозвольте почати, кажучи, що картина коштує тисячу слів. Що стосується веб-сторінок, це особливо актуально. Зображення може продати відвідувача вашою ідеєю, вразити когось, хто придбає ваш товар, і це може допомогти веб-сторінці виглядати набагато краще. У цьому посібнику ми розглянемо, як ми можемо додавати IMG на веб-сторінки та правильно їх вирівнювати разом із додаванням посилань на них.

Додавання зображень на веб-сторінки

Ви можете додати IMG на сторінку HTML за допомогою в HTML-документі, ось синтаксис:

Тут IMG повідомляє браузеру, що тег стосується додавання IMG до документа, а "src =" вказує, звідки слід завантажити зображення.

Приклад сторінки із зображенням

Example HTML IMG Tag alt = " Software development icon " height = " 150 " width = "140" />

Ось вихід коду:

Цікавим фактом щодо цих HTML-сторінок є те, що коли ви використовуєте тег IMG, зображення не вставляється на вказану веб-сторінку, натомість створює простір, де зображення розміщується після його завантаження.

Підтримка браузера та сумісність з атрибутами

Як можна очікувати, усі сучасні браузери підтримують зображення та використання тегів IMG. Іноді мобільні браузери змінять розмір зображення, щоб розмістити його на екрані, якщо зображення не встановлено як чуйне.

Що стосується сумісності атрибутів з HTML 4.01 та новішим HTML5, то більшість тегів буде працювати, крім вирівнювання, межі, hspace та vspace, які в останньому просто не підтримуються.

Зображення як посилання:

Будуть випадки, коли ви захочете, щоб зображення працювало як посилання на іншу сторінку. Ви можете це зробити, додавши тег IMG всередині тегу.

Встановлення зображення як фону веб-сторінки

Ви можете призначити зображення як фонове зображення веб-сторінки, використовуючи властивість CSS background-image у елементі Body на сторінці.

Фонове зображення

Налаштування зображення на плавальному веб-переглядачі

Ми можемо використовувати властивість CSS “float”, щоб встановити зображення, яке плаває всередині у будь-якому місці вікна браузера. Давайте розглянемо приклад, який допоможе вам зрозуміти.

Тут зображення автомобіля пропливе в правій частині тексту.

Тут зображення автомобіля пропливе в лівій частині тексту.

Атрибути тегу зображень

Нижче наведено атрибути тегу зображення.

1) Вирівняти

Можливі значення: вгорі, знизу, посередині, ліворуч або праворуч.

Атрибут "світлий" використовується для визначення вирівнювання зображення на веб-сторінці.

2) Alt

Тип значення: Текст

Alt використовується для визначення альтернативного тексту зображення веб-сторінки. У випадках, коли показ IMG неможливий, браузер відображає цей текст користувачеві. Пошукові системи, такі як Google та Bing, використовують цей текст alt для відображення результатів у пошуку зображень.

3) Кордон

Тип значення: Пікселі

Він використовується для створення рамки визначеної користувачем товщини навколо зображення. Це не працює в HTML5.

4) Перехресне походження

Тип значення: Анонімні користувальницькі дані

Цей атрибут використовується, коли ми хочемо вказати, як слід поводитися з фотографіями з поперечним походженням. В основному це використовується у випадках, коли використовуються елементи полотна веб-додатків JavaScript.

5) Висота

Тип значення: відсотки або пікселі

Очевидно, цей використовується для позначення висоти зображення на веб-сторінці HTML.

6) hspace

Тип значення: Пікселі

Непідтримуваний у HTML5, атрибут hspace використовується для вказування в пікселях, скільки білого пробілу слід додати ліворуч та праворуч від вставленого зображення.

7) карта

Тип значення: URL-адреса сторінки

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

8) Longdesc

Тип значення: URL-адреса

Longdesc використовується для детального опису зображення за допомогою URL-адреси. URL-адреса, яка використовується в атрибуті, використовується як опис зображення.

9) src

Тип значення: URL-адреса

src розшифровується як джерело, і воно використовується для вказівки адреси, з якої браузер отримає зображення, ця URL-адреса може бути застосована до зображення всередині каталогу на тому ж сервері, а також може зберігати зображення на сторонній сервер із інше доменне ім’я.

10) карта використання

Тип значення: # ім'я

Атрибут usemap використовується для визначення зображення для карти зображення на стороні клієнта. Мапа використання завжди використовується з тегами HTML та області та HTML.

11) vspace

Тип значення: Пікселі

Непідтримуваний у HTML5, атрибут Vspace використовується для встановлення кількості пікселів, які мають використовуватися як пробіли вгорі та внизу зображення на веб-сторінці.

12) Ширина

Тип значення: Пікселі

Так само, як випливає з назви, атрибут width використовується для визначення ширини зображення на веб-сторінці HTML.

Висновок - HTML-теги зображень

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

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

HTML Теги зображень - Підтримка та сумісність з атрибутами тегу зображень