БЛОГ

НАШ ФОРУМ

Здесь может быть ваша реклама...

1000
участников

5500 читателей

Графика в HTML

Тэг <img> позволяет WEB - вводить в HTML-документ ссылки на графические и иные типы данных. Применение этого тэга способствует улучшению внешнего вида документов и их функциональности.

В HTML-документах - два способа применения (использования) графики. Прежде всего, - внедрение в документ графических образов, что дает возможность пользователю видеть изображения прямо в контексте иных элементов документа. При проектировании документов эта техника используется чаще всего. Порой ее называют "inline image".

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

<img src="./pic/Rolls.png"> Rolls </img>

alt
Необязательный атрибут, который задает текст. В случае, когда WEB-браузер не поддерживает изображение графики или в его настройках отключена загрузка изображений, при наведении на картинку взамен нее браузером будет отображен текст. Если же данного параметра нет, то там, где должен быть рисунок значительное количество браузеров выводит «иконку», иными словами, пиктограмму. Активизировав ее, можно увидеть изображение.

. Например:

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

pixels

percent

ширина изображения в пикселях от его истинной (исходной) ширины.

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

height=200

height=80%

Значения Описание Пример

width

Этот необязательный атрибут указывает на ширину рисунка. Если width отсутствует, то применяется

оригинальная его ширина. Этот атрибут разрешает выбирать масштаб: сужать или расширять

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

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

рисунок может быть отображен некорректно.

pixels

percent

width=100

width=50%

Значения Описание Пример

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

left рисунок будет слева относительно всех других элементов

right рисунок будет справа относительно всех других элементов

top элементы выравниваются по верхнему краю изображения

middle элементы будут выровнены по центру изображения

bottom элементы выравниваются по нижнему краю изображения

border
Этот атрибут определяет размер ширины рамки возле рисунка, в пикселях. Если установлен 0, то рамка не изображается. К примеру:

vspace
Данный необязательный атрибут, задает размер пустоты над рисунком и под ним. Это необходимо, чтобы текст его не затрагивал. Указывается в пикселях. Это очень важно при динамическом формировании рисунков, когда документ нельзя увидеть заранее.

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

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