Атрибуты html тега img: Атрибут alt | htmlbook.ru — Вебджем.рф

Содержание

— Викиреальность

<IMG> — html-тег, предназначенный для отображения картинок. Имеет один обязательный параметр и несколько необязательных.

Данный тег не работает в викиразметке.

Содержание

1 Примеры использования
2 Параметры
3 Карты изображений
- 3.1 Внешняя карта изображений
- 3.2 Локальная карта изображений
4 История
- 4.1 История появления
- 4.2 Исторические атрибуты и параметры
5 Примечания

[править] Примеры использования

<img src=wiki.png>
<img src="images/files/wiki.png">
<img src="wiki.png" width=100 height=100 border=1>

Не требует закрывающего тега.

src — указывает адрес графического файла в виде URL. Допустимо указание файлов в форматах изображений, распознаваемых браузерами (*.GIF, *.JPG, *.PNG).
alt — текстовок описание картинки. Показывается браузером, если он не может или не успел загрузить картинку. В XHTML этот атрибут обязателен.

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

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

border — толщина рамки вокруг картинки в пикселях. Может быть указана целым числом или нулём.
VSPACE — вертикальные отступы сверху и снизу картинки в пикселях.
HSPACE — горизонтальные отступы слева и справа картинки в пикселях.
ALIGN — выравнивание изображения на странице.
В зависимости от значений этого параметра изображение встраивается в текстовую строку (inline) либо тег становится блочным и добавляется обтекание картинок текстом.
- top, bottom, middle — выравнивание картинки по вертикали внутри строки. Дополнительно существуют нестандартные значения: absbottom, absmiddle, texttop.
- left, right — выравнивание картинки слева или справа на странице в виде блока, обтекаемого текстом.

[править] Карты изображений

[править] Внешняя карта изображений

ISMAP — добавление данного атрибута указывает, что к картинке может применяться внешняя карта изображения. Данный параметр указывается без значений.^[1]

Тег <IMG> с атрибутом ISMAP работает, если находится внутри тега <A>, превращающего изображение в гиперссылку:

<a href="http://example.com"><img src="img.gif" ismap></a>

При при нажатии на такую ссылку-изображение происходит переход на указанный адрес с передачей в составе URL дополнительных параметров в виде двух разделённых запятой чисел, являющихся координатами курсора мыши на картинке в момент нажатия. Параметры передаются методом GET и отделяются от остального адреса знаком вопроса:

http://example.com?W,H

где W это ширина, а H — высота в пикселях относительно верхнего левого угла изображения. Координаты передаются на сервер и считываются обработчиком, который указывается в атрибуте HREF тега <A>.^[2]

[править] Локальная карта изображений

USEMAP — атрибут, добавляющий локальную карту изображения. Позволяет размечать картинку на активные области, которым сопоставляются гиперссылки. Локальные карты обрабатываются не на стороне веб-сервера, а на компьютере пользователя. В качестве значения атрибута USEMAP указывается имя локальной карты через знак решётки «#», связывающее изображение с картой:^[3]

<IMG SRC="img.gif" USEMAP="#name">

Сама локальная карта описывается тегом-контейнером <MAP> с атрибутом NAME, через который присваивается его имя. Внутри этого тега располагаются непарные теги <AREA>, каждый из которых описывает координаты отдельной области изображения и активную ссылку для этой области. Атрибуты тега <AREA>:

SHAPE — форма области изображения:

circle — круг;

rect — прямоугольник;

poly — многоугольник;

default — оставшаяся область;

COORDS — координаты в виде чисел в пикселях, перечисляемых через запятую. Формат координат зависит от выбранной формы области.

HREF — URL ссылки для выделенной области изображения. Если ссылки нет, добавляется атрибут NOHREF без значений.

Карта размещается на той же странице, что и картинка.^[2]

[править] История появления

Тег появился при разработке первого браузера Mosaic, создатели которого были озабочены, чтобы браузер открывал картинки прямо в тексте документа, а не в новом окне при клику по ссылке. В феврале 1993 года руководивший разработкой Майк Андриссен в списке рассылки www-talk, популярном среди разработчиков Интернета, в новой теме предложил новый элемент HTML:

I’d like to propose a new, optional HTML tag:
IMG
Required argument is SRC=”url”.

Несмотря на сомнения скептиков и противодействие таких мэтров, как сам создатель Интернета Тим Бернерс-Ли, тег был включен в очередной релиз браузера, а со временем, его добавили в спецификацию HTML 2.0, вышедшую у W3C в 1995 году.

[4]

[править] Исторические атрибуты и параметры

Параметры SRC, ALT, HEIGHT, WIDTH и ALIGN существовали уже в первых версиях HTML. Параметры BORDER, VSPACE и HSPACE были введены в HTML 2.0 (VSPACE и HSPACE были добавлены как расширения HTML в браузере Netscape). Также в HTML 2.0 были введены внешние карты изображений на основе атрибута ISMAP.^[2]

В Netscape Navigator 1.0 также был введён атрибут LOWSRC. Предназначался он для указания альтернативного файла изображения в низком разрешении при медленной загрузке веб-страницы (<IMG SRC="URL" LOWSRC="URL">). Ныне этот атрибут устарел и не используется в современных браузерах.

В HTML версии 3.2 для тега <IMG> использовался атрибут ALIGN, предназначавшийся для выравнивания изображения на странице.

Допустимые его значения: TOP, BOTTOM, MIDDLE, LEFT, RIGHT. В браузере Netscape Navigator начиная с версии 1.0 существовали дополнительные варианты значений этого атрибута: TEXTTOP, ABSMIDDLE, BASELINE, ABSBOTTOM.^[3] Значения ABSMIDDLE, BASELINE, ABSBOTTOM были стандартизированы в HTML версии 2.0.^[1]

↑ ^1,0^1,1HTML — Документация // Городской Кот. — Softservice Group, 1996.
↑ ^2,0^2,1^2,2Д. Рассохин, А. Лебедев World Wide Web — всемирная информационная паутина в сети Internet. Карты (Maps, Clickable Images, Imagemaps).. — Химический факультет МГУ www.chem.msu.su, 15 Июль, 1997. — В. Второе издание.
↑ ^3,0^3,1Kevin Werbach Краткое руководство по HTML перевод на русский Станислава Малышева, 1996 год, c_rabbit.chat.ru
↑ https://geektimes.ru/post/290419/

<HTML> [править]
%%::*::%%	HTML • HTML5 • XHTML • MHTML • HTM • спецсимволы HTML
Теги	<A> • <font> • <FORM> • <img> • <input> • <select> • <textarea> • <noindex> Устаревшие: <LAYER>
Атрибуты	nofollow
Инструкции	Обтекание картинок текстом в HTML • Фреймы • Таблицы в HTML • Форма (HTML) • Списки HTML
Разметка сайтов	HTML в MediaWiki • HTML в Скайпе • Разметка Живого Журнала • Разметка на Лепре
Цвета в HTML	#c0ffee • #chucknorris
Программы	Microsoft FrontPage • 1stPage • Сравнение редакторов HTML (ранних)
Арт	HTML-Mosaic
Болезни	Диватоз • Классянка • Эффект Упячки
Организации	W3C • WHATWG

HTML-тег img добавление изображений | web-sprints

17 Ноя 2016

Главная » Верстка » HTML-тег img добавление изображений

Опубликовано в Верстка admin Ноябрь 17, 2016

Помимо текста на веб—страницах довольно часто можно встретить различные картинки, изображения, схемы и прочие графические элементы. Как правило, их добавляют при помощи стандартного HTML—тега img, обладающего целым рядом полезных атрибутов и возможностей.

Характерный пример добавления изображения в коде страницы:

В данном случае используется лишь два атрибута – alt и src. Основное предназначение первого атрибута – предоставлять альтернативный текст / описание изображения, которое проиндексируется поисковой системой и, скорее всего, будет использоваться при составлении выдачи по картинкам. Если не заполнять alt, то в плане SEO (привлечение пользователей с поисковиков) от картинки не будет практически никакой пользы. Кроме того, текст из alt будет показываться на веб—странице вместо самого изображения в ситуации, когда пользователь полностью отключит графику в своем браузере. Атрибут src, как вы догадались, содержит адрес графического файла, который будет вставлен на страницу. Сюда можно вставить внутренний (если картинка располагается в одной из директорий вашего сайта) или внешний адрес. При указании внутреннего адреса можно использовать не только абсолютный, но и относительный путь.

Атрибут title используется у картинок достаточно часто, хоть и является общим для всех HTML—элементов. Обычно здесь прописывают человекопонятное название изображения на русском языке (если сайт русскоязычный). Содержимое title показывается в небольшой всплывающей подсказке при наведении курсора мышки на картинку.

Атрибут align позволяет задавать картинке нужный тип выравнивания. К примеру, если вы хотите, чтобы изображение размещалось с правой или с левой стороны страницы, а текстовый контент обтекал его по противоположной стороне (и занимал несколько строк),то следует использовать значения align=”right” или align=”left” соответственно. Если хотите, чтобы на одной линии с изображением (независимо от его высоты) помещалась лишь одна строка текста, то используйте одно из следующих значений для align – middle (строка пройдет по середине высоты), bottom (строка пройдет по нижней границе), top (строка пройдет по верхней границе).

Посредством стандартных атрибутов width и height можно задавать пиксельную / процентную высоту и ширину изображений. Однако стоит учитывать, что при изменении пропорций браузер исказит картинку. Можно задавать отступы от изображения до ближайших элементов в обе стороны, а также вверх / вниз. Делается это посредством атрибутов hspace и vspace (указываются значения в пикселях).

Часто картинке задают небольшую рамку для того, чтобы визуально выделить ее. Сделать это можно при помощи таких атрибутов, как border и bordercolor. Первый атрибут задает пиксельную толщину нашей границы, а второй – ее цвет. Цвет следует задавать лишь тогда, когда толщина не равна нулю.

Если вы захотите оформить картинку в виде ссылки, к примеру, на какую—либо страницу или раздел, то воспользуйтесь связкой элементов a + img. Вот пример такой связки:

Здесь example_url – это адрес нужной страницы, аimg_url – адрес картинки.

изображение — изображение — HTML5

ⓘ img – изображение # T

изображение элемент представляет изображение.

Допустимое содержимое #

пустой (пустой элемент)

Допустимые атрибуты #

глобальные атрибуты и источник★ & альтернативный & рост & ширина & карта использования & исмап и граница

ⓘ глобальные атрибуты: Любые атрибуты, разрешенные глобально.
ⓘ источник = непустой URL-адрес, потенциально окруженный пробелами #: URL-адрес, ссылающийся на неинтерактивный, необязательно анимированное изображение, которое не разбито на страницы и не написано в сценарии.
ⓘ альт = любое значение #: Эквивалентный контент для тех, кто не может обрабатывать изображения или отключить загрузку изображений.
ⓘ высота = неотрицательное целое число #: Высота изображения в пикселях CSS.
ⓘ ширина = неотрицательное целое число #: Ширина изображения в пикселях CSS.
ⓘ Карта использования = ссылка на имя хэша #: А ссылка на имя хэша к карта элемент, с которым связано изображение.
ⓘ исмап = «ismap» или «» (пустая строка) или пустой #: Указывает, что его изображение Элемент обеспечивает доступ к карте изображений на стороне сервера.
ⓘ граница = нуль УСТАРЕВШИЙ #: Указывает, что его изображение элемент представляет собой изображение без полей.; Буквенная строка « 0 «.

Дополнительные ограничения и предупреждения #

Элемент img должен иметь атрибут alt, за исключением определенных условия. Подробную информацию см. в руководстве по предоставление текстовых альтернатив изображениям.
Элемент img с атрибутом usemap не должно появляются как потомки элемента a.
Элемент img с атрибутом usemap не должно отображаться как потомок элемента кнопки.
Элемент img с Набор атрибутов ismap должен иметь предка элемент с атрибутом href.
Атрибут longdesc элемента img устарел. Используйте обычный элемент a для ссылки на описание.
Атрибут name в элементе img устарел. Вместо этого используйте атрибут id.
Атрибут align элемента img устарел. Вместо этого используйте CSS.
Атрибут hspace в элементе img устарел. Вместо этого используйте CSS.
Атрибут vspace в элементе img устарел. Вместо этого используйте CSS.
Атрибут границы элемента img устарел. Вместо этого используйте CSS.
Атрибут границы элемента img устарел. Попробуйте указать «img {граница: 0; }“ вместо этого в CSS.

Отсутствие тега #

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

Разрешенные родительские элементы #

любой элемент, который может содержать элементы фразировки

Интерфейс DOM #

 [ИменованныйКонструктор=Изображение(),
 NamedConstructor=Изображение (ширина без знака),
 NamedConstructor=Изображение (беззнаковая длинная ширина, беззнаковая длинная высота)]
интерфейс  HTMLImageElement  : HTMLElement {
           атрибут DOMString alt;
           атрибут DOMString источник;
           атрибут DOMString crossOrigin;
           атрибут DOMString useMap;
           атрибут логический isMap;
           атрибут unsigned long width;
           атрибут unsigned long height;
  атрибут только для чтения unsigned long naturalWidth;
  атрибут только для чтения unsigned long naturalHeight;
  логическое значение атрибута только для чтения завершено;
};

Типичные свойства дисплея по умолчанию #

img {

дисплей: встроенный блок; }

Что такое тег в HTML?

Хаммад Насир

Устали от LeetCode? 😩

Изучите 24 шаблона, чтобы решить любой вопрос на собеседовании по программированию, не заблудившись в лабиринте практических задач в стиле LeetCode. Практикуйте свои навыки в практической среде кодирования, не требующей настройки. 💪

Тег

в HTML

Тег используется для отображения изображения на HTML-странице. Структура тега следующая:

Обратите внимание, что тег не имеет закрывающего тега (например, ), поскольку тег используется только в качестве заполнителя для изображения, а необходимая информация передается в качестве атрибутов тегу . Оба src и alt являются обязательными атрибутами. Атрибут src — это путь к файлу изображения (например, URL-адрес или относительный путь). Атрибут alt — это текст, который должен отображаться, если изображение не загружается.

Пример использования тега

В следующем коде приведен пример:

В приведенном выше примере использовались два тега . Атрибут src первого тега был URL-адресом действительного изображения, тогда как для второго тега URL-адрес был недействительным. Следовательно, во втором случае alt текст Это изображение не существует отображается. Причем для первого изображения также указаны атрибуты ширина и высота . Эти необязательные атрибуты позволяют изменять размеры изображения.