Тэг <img> позволяет WEB - вводить в HTML-документ ссылки на графические и иные типы данных. Применение этого тэга способствует улучшению внешнего вида документов и их функциональности.
В HTML-документах - два способа применения (использования) графики. Прежде всего, - внедрение в документ графических образов, что дает возможность пользователю видеть изображения прямо в контексте иных элементов документа. При проектировании документов эта техника используется чаще всего. Порой ее называют "inline image".
src Это обязательный атрибут, который задает гиперссылку рисунка. Он должен храниться в том графическом формате, который поддерживает браузер. В настоящее время большее количество браузеров поддерживает форматы изображений GIF, JPG, и PNG. Они также разрешают хранить информацию в сжатом виде. Это значит - уменьшаются сроки загрузки страницы.
<img src="./pic/Rolls.png"> Rolls </img>
<img src="./pic/Rolls.png" />
alt Необязательный атрибут, который задает текст. В случае, когда WEB-браузер не поддерживает изображение графики или в его настройках отключена загрузка изображений, при наведении на картинку взамен нее браузером будет отображен текст. Если же данного параметра нет, то там, где должен быть рисунок значительное количество браузеров выводит «иконку», иными словами, пиктограмму. Активизировав ее, можно увидеть изображение.
. Например:
<img src="./pic/Rolls.png" alt=" Rolls " />
height Это тоже необязательный атрибут; он указывает на высоту рисунка. В случае, если этот параметр отсутствует, то применяется оригинальная высота изображения. Этот атрибут разрешает выбирать масштаб: сужать или расширять изображение по вертикали, - и позволяет точнее определять наружный вид документа. В случае указания высоты рисунка в пикселях не стоит помимо всего прочего, забывать о том, что у пользователей, которые посещаютэту страницу, экранное разрешение, возможно, будет отличаться от Вашего. Тогда и рисунок может быть отображен некорректно.
pixels
percent
ширина изображения в пикселях от его истинной (исходной) ширины.
ширина изображения в процентах от ширины родительского элемента или экрана
height=200
height=80%
Значения Описание Пример
<img src="./pic/Rolls.png" alt="Размер изображения 180х120 пикселей" height="150" />
width
Этот необязательный атрибут указывает на ширину рисунка. Если width отсутствует, то применяется
оригинальная его ширина. Этот атрибут разрешает выбирать масштаб: сужать или расширять
изображение по горизонтали. В случае указания ширины изображение в пикселях надо помнить о том,
что у посетителей страницы экранное разрешение, возможно, будет отличаться от Вашего. Тогда и
рисунок может быть отображен некорректно.
<img src="./pic/Rolls.png" alt="Размер изображения 180х120 пикселей" width="50%" />
pixels
percent
ширина изображения в пикселях от его истинной (исходной) ширины.
ширина изображения в процентах от ширины родительского элемента или экрана
width=100
width=50%
Значения Описание Пример
align Этот необязательный атрибут описывает место, где располагается рисунок по отношению к остальным элементам. В случае неиспользования данного атрибута большая часть браузеров в левой стороне экрана располагает изображение, а справа от него - остальные элементы.
left рисунок будет слева относительно всех других элементов
right рисунок будет справа относительно всех других элементов
top элементы выравниваются по верхнему краю изображения
middle элементы будут выровнены по центру изображения
bottom элементы выравниваются по нижнему краю изображения
border Этот атрибут определяет размер ширины рамки возле рисунка, в пикселях. Если установлен 0, то рамка не изображается. К примеру:
vspace Данный необязательный атрибут, задает размер пустоты над рисунком и под ним. Это необходимо, чтобы текст его не затрагивал. Указывается в пикселях. Это очень важно при динамическом формировании рисунков, когда документ нельзя увидеть заранее.
<img src="./pic/Rolls.png" vspace=20 />
hspace Это необязательный атрибут, который указывается в пикселях. Он задает размер пустого пространства справа и слева от изображения. Атрибут необходим для того, чтобы изображение не задевал текст. Это очень важно при динамическом формировании рисунков, когда документ нельзя увидеть заранее.
<img src="./pic/Rolls.png" hspace=20 />
usemap Сообщает веб-браузеру о том, что установленное изображение - это карта ссылок и разрешает совершать пользователям какие-либо действия. Для этого необходимо щелкнуть мышкой на определенном месте рисунка. Эта возможность является непосредственным расширением HTML. Об этом разговор пойдет далее.