2. Самостоятельная работа
1. Создайте списки Ваших фильмов, Вашей музыки.
2. Запустите на своей странице бегущей строкой фамилию, имя, отчество
3. В своем сайте поэкспериментируйте с различными ссылками.
Лабораторная работа № 4 Работа с графикой
Цель: освоить теги html, синтаксис языка
Результат обучения: Студент должен научиться использовать методы интеграции изображений в html документ, научиться строить реагирующую на нажатие кнопок мыши графическую карту
Ход работы
Включение графики
Интеграция графики в html-документ осуществляется с использованием команды <img>, синтакчич которой в общем виде записывается следующим образом:
<img src=”URL” align=”значение” width=”значение” height=”значение”
alt=”текст” hspace=”значение” vspace=”значение ”>
В качестве параметра атрибута src указывается путь к изображению в виде полного или сокращенного URL.
С помощью атрибута align картинка позиционируется в документе или в ячейке таблицы. Помимо традиционных значений данного атрибута – right, left, center, - можно использовать другие параметры:
top – изображение совмещается верхним краем с верхней границей ячейки таблицы или с верхней границей текстовой строки, в которой размещена картинка;
bottom – изображение совмещается нижним краем с нижней границей ячейки таблицы или текстовой строки;
middle – центр изображения выравнивается по основной строке, или в середине табличной ячейки;
baseline – изображение выравнивается по условной «базовой» линии. Применяется для выравнивания иллюстраций разных ячеек по одной линии.
В качестве параметров атрибутов width и height указывают ширину и высоту изображения в пикселях. Рекомендуется указывать реальные геометрические размеры картинки. Если размеры картинки указаны явно, броузер резервирует под нее свободное пространство, продолжая считывание основного кода и отображение результатов его обработки на экране. То есть графика загружается параллельно с этим процессом.
Атрибут alt содержит некий альтернативный текст, который отображается вместо картинки в броузерах, где поддержка графики отключена пользователем.
Атрибуты hspace и vspace задают горизонтальные и вертикальные отступы от изображения в пикселях, которые необходимы в случае, когда картинка помещается рядом с текстом. hspace определяет величину незаполненного пространства справа и слева от картинки, vspace соответственно сверху и снизу.
Превращение изображения в гиперссылку
Для того, чтобы превратить интегрированное изображение в гиперссылку, необходимо скомбинировать теги <A> и <IMG>, записав ее следующим образом:
<a href=”URL документа, на который организуется ссылка”>
<img src=”URL изображения” align=”значение” width=”значение” height=”значение”
alt=”альтернативный текст” border=”значение”> </a>
Атрибут border указывает на толщину синей рамки, в которую заключается изображение при превращении его в гиперссылку. В большинстве случаев эта рамка портит дизайн и чтобы избавиться от нее, достаточно установить значение border =0.
Создание карт - изображений
Язык разметки гипертекста позволяет создавать графические элементы, выполняющие роль карт, определенные участки которых могут реагировать на нажатие кнопок мыши и отправлять пользователей к соответствующим документам или файловым объектам по принципу гиперссылки. Для этого используется команда <map>.
<map name=”имя карты”>
<area href=”URL” shape=”параметр” coоrds=”x1, y1, x2, y2”
alt=”альтернативный текст”> </map>
Атрибут name определяет уникальное имя карты, записываемое латинскими символами. При задании имени важно соблюдение регистра, поскольку интерпретатор броузера различает в данной команде строчное и заглавное написание.
Тег area определяет непосредственно активную область изображения. Атрибут href указывает на адрес документа, вызываемого при нажатии кнопки мыши над данным участком изображения.
Атрибут alt определяет альтернативный текст.
Атрибут shape управляет формой активной области и может принимать одно из трех значений: rect – прямоугольник, circle - круг, poly – многоугольник.
Атрибут coоrds позволяет определить относительные координаты вершин активной области. Возможные значения приведены в таблице:
Значение shape |
Форма активной области |
Синтаксис записи coоrds |
Значения параметров coоrds |
Shape = rect |
Прямоугольник |
Coоrds =”x1,y1,x2,y2” |
x1,y1 задают координаты левого верхнего угла фигуры, x2,y2 – правого нижнего |
Shape = circle |
Круг |
Coоrds =”x,y,R” |
x,y – координаты центра окружности, R – ее радиус в пикселях |
Shape = poly |
Многоугольник |
Coоrds =” x1,y1,x2, y2, x3,y3…xN,yN” |
x1,y1,x2, y2, x3,y3 … xN,yN – координаты вершин многоугольн. |
Значения координат активной области отсчитываются в пикселях по длине и ширине картинки от левого верхнего угла изображения, принимаемого за точку с координатами 0,0
Например, для данного рисунка определяем
координаты областей: I-область
0,0,50.50 II-область
50,0,100.50 III-область
0,50,50.100 IV-область
50,50,100.100
Координаты х,у могут быть также заданы
в процентах от реального размера
изображения, например: Shape
= “rect” Coоrds
=”0,0,50%,50%”
0
50 100
50
100
Вставьте в Html-документ следующий фрагмент (используйте свои файлы и имена)
<img align="right" src="Pic10.jpg" usemap="#map1" width="120" height="200" >
<!-- атрибут usemap указывает на то, что Вы создаете карту из данной картинки-->
<map name="map1"> <!-- назначаем рисунку внутренне имя «map1». Обратите внимание, что оно должно соответствовать имени, заданное атрибутом usemap -->
<area shape="rect" coords="0,0,50,50" href="URL Файл 1"> <!--определяем координаты первой области и устанавливаем первый запускаемый файл-->
<area shape="rect" coords="50,0,100,50" href="URL Файл 2"> <!--определяем координаты второй области и устанавливаем второй запускаемый файл-->
<area shape="rect" coords="0,50,50,100" href="URL Файл 3">
<area shape="rect" coords="50,50,100,100" href="URL Файл 4">
</map>
Практикум
Для получения навыков по пройденному материалу разработаем Вашу Домашнюю страницу. Для этого в своей папке создайте подпапку SweetHome. Продумайте тематические разделы Вашей страницы, например: Моя биография, Фотоальбом, Интересы и т.п.
Для каждого раздела создайте по вложенной папке и назовите соответствующим рубрикам именами (на латинском языке).
Стартовые страницы сайта назовите index.htm. Все используемые картинки скидывайте в папку images, находящуюся в корневом каталоге. Для web-дизайна в Приложении приводится кодировка всей основной цветовой палитры.
В качестве вступительной речи предлагается следующий пример:
ДОБРО ПОЖАЛОВАТЬ НА МОЮ ДОМАШНЮЮ СТРАНИЧКУ!
Спасибо Вам, уважаемый посетитель, за то, что Вы нашли возможность заглянуть на мою страницу во Всемирной сети. Здесь Вашему вниманию предложена информация о моих увлечениях, друзьях, семье. В отдельной рубрике предлагается несколько собственных любимых фотографий.
К сожалению, страничка находится в стадии разработки, потому еще далеко не все ее разделы полно освещены и доступны. Однако, этот ресурс будет постоянно обнов-ляться и в ближайшем будущем все рубрики займут свое законное место. Но, уже сейчас Вы можете «погулять» по рубрикам:
Моя биография
Фотоальбом
Семья
Заходите в «гости» почаще! С уважением, Иван Иванов.
Примерный текстовый файл документа:
<! doctype html public “-//w3c//dtd html 3.2//en> <--! обязательная строка декларации версии html, позволяющая браузеру определить, как правильно интерпретировать данный документ-->
<html>
<head> <title>Моя домашняя страничка </title> </head>
<body bgcolor=”#FFFFFF” text=”#000000” link=”#0000FF” vlink=”#800080”>
alink=”#FF0000” background=”images\ название рисунка”>
<h1 align=center> ДОБРО ПОЖАЛОВАТЬ НА МОЮ ДОМАШНЮЮ СТРАНИЧКУ!</h1>
<br>
<img src=”images\ название картинки” align=left width=”150” height=”223”
hspase=”5” alt=” Это моя фотография”>
<p align=justify>
Спасибо Вам …. Здесь Вашему вниманию предложена информация о
<a href =”/hobby/index.htm” title=”Рассказ о моем хобби, в частности о коллек-ционировании марок”> моих увлечениях </a>
друзьях, семье. В отдельной рубрике предлагается несколько собственных любимых фотографий.
</p>
<br>
<p align =justify>
К сожалению, страничка находится в стадии разработки, потому еще
<strong> далеко не все ее разделы полно освещены и доступны</strong>
Однако, этот ресурс будет постоянно обновляться и в ближайшем будущем все рубрики займут свое законное место. Но, уже сейчас Вы можете «погулять» по рубрикам:
</p>
<ul type=”square”>
<li> Моя биография </li>
<li> Фотоальбом </li>
<li> Семья </li> </ul>
<p align=center>
Заходите в «гости» почаще! С уважением,
<em><strong> Иван Иванов </strong></em>
</p>
<br>
<hr>
<p align=center> Автор страницы Иван Иванов, 2004г. E-mail:
<a href=”mailto:ivan@server.ru &subject= отзывы посетителей”> ivan&server.ru</a>
</p>
</body>
</html>
Содержание отчета
Название, цель лабораторной работы.
Основные теги с комментариями.
В распечатанном виде стартовая страница Вашей Домашней странички.
Текст документа HTML Вашей Домашней странички.
Используйте рисунки в Вашем сайте, в качестве гиперссылок.
Приложение
Имена цветов и их числовые значения
-
Имя цвета
Цвет
RGB-значение
Шестнадца-теричное значение
Ближайший Web-надежный цвет
aliceblue
Блекло-голубой
240-248-255
FOF8FF
FFFFFF
antiquewhite
Античный белый
250-235-25
FAEBD7
FFFFCC
aqua
Синий
0-255-215
OOFFFF
OOFFFF
aquamarine
Аквамарин
127-255-212
7FFFD4
66FFCC
azure
Лазурь
240-255-255
FOFFFF
FFFFFF
beige
Бежеаый
245-245-220
F5F5DC
FFFFCC
bisque
Бисквитный
255-228-196
FFE4C4
FFFFCC
black
Черный
0-0-0
000000
000000
blanchedalmond
Светло-кремовый
255-255-205
FFEBCD
FFFFCC
blue
Голубой
0-0-255
OOOOFF
OOOOFF
blueviolet
Светло-фиолетовый
138-43-226
8A2BE2
9933FF
brown
Коричневый
165-42-42
A52A2A
993333
burlywood
Старого дерева
222-184-135
DEB887
CCCC99
cadetblue
Блеклый серо-голубой
95-158-160
5F9EAO
669999
chartreuse
Фисташковый
127-255-0
7FFFOO
66FFOO
chocolate
Шоколадный
210-105-30
D2691E
996600
coral
Коралловый
255-127-80
FF7F50
FF6666
cornflowerblue
Васильковый
100-149-237
6495ED
6699FF
cornsilk
Темно-зеленый
255-248-220
FFF8DC
.FFFFCC
crimson
Малиновый
220-20-60
DC143C
ССООЗЗ
cyan
Циан
0-255-255
OOFFFF
OOFFFF
darkblue
Темно-голубой
0-0-139
00008B
0000992
darkcyan
Темный циан
0-139-139
008B8B
009999
darkgoldenrod
Темный красно-золотой
184-134-11
B8860B
СС9900
-
Имя цвета
Цвет
RGB-значение
Шестнадцатеричное значение
Ближайший Web-надежный цвет
darkgray
Темно-серый
169-169-169
А9А9А9
9999992
darkgreen
Темно-зеленый
0-100-0
006400
006600
darkkhaki
Темный хаки
189-183-107
BDB76B
СССС66
darkmagenta
Темный фуксин (красный)
139-0-139
8В008В
990099
darkolivegreen
Темно-оливковый
85-107-47
556B2F
666633
darkorange
Темно-оранжевый
255-140-0
FF8COO
FF9900
darkofchid
Темно-орхидейный
153-50-204
9932СС
9933СС
darkred
Темно-красный
"139-0-0
8ВОООО
9900002
darksalmon
Темно-оранжево-розовый
233-150-122
Е9967А
FF9966
darkseagreen
Темный морской волны
143-188-143
8FBC8F
99СС99
darksiateblue
Темный серовато-синий
72-61-139
483D8B
333399
darkslategray
Темный синевато-серый
47-79-79
2F4F4F
3333992
darkturquoise
Темно-бирюзовый
0-206-209
OOCED1
ООСССС
darkviolet
Темно-фиолетовый
148-0-211
9400D3
9900СС
deeppink
Темно-розовый
255-20-147
FF1493
FF0099
deepskyblue
Темный небесно-синий
0-191-255
OOBFFF
OOCCFF
dimgray
Тускло-серый
105-105-105
696969
666666
dodgerblue
Тускло-васильковый
30-144-255
1E90FF
0099FF
firebrick
Огнеупорного кирпича
178-34-34
B22222
ССЗЗЗЗ
flora Iwhite
Цветочно-белый
255-250-240
FFFAFO
FFFFFF
forestgreen
Лесной зеленый
34-139-34
228B22
339933
fuchsia
Фуксия
255-0-255
FFOOFF
FFOOFF
gainsboro
Светлый серо-фиолетовый
220-220-220
DCDCDC
СССССС2
ghostwhite
Туманно-белый
248-248-255
F8F8FF
FFFFFF
gold
Золотой
255-215-0
FFD700
FFCCOO
goldenrod
Красного золота
218-165-32
DAA520
СС9933
gray
Серый
128-128-128
BEBEBE
9999992
green
Зеленый
0-128-0
008000
009900
greenyellow
Зелено-желтый
173-255-47
ADFF2F
99FF33
honewdue
Свежего меда
240-255-240
FOFFFO
FFFFFF
hotpink
Ярко-розовый
255-105-180
FF69B4
FF66CC
indianred
Ярко-красный
205-92-92
CD5C5C
СС6666
indigo
Индиго
75-0-130
4B0082
330099
ivory
Слоновой кости
255-240-240
FFFFFO
FFFFFF
khaki
Хаки
240-230-140
FOD58C
FFCC99
lavender
Бледно-лиловый
230-230-250
E6E6FA
FFFFFF2
lavenderblush
Бледный розово-лиловый
255-240-245
FFFOF5
FFFFFF
lawngreen
Зеленой травы
124-252-0
7CFCOO
OOFFOO
temonchiffon
Лимонный
255-250-205
FFFACD
FFFFCC
lightblue
Светло-голубой
173-216-230
ADD8E6
99CCFF
Имя цвета |
Цвет |
RGB-значение |
Шестнадцатеричное значение |
Ближайший Web-надежный цвет |
lightcoral |
Светло-коралловый |
240-128-128 |
F08080 |
FF9999 |
lightcyan |
Светло-циановый |
224-255-255 |
EOFFFF |
FFFFFF |
lightgold-enrodyellow |
Светлый красно-золотистый |
250-250-210 |
FAPAD2 |
FFFFCC |
lightgreen |
Светло-зеленый |
144-238-144 |
90EE90 |
99FF99 |
lightgray |
Светло-серый |
211-211-211 |
D3D3D3 |
СССССС2 |
lightpink |
Светло-розовый |
255-182-193 |
FFB6C1 |
FFFFCC |
lightsalmon |
Светлый оранжево-розовый |
255-160-122 |
FFA07A |
FF9966 |
lightseagreen |
Светлый морской волны |
32-178-170 |
20B2AA |
ЗЗСС99 |
lightskyblue |
Светлый небесно-синий |
135-206-250 |
87CEFA |
99CCFF |
lightslategray |
Светлый синевато-серый |
119-136-153 |
778899 |
669999 |
lightsteelbiue |
Светло-стальной |
176-196-222 |
BOC4DE |
СССССС |
lightyellow |
Светло-желтый |
255-255-224 |
FFFFEO |
FFFFFF |
lime |
Цвет извести |
0-255-0 |
OOFFOO |
OOFFOO |
iimegreen |
Зеленовато-известковый |
50-205-50 |
32CD32 |
ЗЗССЗЗ |
linen |
Льняной |
250-240-230 |
FAFOE6 |
FFFFFF |
magenta |
Фуксин |
255-0-255 |
FFOOFF |
FFOOFF |
maroon |
Оранжево-розовый |
128-0-0 |
800000 |
9900002 |
medium- aquamarine |
Умеренно-аквамариновый |
102-205-170 |
66CDAA |
66CC99 |
mediumblue |
Умеренно-голубой |
0-0-205 |
OOOOCD |
OOOOCC |
mediumorchid |
Умеренно-орхидейный |
186-85-211 |
BA55D3 |
CC66CC |
mediumpurpfe |
Умерен но-пурпурн ы и |
147-112-219 |
9370DB |
9966CC |
mediumseagreen |
Умеренный морской волны |
60-179-113 |
3CB371 |
33CC66 |
mediumslatebiue |
Умеренный серовато-синий |
123-104-238 |
7B68EE |
6666FF |
medium- |
Умеренный синевато-серый |
0-250-154 |
OOFA9A |
OOFF99 |
springgreen |
|
|
|
|
mediumturquoise |
Умеренно-бирюзовый |
72-209-204 |
48D1CC |
ЗЗСССС |
medium violetred |
Умеренный красно-фиолетовый |
199-21-133 |
C711585 |
СС00662 |
midnightblue |
Ночной синий |
25-25-112 |
191970 |
000066 |
mintcream |
Мятно-кремовый |
245-255-250 |
F5FFFA |
FFFFFF |
mistyrose |
Туманно-розовый |
255-228-225 |
FFE4E1 |
FFFFFF2 |
moccasin |
Болотный |
255-228-181 |
FFE4B5 |
FFFFCC |
navajowhite |
Грязно-серый |
255-222-173 |
FFDEAD |
FFCC99 |
navy |
Темно-синий |
0-0-128 |
000080 |
0099992 |
old lace |
Старого коньяка |
253-245-230 |
FDF5E6 |
FFFFFF |
olive |
Оливковый |
128-128-0 |
808000 |
999900 |
olivedrab |
Тускло- коричневы и |
107-142-35 |
6B8E23 |
669933 |
orange |
Оранжевый |
155-165-0 |
FFA500 |
FF9900 |
orangered |
Красно-оранжевый |
255-69-0 |
FF4500 |
FF3300 |
Имя цвета |
Цвет |
RGB-значение |
Шестнадцатеричное значение |
Ближайший Web-надежный цвет |
orchid |
Орхидейный |
218-112-214 |
DA70D6 |
CC66CC |
palegoldenrod |
Бледно-золотой |
238-232-170 |
ЕЕЕ8АА |
FFFF99 |
palegreen |
Бледно-зеленый |
152-251-152 |
98FB98 |
99FF99 |
pateturquoise |
Бледно-бирюзовый |
175-238-238 |
AFEEEE |
99FFFF |
palevioietred |
Бледный красно-фиолетовый |
219-112-147 |
DB7093 |
CC6699 |
papyawhip |
Дыни |
255-239-213 |
FFEFD5 |
FFFFCC |
peach puff |
Персиковый |
255-218-185 |
FFDAB9 |
FFCCCC |
peru |
Коричневый |
205-133-63 |
CD853F |
CC9933 |
pink |
Розовый |
255-192-203 |
FFCOCB |
FFCCCC |
plum |
Сливовый |
221-160-221 |
DDAODD |
CC99CC |
powderblue |
Туманно-голубой |
176-224-230 |
BOEOE6 |
CCFFF |
purple |
Пурпурный |
128-0-128 |
800080 |
990099 |
red |
Красный |
255-0-0 |
FFOOOO |
FFOOOO |
rosybrown |
Розово-кори ч невы и |
188-143-143 |
BC8F8F |
CC9999 |
royalblue |
Королевский голубой |
65-105-225 |
4169E1 |
3366FF |
saddlebrown |
Старой кожи |
139-69-19 |
8B4513 |
993300 |
salmon |
Оранжево-розовый |
250-128-114 |
FA8072 |
FF9966 |
sandybrown |
Рыже-коричневый |
244-164-96 |
F4A460 |
FF9966 |
seagreen |
Морской волны |
46-139-87 |
2E8B57 |
339966 |
seashell |
Морской пены |
255-245-238 |
FFF5EE |
FFFFFF |
sienna |
Охра |
160-82-45 |
A0522D |
996633 |
silver |
Серебристый |
192-192-192 |
COCOCO |
СССССС |
skyblue |
Небесно-голубой |
135-205-235 |
87CEEB |
99CCFF |
slateblue |
Серовато-синий |
106-90-205 |
6A5ACD |
6666CC |
slategray |
Синевато-серый |
112-128-144 |
708090 |
669999 |
snow |
Снежный |
255-250-250 |
FFFAFA |
FFFFFF |
springgreen |
Весенний зеленый |
0-255-127 |
OOFF7F |
OOFF66 |
steel blue |
Голубовато-стальной |
70-130-180 |
4682B4 |
339966 |
tan |
Желтовато-коричневый |
210-180-140 |
D2B48C |
СССС99 |
teal |
Чайный |
0-128-128 |
008080 |
009999 |
thistle |
Чертополоха |
216-191-216 |
D8BFD8 |
СССССС' |
tomato |
Томатный |
253-99-71 |
FF6347 |
FF6633 |
turquoise |
Бирюзовый |
64-224-208 |
40EODO |
33FFCC |
violet |
Фиолетовый |
238-130-238 |
EE82EE |
FF99FF |
wheat |
Пшеничный |
245-222-179 |
F5DEB3 |
FFCCCC |
white |
Белый |
255-255-255 |
FFFFFF |
FFFFFF |
whitesmoke |
Белый дымчатый |
245-245-245 |
F5F5F5 |
FFFFFF |
yellow |
Желтый |
255-255-0 |
FFFFOO |
FFFFOO |
yellowgreen |
Желто-зеленый |
154-205-50 |
9ACD32 |
66CC33 |
Выводы: (формулируются студентами самостоятельно).