В данном материале я вам расскажу об очень важных тегах 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, а также как сделать картинку ссылкой.

Описание

Для вставки графических изображений в 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: При нажатиии на интерактивную область карты-изображения, координаты клика отправляются на сервер в строке запроса URL-адреса.

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

Usemap: Определяет изображение в качестве карты-изображения. Значение (обязательно должно начинаться с символа "# "), указанное в данном атрибуте, ассоциируется со значением атрибута name или id тега

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

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

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

Пример

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

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

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

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

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

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

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

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

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

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

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

DTD

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

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

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

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

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

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

События

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

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

Дополнительная информация о

Тег

Тег используется для вставки изображений в HTML-страницу. Он имеет два обязательных атрибута: src и alt . Изображения в интернете играют одну из ключевых ролей. Они активно применяются в оформлении сайтов, в ссылках (вставкой их в тег ), наглядно дополняют текстовую информацию и т.д. Если тег используется внутри ссылки или задает карту изображений, то вокруг самого изображения некоторые браузеры отображают рамку, которую можно убрать при помощи атрибута border .

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

Также, для ускорения загрузки страниц рекомендуется устанавливать атрибуты width и height , тега . Тогда браузер не будет ожидать полной загрузки изображения, он просто выделит под него место и будет загружать страницу дальше, а его подгрузит потом. К тому же, если одно изображение используется на странице несколько раз (значение атрибута src одинаковое), то браузер загружает его с сервера только один раз, а потом берет из кэш-памяти.

Атрибуты

Личные атрибуты:

• align - Устанавливает положение изображения относительно окружающего контекста.
• alt - Обязательный атрибут. Альтернативный текст, если в браузере отключен показ изображений.
• border - Устанавливает размер рамки вокруг изображения.
• height - Переопределяет высоту изображения.
• hspace - Размер боковых полей изображения от его краев до окружающего контекста.
• ismap - Позволяет использовать серверные карты изображений.
• src - Обязательный атрибут. Указывает адрес местонахождения изображения.
• title - Выводит «всплывающую» подсказку при наведении курсора мыши на изображение.
• usemap - Позволяет использовать клиентские карты изображений.
• vspace - Устанавливает размер верхних и нижних полей изображения от его краев до окружающего контекста.
• width - Переопределяет ширину изображения.

• accesskey - устанавливает клавишу быстрого доступа для фокусировки на HTML-элементе.
• class - задает имя класса или классов тега, используемых в CSS (Каскадные таблицы стилей).
• dir - указывает направление текста внутри элемента.
• - задает имя идентификатора HTML-тега, который может использоваться в качестве «якоря» или в таблицах стилей.
• lang - указывает язык, на котором написан текст внутри HTML-элемента.
• style - необходим для применения встроенных стилей CSS к тегу.
• tabindex - устанавливает порядок табуляции между элементами (клавиша Tab).
• title - выводит всплывающую подсказку при наведении курсора мыши на HTML-элемент.

Тип тега

Назначение: изображения .

Модель тега: inline (встроенный, уровня строки).

Может содержать: данный элемент является пустым/Empty.

Открывающий тег: необходим. Закрывающий тег: запрещен.

Синтаксис

Пример HTML: применение тега IMG

А вы знаете, что такое знак

Результат.

Поддержка версиями HTML

Версия:	HTML 4.01	HTML 5	XHTML 1.0	XHTML 1.1
Поддержка:	Да	Да	Да	Да

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

Браузер:	Internet Explorer	Google Chrome	Mozilla Firefox	Opera
Версия:	6.0 и выше	2.0 и выше	2.0 и выше	9.2 и выше	3.1 и выше
Поддержка:	Да	Да	Да	Да	Да

HTML теги

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

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

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

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

Тег			Opera		IExplorer	Edge
	Да	Да	Да	Да	Да	Да

Атрибуты

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

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

src = "10.jpg" alt = "ничоси" width = "200" height = "200" title = "ничоси" >

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