Відкрийте файл HTML для веб-сторінки, до якої потрібно додати зображення, у текстовому редакторі, як-от Блокнот або програмне забезпечення для веб-розробки.
Додайте тег до файлу. Помістіть тег після елемента, під яким має відображатися зображення, коли HTML-файл відкривається у браузері. Тег не має окремого закриваючого тега. У тегу ви повинні вказати джерело зображення, яке ви хочете відобразити, ввівши місцезнаходження зображення в Інтернеті за допомогою src атрибут. Якщо зображення зберігається в тій самій папці, що й файл HTML, введіть назву та розширення зображення. Якщо зображення зберігається в іншому місці, введіть повну URL-адресу зображення.
Додайте альт атрибут до вашого тегу. У HTML5 атрибут alt є обов’язковим. Використовуйте цей атрибут, щоб описати зображення, якщо воно не може завантажитися. Якщо зображення не завантажується, браузер відображає текст, який ви вводите після атрибута alt. Крім того, атрибут alt важливий для програмного забезпечення для зчитування з екрана, яке використовується людьми з вадами зору. Програмне забезпечення зчитує текст в атрибуті alt, щоб людина з вадами зору, яка переглядає ваш веб-сайт, могла почути те, що зображено на зображенні, навіть якщо вони цього не бачать.
Вкажіть розміри зображення в пікселях за допомогою висота і ширина атрибути. Якщо ви не вкажете розміри, браузер не знає, скільки місця залишити для зображення під час завантаження сторінки. Це призводить до того, що сторінка завантажується поривчасто, оскільки спочатку завантажується текст, залишаючи невеликий простір для зображення, а потім розривається під час завантаження зображення, що призводить до розширення простору. При вказаних розмірах браузер залишає потрібну кількість простору між іншими елементами на сторінці, щоб зображення заповнилося після його завантаження.
Перевірте свій код, щоб переконатися, що зображення відображається в правильному місці, відкривши свій HTML-файл у браузері.
Використовуйте CSS, щоб перемістити зображення ліворуч або праворуч від екрана або обтікати його текстом. Наприклад, ви можете використовувати style="float: left;" або style="float: right;" всередині тегу.
Якщо ви не знаєте і висоту, і ширину зображення, можна просто використовувати лише атрибут висоти або ширини. Ви також можете використовувати CSS для визначення висоти та ширини; наприклад, для зображення розміром 100 на 100 пікселів використовуйте атрибут style: style="height: 100px; ширина: 100 пікселів."
Зробіть зображення посиланням, яке можна натиснути, розмістивши тег у парі тегів "a href". Наприклад, якщо ви хочете, щоб зображення посилалося на Facebook, введіть наступне.
Не використовуйте атрибут alt, щоб підвищити SEO для своєї сторінки. Пошукові системи давно знають, що деякі веб-дизайнери намагаються наповнити атрибут alt додатковими ключовими словами, і тому вони ігнорують текст в атрибуті alt.
