lab_1(ПвИ)
.pdf8.7.2 Атрибуты зон
С помощью атрибута shape можно описать форму области: circle — окружность,
rect — прямоугольник, poly — многоугольник.
Необходимо ещё описать размеры и положение зон. Это делается с помощью атрибута coords. Параметр coords задается списком координат, которые отсчитываются в пикселях от левого верхнего угла картинки.
Для окружности этот список состоит из координат центра окружности (х, у) и ее радиуса.
Для прямоугольника это координаты (x, y) левого верхнего и правого нижнего углов прямоугольника.
Для многоугольника это координаты (x, y) каждого из углов многоугольника. Причем, для получения замкнутой фигуры последняя пара координат должна дублировать первую.
Все координаты перечисляются через запятую.
Пример:
<map name=mymap>
<area shape=circ coords="50, 50, 50" href="1.html" >
<area shape=rect coords="310, 140, 410, 250" href="2.html" > </map>
<IMG src="21.jpg" usemap=#mymap>
Атрибут href определяет адрес гипертекстовой ссылки, реализуемой при нажатии на выделенный объект.
Атрибут alt определяет появляющийся при наведении на объект текст.
Пример:
<map name=21>
<area shape=circ coords="50, 50, 50" href="1.html" alt="Зона
1">
<area shape=rect coords="310, 140, 410, 250" href="2.html" alt="Зона 2">
</map>
<IMG src="21.jpg" usemap=#21 border=1 align=left>
Как рассчитать координаты и размеры областей? Для этого достаточно воспользоваться любым графическим редактором. В таких приложениях обычно имеется горизонтальная и вертикальная шкалы или хотя бы раздел строки состояния, где указываются координаты текущей точки.
Кроме того, можно воспользоваться специальными программами - WYSIWYGредакторы навигационных карт, которые значительно упрощают и ускоряют разметку навигационных областей.
9. Связь с поисковыми системами
Для представления информации о содержимом сайта в поисковые системы используется специальный тег <META>.
21
Назначение тега <META>
Второй важный тег заголовочного раздела - <META>. В отличие от <TITLE>, он содержит главным образом машинную информацию – для браузеров и поисковых серверов.
Тег <META> расположен перед разделом <BODY>.
Тег <META> самодостаточен. У него нет текста, формат которого он определяет, а следовательно, нет и закрывающего тега. Зато есть много атрибутов, именуемых метазаписями. Рассмотрим назначение некоторых наиболее распространенных мета-записей.
,
<-- Для говорящих на американском английском --> <META name="keywords" lang="en-us"
content="vacation, Greece, sunshine"> <-- Для говорящих на британском английском --> <META name="keywords" lang="en"
content="holiday, Greece, sunshine"> <-- для русскоязычных пользователей -->
<META name="keywords" lang="ru" content="отпуск, Греция,
солнце">
Keywords
Эта мета-запись используется для перечисления (через запятую) слов и выражений, максимально соответствующих теме страницы. Поисковые серверы анализируют эти слова и принимают решение, соответствует ли данная страница запросу. Значением атрибута keywords обычно служит длинный перечень, чем-то похожий на заклинание, например:
<META name=”keywords” content=”Web designer, Web-дизайнер”>
Descriptions
У электронных публикаций есть аннотации. Эти аннотации и заносятся в мета-запись descriptions. С помощью мета-записи descriptions можно убить сразу двух зайцев: и сделать хорошую аннотацию, и лишний раз упомянуть ключевые слова:
<META name=”descriptions” content=””Это моя страничка, Web-
дизайнер”>
Robots
назначение этой мета-записи – проинструктировать спайдера: как быть с обнаруженной страницей? Например, для того чтобы страница не попала в индексированный список поисковых систем (то ли потому, что не предназначена для посторонних, то ли потому что просто недоделана), а другие страницы сайта, на которые она ссылается, туда попали, пишут код:
<META name=”robots” content=”noindex, follow”>
Ещё могут быть значения index и nofollow, они соответственно обозначают обратные действия.
Author и copyright
А вот эти тегы предназначены для защиты прав настоящих авторов страницы:
<META name=”author” content=”Гребенюк Евгений Васильевич”> <META name=”copyright” content=”Описание авторских прав и
того, что вы сделаете нарушителю”>
Content-type
Для задания мета-записи content-type используется атрибут http-equiv. С ее помощью можно намекнуть браузеру о типе и кодировке Web-страницы.
22
<META hhtp-equiv=content-type content=”text/html; charset=Windows-1251”>
Expires
Для задания мета-записи expires используется атрибут http-equiv. Она определяет дату, по наступлении которой страница устареет, и браузеру придется снова обратиться за не на сайт, а не пытаться загрузить старую версию из кэша.
<META http-equiv=”expires” content=”wed, 20 Jun 2009 00:00:01GMT”>
Это означает, что страница устареет 20 июня 2009 года.
Refresh
Для задания мета-записи refresh используется атрибут http-equiv. Эта запись используется в тех случаях, когда через определенный промежуток времени на месте данной страницы должна загрузиться другая. Значением мета-записи refresh является пара “время; url”. Например:
<META http-equiv=refresh content=”20; url=http://server/next.html”>
означает, что по истечении 20 секунд сервер должен загрузить страницу http://server/next.html.
По статистике большинство пользователей сайтов (особенно новых пользователей) обнаруживают сайт с помощью поисковика. Современные поисковые системы производят автоматическое индексирование сайтов специальными программами (так называемые роботы). При этом может анализироваться не только содержимое элементов МЕТА, но и содержимое самого сайта. Можно также постараться сформировать текст главной страницы сайта таким образом, чтобы в нем упоминались все ключевые слова (главное, чтобы получился нормальный текст, а не «масло масляное»).
План выполнения работы
1.Запустите текстовый редактор Блокнот или другой любой текстовый редактор. Например, можно использовать NotePad++, т.к. данный программный продукт производит подсветку синтаксиса web-документа.
2.Введите следующий документ:
<HTML>
<HEAD>
<TITLE> Заголовок документа </TITLE> </HEAD>
<BODY>
Содержание документа
</BODY>
</HTML>
3.Создайте отдельную папку и сохраните созданный документ под именем
firstlab.html
4.Откройте документ в браузере (Internet Explorer, Opera, Mozilla FireFox) .
Пока Ваша страничка остается пустой, но для того чтобы увидеть результат вам необходимо поместить код между тэгами <BODY> и </BODY>.
Практическое задание.
1)Продумайте тему разрабатываемых страничек.
2)В случае затруднения выбора темы разработайте, например, персональную Webстраничку, которая будет содержать ссылки на другие html-документы. Главная страничка должна содержать описание личных данных автора (ФИО, место и год
23
рождения, предыдущее образование, текущее образование, любимые занятия, сведения об успеваемости, друзья и т.п.). Все сведения, кроме ФИО и года рождения, должны быть представлены в виде ссылок на отдельные странички. Например, страничка место рождения должна быть посвящена городу рождения; страничка о текущем образовании – ссылка на официальный сайт ТУСУР и список группы и т.п. Реализуйте ссылки с каждой страницы на главную страничку.
3)Реализуйте не менее 6 ссылок на главной странице (при этом для каждой ссылки должен быть создан свой html-файл). Последующие странички так же должны содержать ссылки. Реализуйте взаимное переключение между всеми созданными страничками. В результате должна получиться как минимум трехуровневая система вложенности.
4)Для удобного чтения программного кода при создании исходного html-кода страниц соблюдайте принятые соглашения о стилевом оформлении программного кода:
−каждый тег должен начинаться с новой строки;
−при вложенности тега необходимо использовать табуляцию;
−программный код должен содержать комментарии и т.п.
5)Используя теоретическую часть, отобразите в документе все выше изложенные методы:
−цветовое оформление тела и текста странички (используйте как английские названия цветов, так и мнемонический код цвета);
−курсив, жирный шрифт и подчеркивание
−заголовки разных уровней
−абзацы
−абзацы с параметрами
−разрыв строки
−специальные символы
−шрифты (разные стили, начертания и цвета)
−нумерованный список, маркированный список, список определений
−вложенные списки
6)реализуйте ссылку на другой документ, находящийся в той же папке, что и исходный файл. При этом предусмотрите возврат на исходную страницу (не используя стандартный способ браузера, т.е. на каждой страничке создайте ссылку «На главную»);
7)реализуйте ссылку на документ, находящийся в другой папке. Реализуйте возврат на исходную страницу;
8)реализуйте открытие страниц в том же окне браузера и в новом окне;
9)реализуйте загрузку файла, ускоренную отправку писем и запуск программы
(можно запустить любую стандартную игру Windows);
10)вставьте картинку, находящуюся в той же папке, что и исходный файл webстранички;
11)вставьте картинку, находящуюся в другой папке;
12)вставьте в документ две одинаковые картинки. Настройте размеры картинки, задав размер в первом случае в абсолютной величине, а во втором – в относительной. Сравните полученные результаты и сделайте вывод;
13)продемонстрируйте использование параметра alt;
14)выполните разные варианты выравнивания картинок: по вертикали и по горизонтали (для больше наглядности добавьте текст в документ);
15)выполните разные варианты настройки рамки картинок и разные отступы от текста;
16)реализуйте следующие варианты ссылок с использованием картинок: ссылкакартинка целиком и карта изображения;
17)реализуйте тег Meta;
24
18)оформите отчет, в котором перечислите, объясните назначение и приведите примеры использования всех изученных дескрипторов;
19)после заключения приведите ответы на контрольные вопросы лабораторной работы.
Структура отчета:
1)Цель лабораторной работы
2)Задание
3)Изученные дескрипторы (название, назначение и приведите примеры использования). Можно оформить в виде таблицы
4)Результаты работы (программный код, скриншот страничек)
5)Заключение
6)Ответы на контрольные вопросы
Контрольные вопросы к лабораторной работе 1
1)Что такое Web-сайт?
2)Какие виды web-сайтов существуют?
3)Что такое тег?
4)На какие классы можно разделить теги HTML? Приведите примеры тегов каждого класса.
5)Опишите структуру html-документа.
6)Какие правила используются при использовании атрибутов тега?
7)Какой тег используется для размещения в документе графического элемента. Опишите его синтаксис.
8)Напишите теги, с помощью которых создается ссылка-картинка.
9)Что такое «карта изображения»? Для чего она используется?
10)Опишите процедуру создания карты изображения.
11)Для чего используется и как организовать связь с поисковыми системами.
25
Приложение 1 Таблица названий цветов, воспринимаемых браузерами
|
|
|
RGB |
HEX |
Название |
|
|
|
|
|
|
240 248 255 |
#F0F8FF |
aliceblue |
|
|
|
|
|
|
250 235 215 |
#FAEBD7 |
antiquewhite |
|
|
|
|
|
|
0 255 255 |
#00FFFF |
aqua |
|
|
|
|
|
|
127 255 212 |
#7FFFD4 |
aquamarine |
|
|
|
|
|
|
240 255 255 |
#F0FFFF |
azure |
|
|
|
|
|
|
245 245 220 |
#F5F5DC |
beige |
|
|
|
|
|
|
255 228 196 |
#FFE4C4 |
bisque |
|
|
|
|
|
|
0 0 0 |
#000000 |
black |
|
|
|
|
|
|
255 235 205 |
#FFEBCD |
blanchedalmond |
|
|
|
|
|
|
0 0 255 |
#0000FF |
blue |
|
|
|
|
|
|
138 43 226 |
#8A2BE2 |
blueviolet |
|
|
|
|
|
|
165 42 42 |
#A52A2A |
brown |
|
|
|
|
|
|
222 184 135 |
#DEB887 |
burlywood |
|
|
|
|
|
|
95 158 160 |
#5F9EA0 |
cadetblue |
|
|
|
|
|
|
127 255 0 |
#7FFF00 |
chartreuse |
|
|
|
|
|
|
210 105 30 |
#D2691E |
chocolate |
|
|
|
|
|
|
255 127 80 |
#FF7F50 |
coral |
|
|
|
|
|
|
100 149 237 |
#6495ED |
cornflowerblue |
|
|
|
|
|
|
255 248 220 |
#FFF8DC |
cornsilk |
|
|
|
|
|
|
220 20 60 |
#DC143C |
crimson |
|
|
|
|
|
|
0 255 255 |
#00FFFF |
cyan |
|
|
|
|
|
|
0 0 139 |
#00008B |
darkblue |
|
|
|
|
|
|
0 139 139 |
#008B8B |
darkcyan |
|
|
|
|
|
|
184 134 11 |
#B8860B |
darkgoldenrod |
|
|
|
|
|
|
169 169 169 |
#A9A9A9 |
darkgray |
|
|
|
|
|
|
0 100 0 |
#006400 |
darkgreen |
|
|
|
|
|
|
189 183 107 |
#BDB76B |
darkkhaki |
|
|
|
|
|
|
139 0 139 |
#8B008B |
darkmagenta |
|
|
|
|
|
|
85 107 47 |
#556B2F |
darkolivegreen |
|
|
|
|
|
|
255 140 0 |
#FF8C00 |
darkorange |
|
|
|
|
|
|
153 50 204 |
#9932CC |
darkorchid |
|
|
|
|
|
|
139 0 0 |
#8B0000 |
darkred |
|
|
|
|
|
|
233 150 122 |
#E9967A |
darksalmon |
|
|
|
|
|
|
143 188 143 |
#8FBC8F |
darkseagreen |
|
|
|
|
|
|
72 61 139 |
#483D8B |
darkslateblue |
|
|
|
|
|
|
47 79 79 |
#2F4F4F |
darkslategray |
|
|
|
|
|
|
0 206 209 |
#00CED1 |
darkturquoise |
|
|
|
|
|
|
148 0 211 |
#9400D3 |
darkviolet |
|
|
|
|
|
|
255 20 147 |
#FF1493 |
deeppink |
|
|
|
|
|
|
0 191 255 |
#00BFFF |
deepskyblue |
|
|
|
|
|
|
105 105 105 |
#696969 |
dimgray |
|
|
|
|
|
|
30 144 255 |
#1E90FF |
dodgerblue |
|
|
|
|
|
|
178 34 34 |
#B22222 |
firebrick |
|
|
|
|
|
|
255 250 240 |
#FFFAF0 |
floralwhite |
|
|
|
|
|
|
34 139 34 |
#228B22 |
forestgreen |
|
|
|
|
|
|
255 0 255 |
#FF00FF |
fuchsia |
|
|
|
|
|
|
220 220 220 |
#DCDCDC |
gainsboro |
|
|
|
|
|
|
248 248 255 |
#F8F8FF |
ghostwhite |
|
|
|
|
|
|
255 215 0 |
#FFD700 |
gold |
|
|
|
|
|
|
218 165 32 |
#DAA520 |
goldenrod |
|
|
|
|
|
|
128 128 128 |
#808080 |
gray |
|
|
|
|
|
|
0 128 0 |
#008000 |
green |
|
|
|
|
|
|
173 255 47 |
#ADFF2F |
greenyellow |
|
|
|
|
|
|
240 255 240 |
#F0FFF0 |
honeydew |
|
|
|
|
|
|
255 105 180 |
#FF69B4 |
hotpink |
|
|
|
|
|
|
205 92 92 |
#CD5C5C |
indianred |
|
|
|
|
|
|
75 0 130 |
#4B0082 |
indigo |
|
|
|
|
|
|
255 255 240 |
#FFFFF0 |
ivory |
|
|
|
|
|
|
240 230 140 |
#F0E68C |
khaki |
|
|
|
|
|
|
230 230 250 |
#E6E6FA |
lavender |
|
|
|
|
|
|
255 240 245 |
#FFF0F5 |
lavenderblush |
|
|
|
|
|
|
124 252 0 |
#7CFC00 |
lawngreen |
|
|
|
|
|
|
255 250 205 |
#FFFACD |
lemonchiffon |
|
|
|
|
|
|
173 216 230 |
#ADD8E6 |
lightblue |
|
|
|
|
|
|
240 128 128 |
#F08080 |
lightcoral |
|
|
|
|
|
|
224 255 255 |
#E0FFFF |
lightcyan |
|
|
|
|
|
|
250 250 210 |
#FAFAD2 |
lightgoldenrodyellow |
|
|
|
|
|
|
144 238 144 |
#90EE90 |
lightgreen |
|
|
|
|
|
|
211 211 211 |
#D3D3D3 |
lightgrey |
|
|
|
|
|
|
255 182 193 |
#FFB6C1 |
lightpink |
|
|
|
|
|
|
255 160 122 |
#FFA07A |
lightsalmon |
|
|
|
|
|
|
32 178 170 |
#20B2AA |
lightseagreen |
|
|
|
|
|
|
135 206 250 |
#87CEFA |
lightskyblue |
|
|
|
|
|
|
119 136 153 |
#778899 |
lightslategray |
|
|
|
|
|
|
176 196 222 |
#B0C4DE |
lightsteelblue |
|
|
|
|
|
|
255 255 224 |
#FFFFE0 |
lightyellow |
|
|
|
|
|
|
0 255 0 |
#00FF00 |
lime |
|
|
|
|
|
|
50 205 50 |
#32CD32 |
limegreen |
|
|
|
|
|
|
250 240 230 |
#FAF0E6 |
linen |
|
|
|
|
|
|
255 0 255 |
#FF00FF |
magenta |
|
|
|
|
|
|
128 0 0 |
#800000 |
maroon |
|
|
|
|
|
|
102 205 170 |
#66CDAA |
mediumaquamarine |
|
|
|
|
|
|
0 0 205 |
#0000CD |
mediumblue |
|
|
|
|
|
|
26
186 85 211 |
#BA55D3 |
mediumorchid |
|
70 130 180 |
#4682B4 |
steelblue |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
147 112 219 |
#9370DB |
mediumpurple |
|
210 180 140 |
#D2B48C |
tan |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
60 179 113 |
#3CB371 |
mediumseagreen |
|
0 128 128 |
#008080 |
teal |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
123 104 238 |
#7B68EE |
mediumslateblue |
|
216 191 216 |
#D8BFD8 |
thistle |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
0 250 154 |
#00FA9A |
mediumspringgreen |
|
255 99 71 |
#FF6347 |
tomato |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
72 209 204 |
#48D1CC |
mediumturquoise |
|
64 224 208 |
#40E0D0 |
turquoise |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
199 21 133 |
#C71585 |
mediumvioletred |
|
238 130 238 |
#EE82EE |
violet |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
25 25 112 |
#191970 |
midnightblue |
|
245 222 179 |
#F5DEB3 |
wheat |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
245 255 250 |
#F5FFFA |
mintcream |
|
255 255 255 |
#FFFFFF |
white |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
255 228 225 |
#FFE4E1 |
mistyrose |
|
245 245 245 |
#F5F5F5 |
whitesmoke |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
255 228 181 |
#FFE4B5 |
moccasin |
|
255 255 0 |
#FFFF00 |
yellow |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
255 222 173 |
#FFDEAD |
navajowhite |
|
154 205 50 |
#9ACD32 |
yellowgreen |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
0 0 128 |
#000080 |
navy |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
253 245 230 |
#FDF5E6 |
oldlace |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
128 128 0 |
#808000 |
olive |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
107 142 35 |
#6B8E23 |
olivedrab |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
255 165 0 |
#FFA500 |
orange |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
255 69 0 |
#FF4500 |
orangered |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
218 112 214 |
#DA70D6 |
orchid |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
238 232 170 |
#EEE8AA |
palegoldenrod |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
152 251 152 |
#98FB98 |
palegreen |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
175 238 238 |
#AFEEEE |
paleturquoise |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
219 112 147 |
#DB7093 |
palevioletred |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
255 239 213 |
#FFEFD5 |
papayawhip |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
255 218 185 |
#FFDAB9 |
peachpuff |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
205 133 63 |
#CD853F |
peru |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
255 192 203 |
#FFC0CB |
pink |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
221 160 221 |
#DDA0DD |
plum |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
176 224 230 |
#B0E0E6 |
powderblue |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
128 0 128 |
#800080 |
purple |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
255 0 0 |
#FF0000 |
red |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
188 143 143 |
#BC8F8F |
rosybrown |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
65 105 225 |
#4169E1 |
royalblue |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
139 69 19 |
#8B4513 |
saddlebrown |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
250 128 114 |
#FA8072 |
salmon |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
244 164 96 |
#F4A460 |
sandybrown |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
46 139 87 |
#2E8B57 |
seagreen |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
255 245 238 |
#FFF5EE |
seashell |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
160 82 45 |
#A0522D |
sienna |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
192 192 192 |
#C0C0C0 |
silver |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
135 206 235 |
#87CEEB |
skyblue |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
106 90 205 |
#6A5ACD |
slateblue |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
112 128 144 |
#708090 |
slategray |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
255 250 250 |
#FFFAFA |
snow |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
0 255 127 |
#00FF7F |
springgreen |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
27