HTML Основы


HTML Расширенный


HTML Примеры


HTML Справка



HTML-верстка: инструменты и приемы профессиональной front-end разработки

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


назад вперед

Пример

Значок Skype

Примеры

Вставка изображения

Пример демонстрирует, как вставить изображение на вашу страничку.

Вставка изображения из различных источников

Пример демонстрирует, как вставить изображение с другого сайта или другой папки.


Тег <img> и атрибут src

В HTML изображения вставляются с помощью тега <img>.

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

Для отображения изображения на странице используется атрибут src. Src произошло от слова «source» (источник). Значением атрибута src является url-адрес изображения.

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

<img src="url" />

URL указывает на адрес ресурса, где хранится изображение. Например, изображение boat.gif, сохраненное в папке images на сайте www3schools.com имеет URL: http://www.w3schools.com/images/boat.gif.

Браузер вставляет изображение в то место, где встречается тег <img>. Если вы вставите изображение между двух параграфов, тогда браузер отобразит первый параграф, затем изображение и после него второй параграф.


Атрибут alt

Атрибут alt используется для вставки альтернативного текста для изображения.

Этот текст определяется автором страницы:

<img src="boat.gif" alt="Большая лодка" />

Значение атрибута alt отображается вместо изображения, если браузер не может отобразить его. Вставка атрибута alt является хорошей практикой, потому что она помогает узнать пользователям текстовых браузеров, какие изображения вставлены в страницу.


Полезные советы

Если на вашу страницу вставлено десять изображений, это значит, что для отображения этой страницы нужно 11 файлов. Загрузка изображений занимает время, поэтому мой вам совет: используйте изображения осторожно.


Еще примеры

Фоновое изображение

Пример демонстрирует, как добавить фоновое изображение html-страницы.

Выравнивание изображений

Пример демонстрирует выравнивание изображения относительно текста.

Изменение размера изображения

Пример демонстрирует как изменить размер изображения.

Альтернативный текст изображения

Пример демонстрирует как отображать альтернативный текст, если браузер не может отобразить ваше изображение.

Изображение как ссылка

Пример демонстрирует использование изображения в качестве ссылки.

Создание изображения-карты

Пример демонстрирует создание карты-изображения с активными участками. Каждый активный участок является ссылкой.


Теги вставки изображения

Тег Описание
<img> Вставка изображения
<map> Карта-изображение
<area> Активный участок внутри карты-изображения


Понравилась запись? Сказать "Спасибо" очень просто, поделитесь записью в социальных сетях!


назад вперед

СТАТИСТИКА




ССЫЛКИ


Подпишись на новости сайта