Откройте HTML-файл веб-страницы, к которой вы хотите добавить изображение, в текстовом редакторе, таком как Блокнот, или в программе для веб-разработки.
Добавьте тег к файлу. Поместите тег после элемента, под которым должно отображаться изображение при открытии HTML-файла в браузере. Тег не имеет отдельного закрывающего тега. В теге вы должны указать источник изображения, которое вы хотите отобразить, введя местоположение изображения в Интернете с помощью src атрибут. Если изображение хранится в той же папке, что и файл HTML, введите имя и расширение изображения. Если изображение хранится в другом месте, введите полный URL-адрес изображения.
Добавить альт атрибут вашего тега. В HTML5 атрибут alt обязателен. Используйте этот атрибут для описания изображения в случае, если оно не может загрузиться. Если изображение не загружается, браузер отображает текст, который вы вводите после атрибута alt. Кроме того, атрибут alt важен для программ чтения с экрана, используемых людьми с нарушениями зрения. Программное обеспечение считывает текст в атрибуте alt, чтобы человек с нарушением зрения, просматривающий ваш веб-сайт, мог слышать, что изображено на картинке, даже если он этого не видит.
Укажите размеры изображения в пикселях с помощью высота и ширина атрибуты. Если вы не укажете размеры, браузер не знает, сколько места оставить для изображения при загрузке страницы. Это приводит к скачкообразной загрузке страницы, поскольку текст загружается первым, оставляя небольшое пространство для изображения, а затем отрывается при загрузке изображения и вызывает расширение пространства. С указанными размерами браузер оставляет ровно необходимое пространство между другими элементами на странице, чтобы изображение могло заполнить его после завершения загрузки.
Проверьте свой код, чтобы убедиться, что изображение отображается в нужном месте, открыв HTML-файл в браузере.
Используйте CSS, чтобы переместить изображение в левую или правую часть экрана или обернуть его текстом. Например, вы можете использовать style = "float: left;" или style = "float: right;" внутри тега.
Если вы не знаете ни высоту, ни ширину изображения, можно просто использовать только атрибут высоты или ширины. Вы также можете использовать CSS, чтобы указать высоту и ширину; например, для изображения размером 100 на 100 пикселей используйте атрибут стиля: style = "height: 100px; ширина: 100 пикселей ".
Превратите изображение в интерактивную ссылку, поместив тег в пару тегов "href". Например, если вы хотите, чтобы изображение ссылалось на Facebook, введите следующее.
Не используйте атрибут alt, чтобы попытаться повысить SEO вашей страницы. Поисковые системы уже давно знают, что некоторые веб-дизайнеры пытаются заполнить атрибут alt дополнительными ключевыми словами, и поэтому они игнорируют текст в атрибуте alt.
