Картинка в HTML – все о теге IMG. Как вставить изображение в HTML, тег img и его атрибуты Какие атрибуты принадлежат тегу img

Описание

Тег предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG или PNG. Адрес файла с картинкой задаётся через атрибут src . Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив тег в контейнер . При этом вокруг изображения отображается рамка, которую можно убрать, добавив атрибут border="0" в тег .

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

Синтаксис

Атрибуты

Закрывающий тег

Не требуется.

HTML5 IE Cr Op Sa Fx

Тег IMG

Lorem ipsum dolor sit amet...

Тег

Тег используется для вставки изображений в HTML-страницу. Он имеет два обязательных атрибута: src и alt . Изображения в интернете играют одну из ключевых ролей. Они активно применяются в оформлении сайтов, в ссылках (вставкой их в тег ), наглядно дополняют текстовую информацию и т.д. Если тег используется внутри ссылки или задает карту изображений, то вокруг самого изображения некоторые браузеры отображают рамку, которую можно убрать при помощи атрибута border .

Важным моментом при включении изображения в страницу является его размер (вес) в килобайтах, а точнее соотношение вес-качество. Естественно, чем меньше вес изображений - тем быстрее загрузится страница. В основном в сети используются графические форматы JPEG, GIF и PNG, которые вполне отвечают данным требованиям.

Также, для ускорения загрузки страниц рекомендуется устанавливать атрибуты width и height , тега . Тогда браузер не будет ожидать полной загрузки изображения, он просто выделит под него место и будет загружать страницу дальше, а его подгрузит потом. К тому же, если одно изображение используется на странице несколько раз (значение атрибута src одинаковое), то браузер загружает его с сервера только один раз, а потом берет из кэш-памяти.

Атрибуты

Личные атрибуты:

align - Устанавливает положение изображения относительно окружающего контекста.
alt - Обязательный атрибут. Альтернативный текст, если в браузере отключен показ изображений.
border - Устанавливает размер рамки вокруг изображения.
height - Переопределяет высоту изображения.
hspace - Размер боковых полей изображения от его краев до окружающего контекста.
ismap - Позволяет использовать серверные карты изображений.
src - Обязательный атрибут. Указывает адрес местонахождения изображения.
title - Выводит «всплывающую» подсказку при наведении курсора мыши на изображение.
usemap - Позволяет использовать клиентские карты изображений.
vspace - Устанавливает размер верхних и нижних полей изображения от его краев до окружающего контекста.
width - Переопределяет ширину изображения.

accesskey - устанавливает клавишу быстрого доступа для фокусировки на HTML-элементе.
class - задает имя класса или классов тега, используемых в CSS (Каскадные таблицы стилей).
dir - указывает направление текста внутри элемента.
- задает имя идентификатора HTML-тега, который может использоваться в качестве «якоря» или в таблицах стилей.
lang - указывает язык, на котором написан текст внутри HTML-элемента.
style - необходим для применения встроенных стилей CSS к тегу.
tabindex - устанавливает порядок табуляции между элементами (клавиша Tab).
title - выводит всплывающую подсказку при наведении курсора мыши на HTML-элемент.

Тип тега

Назначение: изображения .

Модель тега: inline (встроенный, уровня строки).

Может содержать: данный элемент является пустым/Empty.

Открывающий тег: необходим. Закрывающий тег: запрещен.

Синтаксис

Пример HTML: применение тега IMG

seodon.ru - Применение тега IMG

А вы знаете, что такое знак

Результат.

Поддержка версиями HTML

Версия:	HTML 4.01	HTML 5	XHTML 1.0	XHTML 1.1
Поддержка:	Да	Да	Да	Да

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

Браузер:	Internet Explorer	Google Chrome	Mozilla Firefox	Opera
Версия:	6.0 и выше	2.0 и выше	2.0 и выше	9.2 и выше	3.1 и выше
Поддержка:	Да	Да	Да	Да	Да

Описание

Синтаксис

Атрибуты

Закрывающий тег

Не требуется.

HTML5 IE Cr Op Sa Fx

Тег IMG

Lorem ipsum dolor sit amet...

Пример

Описание и использование

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

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

Тег имеет два обязательных атрибута: src и alt.

Браузерная поддержка

Тег поддерживается всеми основными браузерами.

Отличия между HTML и XHTML

В HTML тег не имеет закрывающего тега, а в XHTML он должен быть закрыт.

Атрибуты «align», «border», «hspace» и «vspace» были признаны устаревшими в HTML 4.01 и не поддерживаются в XHTML 1.0 Strict DTD.

Атрибут alt является альтернативным текстом изображения, а не текстом, всплывающим при наведении мыши. Для вставки всплывающего текста для изображения используйте атрибут title, например,

Обязательные атрибуты

DTD

Альтернативные атрибуты

DTD показывает в какой версии DTD использование атрибута разрешено. S=Strict, T=Transitional и F=Frameset.

Атрибут	Значение	Описание	DTD
align	top bottom middle left right	Устарело . Используйте CSS. Выравнивание изображения относительно окружающих элементов	TF
border	пиксели	Устарело . Используйте CSS. Ширина рамки вокруг изображения	TF
height	пиксели %	Высота изображения	STF
hspace	пиксели	Устарело . Используйте CSS. Отступ слева и справа до соседних элементов	TF
ismap	ismap	Указывает на то, что изображение является серверной картой изображением. Редко используется. Используйте лучше usemap	STF
longdesc	URL	Указывает на URL, содержащий документ с полным описанием изображения. Слабо поддерживается браузерами	STF
usemap	#название_карты	Указывает на то, что изображение является клиентской картой-изображением	STF
vspace	пиксели	Устарело . Используйте CSS. Отступ сверху и снизу до соседних элементов	TF
width	пиксели %	Ширина изображения	STF

Стандартные атрибуты

Тег поддерживает следующие стандартные атрибуты:

Атрибут	Значение	Описание	DTD
class	название класса	Указывает название класса для элемента	STF
dir	rtl ltr	Указывает направление вывода текста для элемента	STF
id	id	Указывает id для элемента	STF
lang	код_языка	Указывает код языка содержимого элемента	STF
style	описание_элемента	Указывает строчный стиль элемента	STF
title	текст	Указывает дополнительную информацию об элементе	STF
xml:lang	код_языка	Указывает код языка содержимого элемента в XHTML документах	STF

Дополнительная информация о стандартных атрибутах .

События

Тег поддерживает следующие атрибуты событий:

Атрибут	Значение	Описание	DTD
onabort	скрипт	Скрипт, который должен быть выполнен, если загрузка изображения была прервана	STF
onclick	скрипт	Скрипт, который должен быть выполнен при одинарном щелчке мышью	STF
ondblclick	скрипт	Скрипт, который должен быть выполнен при двойном щелчке мышью	STF
onmousedown	скрипт	Скрипт, который должен быть выполнен, если пользователь зажал кнопку мыши	STF
onmousemove	скрипт	Скрипт, который должен быть выполнен при движении курсора мыши	STF
onmouseout	скрипт	Скрипт, который должен быть выполнен, если пользователь передвинул курсор мыши за пределы элемента	STF
onmouseover	скрипт	Скрипт, который должен быть выполнен, когда пользователь двигает курсор мыши над элементом	STF
onmouseup	скрипт	Скрипт, который должен быть выполнен, когда пользователь отпускает кнопку мыши	STF
onkeydown	скрипт	Скрипт, который должен быть выполнен при нажатии клавиши пользователем	STF
onkeypress	скрипт	Скрипт, который должен быть выполнен при нажатии и отпускании клавиши пользователем	STF
onkeyup	скрипт	Скрипт, который должен быть выполнен при отпускании клавиши пользователем	STF

Дополнительная информация о

Здравствуйте, уважаемые читатели сайта сайт. Сегодня перейдем к более интересной теме, а именно вставка изображений . Для того, чтобы наш браузер быстро загружал и открывал страницу с картинкой нам нужно ОПТИМИЗИРОВАННОЕ изображение (о том для чего и как оптимизировать изображения ). Для того, что бы скачать такое заранее оптимизированное изображение перейдите по и сохраните эту картинку, нажав правой клавишей мыши и выбрав "Сохранить картинку как".

Тег и расположение папки с изображениями

Для хранения изображений мы в нашей папке HTML создадим еще одну папку "Images", и поместим картинку туда.

Давайте попробуем вставить нашу картинку с изображением между заголовком и первым абзацем. Для этого в коде пропишем наш тег . Это сокращение от английского слова image – изображение и это одинарный тег.

Сам тег браузеру ничего особо не говорит. Поэтому мы должны обязательно указать атрибуты для тега. Самый главный из атрибутов – это атрибут src – источник . Мы должны указать источник нашей картинки. В нашем случае картинка находится внутри папки images относительно папки HTML. Т.е. нам необходимо указать, что наша картинка alarm.jpg находится в папке images. И вот как это выглядит.

При таком указании атрибута для тега , браузер при встрече с данным кодом, зайдет в папку images и возьмет файл – картинку alarm.jpg.

Но это еще не все. Желательно также указать еще и ширину с высотой данной картинки, потому что браузер должен точно знать, сколько места отвести под это изображение, и вся загрузка будет происходить быстрее и самое главное без смещений блоков.

Атрибуты ширины width и высоты height

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

Чтобы узнать размер картинки, нажмите по ней правой кнопкой мыши и выберите пункт меню «Свойства». Далее перейдите на вкладку «Подробно».

Как видно, ширина у картинки 307 пикселей, а высота – 450 пикселей. Давайте пропишем размеры в коде:

Атрибут alt для альтернативной подписи

Еще один атрибут тега , который желательно указывать при добавлении изображения – это alt. Он предназначен для тех пользователей интернет, у кого отображение картинок в браузере отключено. Т.е. если картинки в браузере будут отключены, вместо нашей картинки пользователь увидит то слово или словосочетание, которое мы пропишем для атрибута alt. Кроме того, поисковые системы при определении ценности вашего сайта ориентируются на атрибут alt у изображений, поэтому его постановка обязательна.

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

Давайте проверим отображение:

Рисунок у нас появился именно в том месте, где и должен был. Но если вы заметили, хотя картинка у нас всего 307 пикселей в ширину, браузер отводит ей всю строку полностью. Очень часто возникает задача сделать так, чтобы текст после картинки обтекал ее, т.е. встал на одной строке с ней. Такая возможность существует. Реализуется она при помощи знакомого нам атрибута align – выравнивание.

Атрибут align для выравнивания изображения

Данный атрибут применим для нашего тега . Для этой картинки мы можем указать выравнивание по правому краю (right ), тогда картинка уйдет в правую часть экрана, и текст ее будет обтекать слева. Или мы можем указать выравнивание по левому краю (left ) – тогда картинка уйдет в левую часть экрана, и текст будет обтекать ее справа. Давайте пропишем выравнивание по левому краю для нашего тега .

Теперь давайте проверим, что получилось в браузере.

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

Атрибут title для всплывающей подсказки

И наконец также один из самых важных атрибутов - "title" - он делает подсказку для изображения при наведении на него мышкой.

До встречи! Успевайте всё и всегда на страницах блога сайт

Помоги проекту - подпишись на наш Яндекс.Дзен канал!