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