Img — Html тег для вставки картинки (Src), выравнивания и обтекание ее текстом (align), а так же задания фона (background). Картинка в HTML – все о теге IMG Что задает атрибут src тега img
Значение и применение
Изображения в HTML документе определяются тегом
.
Обращаю Ваше внимание, что элемент
имеет два обязательных атрибута
: src , который определяет URL
адрес изображения (допускается использовать как абсолютный, так и относительный адрес) и alt , который указывает альтернативный текст для изображения (для того случая, если изображение по каким-то причинам не было загружено).
Поддержка браузерами
| Тег | Opera | IExplorer | Edge |
|||
|---|---|---|---|---|---|---|
| Да | Да | Да | Да | Да | Да |
Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
| align | left right top bottom middle | Не поддерживается в HTML5.
Определяет выравнивание изображения в соответствии с окружающими элементами. |
| alt | text | Определяет альтернативный текст для изображения (для того случая, если изображение по каким-то причинам не было загружено). |
| border | pixels | Не поддерживается в HTML5.
Определяет ширину границы вокруг изображения. |
| crossorigin | anonymous use-credentials |
Атрибут определяет, используется ли при загрузке изображения. Изображения, загруженные с помощью CORS , могут использоваться в элементах |
| height | pixels | Определяет высоту изображения. |
| hspace | pixels | Не поддерживается в HTML5.
Определяет пробелы слева и справа от изображения. |
| ismap | ismap | Сообщает браузеру, что изображение является серверной картой-изображением. |
| longdesc | URL | Определяет URL адрес с аннотацией к изображению (URL более длинного, чем в атрибуте alt , описания изображения). |
| src | URL | Задает URL адрес изображения (допускается использовать как абсолютные, так и относительные адреса). Является обязательным атрибутом. |
| usemap | #mapname | Ссылается на элемент |
| vspace | pixels | Не поддерживается в HTML5.
Определяет пробелы сверху и снизу изображения. |
| width | pixels | Определяет ширину изображения. |
Пример использования
Результат добавления изображения, с помощью тега
на HTML страницу.
Пример
Описание и использование
Тег используется для вставки изображения на страницу.
Технически изображение не вставляется на страницу, на странице всего лишь стоит ссылка на изображение и оставляется место под картинку.
Тег имеет два обязательных атрибута: 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 - Урок 8. Работа с изображениями - тег img
Изображения на web-страницах могут использоваться двумя способами: в качестве фона и в качестве самостоятельного изображения. Рекомендуется использование трех форматов графики: JPEG, GIF и PNG. Именно их поддерживают все браузеры, для остальных форматов могут потребоваться специальные средства.
Как правило, все изображения для сайта хранятся в отдельной папке, например, images. А пути к изображениям прописываются также, как в ссылках. Если забыли посмотрите .
Во всех последующих примерах пути к изображениям будут прописаны, исходя из того, что картинки находятся в папке images, а страницы в папке site, находящейся на том же уровне.
Фоновые изображения
Фоновое ихображение заполняет собой все пространство элемента для которого оно задано. Так, указав в теге атрибут background="fon.gif" , рисунком fon.gif будет залито все окно браузера.
Пример кода: Результат
Задавая фоновый рисунок документа, не забывайте указывать также параметр bgcolor . Это связано с тем, что у пользователя может быть отключена загрузка изображений и вашего красивого фона он не увидит. Тогда браузер и будет использовать параметр bgcolor .
Встраивание изображений
Для размещения на странице изображений используется тег
, имеющий единственный обязательный параметр
src
, определяющий URL-адрес изображения.
Пример кода:
Тег img Остальное содержимое документа
Результат:
Остальное содержимое документа
Согласитесь, текст рядом с картинкой выглядит не очень красиво.
Для того, чтобы наши изображения выглядели так, как нам хочется их надо выровнять. И поможет нам в этом параметр align .
У этого параметра есть несколько значений. Рассмотрим их все на примерах.
Пример кода с параметром align="left"
Тег img с параметром align="left" Картинка слева, а текст обтекает ее справа и этот текст может занимать несколько строчек.
Результат:
Картинка слева, а текст обтекает ее справа и этот текст может занимать несколько строчек.
Пример кода с параметром align="right"
Тег img с параметром align="right" Картинка справа, а текст обтекает ее слева и этот текст может занимать несколько строчек.
Результат:
Картинка справа, а текст обтекает ее слева и этот текст может занимать несколько строчек.
Пример кода с параметром align="top"
Тег img с параметром align="top" Верхняя граница изображения выравнивается по самому высокому элементу текущей строки. Изображение как бы встраивается в строчку. Если изображение большое, то и строка раздвигается на эту высоту.
Результат:
Верхняя граница изображения выравнивается по самому высокому элементу текущей строки. Изображение как бы встраивается в строчку. Если изображение большое, то и строка раздвигается на эту высоту.
Пример кода с параметром align="texttop"
Тег img с параметром align="texttop" Верхняя граница изображения выравнивается по самому высокому текстовому элементу текущей строки (заглавная буква строки).
Результат:
Верхняя граница изображения выравнивается по самому высокому текстовому элементу текущей строки (заглавная буква строки).
Пример кода с параметром align="middle"
Тег img с параметром align="middle" Выравнивание середины изображения по базовой линии текущей строки.
Результат:
Выравнивание середины изображения по базовой линии текущей строки. * крупный шрифт сделан для наглядности разницы между middle absmiddle
Пример кода с параметром align="absmiddle"
Тег img с параметром align="absmiddle" Выравнивание середины изображения посередине текущей строки.
Результат:
Выравнивание середины изображения посередине текущей строки.
Пример кода с параметром align="bottom"
Тег img с параметром align="bottom" Выравнивание нижней границы изображения по базовой линии текущей строки.
Результат:
Выравнивание нижней границы изображения по базовой линии текущей строки.
Пример кода с параметром align="absbottom"
Тег img с параметром align="absbottom" Выравнивание нижней границы изображения по нижней границе текущей строки.
Результат:
Выравнивание нижней границы изображения по нижней границе текущей строки.
Если же мы хотим, чтобы текст располагался под картинкой, то необходимо использовать тег
с
параметром clear
, который запрещает обтекание. Обтекание можно запретить с правой стороны (right),
с левой стороны (left) и с обеих сторон (all).
Пример кода:
Запрет обтекания картинки
Остальные элементы документа
Результат:
Остальные элементы документа
Размеры изображений
Любое изображение имеет размер, заданный в пикселах. При встраивании изображения на страницу, возможно вам понадобиться уменьшить размер исходной картинки.
Для этого у тега
существуют параметры width
- ширина и height
- высота. Они задаются в пикселах или в процентах
(процент от ширины экрана)
При загрузке изображения браузер будет автоматически масштабировать вашу картинку к заданным параметрам ширины и высоты. Только имейте в виду, что неаккуратное задание параметров, может привести к изменению пропорций рисунка, а следовательно, к его искажению.
Пример кода:
Результат:
Отделение изображения от текста
Вы, наверно, обратили внимание, что текст очень близко прилипает к картинкам. Это не всегда красиво. Для решения этой проблемы имеются параметры hspace - горизонтальный отступ и vspace - вертикальный отступ. Отступы задаются в пикселах.
Пример кода:
Тег img с отступами Остальное содержимое документа теперь не прилипает к изображению.
Об этом человеке известно только то,
что он не сидел в тюрьме, но почему не сидел - неизвестно.
Марк Твен.
Э то урок о том, как вставить картинку в HTML , как её оформить, как сделать обтекание картинки текстом и т.д. Ведь известно, что изображения делают сайт более привлекательным и отличным от других ресурсов, поэтому умение использовать тег и его атрибуты весьма пригодится в современном Интернете. Но главное тут - чувство меры!
П ереизбыток графики вызовет утяжеление html-страницы и, соответственно, увеличит время её загрузки. Кроме того, наличие большого числа изображений будет отвлекать посетителей от главного содержимого сайта (если, конечно, графика не является главным содержимым сайта). Так что, соблюдай меру и используй только там, где это нужно. И будет тебе счастье!
В уроке про я уже рассказывал о том, как можно использовать картинки в качестве фона html-документа. Сейчас же поговорим о том, как графика используется в «верхнем слое» html-страницы.
§ 1. Как вставить картинку
Д ля вставки картинок в HTML используется тег IMG с обязательным атрибутом SRC . Этот атрибут указывает браузеру путь к файлу изображения. Т.е. для вставки картинки с названием logo.jpg в определенное место страницы (при условии, что и страница, и картинка расположены в одной папке (каталоге)) нужно в этом месте вставить следующий html-код:
src="logo.jpg">
Е сли картинка и страница расположены в разных каталогах (папках), то нужно указать путь к изображению относительно страницы. Например, если html-страница лежит в каталоге (папке) site, в этом же каталоге (папке) расположен подкаталог (папка) images, в котором и находится наша картинка logo.jpg, то для её вставки нужно написать так:
images/logo.jpg">
А можно не мучиться и указать полный адрес картинки . Например, так:
http://www..png">
В последнем случае браузер отобразит код так:
Примечание. Если картинка расположена на вашем компьютере , а вставить вы её хотите на страницу в Интернете , то ничего не выйдет. Для этого картинку нужно сначала переместить в какое-нибудь место в Интернете (например, ). И указать в коде страницы полный адрес до этого места с картинкой .
П омимо обязательного атрибута SRC у тега IMG есть ещё несколько необязательных атрибутов. Рассмотрим их подробнее.
§ 2. Указание размеров картинки
Н ачнём с атрибутов, которые позволяют задать размеры картинки (точнее, застолбить место под эти размеры на страницы). Вот они:
- width - ширина картинки в пикселах или процентах;
- height - высота картинки в пикселах или процентах.
Е сли используются эти атрибуты, то сначала выделит место под графику, подготовит макет документа, отобразит текст и только затем загрузит изображение. При этом он поместит картинку в прямоугольник выделенного размера, даже если реальные ширина и высота картинки больше (сожмёт) или меньше (растянет). В случае, когда эти атрибуты не используются, браузер будет грузить картинку сразу, а вывод идущих за ней текста и остальных элементов задержится.
Ш ирину и высоту изображений можно указывать как в пикселах (при этом размер картинки будет постоянным вне зависимости от разрешения экрана), так и в процентах (размер картинки будет зависить от разрешения экрана пользователя). Например:
width="50" height="20">
width="10%" height="5%">
§ 3. Альтернативный текст
В случае, если пользователь в настройках браузера отключил показ изображений, то можно вместо картинки вывести альтернативный текст, который бы объяснил, что за графика здесь должна быть. Достигается это путём применения атрибута ALT :
В этом случае браузер зарезервирует место на странице под изображение, но вместо самой картинки покажет текст, который ты напишешь в значении атрибута ALT :
П овторю, это произойдёт, если пользователь отключил показ графики. Если же нет, то картинка скроет собой альтернативный текст.
§ 4. Выравнивание картинки
С помощью уже знакомого тебе атрибута align можно управлять выравниванием картинок относительно других элементов html-страницы. У атрибута align есть несколько значений, но нас больше всего на данный момент интересуют два:
- left - изображение располагается у левого края страницы, а текст обтекает картинку справа;
- right - изображение располагается у правого края страницы, а текст и другие элементы обтекают картинку слева.
Н апример, HTML-код
браузер покажет так
А этот HTML-код:
будет выглядеть вот так:
Д ля прекращения обтекания картинки текстом можно использовать тег BR (знакомый нам из прошлого раздела про ). У тега BR есть атрибут clear , который может принимать три значения:
- left - прекращение обтекания текстом картинок, выровненных по левому краю;
- right - прекращение обтекания текстом картинок, выровненных по правому краю;
- all - прекращение обтекание текстом картинок, выровненных и по левому, и по правому краю.
В интернете трудно найти сайт, который бы не содержал картинок, и это не удивительно, ведь они являются основной частью дизайна сайта, которая придает ему запоминающейся вид. А хороший дизайн сайта - залог его успешного развития. Для вывода изображений в html существует единственный тег
.
1. Синтаксис тега ![]()
Описание изображения " src ="URL " [атрибуты ]>
Обратите внимание, что данный тег является одиночным и не требует закрывающего тега .
Атрибут src является обязательным. С помощью него указывается адрес выводимого изображения. Можно указать абсолютный или относительный URL . Если адрес не указать или же написать с ошибкой, то картинка выведена не будет.
Атрибут alt="описание" - не является обязательным, но лучше сразу себя приучить к тому, чтобы прописывать его каждому изображению, поскольку это нужно как для пользователей, так и для поисковых систем.
Остальные атрибуты являются необязательными, их мы рассмотрим чуть ниже. Сначала приведем простенький пример вывода картинки на html.
2. Как вставить в html картинку
Для вставки картинки в html используется тег
. Синтаксис мы рассмотрели чуть выше. Давайте приведем практические примеры.
Пример 2.1. Использование тега ![]()
...
Этот код
В данном примере мы указали прямой адрес изображения из картинок на Яндекс Фото. Чаще всего указывается ссылки на картинки, которые лежат на том же URL. Например, src="/img/kartinka.jpg", т.е. указывается относительный адрес.
Возможно размещение нескольких картинок подряд. Если они не будут умещаться на одной строке, то автоматически произойдет переход на следующую.
Пример 2.2. Вывод нескольких картинок в html друг за другом
...
Преобразуется на странице в следующее:
Если бы мы разместили ещё одно изображение, то оно бы было с новой строки, поскольку в этой оно бы уже не уместилось.
Пример 2.3. Использование альтернативного текста (alt) в img
Рекомендуется прописывать альтернативный текст (атрибут alt) в теге
, чтобы застраховать себя от случая, что картинка не доступна. Ниже приведен пример с использованием альтернативного текста. В первом случае мы не задавали размеры картинки, а во втором задаем.
...
Преобразуется на странице в следующее:
Если бы мы разместили ещё одно изображение, то оно бы было с новой строки, поскольку в этой строке оно бы уже не уместилось.
Теперь рассмотрим подробно все атрибуты тега
.
3. Атрибуты и свойства тега ![]()
1. Свойство align="параметр" - определяет выравнивание рисунка. Это значение так же влияет на то, как текст будет обтекать рисунок. Может принимать следующее параметры:
- left - выравнивание по левому краю
- middle - выравнивание середины изображения по базовой линии текущей строки
- bottom - выравнивание нижней границы изображения по окружающему тексту
- top - верхняя граница изображения выравнивается по самому высокому элементу текущей строки
- right - выравнивание по правому краю
Пример 3.1. Выравнивание изображения в html по правому краю
...
Преобразуется на странице в следующее:
2. Свойство alt="текст" - подсказка/описание картинки. Выполняет сразу две важные функции:
- Выдает подсказку при наведении
- Если в браузере отключены изображения, то выводится этот текст
Этот атрибут также очень важен при ранжировании изображений в Яндекс Картинках и Google Картинках. Его следует прописывать к каждому изображению, поскольку это является одним из факторов в алгоритмах поисковых системах.
Пример 3.2. Вывод картинки в html с рамкой (границей)
...
Преобразуется на странице в следующее:
4. Свойство bordercolor="цвет" - задает цвет рамки, которая обтекает изображение. Имеет смысл, только если атрибут border больше 0.
Пример 3.3. Вывод картинки в html с цветной рамкой
...
Результат можно видеть чуть выше.
ПримечаниеАтрибуты border и bordercolor можно задать в стилях CSS к img:
...
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 пикселей.
...
Преобразуется на странице в следующее:
В данном примере - отступ сверху составил 10 пикселей, слева 50 пикселей.
9. Свойство class="имя_класса" - можно присвоить класс изображению, чтобы задать стиль всем изображениям этого класса.
4. Как сделать картинку ссылкой
Такой вопрос возникает у молодых вебмастеров. На самом деле все очень легко. Для этого достаточно обрамить тег
тегом (ссылкой).
Например
...
5. Как скруглить углы у картинки
Уважаемый читатель, теперь Вы узнали гораздо больше о html теге img. Теперь советую перейти к следующему уроку.
