Включение графики в HTML-документ

Растровая графика

Векторная графика

Кодирование графической информации

Существуют два основных способа кодирования графической информации:

ВЕКТОРНЫЙ	РАСТРОВЫЙ
· Scalable Vector Graphics (SVG) · Computer Graphics Metafile(CGM)	· Joint Photographic Experts Group (JPEG) · Portable Network Graphics (PNG) · Graphics Interchange Format (GIF)

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

Растровый способ заключается в том, что все изображение по вертикали и горизонтали разбивается на достаточно мелкие прямоугольники - так называемые элементы изображения, или пиксели (Picture Element = pixel или pel). В файле, содержащем растровую графику, хранится информация о цвете каждого пикселя данного изображения. Чем меньше прямоугольники на которые разбивается изображение, тем больше разрешение, то есть, тем более мелкие детали можно закодировать в таком графическом файле.

HTML-документ — это текстовый файл.

Графическую информацию размещают не в самом HTML-файле, а в отдельных файлах.

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

Существуют два различных способа использования изображений в Web-документе:

• Связать изображение с документом, используя элемент A. Активизация этой связи приводит к появлению изображения, либо в том же самом окне, либо в другом

• Вставить изображение в документ, используя элемент IMG. Изображение становится частью документа и загружается вместе с ним и выводится, как его часть.

Тег <IMG>

Предназначен для отображения на web-странице изображений в графическом формате

Атрибуты:

· SRC - Путь к графическому файлу. Обязательный атрибут.
src =“URL“

· ALT - Альтернативный текст для изображения.
alt =“текст”

· TITLE - Текст всплывающей подсказки.
title =“текст”

· ALIGN - Определяет как рисунок будет выравниваться по краю и способ обтекания текстом.
align =bottom | top | middle | right | left

· BORDER - Толщина рамки вокруг изображения.
border = n

· WIDTH - Ширина изображения. width = n|%

• HEIGHT - Высота изображения. height = n|%
• HSPACE - Горизонтальный отступ от изображения до окружающего контента. hspace = n
• VSPACE - Вертикальный отступ от изображения до окружающего контента.

vspace = n

• ISMAP - Говорит браузеру, что картинка является серверной картой-изображением. ismap
• USEMAP - Ссылка на тег <MAP>, содержащий координаты для клиентской карты-изображения.
  usemap =URL

<p> Пример вставки изображения толщиной 5 рх.

<IMG SRC="/images/square.gif " ALT="Квадрат" TITLE =" Пример использования изображения" ALIGN="right" BORDER ="5" WIDTH="150" HEIGHT="150" HSPACE="5" VSPACE="7" >

в html-документ с заданным размером 150х150, рамкой вокруг рисунка

Для изображения определено расположение по правому краю. Установлены отступы: горизонтальный – 5 рх и вертикальный – 7 рх. </p>

Дата добавления: 2014-01-06