Html img тег – Тег img, а также src, alt и другие его атрибуты для вставки картинки в HTML код веб-страницы | Создание сайтов и заработок в сети

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 5XHTML 1.0XHTML 1.1
Поддержка:ДаДаДаДа

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

Браузер:Internet ExplorerGoogle ChromeMozilla FirefoxOperaSafari
Версия: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Эффект рамки 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Фотогалерея с помощью 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 задает выравнивание рисунка и способ обтекания текстом
  • bottom — нижняя граница картинки выравнивается по окружающему тексту (по умолчанию)
  • left — по левому краю окна. Текст обтекает справа
  • middle — центр картинки по базовой линии текущей строки
  • right — по правому краю окна. Текст обтекает слева
  • top — верх картинки выравнивается по самому высокому элементу строки
Не проходит валидацию XHTML 1.0 Scrict, XHTML 1.1, HTML 4.01 Strict
alt альтернативный текст
border толщина рамки
Не проходит валидацию XHTML 1.0 Scrict, XHTML 1.1, HTML 4.01 Strict
class определяет имя используемого класса
controls флаг. Когда установлен, отображает кнопки для просмотра видеофайла
Отсутствует в спецификации HTML 4.01!
dir определяет направление символов:
  • ltr — слева направо
  • rtl — справа налево
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 когда начинать воспроизведение видео
  • fileopen — сразу после загрузки (по умолчанию)
  • mouseover — после наведения курсора мыши

Отсутствует в спецификации 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> Сделай код и жми тут

Результат:
большой полигон

По теме

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *