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

Содержание

Тег img — картинка на сайте

Тег img создает картинку. Путь к картинке прописывается в атрибуте src. Не требует закрывающего тега.

Атрибуты

АтрибутОписание
src Задает путь к картинке.
Обязательный атрибут.
alt Альтернативный текст, который будет показан вместо картинки, если она не найдена (к примеру, неправильно прописан путь к ней).
Обязательный атрибут. При его отсутствии будет ругаться валидатор (программа, которая проверяет корректность HTML или CSS).
width Ширина картинки, в пикселях (в этом случае единицы измерения не указываются) или процентах от родителя картинки.
height Высота картинки, в пикселях (в этом случае единицы измерения не указываются) или процентах от родителя картинки.

Нюансы

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

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

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

Рекомендуется задавать ширину и высоту картинкам в атрибутах (а не через CSS) — в этом случае браузер быстрее будет загружать изображения — ему нет нужды вычислять размер каждой картинки после ее получения.

Не рекомендуется уменьшать реальные размеры картинки без необходимости. К примеру, реальный размер картинки 1000 на 1000 пикселей, а вы ей зададите ширину в 100px. В этом случае картинка на экране будет выглядеть на 100 пикселей, однако иметь размер на всю тысячу и, соответственно,

загружаться намного дольше.

Пример

Давайте на сайт добавим картинку и не будем задавать атрибуты height и width. Картинка будет иметь свой реальный размер:

<img src="monkey.png" alt="обезьянка">

:

Пример

Давайте попробуем картинке добавить ширина с помощью атрибута width, высота при этом должна подстроиться так, чтобы сохранить пропорции картинки:

<img src="monkey.png" alt="обезьянка">

:

Пример

А теперь давайте картинке добавим высоту с помощью атрибута height, ширина при этом подстроится так, чтобы сохранить пропорции картинки:

<img src="monkey.png" alt="обезьянка">

:

Пример

Давайте одновременно картинке добавим и высоту, и ширину. Пропорции картинки при этом должны стать искаженными (не обязательно, но в данном случае высота и ширина подобраны так, чтобы пропорции исказились):

<img src="monkey.png" alt="обезьянка">

:

Пример

Давайте поставим неправильный путь к картинке (для простоты оставим его пустым). Вместо картинки мы увидим содержимое атрибута alt (кажется, что это обычный текст — но попробуйте его скопировать — у вас ничего не получится, он будет тянутся как картинка):

<img src="" alt="обезьянка">

:

Смотрите также

  • свойство width,
    которое задает ширину элемента
  • свойство height,
    которое задает ширину элемента
  • свойство background-image,
    которое задает фоновую картинку

HTML тег img | назначение, синтаксис, атрибуты, примеры

Последнее обновление: 22.01.2011

Тег <img> (англ. image — изображение) добавляет на страницу изображение (картинку).
Строчный элемент.

HTML: 3.2 | 4 / XHTML: 1.0 | 1.1

Синтаксис

<img src=../../../manuals/html/tags/"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=../../../manuals/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=../../../manuals/html/tags/"#" alt="Серая зона" title="Серая зона" shape="rect" coords="20,10,118,188"/>
<area href=../../../manuals/html/tags/"#" alt="Желтая зона" title="Желтая зона" shape="poly" coords="175,30,270,100,200,150"/>

</map>
<img src=../../../manuals/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> Сделай код и жми тут

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

По теме

Тег img — Уроки по созданию сайтов на WordPress

Тег <img>

Описание

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

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

Синтаксис

HTML
<img src="URL" alt="альтернативный текст">
XHTML
<img src="URL" alt="альтернативный текст" />

Атрибуты

align — Определяет как рисунок будет выравниваться по краю и способ обтекания текстом.
alt — Альтернативный текст для изображения.
border — Толщина рамки вокруг изображения.
height — Высота изображения.
hspace — Горизонтальный отступ от изображения до окружающего контента.
ismap — Говорит браузеру, что картинка является серверной картой-изображением.
longdesc — Указывает адрес документа, где содержится аннотация к картинке.
lowsrc — Адрес изображения низкого качества.
src — Путь к графическому файлу.
vspace — Вертикальный отступ от изображения до окружающего контента.
width — Ширина изображения.
usemap — Ссылка на тег <map>, содержащий координаты для клиентской карты-изображения.

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

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

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

Пример

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег IMG</title>
 </head>
 <body> 
 
  <p><a href="lorem.html"><img src="images/girl.png" 
  alt="lorem"></a>
  Lorem ipsum dolor sit amet...</p>
 
 </body>
</html>

<!DOCTYPE HTML> <html> <head> <meta charset=»utf-8″> <title>Тег IMG</title> </head> <body> <p><a href=»lorem.html»><img src=»images/girl.png» width=»189″ alt=»lorem»></a> Lorem ipsum dolor sit amet…</p> </body> </html>

Тег IMG [Сообщество преподавателей информатики ФМШ]

Тег IMG

Описание

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

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

Синтаксис

Параметры

alignОпределяет как рисунок будет выравниваться по краю и способ обтекания текстом.
altАльтернативный текст для изображения.
borderТолщина рамки вокруг изображения.
heightВысота (ширина) изображения.
hspaceГоризонтальный отступ от изображения до окружающего контента.
ismapГоворит браузеру, что картинка является серверной картой-изображением.
lowsrcПуть к графическому файлу низкого разрешения для предварительного отображения.
srcПуть к графическому файлу.
vspaceВертикальный отступ от изображения до окружающего контента.
widthШирина изображения.
usemapСсылка на тег <MAP>, содержащий координаты для клиентской карты-изображения.

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

Пример

Использование тега 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=windows-1251">
  <title>Тег IMG</title>
 </head>
 <body> 
 
  <p><a href="lorem.html"><img src="images/girl.png" 
  alt="lorem"></a>
  Lorem ipsum dolor sit amet...</p>
 
 </body>
</html>

Описание параметров тега <IMG>

Параметр ALIGN

Описание

Для изображений можно указывать их положение относительно текста или других изображений на веб-странице. Способ выравнивания изображений задается параметром align тега <IMG>.

Синтаксис
<img align="bottom | left | middle | right | top">
Аргументы

В таблице перечислены возможные значение параметра align и результат его использования.

Наиболее популярные параметры — left и right, создающие обтекание текста вокруг изображения.

Значение по умолчанию
Пример

Выравнивание изображения

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег IMG, параметр align</title>
 </head>
 <body>
 
  <p><img src="/images/square.gif" alt="Квадрат" 
  align="right"> Lorem ipsum dolor sit 
  amet, consectetuer adipiscing elit...</p>
 
</body>
</html>
Примечание

Дополнительные аргументы absbottom, absmiddle, baseline и texttop понимаются браузерами, но не поддерживаются спецификацией HTML 4.x/XHTML 1.0.

Параметр ALT

Описание

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

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

Синтаксис
Аргументы

Любая подходящяя текстовая строка. Ее обязательно надо брать в двойные или одинарные кавычки.

Обязательный параметр
Значение по умолчанию
Пример

Добавление альтернативного текста

<!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>Тег IMG, параметр alt</title>
 </head>
 <body>
 
  <p><a href="/index.php"><img src="images/home.gif" alt="Вернуться 
  на главную страницу"></a></p>
 
 </body>
</html>

Параметр BORDER

Описание

Изображение, помещаемое на веб-страницу, можно поместить в рамку различной ширины. Для этого служит параметр border тега <IMG>. По умолчанию рамка вокруг изображения не отображается за исключением случая, когда рисунок является ссылкой. При этом цвет рамки совпадает с цветом ссылок, заданных с помощью стиля или параметра link тега <BODY>.

Чтобы убрать рамку, следует задать параметр border=«0».

Синтаксис
<img border="толщина рамки">
Аргументы

Любое целое положительное число в пикселах.

Значение по умолчанию
Пример

Рамка вокруг изображения

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег IMG, параметр border</title>
 </head>
 <body text="#00ff00">
 
  <p><img src="/images/sample.gif" 
   border="2" alt=""></p>
 
 </body>
</html>

Параметр HEIGHT и WIDTH

Описание

Для изменения размеров изображения средствами HTML предусмотрены параметры height и width. Допускается использовать значения в пикселах или процентах. Если установлена процентная запись, то размеры изображения вычисляются относительно родительского элемента — контейнера, где находится тег <IMG>. В случае отсутствия родительского контейнера, в его качестве выступает окно браузера. Иными словами, width=«100%» означает, что рисунок будет растянут на всю ширину веб-страницы. Добавление только одного параметра width или height сохраняет пропорции и отношение сторон изображения. Браузер при этом ожидает полной загрузки рисунка, чтобы определить его первоначальную высоту и ширину.

Обязательно задавайте размеры всех изображений на веб-странице. Это несколько ускоряет загрузку страницы, поскольку браузеру нет нужды вычислять размер каждого рисунка после его получения. Это утверждение особенно важно для изображений, размещенных внутри таблицы.

Ширину и высоту изображения можно менять как в меньшую, так и большую сторону. Однако на скорость загрузки рисунка это никак не влияет, поскольку размер файла остается неизменным. Поэтому с осторожностью уменьшайте изображение, т.к. это может вызвать недоумение у читателей, отчего такой маленький рисунок так долго грузится. А вот увеличение размеров приводит к обратному эффекту — размер изображения велик, но файл относительно изображения аналогичного размера загружается быстрее. Но качество рисунка при этом ухудшается.

Синтаксис
<img> <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>Тег IMG, параметр width</title>
 </head>
 <body>
 
  <p><img src="/images/sample.gif" alt=""></p>
 
 </body>
</html>

Параметр HSPACE и VSPACE

Описание

Для любого изображения можно задать невидимые отступы по горизонтали и вертикали с помощью параметров hspace и vspace. Особенно это актуально при обтекании рисунка текстом. В этом случае, чтобы текст не «наезжал» плотно на изображение, необходимо вокруг него добавить пустое пространство.

Синтаксис
<img hspace="отступ по горизонтали" vspace="отступ по вертикали">
Аргументы

Любое целое положительное число в пикселах.

Значение по умолчанию
Пример

Отступы вокруг изображения

<!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>Тег IMG, параметр hspace</title>
 </head>
 <body>
 
  <p><img src="/images/sample.gif" 
  hspace="5" vspace="7" alt="" align="left"></p>
  <p>Пример обтекания картинки текстом</p>
 
 </body>
</html>

Параметр ISMAP

Описание

Параметр ismap говорит браузеру что рисунок является серверной картой-изображением. Карты-изображения позволяют привязывать ссылки к разным областям одного изображения. Реализуется в двух различных вариантах — серверном и клиентском. В случае применения серверного варианта браузер посылает запрос на сервер для получения адреса выбранной ссылки и ждет ответа с требуемой информацией. Такой подход требует дополнительного времени на ожидание результата и отдельные файлы для каждой карты-изображения.

Отправка данных на сервер происходит следующим образом. Необходимо поместить тег <IMG> в контейнер <A>, где в качестве значения параметра href указать адрес CGI-программы. Программа анализирует полученные координаты нажатия мыши, которые считаются от левого верхнего угла изображения, и возвращает требуемую веб-страницу.

Синтаксис
Аргументы
Значение по умолчанию

По умолчанию этот параметр выключен.

Пример

Использование параметра ismap

<!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>Тег IMG, параметр ismap</title>
 </head>
 <body>
 
  <p><a href="http://www.htmlbook.ru/html/example/ismap.php"><img src="/images/sample.gif" 
  alt="" ismap></a></p>
 
 </body>
</html>

Если пользователь установил координаты мыши на изображении 100, 50, то после нажатия на ссылку будет открыт файл по адресу http://www.htmlbook.ru/cgi-bin/map.cgi?100,50. Последние цифры передаются в CGI-программу по методу GET и интерпретируются на сервере.

Параметр SRC

Описание

Адрес графического файла, который будет отображаться на веб-странице. Наиболее популярны файлы в формате GIF и JPEG.

Синтаксис
Обязательный параметр
Аргументы

В качестве значения принимается полный или относительный путь к файлу.

Значение по умолчанию
Пример

Путь к графическому файлу

<!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>Тег IMG, параметр src</title>
 </head>
 <body>
 
  <p><img src="http://htmlbook.ru/images/logo.gif" alt=""></p>
 
 </body>
</html>

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

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