| HTML 5.1 (W3C) |
В інтернеті важко знайти сайт, який би не містив картинок, і це не дивно, адже вони є основною частиною дизайну сайту, яка надає йому вигляд, що запам'ятовується. А гарний дизайн сайту – запорука його успішного розвитку. Для виведення зображень у HTML існує єдиний тег ![]()
.
1. Синтаксис тега ![]()
Опис зображення" src = " URL " [ атрибути ]>
Зверніть увагу, що цей тег є поодиноким і не вимагаєзакриває тега
.
Атрибут src є обов'язковим. За допомогою нього вказується адреса зображення. Можна вказати абсолютну або відносну URL-адресу. Якщо адресу не вказати або написати з помилкою, то картинка виведена не буде.
Атрибут alt="опис"
- не является обязательным, но лучше сразу себя приучить к тому, чтобы прописывать его каждому изображению, поскольку это нужно как для пользователей, так и для поисковых систем.!}
Інші атрибути є необов'язковими, їх ми розглянемо трохи нижче. Спочатку наведемо простий приклад виведення картинки на html.
2. Як вставити в html картинку
Для вставки картинки в HTML використовується тег ![]()
. Синтаксис ми розглянули трохи вище. Давайте наведемо практичні приклади.
приклад 2.1. Використання тега ![]()
...
...
Цей код
У цьому прикладі ми вказали пряму адресу зображення з картинок на Яндекс Фото. Найчастіше вказуються посилання на картинки, які лежать на тому ж URL. Наприклад, src="/img/kartinka.jpg", тобто. вказується відносна адреса.
Можливе розміщення кількох картинок поспіль. Якщо вони не вміщатимуться на одному рядку, то автоматично відбудеться перехід на наступний.
приклад 2.2. Виведення декількох картинок у html один за одним
...
https://img-fotki.yandex.ru/get/173114/19749220.11/0_da31c_45c53ada_orig.jpg">
...
Перетворюється на сторінку на наступне:
Якби ми розмістили ще одне зображення, то воно було б з нового рядка, оскільки в цьому воно б уже не вмістилося.
приклад 2.3. Використання альтернативного тексту (alt) в img
Рекомендується прописувати альтернативний текст (атрибут alt) у тезі ![]()
, щоб застрахувати себе від нагоди, що картинка не доступна. Нижче наведено приклад з використанням альтернативного тексту. У першому випадку ми не ставили розміри картинки, а в другому задаємо.
...
Приклад зображення"src="321.jpg">...
Перетворюється на сторінку на наступне:
Якби ми розмістили ще одне зображення, то воно було б з нового рядка, оскільки в цьому рядку воно б вже не вмістилося.
Тепер розглянемо докладно всі атрибути тега ![]()
.
3. Атрибути та властивості тега ![]()
1. Властивість align = "параметр" - визначає вирівнювання малюнка. Це значення також впливає на те, як текст буде обтікати малюнок. Може приймати такі параметри:
- left - вирівнювання по лівому краю
- middle - вирівнювання середини зображення базової лінії поточного рядка
- bottom - вирівнювання нижньої межі зображення за навколишнім текстом
- top - верхня межа зображення вирівнюється за найвищим елементом поточного рядка
- right - вирівнювання з правого краю
Приклад 3.1. Вирівнювання зображення в html з правого краю
...
https://img-fotki.yandex.ru/get/173114/19749220.11/0_da31c_45c53ada_orig.jpg">
...
Перетворюється на сторінку на наступне:
2. Властивість alt="текст"
- подсказка/описание картинки. Выполняет сразу две важные функции:!}
- Видає підказку при наведенні
- Якщо в браузері вимкнено зображення, виводиться цей текст
Цей атрибут також дуже важливий при ранжируванні зображень у Яндекс Картинках та Google Картинках. Його слід прописувати до кожного зображення, оскільки це є одним із факторів у алгоритмах пошукових систем.
Приклад 3.2. Виведення картинки в html з рамкою (кордоном)
...
http://img-fotki.yandex.ru/get/4423/80300288.f/0_631d9_e822264_M.jpg">
...
Перетворюється на сторінку на наступне:
4. Властивість bordercolor="колір" - задає колір рамки, що обтікає зображення. Має сенс тільки якщо атрибут border більше 0.
приклад 3.3. Виведення картинки в html з кольоровою рамкою
...
http://img-fotki.yandex.ru/get/4423/80300288.f/0_631d9_e822264_M.jpg">
...
Результат можна побачити трохи вище.
Примітка Атрибути border і bordercolor можна встановити в стилях CSS до img:
...
http://img-fotki.yandex.ru/get/4423/80300288.f/0_631d9_e822264_M.jpg">
...
5. Властивість height="ЧИСЛО" - задає висоту зображення: або у пікселях, або у відсотках %. Наприклад, якщо зображення має розмір 400х200, а ми вкажемо висоту 150 пікселів, воно стискається до 300х150 (на 25% менше), тобто. пропорційно.
6. Властивість width="ЧИСЛО" - задає ширину зображення: або у пікселях, або у відсотках %. Наприклад, якщо зображення має розмір 1000х800, а ширина вказується 1200 пікселів, воно автоматично розширюється на 20% до 1200х960.
7. Властивість hspace="КІЛЬКІСТЬ" - задає горизонтальний відступ зображення в пікселях від інших об'єктів html.
8. Властивість vspace="КІЛЬКІСТЬ" - задає вертикальний відступ зображення в пікселях від інших об'єктів html.
Примітка Замість hspace і vspace раджу застосовувати старий і перевірений margin (докладніше про нього можете прочитати в уроці про опис стилів html). Коротко нагадаю:
- margin-top: X px; (X - відступ зверху)
- margin-bottom: Y px; (Y – відступ внизу)
- margin-left: L px; (L – відступ зліва)
- margin-right: R px; (R - відступ праворуч)
Задають відступи від об'єктів у пікселях. Допускаються негативні значення. За умовчанням або успадковується значення предка, або має значення 0.
Наприклад. Відступ ліворуч складає 50 пікселів, а зверху 10 пікселів.
...
margin-top:10px; margin-left:50px"src =" https://img-fotki.yandex.ru/get/173114/19749220.11/0_da31c_45c53ada_orig.jpg">
...
Перетворюється на сторінку на наступне:
У даному прикладі - відступ зверху становив 10 пікселів, зліва 50 пікселів.
9. Властивість class="ім'я_класу" - можна присвоїти клас зображенню, щоб задати стиль всім зображенням цього класу.
4. Як зробити картинку посиланням
Таке питання виникає у молодих вебмайстрів. Насправді, все дуже легко. Для цього достатньо обрамити тег ![]()
тегом (посиланням).
Наприклад
...
Адреса_зображення">
...
5. Як заокруглити кути біля картинки
https://img-fotki.yandex.ru/get/173114/19749220.11/0_da31c_45c53ada_orig.jpg" style = "border-radius: 30px ">
Шановний читачу, тепер Ви дізналися набагато більше про html тег img. Тепер раджу перейти до наступного уроку.
Про цю людину відомо тільки те,
що він не сидів у в'язниці, але чомусь не сидів - невідомо.
Марк Твен.
Це урок про те, як вставити картинку в HTMLЯк її оформити, як зробити обтікання картинки текстом і т.д. Адже відомо, що зображення роблять сайт більш привабливим та відмінним від інших ресурсів, тому вміння використовувати тег та його атрибути стане в нагоді в сучасному Інтернеті. Але головне тут – почуття міри!
Надлишок графіки викличе обтяження html-сторінки і, відповідно, збільшить час її завантаження. Крім того, наявність великої кількості зображень відволікатиме відвідувачів від головного вмісту сайту (якщо, звичайно, графіка не є головним вмістом сайту). Так що, дотримуйся міри і використовуй тільки там, де це потрібно. І буде тобі щастя!
В уроці про я вже розповідав про те, як можна використовувати картинки як тло html-документа. Зараз поговоримо про те, як графіка використовується в «верхньому шарі» html-сторінки.
§ 1. Як вставити картинку
Для вставки картинок у HTML використовується тег IMGз обов'язковиматрибутом SRC. Цей атрибут вказує браузер шлях до файлу зображення. Тобто. для вставки картинки з назвою logo.jpgу певне місце сторінки (за умови, що і сторінка, і картинка розташовані в одній папці(каталозі)) потрібно в цьому місці вставити наступний html-код:
src="logo.jpg">
Якщо картинка і сторінка розташовані в різнихкаталогах (папках), то потрібно вказати шлях до зображення щодосторінки. Наприклад, якщо html-сторінка лежить у каталозі (папці) site, у цьому ж каталозі (папці) розташований підкаталог (папка) images, в якому і знаходиться наша картинка logo.jpg, то для її вставки потрібно написати так:
images/logo.jpg">
А можна не мучитися і вказати повна адреса картинки. Наприклад, так:
http://www..png">
У разі браузер відобразить код так:
Примітка. Якщо картинка розташована на вашому комп'ютеріа вставити ви її хочете на сторінку в Інтернеті, то нічого не вийде. Для цього картинку потрібно спочатку перемістити в якесь місце в інтернеті(Наприклад, ). І вказати в коді сторінки повну адресу до цього місця з картинкою.
Крім обов'язкового атрибуту SRCу тега IMGє ще кілька необов'язкових атрибутів. Розглянемо їх докладніше.
§ 2. Вказівка розмірів картинки
Почнемо з атрибутів, які дозволяють задати розміри картинки(точніше, застовпити місце під ці розміри на сторінки). Ось вони:
- width- ширина картинки у пікселах чи відсотках;
- height- Висота картинки в пікселах або відсотках.
Якщо використовуються ці атрибути, спочатку виділить місце під графіку, підготує макет документа, відобразить текст і тільки потім завантажить зображення. При цьому він помістить картинку прямокутник виділеного розміру, навіть якщо реальні ширина і висота картинки більше (стисне) або менше (розтягне). У випадку, коли ці атрибути не використовуються, браузер буде вантажити картинку відразу, а виведення тексту та інших елементів, що йдуть за нею, затримається.
Ширину і висоту зображень можна вказувати як у пікселах (при цьому розмір картинки буде постійним незалежно від роздільної здатності екрана), так і у відсотках (розмір зображення буде залежати від роздільної здатності екрана користувача). Наприклад:
width="50" height="20">
width="10%" height="5%">
§ 3. Альтернативний текст
У випадку, якщо користувач в налаштуваннях браузера відключив показ зображень, можна замість картинки вивести альтернативний текст, який би пояснив, що за графіка тут має бути. Досягається це шляхом застосування атрибуту ALT:
У цьому випадку браузер зарезервує місце на сторінці під зображення, але замість картинки покаже текст, який ти напишеш у значенні атрибута ALT:
Повторюю, це станеться, якщо користувач вимкнув показ графіки. Якщо ж ні, то картинка приховає альтернативний текст.
§ 4. Вирівнювання картинки
За допомогою вже знайомого тобі атрибута alignможна керувати вирівнюванням картинок щодо інших елементів html-сторінки. Атрибут alignє кілька значень, але нас найбільше зараз цікавлять два:
- left- Зображення розташовується біля лівого краю сторінки, а текст обтікає картинку праворуч;
- right- Зображення розташовується у правого краю сторінки, а текст та інші елементи обтікають картинку зліва.
Наприклад, HTML-код
браузер покаже так
А цей HTML-код:
виглядатиме ось так:
Для припинення обтікання картинки текстом можна використовувати тег BR(Знайомий нам з минулого розділу про ). У тега BRє атрибут clear, який може приймати три значення:
- left- припинення обтікання текстом картинок, вирівняних з лівого краю;
- right- припинення обтікання текстом картинок, вирівняних з правого краю;
- all- припинення обтікання текстом картинок, вирівняних і з лівого, і з правого краю.
Вставляємо картинку:
Опис та використання
Тег ![]()
вставляє зображення у документ HTML.
Зауважте, що зображення технічно не вставляються в сторінку. Насправді зображення посилаються на HTML сторінки. Тег ![]()
створює контейнер для зображення.
У тега ![]()
два обов'язкові атрибути: src та alt.
Різниця між HTML та XHTML
У HTML тег ![]()
не має тега, що закриває.
У XHTML тег ![]()
має бути правильно закритий.
Атрибути "align", "border", "hspace", і "vspace" елемента img застаріли та не підтримуються у XHTML 1.0 Strict.
Порада:Атрибут alt використовується як альтернативний текст у разі відсутності зображення, а не як текст під час наведення мишки. Для показу тексту під час наведення мишки на зображення використовуйте атрибут title. Ось так: 
.
Обов'язкові атрибути
Необов'язкові атрибути
Стандартні атрибути
Подієві атрибути
