Інструктаж з БЖД, інструкція №2. Створення веб-сторінок.
Практична робота
Карти посилань.
Тема: Карти посилань.
Мета: Навчитися створювати карту посилань засобами мови HTML.
Якщо тег <img> з ім’ям файлу малюнка розмістити між тегами <a> і </a>, то з цим малюнком буде пов’язане одне гіперпосилання. Можна зробити і по іншому: поділити малюнок на області, і кожну з них перетворити на гіперпосилання. Такі області називають гарячими, а повне зображення – картою посилань. Вказівник миші після наведення на гарячу область набуває форми руки, як і у випадку текстового посилання.
Гарячі області можуть бути прямокутними,багатокутними або круглими. Слід подбати про те, щоб гарячі області не перетиналися. Для того щоб відвідувач сайту зрозумів, що це карта посилань, а не просто гарна картинка, необхідно дати пояснювальні тексти.
Формування карти гіперпосилань
Графічну карту посилань створюють за допомогою кількох тегів. У тегу <img> визначають атрибут src, щоб задати зображення, і атрибут usemap, значення якого є ім’я карти (має починатися символом #). Власне карту створюють за допомогою тегу <map> з атрибутом name, який містить ім’я карти (визначене в атрибуті usemap, але без символу #) та тегу </map>. Між ними записують теги <area>, які задають параметри гарячих областей.
При цьому використовують такі атрибути:
HREF – визначає гіперпосилання, пов’язане з областю;
SHAPE – визначає форму області, його значення можуть бути:
rect – прямокутник;
polygone або poly – багатокутник;
circle – коло;
COORDS – містить координати області у вигляді взятого в лапки списку чисел, розділених комою. Для прямокутника задають чотири числа – координати верхнього лівого і правого нижнього кутів, для багатокутника – послідовні координати кожного кута, для кола – координати центра і радіус.
Наприклад:
<img src=”map.bmp” usemap=”#karta”>
<map name=”karta”>
<area href=”1.html” shape=”rect” cords=”70,250,160,270”>
<area href=”2.html” shape=”circle” cords=”260,140,60”>
</map>
Слід попрацювати над малюнком карти у графічному редакторі, щоб окреслити необхідні області, які пізніше стануть гіперпосиланнями, та визначити координати, що будуть записані як значення атрибута COORDS.
Місце розташування будь-якої точки на малюнку визначають два числа – її горизонтальна та вертикальна координата. Верхня ліва точка має координати (0;0). Більшим горизонтальним координатам відповідають правіші точки, більшим вертикальним – нижчі.
Практична робота.
Вправа 12.1. Створити HTML-документ за допомогою найпростішого текстового редактора, який містить карту посилань. Карту посилань створити в Вправа 11.1.
Завдання.
Створити папку "ППР_2_Прізвище", у якій розмістити 2 файли: index.html та style.css
Роботу відправити через:
Для виконання роботи можна користуватися програмою Notepad ++
або онлайн редактором https://liveweave.com/