Тег изображения в HTML - добавление изображений на сайт - httpdoc.ru

Тег изображения в HTML

<img> Тег является тег изображения в HTML. Он вставляет изображения на веб-страницы. Это одиночный тег, т. Е. Он не имеет закрывающего тега.

Изображения - необходимая часть написания богатого контента в Интернете. Они помогают легко читать. Они являются лицом контента в Интернете, особенно в социальных сетях.

Вы можете добавлять миниатюрные изображения для социальных сетей с помощью meta тегов, которые мы обсудим в учебнике по метатегам. Сегодня мы обсудим вставку изображений в тело веб-страницы.

<img> Тег имеет заданный синтаксис с различными атрибутами поведения управления изображением. Посмотрите на синтаксис ниже:

Синтаксис
< img src = "расположение изображения" alt = "информация об изображении" height = "px" width = "px" >
    Пример: 
      <img src = "images / flower.jpg" alt = "Изображение календулы" height = "50px" width = "60px">

Пример тега img
<!DOCTYPE html> 
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title> HTML Image Tag </title> 
</head> 

<body> 

<img src="HTML-Image.png" width="400px" height="200px">

</body> 
</html>

Выход

HTML Image Tag Example
HTML изображение

Атрибут img src

src Атрибут img тега указать расположение изображения. Вы должны указать полный путь к изображению, чтобы вставить его на веб-страницу.

Если ваш образ и ваши веб - страницы находятся в той же папке, то вы можете вставить его , используя только его имя с расширением, например, src="flower.jpg" .

Пример атрибута img src
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title> HTML Image Alt Attribute </title> 
<body>

<img src="HTML-Image.png" alt="HTML5 Image" style="width:400px; height:250px;">

</body>
</html>

Атрибут img alt

В "alt" атрибуте <img> тега вы дадите краткую информацию об изображении. Информация может относиться к содержанию изображения.

Информация, записанная в атрибуте alt, полезна для поисковых систем. Это помогает им понять содержание изображения. Таким образом, изображения могут занимать место в поиске изображений Google и привлекать трафик.

alt атрибут также полезен для программ чтения с экрана. Когда они сталкиваются с изображением на веб-странице, они описывают изображение с помощью текста, записанного в атрибуте alt.

Еще одна важная особенность заключается в том, что если изображение не загружается, браузер отображает замещающий текст вместо него.

Пример атрибута img alt
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title> HTML Image Alt Attribute </title> 
<body>

<img src="HTML-Image.png" alt="HTML5 Image" style="width:400px; height:250px;">

</body>
</html>

Выход

HTML Image Alt Attribute Example HTML5 изображение

Атрибуты ширины и высоты изображения

Атрибуты ширины и высоты управляют размерами изображения на веб-странице. Это не изменит фактический размер изображения, а изменит только отображаемый размер.

Рекомендуется изменить фактический размер изображения в соответствии с требованиями веб-сайта. Если вы измените размер изображения с помощью атрибутов ширины и высоты, оно может растянуть изображение, что будет выглядеть неприятно.

Пример атрибутов ширины и высоты
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title> HTML Image Size Attribute </title> 
<body>

<img src="HTML5-Image.png" alt="HTML5 Image" width=600px height=250px>

</body>
</html>

Выход

HTML Image Alt Attribute Example HTML5 изображение

Поддержка браузера

Элемент
Microsoft Edge browser.png Край
Chrome browser.png Хром
Firefox browser.png Fire Fox
Opera browser.png Опера
safari browser.png Сафари
<img>
да
да
да
да
да