Лабораторна робота HTML

МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ
НАЦІОНАЛЬНИЙ ТЕХНІЧНИЙ УНІВЕРСИТЕТ УКРАЇНИ

«КИЇВСЬКИЙ ПОЛІТЕХНІЧНИЙ ІНСТИТУТ ІМЕНІ ІГОРЯ СІКОРСЬКОГО»
Лабораторна робота № 5
Створення карти зображень в HTML-документах
з дисципліни «Технології електронних видань – 1:
Технології електронних видань»
Виконала:
Студентка 2 курсу
групи
Перевірив:
Київ 2023
Мета роботи: Засвоєння принципів та методів створення карт зображень

як гіпертекстових HTML-документів.
Хід роботи:
1. Зберегти у папці відповідно до варіанту завдання (табл. 4) графічний

растровий файл, у якому можливо виділити принаймні чотири
об’єкти.
2. Створити HTML-документи file1.html, file2.html, file3.html,
file4.html, які б були текстовими поясненнями до відповідних
виділених чотирьох об’єктів. Для варіантів зберігання цих файлів
доцільно використати варіанти завдань із попередньої практичної
роботи.
3. Створити HTML-документ index.html, який включав би згаданий
вище графічний файл та поєднував гіперпосиланнями об’єкти у
графічному файлі з відповідними файлами (file1.html, file2.html,
file3.html, file4.html). Форма виділених областей – об’єктів повинна
задаватися всіх видів – прямокутник, багатокутник, коло.
Варіант завдання
№ Файл index.html
№ варіанту Графічний файл
п/п знаходиться в
(див. практичну роботу № 2) знаходиться в папці №
папці №
15 1 1 1.2
№ file1.html file2.html file3.html file4.html

1 по правому нумерований, маркований, не нумерований,
краю, курсив, латинські великі зафарбований римські маленькі
жирний букви кружечок, менший цифри, іншим
шрифт кольором
Код:
File1.html:
<!DOCTYPE html>
<html>
<head>
</head>
<body
bgcolor=#2e4309>

 orange cat
</body>
</html>
File2.html:
</body>
</html>
<!DOCTYPE html>
<html>
<head>
</head>
<body bgcolor=#2e4309>
 black cat
</body>
</html>
File3.html
<!DOCTYPE html>
<html>
<head
</head>
 multicolor cat 
</body>
</html>
File4.html
<!DOCTYPE html>
<html>
<head
</head>
 girl 
</body>
</html>
Index.html:
<!DOCTYPE html><html>
<head>
<title>lab5<map></title>
</head>
<body>

<map name = "three cats and a girl" >
<area href = "file1.html" shape = "circle" coords = "209,100,100"

alt = "orange cat" >
<area href = "file2.html" shape = "circle" coords = "191,485,100"
alt = "black cat" >
<area href = "file3.html" shape = "poly" coords =
"314,138,301,365,460,260,314,138" alt = "multicolor cat" >
<area href = "file4.html" shape = "rect" coords = "0,400,100,100"
alt = "girl" >
<area href="default.html" shape="default"
coords="0,0,1250,1022"alt="everything else">
</map>
<img src = "cats.jpg" usemap = "#three cats and a girl" border=0 >
</body>
</html>
Результат:
Контрольні запитання:
1. Для чого створюються карти зображень?
Карти зображень дозволяють поєднати певну область вбудованого в

HTML-документ графічного об’єкта та певну дію (завантаження іншого
документа), що відбувається в момент активізації цієї області кнопкою

миші.
2. Який тег описує виділені області зображення?
Дескриптори <AREA> описує окремі області цієї карти.
3. Яким чином задаються координати різних форм виділених областей?
Координати області визначаються параметром coords. Значенням цього

параметру є укладені в лапки списки цілих чисел. Ці числа – координати і
розміри області, які вимірюються в пікселях.
Наприклад, якщо нам потрібно описати коло радіусом 40 пікселів, центр

якого відстає від верхнього лівого кута зображення на 60 пікселів по
горизонталі і 80 пікселів по вертикалі, потрібно написати такий код:
<AREA shape=circ coords=”60, 80, 40” інші параметри>.
Наприклад, якщо прямокутна область розміром 40х50, що відстає від

верхнього кута зображення на 10 пікселів по горизонталі і 20 пікселей по
вертикалі, описується таким кодом:
<AREA shape=rect coords=”10, 20, 50, 70” інші параметри>.
Щоб задати координати довільного багатокутника потрібно по черзі

перерахувати координати всіх його вершин. При цьому потрібно
притримуватись тільки двох правил. Перше: горизонтальна координата
задається раніше вертикальної. Друге: для того щоб фігура була замкнута,
остання пара координат повинна дублювати першу. Наприклад,
прямокутний трикутник з вершиною, відступаючої від верхнього лівого
кута зображення на 10 пікселей по горизонталі і 20 пікселей по вертикалі і
катетами, рівними 40 і 50 пікселей, відповідно, описується таким кодом:
<AREA shape=poly coords=”10, 20, 60, 60, 10, 60, 10, 20” інші параметри>.
4. Які форми областей карти зображень можливі?
Форма області визначається параметром shape, який приймає одне з

наступних значень: rect (за умовчанням, прямокутник), circ (коло), poly
(багатокутник).
5. Яким чином можливо встановити точні координати областей карти

зображень?
Визначення координат для параметра coоrds необхідно виконувати у

спеціалізованих програмних пакетах обробки растрової графіки, таких як
Microsoft PhotoEditor, Adobe Photoshop або ImageReady.
6. Як організовується адресація виділених областей відносно графічного

файла?
Карти зображень дозволяють поєднати певну область вбудованого в

HTML-документ графічного об’єкта та певну дію (завантаження іншого
документа), що відбувається в момент активізації цієї області кнопкою
миші. Щоб зв’язати карту зображення із самим зображенням потрібно у
дескрипторі <MAP> задати параметр name. Завдяки цьому карті
присвоюється унікальне ім’я, яке потім вказується у дескрипторі <IMG>,
що описує зображення, котре розбивається на окремі області, за
допомогою спеціального параметру usemap. В значенні параметра usemap
перед іменем карти ставиться символ #.

Лабораторна робота HTML

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Лабораторна робота HTML

Uploaded by

Copyright:

Available Formats

МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ

НАЦІОНАЛЬНИЙ ТЕХНІЧНИЙ УНІВЕРСИТЕТ УКРАЇНИ

з дисципліни «Технології електронних видань – 1:

Технології електронних видань»

Мета роботи: Засвоєння принципів та методів створення карт зображень

1. Зберегти у папці відповідно до варіанту завдання (табл. 4) графічний

№ file1.html file2.html file3.html file4.html

<P align=right> orange cat

<P align=right> black cat

<P align=right> girl </p>

<area href = "file1.html" shape = "circle" coords = "209,100,100"

1. Для чого створюються карти зображень?

Карти зображень дозволяють поєднати певну область вбудованого в

документа), що відбувається в момент активізації цієї області кнопкою

2. Який тег описує виділені області зображення?

Дескриптори <AREA> описує окремі області цієї карти.

3. Яким чином задаються координати різних форм виділених областей?

Координати області визначаються параметром coords. Значенням цього

Наприклад, якщо нам потрібно описати коло радіусом 40 пікселів, центр

<AREA shape=circ coords=”60, 80, 40” інші параметри>.

Наприклад, якщо прямокутна область розміром 40х50, що відстає від

<AREA shape=rect coords=”10, 20, 50, 70” інші параметри>.

Щоб задати координати довільного багатокутника потрібно по черзі

4. Які форми областей карти зображень можливі?

Форма області визначається параметром shape, який приймає одне з

5. Яким чином можливо встановити точні координати областей карти

Визначення координат для параметра coоrds необхідно виконувати у

6. Як організовується адресація виділених областей відносно графічного

Карти зображень дозволяють поєднати певну область вбудованого в

You might also like