HTML тег <img> — атрибуты и примеры. Как вставить в html картинку

В интернете трудно найти сайт, который бы не содержал картинок, и это не удивительно, ведь они являются основной частью дизайна сайта, которая придает ему запоминающейся вид. А хороший дизайн сайта — залог его успешного развития. Для вывода изображений в html существует единственный тег <img>.

Оглавление
1. Синтаксис <img>
2. Как вставить в html картинку
2.1. Пример. Использование тега <img>
2.2. Пример. Вывод нескольких картинок в html друг за другом
2.3. Пример. Использование альтернативного текста (alt) в <img>
3. Атрибуты и свойства тега <img>
3.1. Пример. Выравнивание изображения в html по правому краю
3.2. Пример. Вывод картинки в html с рамкой (границей)
3.3. Пример. Вывод картинки в html с цветной рамкой
4. Как сделать картинку ссылкой
5. Как скруглить углы у картинки

1. Синтаксис тега <img>

<img alt="Описание изображения" src="URL" [атрибуты]>

Обратите внимание, что данный тег является одиночным и не требует закрывающего тега </img>.

Атрибут src является обязательным. С помощью него указывается адрес выводимого изображения. Можно указать абсолютный или относительный URL. Если адрес не указать или же написать с ошибкой, то картинка выведена не будет.

Атрибут alt="описание" - не является обязательным, но лучше сразу себя приучить к тому, чтобы прописывать его каждому изображению, поскольку это нужно как для пользователей, так и для поисковых систем.

Остальные атрибуты являются необязательными, их мы рассмотрим чуть ниже. Сначала приведем простенький пример вывода картинки на html.

2. Как вставить в html картинку

Для вставки картинки в html используется тег <img>. Синтаксис мы рассмотрели чуть выше. Давайте приведем практические примеры.

Пример 2.1. Использование тега <img>

<html>
<body>
...
<img src="https://img-fotki.yandex.ru/get/173114/19749220.11/0_da31c_45c53ada_orig.jpg">
...
</body>
</html>

Этот код преобразуется на странице в следующее:

В данном примере мы указали прямой адрес изображения из картинок на Яндекс Фото. Чаще всего указывается ссылки на картинки, которые лежат на том же URL. Например, src="/img/kartinka.jpg", т.е. указывается относительный адрес.

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

Пример 2.2. Вывод нескольких картинок в html друг за другом

<html>
<body>
...
<img src="https://img-fotki.yandex.ru/get/173114/19749220.11/0_da31c_45c53ada_orig.jpg">
<img src="http://img-fotki.yandex.ru/get/4423/80300288.f/0_631d9_e822264_M.jpg">
...
</body>
</html>

Преобразуется на странице в следующее:

Если бы мы разместили ещё одно изображение, то оно бы было с новой строки, поскольку в этой оно бы уже не уместилось.

Пример 2.3. Использование альтернативного текста (alt) в img

Рекомендуется прописывать альтернативный текст (атрибут alt) в теге <img>, чтобы застраховать себя от случая, что картинка не доступна. Ниже приведен пример с использованием альтернативного текста. В первом случае мы не задавали размеры картинки, а во втором задаем.

<html>
<body>
...
<img src="123.jpg">
<img width="400" height="50" alt="Пример изображения" src="321.jpg">
...
</body>
</html>

Преобразуется на странице в следующее:

Если бы мы разместили ещё одно изображение, то оно бы было с новой строки, поскольку в этой строке оно бы уже не уместилось.

Теперь рассмотрим подробно все атрибуты тега <img>.

3. Атрибуты и свойства тега <img>

1. Свойство align="параметр" — определяет выравнивание рисунка. Это значение так же влияет на то, как текст будет обтекать рисунок. Может принимать следующее параметры:

left — выравнивание по левому краю
middle — выравнивание середины изображения по базовой линии текущей строки
bottom — выравнивание нижней границы изображения по окружающему тексту
top — верхняя граница изображения выравнивается по самому высокому элементу текущей строки
right — выравнивание по правому краю

Пример 3.1. Выравнивание изображения в html по правому краю

<html>
<body>
...
<img align="right" src="https://img-fotki.yandex.ru/get/173114/19749220.11/0_da31c_45c53ada_orig.jpg">
...
</body>
</html>

Преобразуется на странице в следующее:

2. Свойство alt="текст" — подсказка/описание картинки. Выполняет сразу две важные функции:

Выдает подсказку при наведении
Если в браузере отключены изображения, то выводится этот текст

Этот атрибут также очень важен при ранжировании изображений в Яндекс Картинках и Google Картинках. Его следует прописывать к каждому изображению, поскольку это является одним из факторов в алгоритмах поисковых системах.

3. Свойство border="ЧИСЛО" — задает толщину рамки обтекающей изображение. Измеряется в пикселях. Более подробно читайте в отдельной статье: свойство CSS border

Пример 3.2. Вывод картинки в html с рамкой (границей)

<body>
...
<img border="5" src="http://img-fotki.yandex.ru/get/4423/80300288.f/0_631d9_e822264_M.jpg">
...
</body>

Преобразуется на странице в следующее:

4. Свойство bordercolor="цвет" — задает цвет рамки, которая обтекает изображение. Имеет смысл, только если атрибут border больше 0.

Пример 3.3. Вывод картинки в html с цветной рамкой

<body>
...
<img border="5" bordercolor="#000" src="http://img-fotki.yandex.ru/get/4423/80300288.f/0_631d9_e822264_M.jpg">
...
</body>

Результат можно видеть чуть выше.

Примечание

Атрибуты border и bordercolor можно задать в стилях CSS к img:

<body>
...
<img style="border: 5px solid #000;" src="http://img-fotki.yandex.ru/get/4423/80300288.f/0_631d9_e822264_M.jpg">
...
</body>

5. Свойство height="ЧИСЛО" — задает высоту изображения: либо в пикселях, либо в процентах %. Например, если изображение имеет размер 400х200, а мы укажем высоту 150 пикселей, то оно сжимается до 300х150 (на 25% меньше), т.е. пропорционально.

6. Свойство width="ЧИСЛО" — задает ширину изображения: либо в пикселях, либо в процентах %. Например, если изображение имеет размер 1000х800, а ширина указывается 1200 пикселей, то оно автоматически расширяется на 20% до 1200х960.

7. Свойство hspace="ЧИСЛО" — задает горизонтальный отступ изображения в пикселях от других объектов html.

8. Свойство vspace="ЧИСЛО" — задает вертикальный отступ изображения в пикселях от других объектов html.

Примечание

Вместо hspace и vspace советую применять старый и проверенный margin (более подробно про него можете прочитать в уроке про описание стилей html). Кратко напомню:

margin-top: X px; (X - отступ сверху)
margin-bottom: Y px; (Y - отступ внизу)
margin-left: L px; (L - отступ слева)
margin-right: R px; (R - отступ справа)

Задают отступы от объектов в пикселях. Допускаются отрицательные значения. По умолчанию либо наследуется значение предка, либо имеет значение 0.

Например. Отступ слева составляет 50 пикселей, а сверху 10 пикселей.

<body>
...
<img style="margin-top:10px; margin-left:50px" 
src="https://img-fotki.yandex.ru/get/173114/19749220.11/0_da31c_45c53ada_orig.jpg">
...
</body>

Преобразуется на странице в следующее:

В данном примере — отступ сверху составил 10 пикселей, слева 50 пикселей.

9. Свойство class="имя_класса" — можно присвоить класс изображению, чтобы задать стиль всем изображениям этого класса.

4. Как сделать картинку ссылкой

Такой вопрос возникает у молодых вебмастеров. На самом деле все очень легко. Для этого достаточно обрамить тег <img> тегом <a> (ссылкой).

Например

<html>
<body>
...
<a href="Куда_ведет_ссылка"><img src="Адрес_изображения"></a>
...
</body>
</html>

5. Как скруглить углы у картинки

Чтобы сделать картинку более эффектной рекомендуется в некоторых случаях применять свойство border-radius: N px, где N - радиус среза картинки. Например:

<img src="https://img-fotki.yandex.ru/get/173114/19749220.11/0_da31c_45c53ada_orig.jpg" 
style="border-radius: 30px">

Более подробно про скргуления углов читайте в отдельной статье как скруглить углы в HTML через CSS

Уважаемый читатель, теперь Вы узнали гораздо больше о html теге img. Теперь советую перейти к следующему уроку.

Ссылка на следующий урок: Урок 8. HTML тег form - подробное описание с примерами

← Перейти в каталог html уроков и советов