Атрибуты тега img в html. Добавляем изображения на WEB-страницу, а еще видео и аудио

09.07.2019

HTML-изображения добавляются на веб-страницы с помощью тега . Использование графики делает веб-страницы визуально привлекательнее. Изображения помогают лучше передать суть и содержание веб-документа.

С помощью HTML-тегов и можно создавать карты-изображения с активными областями.

Вставка изображений в HTML-документ

1. Тег

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

Или

Тег имеет обязательный атрибут src , значением которого является абсолютный или относительный путь к изображению:

Для тега доступны следующие атрибуты:

Таблица 1. Атрибуты тега

Атрибут	Описание, принимаемое значение
alt	Атрибут alt добавляет альтернативный текст для изображения. Выводится на месте появления изображения до его загрузки или при отключенной графике, а также выводится всплывающей подсказкой при наведении курсора мыши на изображение. Синтаксис: alt="описание изображения" .
crossorigin	Атрибут crossorigin позволяет загружать изображения с ресурсов другого домена с помощью CORS-запросов. Изображения, загруженные в холст с помощью CORS-запросов, могут быть использованы повторно. Допускаемые значения: anonymous — Cross-origin запрос выполняется с помощью HTTP-заголовка, при этом учетные данные не передаются. Если сервер не даёт учетные данные серверу, с которого запрашивается контент, то изображение будет испорчено и его использование будет ограничено. use-credentials — Cross-origin запрос выполняется с передачей учетных данных. Синтаксис: crossorigin="anonymous" .
height	Атрибут height задает высоту изображения. Может указываться в px или % . Синтаксис: height: 300px .
ismap	Атрибут ismap указывает на то, что картинка является частью изображения-карты, расположенного на сервере (изображение-карта — изображение с интерактивными областями). При нажатии на изображение-карту координаты передаются на сервер в виде строки запроса URL-адреса. Атрибут ismap допускается только в случае, если элемент является потомком элемента с действительным атрибутом href . Синтаксис: ismap .
longdesc	URL расширенного описания изображения, дополняющее атрибут alt . Синтаксис: longdesc="http://www.example.com/description.txt" .
src	Атрибут src задает путь к изображению. Синтаксис: src="flower.jpg" .
sizes	Задаёт размер изображения в зависимости от параметров отображения. Работает только при заданном атрибуте srcset . Значением атрибута является одна или несколько строк, указанных через запятую.
srcset	Создаёт список источников для изображения, которые будут выбраны, исходя из разрешения экрана. Может использоваться вместе или вместо атрибута src . Значением атрибута является одна или несколько строк, разделенных запятой.
usemap	Атрибут usemap определяет изображение в качестве карты-изображения. Значение обязательно должно начинаться с символа # . Значение ассоциируется со значением атрибута name или id тега и создает связь между элементами и . Атрибут нельзя использовать, если элемент является потомком элемента или
width	Атрибут width задает ширину изображения. Может указываться в px или % . Синтаксис: width: 100% .

1.1. Адрес изображения

Адрес изображения может быть указан полностью (абсолютный URL), например:
url(http://anysite.ru/images/anyphoto.png)

Или же через относительный путь от документа или корневого каталога сайта:
url(../images/anyphoto.png) — относительный путь от документа,
url(/images/anyphoto.png) — относительный путь от корневого каталога.

Это интерпретируется следующим образом:
../ — означает подняться вверх на один уровень, к корневому каталогу,
images/ — перейти к папке с изображениями,
anyphoto.png — указывает на файл изображения.

1.2. Размеры изображения

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

1.3. Форматы графических файлов

Формат JPEG (Joint Photographic Experts Group) . Изображения JPEG идеальны для фотографий, они могут содержать миллионы различных цветов. Сжимают изображения лучше GIF, но текст и большие площади со сплошным цветом могут покрыться пятнами.

Формат GIF (Graphics Interchange Format) . Идеален для сжатия изображений, в которых есть области со сплошным цветом, например, логотипов. GIF-файлы позволяют установить один из цветов прозрачным, благодаря чему фон веб-страницы может проявляться через часть изображения. Также GIF-файлы могут включать в себя простую анимацию. GIF-изображения содержат всего лишь 256 оттенков, из-за чего изображения выглядят пятнистыми и нереалистичного цвета, как плакаты.

Формат PNG (Portable Network Graphics) . Включает в себя лучшие черты GIF- и JPEG-форматов. Содержит 256 цветов и дает возможность сделать один из цветов прозрачным, при этом сжимает изображения в меньший размер, чем GIF-файл.

Формат APNG (Animated Portable Network Graphics) . Формат изображения, основанный на формате PNG. Позволяет хранить анимацию, а также поддерживает прозрачность.

Формат SVG (Scalable Vector Graphics) . SVG-рисунок состоит из набора геометрических фигур, описанных в формате XML: линия, эллипс, многоугольник и т.п. Поддерживается как статичная, так и анимированная графика. Набор функций включает в себя различные преобразования, альфа-маски, эффекты фильтров, возможность использования шаблонов. Изображения в формате SVG могут изменяться в размере без снижения качества.

Формат BMP (Bitmap Picture) . Представляет собой несжатое (оригинальное) растровое изображение, шаблоном которого является прямоугольная сетка пикселей. Bitmap-файл состоит из заголовка, палитры и графических данных. В заголовке хранится информация о графическом изображении и файле (глубина пикселей, высота, ширина и количество цветов). Палитра указывается только в тех Bitmap-файлах, которые содержат палитровые изображения (8 и менее бит) и состоят не более чем из 256 элементов. Графические данные представляют саму картинку. Глубина цвета в данном формате может быть 1, 2, 4, 8, 16, 24, 32, 48 бит на пиксель.

Формат ICO (Windows icon) . Формат хранения значков файлов в Microsoft Windows. Также, Windows icon, используется как иконка на сайтах в интернете. Именно картинка такого формата отображается рядом с адресом сайта или закладкой в браузере. Один ICO-файл содержит один или несколько значков, размер и цветность каждого из которых задаётся отдельно. Размер значка может быть любым, но наиболее употребимы квадратные значки со сторонами 16, 32 и 48 пикселей.

2. Тег

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

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

...

Элемент содержит ряд элементов , определяющих интерактивные области в изображении карты.

3. Тег

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

Таблица 2. Атрибуты тега

Атрибут	Краткое описание
alt	Задает альтернативный текст для активной области карты.
coords	Определяет позицию области на экране. Координаты задаются в единицах длины и разделяются запятыми: для круга — координаты центра и радиус круга; для прямоугольника — координаты верхнего левого и правого нижнего углов; для многоугольника — координаты вершин многоугольника в нужном порядке, также рекомендуется указывать последние координаты, равные первым, для логического завершения фигуры.
download	Дополняет атрибут href и сообщает браузеру, что ресурс должен быть загружен в момент, когда пользователь щелкает по ссылке, вместо того, чтобы, например, предварительно открыть его (как PDF-файл). Задавая имя для атрибута, мы таким образом задаем имя загружаемому объекту. Разрешается использовать атрибут без указания его значения.
href	Указывает URL-адрес для ссылки. Может быть указан абсолютный или относительный адрес ссылки.
hreflang	Определяет язык связанного веб-документа. Используется только вместе с атрибутом href . Принимаемые значения — аббревиатура, состоящая из пары букв, обозначающих код языка.
media	Определяет, для каких типов устройств файл будет оптимизирован. Значением может быть любой медиа-запрос.
rel	Дополняет атрибут href информацией об отношении между текущим и связанным документом. Принимаемые значения: alternate — ссылка на альтернативную версию документа (например, печатную форму страницы, перевод или зеркало). author — ссылка на автора документа. bookmark — постоянный URL-адрес, используемый для закладок. help — ссылка на справку. license — ссылка на информацию об авторских правах на данный веб-документ. next/prev — указывает связь между отдельными URL. Благодаря этой разметке Google может определить, что содержание данных страниц связано в логической последовательности. nofollow — запрещает поисковой системе переходить по ссылкам на данной странице или по конкретной ссылке. noreferrer — указывает, что переходе по ссылке браузер не должен посылать заголовок HTTP-запроса (Referrer), в который записывается информация о том, с какой страницы пришел посетитель сайта. prefetch — указывает, что целевой документ должен быть кэширован, т.е. браузер в фоновом режиме загружает содержимое страницы к себе в кэш. search — указывает, что целевой документ содержит инструмент для поиска. tag — указывает ключевое слово для текущего документа.
shape	Задает форму активной области на карте и ее координаты. Может принимать следующие значения: rect — активная область прямоугольной формы; circle — активная область в форме круга; poly — активная область в форме многоугольника; default — активная область занимает всю площадь изображения.
target	Указывает, куда будет загружен документ при переходе по ссылке. Принимает следующие значения: _self — страница загружается в текущее окно; _blank — страница открывается в новом окне браузера; _parent — страница загружается во фрейм-родитель; _top — страница загружается в полное окно браузера.
type	Указывает MIME-тип файлов ссылки, т.е. расширение файла.

4. Пример создания карты-изображения

1) Размечаем исходное изображение на активные области нужной формы. Координаты областей можно вычислить с помощью программы для обработки фотографий, например, Adobe Photoshop или Paint .

Рис. 1. Пример разметки изображения для создания карты

2) Задаем имя карты, добавив его в тег с помощью атрибута name . Это же значение присваиваем атрибуту usemap тега .

Jpg" alt="flowers_foto" width="680" height="383" usemap="#flowers">
Рис. 2. Пример создания карты-изображения, при нажатии курсора мыши на цветок осуществляется переход на страницу с описанием

Вставляем картинку :

Описание и использование

Тег вставляет изображение в документ HTML.

Заметьте, что изображения технически не вставляются в страницу. На самом деле, изображения ссылаются на HTML страницы. Тег создает контейнер для изображения.

У тега два обязательных атрибута: src и alt.

Разница между HTML и XHTML

В HTML тег не имеет закрывающего тега.

В XHTML тег должен быть правильно закрыт.

Атрибуты "align", "border", "hspace", и "vspace" элемента img устарели и не поддерживаются в XHTML 1.0 Strict.

Совет: Атрибут alt используется как альтернативный текст в случае отсутствия изображения, а не как текст при наведении мышки. Для показа текста при наведении мышки на изображение используйте атрибут title. Вот так: .

Обязательные атрибуты

Необязательные атрибуты

Атрибут	Значение	Описание
align	left right top middle bottom	Устарел. Используйте CSS
border	пиксели	Устарел. Используйте CSS
height	пиксели %	Определяет высоту изображения
hspace	пиксели	Устарел. Используйте CSS
ismap	ismap	Определяет изображение как карту изображение на стороне сервера. Очень редко используется.
longdesc	URL	Определяет путь к документу, который содержит длинное описание изображения
usemap	#название_карты	Определяет изображение как карту изображение на стороне сервера.
vspace	пиксели	Устарел. Используйте CSS
width	пиксели %	Определяет ширину изображения

Стандартные атрибуты

Атрибут	Значение	Описание
class	имя_класса	Определяет имя класса для элемента
dir	rtl ltr	Определяет направление текста для контента в элементе
id	id	Определяет уникальный id для элемента
lang	код_языка	Определяет код языка для контента в элементе
style	определение_стиля	Определяет инлайновый стиль для элемента
title	текст	Определяет дополнительную информацию об элементе
xml:lang	код_языка	Определяет код языка для контента в элементе, в XHTML документах

Событийные атрибуты

Атрибут	Значение	Описание
onabort	скрипт	Скрипт будет выполнен при проблеме с загрузкой изображения
onclick	скрипт	Скрипт будет выполнен при клике
ondblclick	скрипт	Скрипт будет выполнен при двойном клике
onmousedown	скрипт	Скрипт будет выполнен при нажатии кнопки мышки
onmousemove	скрипт	Скрипт будет выполнен при движении курсора мышки
onmouseout	скрипт	Скрипт будет выполнен, когда курсор мышки покинет пределы элемента
onmouseover	скрипт	Скрипт будет выполнен, когда курсор мышки находится над элементом
onmouseup	скрипт	Скрипт будет выполнен, когда кнопка мышки будет отпушена
onkeydown	скрипт	Скрипт будет выполнен при нажатии клавиши
onkeypress	скрипт	Скрипт будет выполнен при нажатии клавиши и последующего разжатия
onkeyup	скрипт	Скрипт будет выполнен при разжатии клавиши

Д ля вставки изображений в HTML применяются два основных формата GIF и JPEG. Формат GIF может хранить внутри себя простейшую анимацию (динамические баннеры), JPEG отлично подходит для изображений с большим количеством цветов, например фотографий. Третьим форматом для web-графики является формат PNG, но он не получил широкого применения в web-дизайне. Любое изображение в форматах GIF или JPEG вставляется на web-страницу при помощи тега , закрывающего тега нет.

Атрибут SRC

Посредством атрибута src задается адрес (URL) файла с изображением, т.е. браузер находит нужное изображение в каталоге сайта по пути (адресу URL), прописанному в этом атрибуте. Для удобства все изображения сайта находятся в отдельной папке, обычно с именем image . Для примера возьми любое изображение, лучше небольшого формата, и сохрани в созданной папке image, с именем primer.jpg . Далее мы будем обращаться к ней для обучения.

Ну что, попробуем вставить картинку на страницу? Пишем код (путь - URL, прописывается в зависимости от местонахождения папки с изображениями):

src="image/primer.jpg" >

То, без чего не создать сайт: ∼ ∼

В данном материале я вам расскажу об очень важных тегах HTML, для вставки картинок и графики на страницу, ведь без этого сложно создать красивый и хороший сайт.

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

Не награмождай html-страницу картинками, страница должна быть легкой и не отпугивать посетителей. Посетитель всегда должен усваивать главную информацию и не отвлекаться, вставляй картинки в HTML только там, где в этом есть необходимость.

на странице Атрибуты тега BODY я уже говорил, что картинки могут быть фоном html-страницы, а сейчас я вам расскажу, как эти же картинки можно использовать на более высоком уровне, нежели фон.

И так, для того, что вставить картинку в HTML-страницу, тебе понадобится тег , у которого есть самый главный атрибут SRC. Данный атрибут необходим для указания адреса к картинке. Допустим, тебе нужно ставить картинку image.jpg в какое-нибудь место на html-страницу, а наша картинка будет находится в одной папке (каталоге)) со страницей, тогда надо писать вот такой html-код:

Если картинка и html-страница находятся в разных папках или каталогах, то надо написать путь к изображению относительно страницы. Например, наша html-страница находится в папке или каталоге news, в этом же каталоге или папке находится подкаталог (папка) pop, в котором и расположена наша картинка image.jpg, то для ее вставки надо писать так:

Кроме атрибута src у тега есть еще парочка необязательных, но важных атрибутов:

width — ширина картинки (можно указывать пиксели или проценты);
height — высота картинки (можно указывать пиксели или проценты).

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

Как я уже написал, размеры картинки можно указывать как в пикселах, так и в процентах. Приведу просто пример:

еще пример html-кода:

Бывают случаи, когда в браузере отключена возможность отображения графики, в том числе и картинок, и чтобы ваша страница не потеряла смысл, применяют атрибут alt, в котором мы пишем альтернативный текст, если картинка не под грузилась на страницу. html-код на примере:

left — картинка расположится слева, а текст, который рядом — справа;
right — картинка расположится справа, а текст, который рядом — слева.

Приведу HTML-код:

Текст, радом с картинкой.

а браузер выведет следующее:

Текст, радом с картинкой.

HTML-код для значения right:

Текст, радом с картинкой.

на html-странице будет так:

Текст, рядом с картинкой.

Для того, чтобы текст не обтекал картинку, можно использовать ранее упомянутый тег BR на странице Форматирование текста в HTML. Кстате, тег BR имеет атрибут clear, со своими значениями значения:

left — не обтекать текстом, который выровнем по левому краю;
right — не обтекать текстом, который выровнем по правому краю;
all — не обтекать текстом, который выровнем по левому и правому краям.

Без атрибута align текст обтекат по умолчанию справа картинки и почти вплотную. Если ты хочешь чтобы текст не обтукал вплотную картинку, можно использовать вот такие атрибуты:

vspace — делает верхнее и нижнее поля в пикселях;
hspace — делает боковые поля (слева и справа) в пикселях.

Приведу простой html-код на примере:

Вот такая красивая картинка.

Что получится по данному примеру попробуй посмотреть сам.

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

на html-странице будет вот так:

Я написал основные теги HTML, необходимые для вставки картинок на html-страницу. Далее я расскажу тебе, как создать ссылки в HTML, а также как сделать картинку ссылкой.

Дата публикации: 15 мая, 2012

Описание

Для вставки графических изображений в HTML-документ используется HTML тег (img сокращение от англ. слова image - изображение). Изображения не вставляются напрямую на веб-страницу, тег содержит лишь ссылку на изображение и создает требуемого размера пространство, в котором отображается картинка в графическом формате GIF, JPEG или PNG:

JPG - наиболее распространенный формат для фотографий. Изображения с расширением.jpg отображают миллионы цветов, что особенно важно для точного отображения различных оттенков и градиентов в фотографиях. Однако, такие изображения не могут содержать прозрачные области.
GIF используется для простой графики, например, такой как логотипы. Изображения в формате GIF не используются для фотографий, потому что они не могут содержать столько цветовой информации как JPG-изображения. Однако GIF-изображения могут иметь прозрачные области и могут быть сжаты в файлы очень маленьких размеров. Также формат GIF поддерживает анимацию.
PNG - формат изображений, позволяющий, также как и JPG, отображать миллионы цветов и содержать прозрачные области. Однако, как правило, изображения с расширением.png имеют несколько больший размер, чем JPG или GIF.

HTML тег имеет два обязательных атрибута: src и alt .

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

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

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

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

Примечание: для добавления изображений на веб-страницу вы также можете воспользоваться CSS свойством background-image , которое позволяет обычный задний фон элемента заменить на картинку.

Атрибуты

src: Указывает браузеру расположение (URL-адрес) нужного изображения. Пример » alt: Предоставляет текстовое описание картинки, выводимое на экран только в случае, если картинка по каким-либо причинам не может быть отображена.

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

Пример » Если картинка используется в качестве украшения веб-страницы и не несет в себе никакой смысловой нагрузки, то вместо описания картинки в качестве значения можно оставить пустую строку (alt=""). height: Указывает высоту изображения в пикселях. ismap: Атрибут ismap является атрибутом булева типа. Его присутствие указывает браузеру, что картинка является частью карты-изображения расположенной на сервере (карта-изображение - изображение с интерактивными областями). Допустимые значения логического атрибута ismap: