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

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

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

Синтаксис

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

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

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

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. Выравнивание рисунка

Lorem ipsum dolor sit amet, consectetuer adipiscing elit...

Параметр ALT

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

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

Синтаксис

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

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

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

alt="Вернуться на главную страницу" >

Параметр BORDER

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

Синтаксис

Аргументы

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

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

рамка зеленого цвета толщиной 2 пиксела

Параметр HEIGHT и WIDTH

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

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

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

Синтаксис

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

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

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

Параметр HSPACE и VSPACE

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

Синтаксис

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

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

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

Параметр ISMAP

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

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

Синтаксис

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

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

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

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

Параметр LOWSRC

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

Синтаксис

Аргументы

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

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

Параметр SRC

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

Синтаксис

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

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

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

Описание

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

С помощью уже знакомого тебе атрибута align можно управлять выравниванием картинок относительно других элементов html-страницы. У атрибута align есть несколько значений, но нас больше всего на данный момент интересуют два:

• left - изображение располагается у левого края страницы, а текст обтекает картинку справа;


• right - изображение располагается у правого края страницы, а текст и другие элементы обтекают картинку слева.

Н апример, HTML-код

браузер покажет так

А этот HTML-код:

будет выглядеть вот так:

Д ля прекращения обтекания картинки текстом можно использовать тег BR (знакомый нам из прошлого раздела про ). У тега BR есть атрибут clear , который может принимать три значения:

• left - прекращение обтекания текстом картинок, выровненных по левому краю;


• right - прекращение обтекания текстом картинок, выровненных по правому краю;


• all - прекращение обтекание текстом картинок, выровненных и по левому, и по правому краю.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Сейчас почти ни один сайт не обходится без использования картинок в HTML-страницах, ведь как гласит народная мудрость: «Лучше один раз увидеть, чем сто раз услышать». Прочитав данную статью вы узнаете как использовать тег IMG, с помощью которого добавляются изображения на страницы сайта. Мы будем рассматривать примеры для HTML 5, но они будут работать в том числе для более ранних версий языка гипертекстовой разметки.

Как вставить картинку в HTML-страницу

Для вставки картинки в страницу используется HTML-тег IMG. Для изображения должно быть указано как минимум два атрибута src (путь к файлу с картинкой) и alt (альтернативный текст, который видит пользователь если изображение не загрузилось). Атрибут alt может быть пустым, но должен присутствовать обязательно. Также можно задать атрибут title и тогда при наведении курсора на изображение будет отображаться заданный в данном атрибуте текст.

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

Если страница находится по адресу http://www..html, а изображение http://www..jpg, то тогда путь к изображению указывается таким образом:

Если страница находится в папке http://www..сайт/logo.jpg, то путь будет таким:

Если картинка находится в папке http://www.сайт/images/, то независимо от того в какой папке находится страница на том же сайте, в которую вставляется изображение, путь к файлу можно указать следующим образом:

Либо можно указать полный путь к файлу картинки, если он расположен на другом сайте:

Ширина (width) и высота (height) изображения

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

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

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

Обтекание картинки в тексте и отступы

По-умолчанию текст отображается под изображением. Для того чтобы текст обтекал картинку используется CSS свойство float, которое заменяет атрибут align. Если мы хотим чтобы картинка была слева от текста, а текст обтекал ее справа и снизу, то тогда задается значение left для CSS свойства float, а если картинка должна быть справа, то тогда указывается значение right:

Также можно задать отступы сверху, справа, снизу и слева от картинки:

То же самое можно задать в сокращенной форме:

Либо можно задать отступы по вертикали и по горизонтали двумя значениями свойства margin вместо устаревших атрибутов vspace и hspace. Допустим нам нужно чтобы сверху и снизу был отступ 10 пикселей, а слева и справа 8 пикселей:

Как сделать картинку ссылкой на страницу

Либо мы можем задать свои цвет, тип и толщину рамки картинки:

Форматы изображений для веб

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

Копирование статьи запрещено.