- •Міністерство освіти і науки України
- •Поради при створенні Web-сторінки
- •Завдання до лабораторних робіт
- •Лабораторна робота №1 Простий документ html. Форматування тексту
- •Завдання до лабораторної роботи №1 для самостійного виконання
- •Студент групи *-ек а.П.Іванов Лабораторна робота №2 Графіка
- •Завдання до лабораторної роботи №2 для самостійного виконання
- •Лабораторна робота №3 Таблиці
- •Завдання до лабораторної роботи №3 для самостійного виконання
- •Лабораторна робота №4 Списки
- •Завдання до лабораторної роботи №4 для самостійного виконання
- •Лабораторна робота №5 Гіпертекстові посилання
- •Завдання до лабораторної роботи №5 для самостійного виконання
- •Лабораторна робота №6 Сенсорні зображення
- •Завдання до лабораторної роботи №6 для самостійного виконання
- •Лабораторна робота №7 Створення і використання форм
- •Завдання до лабораторної роботи №7 для самостійного виконання
- •Лабораторна робота №8 Фрейми
- •Завдання до лабораторної роботи №8 для самостійного виконання
- •Використана література
Завдання до лабораторної роботи №5 для самостійного виконання
Створіть документ links.html із заголовком “Мої гіперпосилання” і збережіть його у тій самій папці, що і документ myself.html (лабораторна робота №1). Додайте в links.html перелік гіперпосилань на різні ресурси Інтернету. Наприклад:
Поштова служба http:/www.mail.ru/
Пошуковий сервер http:/www.rambler.ru/ і т.ін. — всього 6-8 гіперпосилань.
При зверненні до них документи повинні відкриватися у новому вікні.
Додайте у верхню частину документа links.html гіперпосилання “на головну сторінку”, яке повертає назад до документа myself.html.
Додайте у документ myself.html строку “Мої гіперпосилання”, що адресує документ links.html. Документ має відкриватися у поточному вікні.
Зробіть підпис із файла myself.html гіперпосиланням на вашу електронну адресу.
Додайте у нижню частину файла myself.html гіперпосилання “у початок сторінки”, котре адресує перший рядок документа.
Лабораторна робота №6 Сенсорні зображення
Сенсорне зображення — це малюнок, поділений на окремі ділянки (“гарячі” області), кожна з яких є гіперпосиланням на окремий документ або повязана з якою-небудь процедурою. Наприклад, розмістивши курсор у різні точки зображення, ми можемо побачити різні надписи. В якості графічного формату для карткового зображення вибирається формат GIF. Області малюнка, чуттєві до натиснення “миші”, описуються у тезі <MAP>…</MAP>, що має вигляд:
<MAP NAME="імя карти">...</MAP>
Атрибут NAME визначає імя навігаційної карти (унікальне для даного документа) і використовується для виклику карти за допомогою параметра USEMAP елемента IMG. Значення цих атрибутів повинні співпадати. Тег <MAP> для зручності розміщують на початку документа після тега <BODY>. Блок тега <MAP> має такий вигляд:
<!—Створюємо карту Map1 : --> <MAP NAME="Map1"> <!—Задаємо області --> <AREA HREF="...> <AREA HREF="...> ... </MAP> <!—Карта готова -->
За допомогою тега <AREA> описуються чуттєві області зображення. Для цього використовується параметр SHAPE, що визначає форму активної області для карти і може приймати значення:
RECT — прямокутник;
CIRCLE — коло;
POLY – многокутник;
DEFAULT — область за замовчуванням (вся повністю).
Усі області, крім DEFAULT, потребують указання координат в атрибуті COORDS. Список координат залежить від вибраної форми, вони визначаються у пікселях і записуються через кому. Верхній лівий кут має координати (0,0).
Для прямокутника вказуються координати лівого верхнього і правого нижнього кутів, наприклад:
<area shape="rect" coords="0,0,200,100">
Для кругавказуються координати центра і радіус у пікселях, наприклад:
<area shape="rect" coords="0,0,200,100">
Для многокутника перелічуються пари X- та Y- координат вершин. Для надійності многокутник повинен бути замкненим, тобто перша пара вершин має співпадати з останньою.
В опції HREF=URL зазвичай вказується URL-адреса документа, що адресується даною областю. Якщо чуттєва область визначена, але не повязана ні з одним документом, то замість даної опції вказується значення NOHREF. Для звязування зображення із створеною картою достатньо у тезі <IMG>, за допомогою якого вставляється зображення, вказати опцію USEMAP=#імя карти, наприклад:
<img src="1.jpg" width="526" height="400" border="1" usemap="#a1">
Приклад 1:
<!—Створюємо карту -->
<MAP NAME="map1">
<AREA HREF="index.html" ALT="Водопад" SHAPE="rect" COORDS="0,0,300,260">
</MAP>
<!—Застосовуємо її до малюнку -->
<IMG src="vodopad.jpeg" WIDTH="300" HEIGHT="260" BORDER="2" ALT="Водопад" USEMAP="#map1">
Приклад 2:
<!—Створюємо карту із спливаючими заголовками-->
<map name="map2">
<area shape="rect" coords="0, 0, 300, 50" href="#" title=" Блакитне небо ">
<area shape="POLY" coords="120, 180,210,180,150,150" href="#" title=" Човен ">
<area shape="POLY" coords="0,20,50,20,30,140,0,120,0,20" href="#" title=" Скеля ">
<area shape="CIRCLE" coords="50,235,25" href="#" title=" Камінь ">
</map>
<!—Застосовуємо її до малюнку -->
<IMG src="vodopad.jpeg" width=300 height=260 border=1 usemap="#map2">