Лабораторная работа №5. Графика в web-страницах Цель работы Основные понятия

Лабораторная работа №5. Графика в web-страницах
Цель работы: Познакомиться с возможностями HTML по использованию
графики в web-страницах.
Основные понятия.
В общем, изображения на web-страницах могут использоваться двумя
способами: в качестве фонового изображения, на котором располагаются
элементы основного документа, и изображения, встраиваемые в документ.
На web-страницах в подавляющем большинстве случаев используется
растровая графика двух форматов: GIF и JPG. Эти два формата
непосредственно поддерживаются всеми браузерами, а для использования
большинства других графических форматов потребуются специальные
средства.
Встраивание изображений в HTML-документы. Для встраивания
изображений в HTML-документ следует использовать тэг <IMG>, имеющий
единственный обязательный параметр SRC, определяющий URL-адрес файла с
изображением.
<IMG SRC="http://www.server.ru/pic/risunok.gif">
или
<IMG SRC=risunok.gif >
Данный тэг может иметь ряд других параметров.
При включении графического изображения в документ можно указывать
его расположение относительно текста или других элементов страницы. Способ
выравнивания изображения задается значением параметра ALIGN тэга <IMG>,
который может принимать следующие значения:
 ТОР – верхняя граница изображения выравнивается по самому
высокому элементу текущей строки;
 ТЕХТТОР – верхняя граница изображения выравнивается по самому
высокому текстовому элементу текущей строки;
 MIDDLE – выравнивание середины изображения по базовой линии
текущей строки;
 ABSMIDDLE – выравнивание середины изображения посередине
текущей строки;
 BASELINE или BOTTOM – выравнивание нижней границы изображения
по базовой линии текущей строки;
 ABSBOTTOM – выравнивание нижней границы изображения по нижней
границе текущей строки;
 LEFT – изображение прижимается к левому полю окна. Текст обтекает
изображение с правой стороны;
 RIGHT – изображение прижимается к правому полю окна. Текст
Создание веб-страниц
обтекает изображение с левой стороны.
По умолчанию изображения выравниваются по базовой линии.
В чем разница между базовой линией и нижней границей строки? Или
различие между самым высоким элементом строки и самым высоким
текстовым элементом строки? Результат действия этих параметров может
отличаться в зависимости от содержимого рассматриваемой строки.
Базовая линия (BASELINE или BOTTOM) – это нижняя часть линии текста,
которая проводится без учета нижней части некоторых символов, например,
букв типа j, q, у. В отличие от выравнивания по базовой линии, при задании
значения ABSBOTTOM выравнивание выполняется по нижней части самого
низкого элемента в строке, т. е. по одному из символов строки, имеющему
элементы, лежащие ниже базовой линии.
Тэг <IMG> имеет два необязательных параметра, указывающих размеры
изображения при отображении – WIDTH и HEIGHT. Значения параметров
могут указываться как в пикселах, так и в процентах от размеров окна
просмотра.
Любой из этих параметров может быть опущен. Если задан только один из
параметров, то при загрузке рисунка второй параметр будет вычисляться
автоматически из условий сохранения пропорций.
Для тэга <IMG> можно задавать параметры HSPACE и VSPACE, значения
которых определяют отступы от изображения, оставляемые пустыми,
соответственно, по горизонтали и вертикали.
Изображение на web-странице можно поместить в рамку различной
ширины. Для этого служит параметр BORDER тэга <IMG>. В качестве
значения параметра используется число, означающее толщину рамки в
пикселах.
Одним из параметров тэга <IMG> является параметр ALT, определяющий
альтернативный текст. Его указание даёт возможность пользователям
неграфических браузеров или пользователям, работающим в режиме
отключения загрузки изображений, получить некоторую текстовую
информацию о встроенных изображениях.
<IMG SRC=risunok.gif ALT="Это рисунок">
Использование изображения в качестве ссылки. Графические
изображения могут использоваться не только в качестве иллюстраций, но и
выполнять роль указателей гипертекстовых связей. Для обеспечения работы
изображения в качестве ссылки на другие ресурсы достаточно включить
изображение внутрь тэга-контейнера <А>.
Любая часть такого изображения будет работать как указатель ссылки на
указанный документ. Существуют возможности задания изображений,
отдельные фрагменты которого будут указывать на различные ресурсы.
<A HREF=risunok.HTML><IMG SRC=risunok.gif></A>
2
Создание веб-страниц
Порядок выполнения работы
1. Откройте Блокнот.
2. Создайте HTML-документ с заголовком Графика.
3. Сохраните файл в папку D:\Users\...\Web\Lab5\ с именем index5.html .
4. Откройте Paint.
5. В Paint создайте рисунок размером 50х50 точек и сохраните его в папку
D:\Users\...\Web\ Lab5\ в формате JPG под именем bgpic.
6. В Paint создайте рисунок размером 100х200 точек и сохраните его в папку
D:\Users\...\Web\ Lab5\ в формате JPG под именем pic1.
7. В Paint создайте рисунок размером 200х200 точек и сохраните его в папку
D:\Users\...\Web\ Lab5\ в формате JPG под именем pic2.
8. Сделайте рисунок bgpic фоновым для созданной web-страницы.
9. Вставьте рисунок pic1 в HTML-документ, сделайте его ссылкой на документ
about.html. Для картинки напишите альтернативный текст "Информация о
разработчике".
10. Создайте в HTML-документе нумерованный список, состоящий из 10
произвольных строк.
11. Сделайте, чтобы текст обтекал картинку с левой стороны.
12. Создайте HTML-документ, в нём:
 измените цвет фона;
 создайте заголовок " Информация о разработчике";
 вставьте рисунок pic2. Для картинки сделайте рамку;
 создайте абзац, в котором напишите своё Ф.И.О., e-mail, факультет,
направления подготовки, группу, название дисциплины, №
лабораторной работы, год;
 сделайте, чтобы абзац выравнивался по ширине;
 сделайте, чтобы текст обтекал картинку с правой стороны;
 измените цвет, размер и тип шрифта текста абзаца;
 E-mail оформите в виде гиперссылки;
 создайте горизонтальную линию. Для линии задайте цвет, длину и
толщину. Сделайте, чтобы она выравнивалась по центру.
13. Сохраните файл в папку D:\Users\...\Web\Lab5\ с именем about.html.
3