Какой атрибут является обязательным для тега img – Тег | HTML справочник

Содержание

Тег | HTML справочник

HTML теги

Значение и применение

Изображения в HTML документе определяются тегом <img>.

Обращаю Ваше внимание, что элемент <img> имеет два обязательных атрибута: src, который определяет URL адрес изображения (допускается использовать как абсолютный, так и относительный адрес) и alt, который указывает альтернативный текст для изображения (для того случая, если изображение по каким-то причинам не было загружено).

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

Атрибуты

Атрибут	Значение	Описание
align	left right top bottom middle	Не поддерживается в HTML5. Определяет выравнивание изображения в соответствии с окружающими элементами.
alt	text	Определяет альтернативный текст для изображения (для того случая, если изображение по каким-то причинам не было загружено). Является обязательным атрибутом.
border	pixels	Не поддерживается в HTML5. Определяет ширину границы вокруг изображения.
crossorigin	anonymous use-credentials	Атрибут определяет, используется ли CORS при загрузке изображения. Изображения, загруженные с помощью CORS, могут использоваться в элементах <canvas>, при этом функциональность последних не ограничивается. У этого атрибута есть 2 допустимых значения: anonymous В этом случае перед загрузкой изображения выполняется кросс-доменный запрос (`Origin: HTTP header`), при этом не передаются параметры доступа (такие как: cookie, сертификат X.509, логин/пароль для базовой аутентификации по HTTP). В ответе сервера должен присутствовать заголовок `Access-Control-Allow-Origin: HTTP header`, иначе, использование изображения в <canvas> ограничивается. use-credentials Перед загрузкой изображения выполняется кросс-доменный запрос (`Origin: HTTP header`) с указанием параметров доступа (в виде — cookie, сертификата или пары логин/пароль). В ответе сервера должен присутствовать заголовок `Access-Control-Allow-Origin: HTTP header`, иначе, использование изображения в <canvas> ограничивается. Если данный атрибут не задан, то CORS при загрузке изображения не используется (отсутствует заголовок `Origin: HTTP header`), и как следствие, использование изображения в <canvas> ограничивается всегда. При неверном значении атрибута (содержится некорректное значение) используется значение anonymous.
height	pixels	Определяет высоту изображения.
hspace	pixels	Не поддерживается в HTML5. Определяет пробелы слева и справа от изображения.
ismap	ismap	Сообщает браузеру, что изображение является серверной картой-изображением.
longdesc	URL	Определяет URL адрес с аннотацией к изображению (URL более длинного, чем в атрибуте alt, описания изображения).
src	URL	Задает URL адрес изображения (допускается использовать как абсолютные, так и относительные адреса). Является обязательным атрибутом.
usemap	#mapname	Ссылается на элемент <map>, содержащий координаты для клиентской части карты-изображения.
vspace	pixels	Не поддерживается в HTML5. Определяет пробелы сверху и снизу изображения.
width	pixels	Определяет ширину изображения.

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

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования тега <img></title>
	</head>
	<body>
		<img src = "10.jpg" alt = "ничоси" width = "200" height = "200" title = "ничоси">
	</body>
</html>

Результат добавления изображения, с помощью тега <img> на HTML страницу:

Пример использование тега <img> в HTML документе.

Изображение как ссылка

Допускается использование изображения в качестве ссылки, для этого необходимо поместить наше изображение (тег <img>) между отрывающим и закрывающим тегом <a>:

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования изображения в качестве ссылки</title>
	</head>
	<body>
		<a href = "http://yandex.ru">
			<img src = "10.jpg" alt = "Поиск в Яндекс">
		</a>
	</body>
</html>

При этом при клике по картинке будет осуществлён переход по заданой ссылке (в нашем случае откроется сайт компании Яндекс):

Отличия HTML 4.01 от HTML 5

В HTML 5 была прекращена поддержка атрибутов align, border, hspace, vspace.

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

img {
display: inline-block;
}

Поддержка глобальных атрибутов

Элемент поддерживает «глобальные атрибуты».

Атрибуты событий

Элемент поддерживает «атрибуты событий».

HTML теги

basicweb.ru

Тег | HTML справочник

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

Описание

Для вставки графических изображений в HTML-документ используется HTML тег <img> (

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

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

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

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

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

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

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

<a href="#"><img src="image.png" alt="красивая картинка"></a>

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

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

Атрибуты

src:

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

alt:

Предоставляет текстовое описание картинки, выводимое на экран только в случае, если картинка по каким-либо причинам не может быть отображена.

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

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

height:

Указывает высоту изображения в пикселях.

ismap:

Атрибут ismap является атрибутом булева типа. Его присутствие указывает браузеру, что картинка является частью карты-изображения расположенной на сервере (карта-изображение — изображение с интерактивными областями). Допустимые значения логического атрибута ismap:

 
<img ismap>
<img ismap="ismap">
<img ismap="">

При нажатиии на интерактивную область карты-изображения, координаты клика отправляются на сервер в строке запроса URL-адреса.

Примечание: атрибут ismap используется только если элемент <img> является дочерним элементом тега <a>, содержащего атрибут href.

usemap:

Определяет изображение в качестве карты-изображения. Значение (обязательно должно начинаться с символа «#»), указанное в данном атрибуте, ассоциируется со значением атрибута name или id тега <map> и создает связь между элементами <img> и <map>. Пример »

Примечание: атрибут usemap нельзя использовать, если элемент <img> является потомком элемента <a> или <button>.

width:

Указывает ширину изображения в пикселях.

Примечание: всегда указывайте атрибуты width и height для изображения. В этом случае пространство требуемое для изображения будет заранее резервироваться браузером при загрузке страницы. Поскольку браузер сам не может заранее вычислить размер изображения, без этих атрибутов разметка страницы во время загрузки может отображаться некорректно, до тех пор пока изображение не будет загружено. Это будет особенно ощутимо для тех пользователей, у которых медленный интернет.

Тег <img> так же поддерживает Глобальные атрибуты и События

Стиль по умолчанию

img {
    display: inline-block;
}

Пример

<img src="images.jpg" alt="цветок">

Результат данного примера в окне браузера:

puzzleweb.ru

Тег HTML картинка, изображение

Тег <img> используется для вставки графического изображения (картинки) в HTML документ.

HTML тег <img> имеет два обязательных атрибута: src — адрес файла картинки и alt — альтернативный текст, который будет отображен, если картинка не может быть загружена. Также не лишним будет использование глобального атрибута title.

Изображение из тега <img> может быть ссылкой. Для этого нужно обвернуть тег <img> тегом ссылки <a> (см. пример ниже).

Синтаксис

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

Отображение в браузере

Пример использования <img> в HTML коде

<!DOCTYPE html>
<html>
<head>
<title>Вставка картинки в HTML документ</title>
</head>
<body>
<!-- Картинка на веб-странице -->
    <img src="the-eiffel-tower.jpg" alt="Эйфелева башня" title="Эйфелева башня"><!-- картинка-ссылка -->
<a href="page.html"><img src="the-eiffel-tower.jpg" alt="Эйфелева башня" title="Эйфелева башня"></a>
</body>
</html>

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

Атрибуты

Атрибут	Значение	Описание
alt	текст	Альтернативный текст, который будет выведен, если картинка не будет загружена.
height	пиксели	Высота изображения.
ismap	ismap пусто	Логический атрибут. Указывает, что картинка является серверной (server-side) картой-изображением.
longdesc	URL	URL файла, где содержится детальное описание картинки.
src	URL	Указывает URL файла картинки.
usemap	id_map_элемента	Указывает, что картинка является клиентской (client-side) картой-изображением.
width	пиксели	Ширина изображения.

Устаревшие атрибуты

Указанные ниже атрибуты не поддерживаются в HTML5. Используйте CSS вместо них.

Атрибут	Значение	Описание
align	top bottom middle left right	Правило выравнивания картинки.
border	пиксели	Ширина границ картинки.
hspace	пиксели	Ширина горизонтальных отступов (пустое место слева и справа от картинки).
vspace	пиксели	Ширина вертикальных отступов (пустое место сверху и снизу от картинки).

guruweba.com

Тег // Вебшкола онлайн

Пример

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

Тег <img> используется для вставки изображения на страницу.

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

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

Браузерная поддержка

Тег <img> поддерживается всеми основными браузерами.

Отличия между HTML и XHTML

В HTML тег <img> не имеет закрывающего тега, а в XHTML он должен быть закрыт.

Атрибуты «align», «border», «hspace» и «vspace» были признаны устаревшими в HTML 4.01 и не поддерживаются в XHTML 1.0 Strict DTD.

Совет

Атрибут alt является альтернативным текстом изображения, а не текстом, всплывающим при наведении мыши. Для вставки всплывающего текста для изображения используйте атрибут title, например, <img src=»angry.gif» alt=»Злое лицо» title=»Злое лицо» />

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

DTD показывает в какой версии DTD использование атрибута разрешено. S=Strict, T=Transitional и F=Frameset.

Атрибут	Значение	Описание	DTD
alt	текст	Альтернативный текст для изображения	STF
src	URL	Адрес изображения	STF

Альтернативные атрибуты

DTD показывает в какой версии DTD использование атрибута разрешено. S=Strict, T=Transitional и F=Frameset.

Атрибут	Значение	Описание	DTD
align	top bottom middle left right	Устарело. Используйте CSS. Выравнивание изображения относительно окружающих элементов	TF
border	пиксели	Устарело. Используйте CSS. Ширина рамки вокруг изображения	TF
height	пиксели %	Высота изображения	STF
hspace	пиксели	Устарело. Используйте CSS. Отступ слева и справа до соседних элементов	TF
ismap	ismap	Указывает на то, что изображение является серверной картой изображением. Редко используется. Используйте лучше usemap	STF
longdesc	URL	Указывает на URL, содержащий документ с полным описанием изображения. Слабо поддерживается браузерами	STF
usemap	#название_карты	Указывает на то, что изображение является клиентской картой-изображением	STF
vspace	пиксели	Устарело. Используйте CSS. Отступ сверху и снизу до соседних элементов	TF
width	пиксели %	Ширина изображения	STF

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

Тег <img> поддерживает следующие стандартные атрибуты:

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

Дополнительная информация о стандартных атрибутах.

События

Тег <img> поддерживает следующие атрибуты событий:

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

Дополнительная информация о cобытиях HTML.

weblabla.ru

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

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

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

Картинки на сайте также можно размещать с помощью фона. См. CSS свойство background.

Тег по умолчанию строчно-блочный. Про строчные и блочные элементы см. свойство display.

См. также теги figure и figcaption, которые созданы для группировки изображений и подписей под ними.

Атрибуты

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

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

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

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

Примеры

Пример

В данном примере на сайт добавлена картинка. Так как не заданы атрибуты height и width, картинка будет иметь свой реальный размер:

<img src="images/img.jpg" alt="Обезьянка">

Результат выполнения кода:

Пример

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

<img src="images/img.jpg" alt="Обезьянка">

Результат выполнения кода:

Пример

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

<img src="images/img.jpg" alt="Обезьянка">

Результат выполнения кода:

Пример

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

<img src="images/img.jpg" alt="Обезьянка">

Результат выполнения кода:

Пример

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

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

Результат выполнения кода:

code.mu

Атрибут 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>

basicweb.ru

Тег IMG

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

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

Синтаксис
<img src=…>

Закрывающий тег
Не требуется.

Параметры
align — определяет как рисунок будет выравниваться по краю и способ обтекания текстом.
alt — альтернативный текст для изображения.
border — толщина рамки вокруг изображения.
height — высота изображения.
hspace — горизонтальный отступ от изображения до окружающего контента.
ismap — говорит браузеру, что картинка является серверной картой-изображением.
lowsrc — путь к графическому файлу низкого разрешения для предварительного отображения.
src — путь к графическому файлу.
vspace — вертикальный отступ от изображения до окружающего контента.
width — ширина изображения.
usemap — ссылка на тег MAP, содержащий координаты для клиентской карты-изображения.

Пример 1. Использование тега IMG

<a href=lorem.html><img src=/images/lorem.gif width=135 height=28 align=right vspace=4 hspace=4 border=0></a> Lorem ipsum dolor sit amet…

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

Параметр ALIGN

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

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

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

Хотя все значения параметра align поддерживаются браузерами, аргументы absbottom, absmiddle, baseline и texttop не описаны в спецификации HTML 4.

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

Пример 2. Выравнивание рисунка

<html>
<body>
<img src=/images/square.gif width=20 height=20 align=right> Lorem ipsum dolor sit amet, consectetuer adipiscing elit…
</body>
</html>

Примечание
Хотя все значения параметра align поддерживаются браузерами, аргументы absbottom, absmiddle, baseline и texttop не поддерживаются спецификацией HTML 4.

Параметр ALT

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

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

Синтаксис
<img alt=»текст»>

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

Значение по умолчанию
Нет.

Пример 3. Добавление альтернативного текста

<html>
<body>
<a href=/index.html><img src=home.gif alt=»Вернуться на главную страницу»></a>
</body>
</html>

Параметр BORDER

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

Если изображение является ссылкой, рамка добавляется автоматически, толщина ее составляет один пиксел, а цвет рамки совпадает с цветом ссылок. Чтобы убрать рамку, следует задать параметр border=0.

Синтаксис
<img border=толщина рамки>

Аргументы
Любое целое положительное число в пикселах.

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

Пример 3. Рамка вокруг рисунка

<html>
<body text=#00ff00>
<img src=sample.gif width=50 height=50 border=2> рамка зеленого цвета толщиной 2 пиксела
</body>
</html>

Параметр HEIGHT и WIDTH

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

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

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

Синтаксис
<img height=высота>
<img width=ширина>

Аргументы
Любое целое положительное число в пикселах или процентах.

Значение по умолчанию
Исходная ширина или высота изображения.

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

<html>
<body>
<img src=sample.gif width=150 height=150>
</body>
</html>

Параметр HSPACE и VSPACE

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

Синтаксис
<img hspace=…>
<img vspace=…>

Аргументы
Любое целое положительное число в пикселах.

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

Пример 5. Отступы от рисунка

<html>
<body>
<img src=sample.gif width=150 height=150 hspace=5 vspace=7>
</body>
</html>

Параметр ISMAP

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

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

Синтаксис
<img ismap>

Аргументы
Нет.

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

Пример 6. Рисунок как карта-изображение

<html>
<body>
<a href=http://www.htmlbook.ru/cgi-bin/map.cgi><img src=sample.gif width=150 height=150 ismap></a>
</body>
</html>

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

Параметр LOWSRC

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

Синтаксис
<img lowsrc=URL>

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

Значение по умолчанию
Нет.

Пример 7. Путь к рисунку низкого качества

<html>
<body>
<img src=sample.jpg width=450 height=450 lowsrc=samplelow.gif>
</body>
</html>

Параметр SRC

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

Синтаксис
<img src=URL>

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

Значение по умолчанию
Нет.

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

in-sites.ru

Какой атрибут является обязательным для тега img – Тег | HTML справочник

Тег | HTML справочник

Значение и применение

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

Атрибуты

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

Изображение как ссылка

Отличия HTML 4.01 от HTML 5

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

Поддержка глобальных атрибутов

Атрибуты событий

Тег | HTML справочник

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

Описание

Атрибуты

Стиль по умолчанию

Пример

Тег HTML картинка, изображение

Синтаксис

Отображение в браузере

Пример использования <img> в HTML коде

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

Атрибуты

Устаревшие атрибуты

Тег // Вебшкола онлайн

Пример

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

Браузерная поддержка

Отличия между HTML и XHTML

Совет

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

Альтернативные атрибуты

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

События

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

Атрибуты

Примеры

Пример

Пример

Пример

Пример

Пример

Атрибут width тега | HTML справочник

Значение и применение

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

Значения атрибута

Отличия HTML 4.01 от HTML 5

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

Тег IMG

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

Параметр ALIGN

Параметр ALT

Параметр BORDER

Параметр HEIGHT и WIDTH

Параметр HSPACE и VSPACE

Параметр ISMAP

Параметр LOWSRC

Параметр SRC

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

Рубрики

Рубрики