Завдання на лабораторну роботу. При підготовці до лабораторної роботи:
При підготовці до лабораторної роботи:
1. Відпрацювати матеріал лекції, літературу.
2 Підготувати структуру сайту, ескізи сторінок і заготівку сторінки з модульною сіткою для розміщення елементів навігації.
3. Створити необхідну кількість малюнків для карти посилань, альбому, кнопок і елементів оформлення.
При виконанні лабораторної роботи:
1. Створення|створіння| посилань
1.1. Створити і випробувати посилання із текстом і зображеннями на Web-сторінки| і ресурси інших типів
1.2. Створити шаблон електронної книжки з оригінальними елементами оформлення (малюнки, маркери і так далі)
1.3. Створити альбом фотографій, що реалізовує оригінальну структуру
2. Створити карту посилань по власному ескізу
3. Дослідження базування
3.1. Створити сайт з використанням абсолютних посилань, випробувати перенесення в інше місце
3.2. Створити сайт з використанням відносних посилань, задати базу, виконати перенос на нове місце
4. Створити форму з елементами, по власному задуму
Звіт по лабораторній роботі представляється у вигляді сайту, який містить начальну сторінку з відомостями про виконавця та завдання роботі, та пов'язана зі сторінками, яки створені при виконанні кожного пункту. Сайт повинен мати оригінальне оформлення.
Контрольні запитання:
1. Що відбудеться при виконанні клацання на посиланні:
<А HREF="nsck.asp"> ТУТ</a>,
<А HREF="md.mdb"> ТУТ</a>,
<А HREF="nsck.php"> ТУТ</a>
2. Чи можна помістити в тег <A>...</A> текст і малюнок одночасно? Якщо так, то що буде посиланням?
3. Чи можна використовувати посилання для переходу усередині сторінки? Якщо так, то як?
4. Де виконуватиметься пошук ресурсу при клацанні на посиланні
<A| HREF="..Pg.html"> Перехід</a>?
5. Файли яких форматів можна використовувати при створенні карти посилань?
6. Що необхідно зробити, щоб браузер відображав всі пропуски і табуляцію?
7. Для чого призначені атрибути ISMAP і USEMAP в тегі IMG?
8. Сформулюйте призначення тега MAP|, назвіть основні атрибути.
9. Чи можна використовувати теги <input type=...> зовні тега FORM? У чому різниця?
10. Як використовується значення атрибутів value в тегі
<SELECT> <OPTION value=1>...</SELECT> ?
Довідкові матеріали до лабораторної роботи
До пункту 1.
Гіперпосилання на різни ресурси мають такий формат:
<A HREF="URL" TARGET="ім'я" TITLE="текст"><P>...</p</a>;
<A HREF="URL" TARGET="ім'я" TITLE="текст"> <IMG...></a>,
де
URL – адреса запрошуваного ресурсу;
ім'я – ім'я вікна, в якому потрібно відкрити ресурс (можна також використовувати спеціальні значення _self - відкрити усередині поточного вікна; _parentабо _topвідкрити у вікні без фреймів; _blankабо new- відкрити в новому вікні);
текст – текст, який буде показаний при наведенні курсору.
Шаблон для переходів по сторінці:
<UL>
<LI><A HREF="#gl1">ГЛАВА 1</A>
<LI><A HREF="#gl2">ГЛАВА 2</A>
<LI><A HREF="#gl3">ГЛАВА 3</A>
</UL|>
.
<A NANE=”gl1”></A>
.
<A NANE=”gl2”></A>
.
<A NANE=”gl3”></A>
До пункту 2.
Наступний малюнок (рис. 1), а точніше його частини (коло та трикутник) можуть бути посиланнями за допомогою наступного коду.
 |
Рис.1 Мапа посилань (map.gif)
Для використання коду потрібно змінні X,Y,R,X1 і т. д. замініть на відповідні значення.
<IMG SRC="map.gif" BORDER=0 USEMAP="#map1">
<MAP NAME="map1">
<AREA HREF="primer1.htm" ALT="Текст перший" SHAPE=CIRCLE COORDS="X,Y,R">
<AREA HREF="primer2.htm" ALT="Текст другий" SHAPE=POLY COORDS="X1,Y1,X2,Y2,X3,Y3">
</map>
До пункту 3.
Звичай базовою адресою вважається та, де розташована початкова сторінка сайту. Шлях до цій папці добавляється до всіх відносних посилань. Однак при необхідності вона може бути змінена за допомогою тега BASE с атрибутом HREF. Можна використати тільки один тег на сторінку.
Приклади адрес:
абсолютна http://www.myst/f1/f2/p2.htm;
відносна p4.htm - розташована у папці разом з початковою сторінкою;
відносна ../p1.htm – розташована у папці на рівень віще;
відносна ../f2/p2.htm – розташована у іншій папці на тому ж рівні;
відносна f4/p4.htm – розташована у папці на рівень нижчі.
До пункту 4
Форми створюються за допомогою тегів FORM (таблиця 8), INPUT (таблиця 9) та SELECT.
Таблиця 8