06.11.2012

Урок 5. Вставка графики и мультимедиа

Вставка изображений

Иллюстрации в тексте делают документ более привлекательным. Однако графические изображения довольно медленно загружаются. Поэтому использовать графику на Web-страницах нужно в разумных пределах.

 

 

Браузеры «понимают» три графических формата

Формат   GIF
Формат   JPG
Формат   PNG
GIF (Graphics Interchange Format)
Картинки в этом формате поддерживают 28=256 цветов. Некоторые GIF-файлы содержат не одну картинку, а небольшой мультик.

JPG (Joint Photographic Experts Group)
Этот формат специально разработан для передачи фотографий. Он поддерживает 224=16777216 цветов и позволяет получать изображения высокого качества.

PNG (Portable Network Graphics)
Этот формат поддерживает 248 цветов. Обладает высокой степенью сжатия и обладает всеми возможностями формата GIF.

 

Для вставки рисунка используется непарный тег <IMG />, который не имеет закрывающего тега, но имеет много атрибутов!

Атрибут    src = имя файла         (URL-адрес изображения).
Атрибут  alt = "текст надписи”  (задает надпись, которая появляется на экране, если картинка не найдена).
Атрибут  title   (задает подсказку, всплывающую при наведении указателя мыши на изображение).
Атрибуты   width = n, height = m (задают ширину и высоту рисунка в пикселях или в процентах от исходного рисунка).
Атрибут   border = n   (задает рамку вокруг картинки толщиной n пикселей).
Атрибут  hspace = n   (задает ширину в пикселях пустого поля справа и слева от изображения).
Атрибут  vspace = n   (задает ширину в пикселях пустого поля сверху и снизу от изображения).
Атрибут   align    (определяет положение картинки по отношению к соседним элементам документа)
align = top  выравнивание по верхнему краю;
align = middle выравнивание по центру;
align = bottom  по нижнему краю;
align = left  слева от текста и других объектов;
align = right  справа от текста и других объектов.

Вот пример:

Три тега IMG.

Вставляем одну и ту же картинку.

Первый раз просто так.

Второй - задаем границу.

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

Для пропорционального увеличения, высоту задавать не обязательно.

Урок 5. Вставка графики и мультимедиа

А это результат выполнения кода. Урок 5. Вставка графики и мультимедиа