Презентация по Web программированию на тему Встраивание изображении в HTML
Встраивание изображений в HTML-документыДля встраивания изображений в HTML-документ следует использовать тег <IMG>, имеющий единственный обязательный параметр SRC, определяющий URL-адрес файла с изображением. Простейший пример встраивания изображения:<IMG SRC=picture.gif>
Выравнивание изображений{0E3FDE45-AF77-4B5C-9715-49D594BDF05E}Значение ALIGNДействие параметраТОРВерхняя граница изображения выравнивается по самому высокому элементу текущей строкиТЕХТТОРВерхняя граница изображения выравнивается по самому высокому текстовому элементу текущей строкиMIDDLEВыравнивание середины изображения по базовой линии текущей строкиABSMIDDLEВыравнивание середины изображения посередине текущей строкиBASELINE или BOTTOMВыравнивание нижней границы изображения по базовой линии текущей строкиABSBOTTOMВыравнивание нижней границы изображения по нижней границе текущей строкиLEFTИзображение прижимается к левому полю окна. Текст обтекает изображение с правой стороныRIGHTИзображение прижимается к правому полю окна. Текст обтекает изображение с левой стороны
Задание размеров выводимого изображенияТэг встраивания изображений имеет два необязательных параметра, указывающих размеры изображения при отображении — WIDTH и HEIGHT. Значения параметров могут указываться как в пикселах, так и в процентах от размеров окна просмотра.Значения параметров ширины и высоты изображения могут не совпадать с истинными размерами изображения. В этом случае браузеры автоматически при загрузке изображений выполняют его перемасштабирование.
Отделение изображения от текста Для тега <IMG> можно задавать параметры HSPACE и VSPACE, значения которых определяют отступы от изображения, оставляемые пустыми, соответственно, по горизонтали и вертикали. Это гарантирует, что между текстом и изображением останется пространство, необходимое для нормального восприятия.
Рамки вокруг изображений Изображение, встраиваемое на страницу, можно поместить в рамку различной ширины. Для этого служит параметр BORDER тега <IMG>. В качестве значения параметра используется число, означающее толщину рамки в пикселах. По умолчанию рамка вокруг изображений не рисуется. Исключением из этого правила является случай, когда изображение является ссылкой.
Альтернативный текст Одним из параметров тега <IMG> является параметр ALT, определяющий альтернативный текст. Его указание дает возможность пользователям неграфических браузеров или пользователям, работающим в режиме отключения загрузки изображений, получить некоторую текстовую информацию о встроенных изображениях.
Использование изображения в качестве ссылки Графические изображения могут использоваться не только в качестве иллюстраций, но и выполнять роль указателей гипертекстовых связей. Для обеспечения работы изображения в качестве ссылки на другие ресурсы достаточно включить изображение внутрь тэга-контейнера <А>. Пример: <А HREF=My_doc.html><IMG SRC=map.gif></A>
Параметр LOWSRC Его значение определяет файл с альтернативным изображением, которое должно появляться при первом проходе выдачи на экран загружаемого документа. В качестве изображения, указываемого значением параметра LOWSRC, рекомендуется выбирать картинку того же содержания, но более низкого разрешения. Изображения такого рода занимают значительно меньше места ибыстро загружаются. Это позволяет уже на первом проходе формирования документа увидеть общие черты изображений и не ожидать их полной загрузки. Пример записи:<IMG SRC=main.gif LOWSRC=low.gif>
Какой формат предпочесть — GIF или JPG формат GIF лучше всего подходит для следующих типов изображений: изображений с ограниченным количеством используемых цветов;изображений, имеющих четкие границы и края, что свойственно большинству изображений типа меню, кнопок и графиков;изображений, в состав которых входит текст. Формат JPG больше подходит для хранения следующих изображений: фотографий, полученных со сканера или цифровой камеры, а также фотореалистичных изображений, построенных на основе компьютерных расчетов (ray-tracing rendering);графики со сложным сочетанием цветов и оттенков;любое изображение, которое требует более 256 цветов.