HTML, як вставити картинку

Щоб вставити картинку в документ HTML, використовують тег . Цей тег має два ключові атрибути:

• src – визначає шлях до файлу картинки.
• alt – встановлює альтернативний текст. Він буде відображатися на сторінці, якщо картинка виявиться недоступною і браузер не зможе її показати користувачеві.

Як використовувати локальну картинку із сервера

Якщо картинка, яку ти хочеш використовувати, лежить на тому ж сервері, що і HTML документ, то можна вказати відносний шлях.

img src='/images/my_cool_image.jpg'
alt='My Cool Image!'>

Як вставити картинку в HTML за посиланням

Буває, що картинка знаходиться на віддаленому сервері і ти маєш лише посилання на неї. Тоді ти можеш використовувати це посилання як значення атрибута src.

img src='https://learn.coderslang.com/js-test-3.png'
alt='JavaScript Interview Question #3'>

Як змінити ширину та висоту картинки в HTML

Все, що пов'язано зі стилізацією картинки, можна зробити за допомогою CSS. Наприклад, якщо ми хочемо розтягнути картинку по всій ширині екрана (або батьківського контейнера), ми можемо зробити так:

Але такий підхід вплине на картинки на сайті.

Якщо тобі потрібно змінити розміри лише однієї картинки, можна додати їй id .

img id=test
src='https://learn.coderslang.com/js-test-3.png'
alt='JavaScript Interview Question #3'>

І зробити CSS селектор з цього id.

Використання атрибутів width та height

Крім CSS, змінити розмір картинки HTML можна додавши атрибути width і height просто до тегу .

img src='https://learn.coderslang.com/js-test-3.png'
alt='JavaScript Interview Question #3'
width=600
height=400>

Але такий підхід є менш універсальним, ніж CSS.

Як вставити картинку в HTML-код сторінки

У статті розбираємо, як додати картинки до HTML-коду: який формат зображення підходить, як змінити розмір картинки в HTML, як задати вирівнювання і додати рамку.

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

Так само візуальна складова важлива для сайтів. Зображення привертають увагу, допомагають із сприйняттям інформації та впливають на зовнішній вигляд сторінок. Подивіться на вибір красивих сайтів з галереї SiteSee - на них більша частина інформації в картинках.

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

У статті покроково і не поспішаючи розуміємось, як додати картинку в HTML 👇

Як вставити картинку в HTML-код:

Вибрати зображення

Перед тим як додати зображення до HTML-коду сайту, знайдіть джерело, з якого можна скачати картинки. Якщо ви використовуєте фотографії, які зробили самостійно, жодних проблем не виникне. Інша справа, якщо плануєте як тло або доповнення до дизайну сторінки вставити картинку в HTML з інтернету.Розміщення зображень на сайті без урахування авторського права власника може спричинити неприємні наслідки - вас можуть змусити видалити картинку або навіть оштрафувати.

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

Використання картинок регулюється групою ліцензій Creative Commons. Це американська некомерційна організація, яка розробила варіанти угод, якими в інтернеті поширюється контент.

На сайтах для скачування картинок зустрічаються такі ліцензії та умови використання безкоштовних зображень:

• CC Attribution - щоб використовувати завантажені картинки, вкажіть автора.
• CC Attribution-NoDerivs — вкажіть автора та не видозмінюйте вихідне зображення.
• CC Attribution-NonCommercial — вкажіть авторство та використовуйте картинку з некомерційною метою.
• СС0 або Public Domain - Ви можете вільно використовувати в будь-яких проектах без вказівки авторства.

Для платних зображень є такі типи ліцензій:

• Royalty-Free — купуєте картинку один раз і використовуєте зображення без тимчасових обмежень. Ексклюзивні права залишаються у автора.
• Editorial - такі картинки не можна використовувати з комерційною метою.
• Rights-Managed – отримайте виняткове право на використання картинки.

Ось список сервісів із безкоштовними зображеннями:

Вони пропонують мільйони безкоштовних картинок у високій роздільній здатності під ліцензією СС0, яка дає вільно користуватися ними для своїх цілей.

Якщо не знайшли потрібну картинку на безкоштовних стоках, продовжуйте пошуки на платних сервісах:

Більшість зображень розповсюджуються за ліцензією Royalty- Free.