HTML тег img
Тег <img> предназначен для вставки изображений в HTML страницу.
Тег <img> имеет два обязательных атрибута: src и alt.
Технически изображения не вставляются в HTML страницу, а подключаются к HTML странице.
Чтобы создать ссылку-изображение на другой документ, поместите элемент <img> внутри тега <a>.
Разница между HTML 4.01 и HTML5
Атрибуты align, border, hspace и vspace не поддерживаются в HTML5.
Различия между HTML и XHTML
HTML тег <img> — одиночный элемент без закрывающего тега. В XHTML тег <img> должен закрываться должным образом, а именно — <img />.
Атрибуты тега <img>
| Атрибут | Описание |
|---|---|
| align | Определяет горизонтальное выравнивание содержимого элемента |
| alt | Определяет альтернативный текст, если элемент не удается отобразить |
| border | Определяет толщину рамки вокруг элемента |
| height | Определяет высоту изображения |
| hspace | Определяет величину отступов слева и справа от изображения |
| ismap | Определяет, что изображение является серверной картой-изображением. |
| longdesc | Определяет гиперссылку на подробное описание изображения |
| src | Определяет URL изображения |
| usemap | Определяет картинку, как клиентскую карту-изображение |
| vspace | Определяет величину отступов сверху и снизу от изображения |
| width | Определяет ширину изображения |
Общие атрибуты
Тег <img>
HTML пример
Вставляем изображение:
<img src='smiley.gif' alt="Smiley face">
CSS стили по умолчанию
Большинство браузеров будут отображать тег <img> со следующими стилями
img {
display: inline-block;
}
Атрибут width тега | HTML справочник
HTML тег <img>Значение и применение
Атрибут width (HTML тега <img>) определяет ширину изображения в пикселях.
Рекомендуется всегда указывать ширину и высоту изображения. Если ширина (атрибут width) и высота (атрибут height) не указаны, то браузер не резервирует место под изображение и при медленной загрузке страница будет «прыгать».
Обращаю Ваше внимание, что если вы с использованием атрибутов уменьшаете большое изображение на странице, то пользователь независимо от этого скачивает большое изображение (размер исходного файла не изменяется). Рекомендуется уменьшать размер изображения до необходимого Вам, прежде чем размещать его на странице.
Поддержка браузерами
Синтаксис:
<img width = "pixels">
Значения атрибута
| Значение | Описание |
|---|---|
| pixels | Определяет ширину изображения в пикселях. Единицы измерения при этом не указываются (только цифры). |
Отличия HTML 4.01 от HTML 5
В HTML 4.01 ширина может быть задана в пикселях или в процентах (от родительского элемента), в HTML5 значение должно быть указано в пикселях.Пример использования
<!DOCTYPE html> <html> <head> <title>Пример использования атрибута width HTML тега <img></title> </head> <body> <img src = "moscow.jpg" alt = "Москва" width = "50"> <img src = "moscow.jpg" alt = "Москва" width = "100"> <img src = "moscow.jpg" alt = "Москва" width = "150"> <img src = "moscow.jpg" alt = "Москва" width = "200"> </body> </html>
В данном примере мы разместили четыре изображения, для которых мы установили различные значения ширины в пикселях (атрибут width). Обратите внимание, что высота изображения подстраивается под ширину изображения автоматически, так как она не задана явно.
Результат нашего примера:
Пример использования атрибута width HTML тега <img> (ширина изображения в пикселях).HTML тег <img>seodon.ru | Теги HTML — Тег IMG
Опубликовано: 25.06.2010 Последняя правка: 10.12.2015
Тег <IMG> используется для вставки изображений в HTML-страницу. Он имеет два обязательных атрибута: src и alt. Изображения в интернете играют одну из ключевых ролей. Они активно применяются в оформлении сайтов, в ссылках (вставкой их в тег <A>), наглядно дополняют текстовую информацию и т.д. Если тег <IMG> используется внутри ссылки или задает карту изображений, то вокруг самого изображения некоторые браузеры отображают рамку, которую можно убрать при помощи атрибута border.
Важным моментом при включении изображения в страницу является его размер (вес) в килобайтах, а точнее соотношение вес-качество. Естественно, чем меньше вес изображений — тем быстрее загрузится страница. В основном в сети используются графические форматы JPEG, GIF и PNG, которые вполне отвечают данным требованиям.
Также, для ускорения загрузки страниц рекомендуется устанавливать атрибуты width и height, тега <IMG>. Тогда браузер не будет ожидать полной загрузки изображения, он просто выделит под него место и будет загружать страницу дальше, а его подгрузит потом. К тому же, если одно изображение используется на странице несколько раз (значение атрибута src одинаковое), то браузер загружает его с сервера только один раз, а потом берет из кэш-памяти.
Атрибуты
Личные атрибуты:
- align — Устанавливает положение изображения относительно окружающего контекста.
- alt — Обязательный атрибут. Альтернативный текст, если в браузере отключен показ изображений.
- border — Устанавливает размер рамки вокруг изображения.
- height — Переопределяет высоту изображения.
- hspace — Размер боковых полей изображения от его краев до окружающего контекста.
- ismap — Позволяет использовать серверные карты изображений.
- src — Обязательный атрибут. Указывает адрес местонахождения изображения.
- title — Выводит «всплывающую» подсказку при наведении курсора мыши на изображение.
- usemap — Позволяет использовать клиентские карты изображений.
- vspace — Устанавливает размер верхних и нижних полей изображения от его краев до окружающего контекста.
- width — Переопределяет ширину изображения.
Общие атрибуты:
- accesskey — устанавливает клавишу быстрого доступа для фокусировки на HTML-элементе.
- class — задает имя класса или классов тега, используемых в CSS (Каскадные таблицы стилей).
- dir — указывает направление текста внутри элемента.
- id — задает имя идентификатора HTML-тега, который может использоваться в качестве «якоря» или в таблицах стилей.
- lang — указывает язык, на котором написан текст внутри HTML-элемента.
- style — необходим для применения встроенных стилей CSS к тегу.
- tabindex — устанавливает порядок табуляции между элементами (клавиша Tab).
- title — выводит всплывающую подсказку при наведении курсора мыши на HTML-элемент.
Тип тега
Назначение: изображения.
Модель тега: inline (встроенный, уровня строки).
Может содержать: данный элемент является пустым/Empty.
Открывающий тег: необходим. Закрывающий тег: запрещен.
Синтаксис
<img src="URL" alt="текст">Пример HTML: применение тега IMG
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>seodon.ru - Применение тега IMG</title> </head> <body> <p>А вы знаете, что такое знак <a href="files/copyright.html"> <img src="images/copyright.png" alt="Знак Сopyright"> </a></p> </body> </html>
Результат примера
Результат. Применение тега IMG.
Поддержка версиями HTML
| Версия: | HTML 4.01 | HTML 5 | XHTML 1.0 | XHTML 1.1 |
| Поддержка: | Да | Да | Да | Да |
Поддержка браузерами
| Браузер: | Internet Explorer | Google Chrome | Mozilla Firefox | Opera | Safari |
| Версия: | 6.0 и выше | 2.0 и выше | 2.0 и выше | 9.2 и выше | 3.1 и выше |
| Поддержка: | Да | Да | Да | Да | Да |
HTML :: Изображения
Для того, чтобы вставить изображение в документ используется элемент ‘img’ (от англ. image – рисунок, изображение), формирующийся одиночным тегом <img>, и его атрибут src, который в качестве значения принимает полный или относительный адресный путь к файлу изображения. Браузерами ‘img’ отображается, как строчный элемент.
Для случаев, когда загрузка изображений в браузере отключена либо не завершилась, предусмотрен атрибут alt (от англ. alternative), который устанавливает альтернативный текст изображения. При загрузке страницы сперва отображается альтернативный текст, а уже потом, в случае успешной загрузки, само изображение. Следует практически всегда задавать атрибут alt, так как грамотно составленное содержание атрибута (т.е. его значение), кроме всего, позволяет еще и продвинуть страницу в поисковых системах.
В отличие от многих других элементов разметки для элемента ‘img’ в HTML 5 сохранились атрибуты height и width, которые задают, соответственно, высоту и ширину изображения. Кстати, если указать размеры изображения меньше, чем они есть на самом деле, то размер самого файла при этом меньше не станет. Так что это никак не повлияет на скорость загрузки изображения.
Рассмотрим вставку изображений в документ на примере №1. Отображение соответствующей страницы в браузере показано на рис. №2.
<!DOCTYPE html> <html> <head> <!-- Привыкаем задавать служебные элементы --> <meta charset="utf-8"> <base href="http://localhost/test/"> <link rel="stylesheet" href="css/style_1.css"> <script src="javascript/code_1.js"></script> <title>Элемент 'img'</title> </head> <body> Это изображение. Это изображение. Это изображение.<br> Это изображение. Это изображение. Это изображение.<br> Это изображение. <img src="images/img_1.png" alt="House_1"> Это изображение.<br> Это изображение. Это изображение. Это изображение.<br> Это изображение. Это изображение. Это изображение.<br> Это изображение. Это изображение. Это изображение.<br> Это изображение. <img src="images/img_2.png" alt="House_2" height="70px"> Это изображение.<br> Это изображение. Это изображение. Это изображение.<br> Это изображение. Это изображение. Это изображение.<br> Это изображение. Это изображение. Это изображение.<br> </body> </html>
Пример №1. Использование элемента ‘img’
Рис. №2. Отображение страницы с использованием элемента ‘img’ браузером
Из примера хорошо видно, что изображение отображается браузером по умолчанию, как строчный элемент. При этом высота строки подстраивается под высоту изображения. В виду отстутствия файла второго изображения по указанному пути, браузер отобразил вместо него альтернативный текст. А так как размеры изображения были заданы в атрибутах, браузер зарезервировал за ним область соответствующих размеров. Отметим, что браузер Firefox поступает иначе, отображая вместо изображения просто альтернативный текст.
варианты стилизации — учебник CSS
Элемент <img> является стандартным тегом для добавления графических элементов на веб-страницу. Его используют для размещения фотографий, логотипов, графических элементов интерфейса и т. п. Для стилизации тега img можно пользоваться стандартными свойствами CSS, например, border, box-shadow, opacity, float и другими. Это позволяет определять вид и расположение изображения на веб-странице.
На практике, чаще всего к тегу img применяются следующие свойства:
border— вы можете создать рамку для изображения (или даже для целой галереи фотографий), при этом указав любую ширину и цвет границ. Как вы помните, можно даже стилизовать рамку индивидуально для каждой стороны.padding— небольшие внутренние отступы между фотографией и рамкой помогут сымитировать эффект подложки. А с помощью свойства background-color можно изменить и сам цвет подложки.box-shadow— используя это свойство в паре с предыдущими, можно добиться различных интересных эффектов, например, оформить портрет в стиле Polaroid:
Эффект рамки Polaroid с помощью CSS (скриншот)А вот и код для данного эффекта (разверните, чтобы увидеть HTML и CSS):
<div> <img src="URL-of-your-photo" /> </div>.polaroid { position: relative; } .polaroid img { border: 25px solid #fafafa; border-top-width: 35px; border-bottom-width: 100px; -webkit-box-shadow: 3px 3px 6px 4px #888; -moz-box-shadow: 3px 3px 6px 4px #888; box-shadow: 3px 3px 6px 4px #888; }float— применив это свойство ко всем миниатюрам фотографий и добавив еще несколько строк CSS-кода, можно легко создать многострочную галерею:Фотогалерея с помощью CSS (скриншот)
Эффект рамки Polaroid с помощью CSS (скриншот)
Фотогалерея с помощью CSS (скриншот)При стилизации тегов img практически всегда понадобится создавать классы для выборки, чтобы не затрагивать другие изображения на веб-странице (например, чтобы избежать добавления рамки к логотипу или иконкам интерфейса). Так, фотографиям галереи можно присвоить класс .gallery-photo либо подобный, и уже к нему применять стили, предназначенные для фотогалереи. Можно также пользоваться и другими типами селекторов — благо, CSS предоставляет широкий выбор возможностей.
Далее в учебнике: установка изображения в качестве фона с помощью background-image.
img — Xiper.net
Автор: Евгений Рыжков Дата публикации: 14.01.2009
Тег <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.xiper.net/assets/images/html-tags/hr.png»/> </div> </body> </html> Сделай код и жми тут