Урок 5. Вставка графики и мультимедиа
dorofeeva 6-11-2012, 23:11 5 253 Уроки по HTMLВставка изображений
Иллюстрации в тексте делают документ более привлекательным. Однако графические изображения довольно медленно загружаются. Поэтому использовать графику на 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. Вставляем одну и ту же картинку. Первый раз просто так. Второй - задаем границу. Третий - увеличиваем картинку, задав размер по ширине, несколько больше,чем исходный. Для пропорционального увеличения, высоту задавать не обязательно. |
 |
| А это результат выполнения кода. |  |