HTML тег img | назначение, синтаксис, атрибуты, примеры
Последнее обновление: 22.01.2011
Тег <img> (англ. image — изображение) добавляет на страницу изображение (картинку).
Строчный элемент.
HTML: 3.2 | 4 / XHTML: 1.0 | 1.1
Синтаксис
<img src="URL" alt="..."/>
Атрибуты
Основные Вспомогательные События
| align | задает выравнивание рисунка и способ обтекания текстом
|
|---|---|
| alt | альтернативный текст |
| border | толщина рамки Не проходит валидацию XHTML 1.0 Scrict, XHTML 1.1, HTML 4.01 Strict |
| class | определяет имя используемого класса |
| controls | флаг. Когда установлен, отображает кнопки для просмотра видеофайла Отсутствует в спецификации HTML 4.01! |
| dir | определяет направление символов:
|
| dynsrc | URL видеофайла для проигрываия Отсутствует в спецификации HTML 4.01! |
| height | задает высоту рисунка |
| hspace | отступ по горизонтали (по умолчанию 0) |
| id | уникальный идентификатор |
| ismap | флаг, определяющий, что картинка является картой-изображением |
| lang | определяет язык отображаемого документа |
| longdesc | URL страницы с полным описанием изображения |
| loop | сколько раз прокручивать видео. Значение по умолчанию -1, бесконечное воспроизведение Отсутствует в спецификации HTML 4.01! |
| lowsrc | URL графического файла с низким разрешением. Загрузиться и отобразится до загрузки основной картинки. Отсутствует в спецификации HTML 4.01! |
| name | уникальное имя изображения |
| onclick | щелчок на элементе |
| ondblclick | двойной щелчок на элементе |
| onkeydown | нажатие клавиши, когда элемент имеет фокус |
| onkeypress | нажатие и освобождении клавиши, когда элемент имеет фокус |
| onkeyup | освобождение ранее нажатой клавиши, когда элемент имеет фокус |
| onmousedown | нажатие кнопки мыши, когда элемент имеет фокус |
| onmousemove | движение указателя мыши, когда элемент имеет фокус |
| onmouseout | смещение указателя мыши с элемента |
| onmouseover | помещение указателя мыши на элемент |
| onmouseup | освобождение ранее нажатой кнопки мыши, когда элемент имеет фокус |
| src | URL графического файла, отображаемого на странице |
| start | когда начинать воспроизведение видео
Отсутствует в спецификации HTML 4.01! |
| style | задает встроенную таблицу стилей |
| title | всплывающая подсказка |
| usemap | применяет к изображению карту <MAP> |
| vspace | отступ по вертикали (по умолчанию 0) |
| width | задает ширину картинки |
Пример
Вставим картинку:
<img alt="hr" src="hr.png" border="2"/>
Тег <img> совместно с тегами <map> и <area> используются для создания карт-изображений:
<map name="myMap">
<area nohref="nohref" alt="тут ссылки нет" title="тут ссылки нет" shape="circle" coords="70,138,39"/>
<area href="#" alt="Серая зона" title="Серая зона" shape="rect" coords="20,10,118,188"/>
<area href="#" alt="Желтая зона" title="Желтая зона" shape="poly" coords="175,30,270,100,200,150"/>
</map>
<img src="map.png" alt="карта" usemap="#myMap"/>
Результат:
Рекомендации по использованию
- должен быть закрыт слешем (<img…/>)
- обязательные атрибуты: src, alt
- задавайте атрибуты width и height, это позволяет браузеру заранее зарезервировать место в памяти и не будет сам расчитывать размеры картинки, что положительно сказывается на скорости загрузки страницы
- не изменяйте размер картинки атрибутами width и height — это искажает изображение и не влияет на вес файла, используйте для таких целей специальные редакторы
- для предсказуемого кроссбраузерного отображения картинок явно указывайте бордюры (свойство border)
- содержание атрибута alt активно используется поисковыми системами и произносится голосовыми браузерами
- разница между атрибутами alt и title — alt определяет текст, который пользователь увидит вместо картинки (в случае, если, например, картинки отключены в настройках браузера), а title — вместе с картинкой, в виде всплывающей подсказки
- особенность IE6-7: при отсутствии атрибута title всплывает подсказка, текст которой берется у alt
- атрибуты тега <img>, предназначенные для воспроизведения видео не входят в спецификацию HTML 4.01 и некорректно обрабатываются большинством браузеров, для воспроизведения видео используйте тег <object>
- не рекомендуем использовать атрибуты align и border (не проходит валидацию XHTML 1.0, XHTML 1.1, HTML 4.01 Strict + засоряет код), вместо них применяйте таблицы стилей
- используйте тег <img> только в контентной части документа, графику оформления страниц прячьте в CSS (background) — получится более чистый код
Твой код:
<html> <head> <title></title> <style type=»text/css»> img { border: 2px solid #000; } </style> </head> <body> <div><img alt=»Примеры использования hr» src=»http://www.mpbox.ru/assets/images/html-tags/hr.png»/> </div> </body> </html> Сделай код и жми тутРезультат:
большой полигонПо теме
HTML тег img | назначение, синтаксис, атрибуты, примеры
Последнее обновление: 23.01.2011
Тег <img> (англ. image — изображение) добавляет на страницу изображение (картинку).
Строчный элемент.
HTML: 3.2 | 4 / XHTML: 1.0 | 1.1
Синтаксис
<img src=../../html/tags/"URL" alt="..."/>
Атрибуты
Основные Вспомогательные События
| align | задает выравнивание рисунка и способ обтекания текстом
|
|---|---|
| alt | альтернативный текст |
| border | толщина рамки Не проходит валидацию XHTML 1.0 Scrict, XHTML 1.1, HTML 4.01 Strict |
| class | определяет имя используемого класса |
| controls | флаг. Когда установлен, отображает кнопки для просмотра видеофайла Отсутствует в спецификации HTML 4.01! |
| dir | определяет направление символов:
|
| dynsrc | URL видеофайла для проигрываия Отсутствует в спецификации HTML 4.01! |
| height | задает высоту рисунка |
| hspace | отступ по горизонтали (по умолчанию 0) |
| id | уникальный идентификатор |
| ismap | флаг, определяющий, что картинка является картой-изображением |
| lang | определяет язык отображаемого документа |
| longdesc | URL страницы с полным описанием изображения |
| loop | сколько раз прокручивать видео. Значение по умолчанию -1, бесконечное воспроизведение |
| lowsrc | URL графического файла с низким разрешением. Загрузиться и отобразится до загрузки основной картинки. Отсутствует в спецификации HTML 4.01! |
| name | уникальное имя изображения |
| onclick | щелчок на элементе |
| ondblclick | двойной щелчок на элементе |
| onkeydown | нажатие клавиши, когда элемент имеет фокус |
| onkeypress | нажатие и освобождении клавиши, когда элемент имеет фокус |
| onkeyup | освобождение ранее нажатой клавиши, когда элемент имеет фокус |
| onmousedown | нажатие кнопки мыши, когда элемент имеет фокус |
| onmousemove | движение указателя мыши, когда элемент имеет фокус |
| onmouseout | смещение указателя мыши с элемента |
| onmouseover | помещение указателя мыши на элемент |
| onmouseup | освобождение ранее нажатой кнопки мыши, когда элемент имеет фокус |
| src | URL графического файла, отображаемого на странице |
| start | когда начинать воспроизведение видео
Отсутствует в спецификации HTML 4.01! |
| style | задает встроенную таблицу стилей |
| title | всплывающая подсказка |
| usemap | применяет к изображению карту <MAP> |
| vspace | отступ по вертикали (по умолчанию 0) |
| width |
Пример
Вставим картинку:
<img alt="hr" src=../../html/tags/"hr.png" border="2"/>
Тег <img> совместно с тегами <map> и <area> используются для создания карт-изображений:
<map name="myMap">
<area nohref="nohref" alt="тут ссылки нет" title="тут ссылки нет" shape="circle" coords="70,138,39"/>
<area href=../../html/tags/"#" alt="Серая зона" title="Серая зона" shape="rect" coords="20,10,118,188"/>
<area href=../../html/tags/"#" alt="Желтая зона" title="Желтая зона" shape="poly" coords="175,30,270,100,200,150"/>
</map>
<img src=../../html/tags/"map.png" alt="карта" usemap="#myMap"/>
Результат:
Рекомендации по использованию
- должен быть закрыт слешем (<img…/>)
- обязательные атрибуты: src, alt
- задавайте атрибуты width и height, это позволяет браузеру заранее зарезервировать место в памяти и не будет сам расчитывать размеры картинки, что положительно сказывается на скорости загрузки страницы
- не изменяйте размер картинки атрибутами width и height — это искажает изображение и не влияет на вес файла, используйте для таких целей специальные редакторы
- для предсказуемого кроссбраузерного отображения картинок явно указывайте бордюры (свойство border)
- содержание атрибута alt активно используется поисковыми системами и произносится голосовыми браузерами
- разница между атрибутами alt и title — alt определяет текст, который пользователь увидит вместо картинки (в случае, если, например, картинки отключены в настройках браузера), а title — вместе с картинкой, в виде всплывающей подсказки
- особенность IE6-7: при отсутствии атрибута title всплывает подсказка, текст которой берется у alt
- атрибуты тега <img>, предназначенные для воспроизведения видео не входят в спецификацию HTML 4.01 и некорректно обрабатываются большинством браузеров, для воспроизведения видео используйте тег <object>
- не рекомендуем использовать атрибуты align и border (не проходит валидацию XHTML 1.0, XHTML 1.1, HTML 4.01 Strict + засоряет код), вместо них применяйте таблицы стилей
- используйте тег <img> только в контентной части документа, графику оформления страниц прячьте в CSS (background) — получится более чистый код
Твой код:
<html> <head> <title></title> <style type=»text/css»> img { border: 2px solid #000; } </style> </head> <body> <div><img alt=»Примеры использования hr» src=»http://www.HTML-CSS-PHP-JS.RU/assets/images/html-tags/hr.png»/> </div> </body> </html> Сделай код и жми тут
Результат:
большой полигонПо теме
Атрибут height тега | HTML справочник
HTML тег <img>Значение и применение
Атрибут height (HTML тега <img>) определяет высоту изображения в пикселях.
Рекомендуется всегда указывать ширину и высоту изображения. Если ширина (атрибут width) и высота (атрибут height) не указаны, то браузер не резервирует место под изображение и при медленной загрузке страница будет «прыгать».
Обращаю Ваше внимание, что если вы с использованием атрибутов уменьшаете большое изображение на странице, то пользователь независимо от этого скачивает большое изображение (размер исходного файла не изменяется). Рекомендуется уменьшать размер изображения до необходимого Вам, прежде чем размещать его на странице.
Поддержка браузерами
Синтаксис:
<img height = "pixels">
Значения атрибута
| Значение | Описание |
|---|---|
| pixels | Определяет высоту изображения в пикселях. Единицы измерения при этом не указываются (только цифры). |
Отличия HTML 4.01 от HTML 5
В HTML 4.01 высота может быть задана в пикселях или в процентах (от родительского элемента), в HTML5 значение должно быть указано в пикселях.Пример использования
<!DOCTYPE html> <html> <head> <title>Пример использования атрибута height HTML тега <img></title> </head> <body> <img src = "moscow.jpg" alt = "Москва" height = "50"> <img src = "moscow.jpg" alt = "Москва" height = "75"> <img src = "moscow.jpg" alt = "Москва" height = "100"> <img src = "moscow.jpg" alt = "Москва" height = "125"> </body> </html>
В данном примере мы разместили четыре изображения, для которых мы установили различные значения высоты в пикселях (атрибут height). Обратите внимание, что ширина изображения подстраивается под высоту изображения автоматически, так как она не задана явно.
Результат нашего примера:
Пример использования атрибута height HTML тега <img> (высота изображения в пикселях).HTML тег <img>Атрибут usemap тега | HTML справочник
HTML тег <img>Значение и применение
Атрибут usemap (HTML тега <img>) ссылается на элемент <map> (обязательный атрибут name элемента), который содержит координаты для клиентской части карты-изображения.
Атрибут usemap нельзя использовать, если элемент <img> является потомком элементов <a>, или <button>.
Поддержка браузерами
Синтаксис:
<map name = "#mapname">
Значения атрибута
| Значение | Описание |
|---|---|
| #mapname | Ссылается на элемент <map> (обязательный атрибут name элемента), который содержит координаты для клиентской части карты-изображения. |
Отличия HTML 4.01 от HTML 5
Нет.Пример использования
<!DOCTYPE html> <html> <head> <title>Пример использования атрибута usemap HTML тега <img></title> </head> <body> <img src = "star.png" usemap = "#zvezda" alt = "Пятиконечная звезда"> <!-- размещаем изображение, которое мы в последствии будем использовать при составлении изображении-карты --> <map name = "zvezda" > <!-- задаём имя карте-изображению --> <area shape = "poly" coords = "251,33, 273,101, 344,101, 286,143, 309,210, 251,170, 192,213, 215,143, 158,101, 229,101" href = "#" alt = "Пятиконечная звезда"> <!-- определяем необходимое количество точек на изображении (многоугольную интерактивную область) --> </map> </body> </html>
И так по порядку, что мы сделали в этом примере:
- Разместили изображение (тег <img>), которое мы в последствии будем использовать при составлении изображении-карты. В атрибуте usemap необходимо обязательно указать имя изображения-карты, которое мы будем использовать в элементе <map> (необходимо обязательно перед именем указать решетку).
- Размещаем изображение-карту (тег <map>) и задаем единственный и обязательный атрибут элемента name (имя карты). Обратите внимание, что в отличие от тега <img> мы задаем имя без решетки, в остальном они должны совпадать.
- С использованием тега <area>, мы определяем многоугольную интерактивную область (атрибут shape со значением «poly») в изображении-карте.
Результат нашего примера:
Пример использования атрибута usemap HTML тега <img>.HTML тег <img>