Контрольні запитання
У якій тег заключаються всі елементи управління?
Який атрибут тегу <form> вказує на файл, який оброблятиме дані форми?
Які існують значення атрибуту type в тезі <input>?
У чому відмінності тегу <input type=”reset”> і <input type=”submit”>?
Як додати на форму перемикач?
Для чого призначений тег <textarea>?
Скільки тегів необхідно, щоб вивести на екран поле вводу для вказівки дороги до файлу і кнопки огляду?
Які існують методи передачі даних форми на сервер?
Як здійснюється обробка форм?
За рахунок чого перемикачі можна розбивати на групи?
Який атрибут тегу <input> дозволяє вказати значення, яке буде заповнено при першому відображенні форми?
Для чого призначений атрибут checked?
Практична робота 6 Тема: Фрейми. Карти зображень
Мета: 1. Навчитися створювати фрейми. 2. Навчитися управляти властивостями фреймів. 3. Навчитися створювати і застосовувати карти зображень для не прямокутних посилань.
Питання для повторення:
HTML-документи, які містять фрейми.
Фрейми, їх теги й атрибути.
Використання посилань у фреймах.
Недоліки використання фреймів.
Завдання:
Створити HTML-сторінку з наведеними структурними елементами.
Хід роботи:
С
творити
html-файл (lab6_frame.html),
що
складається з трьох фреймів (див.
рис. справа). Для
створення фрейму необхідно після
розділу заголовка документа вказати
структуру фреймів:
два фрейми вертикальні,
а у
другому вертикальному – ще два
горизонтальні фрейми:
<frameset cols="20, *">
<frame src="file.html">
<frameset rows="100, *">
<frame src="file.html">
<frame src="file.html">
</frameset>
</frameset>
Помістити файл у свою папку і дати кожному фрейму унікальне ім’я: left, head, foot, для чого використати значення атрибуту name для тегу <frame>.
Задати лівому фрейму фіксовану ширину в 234 пікселя із забороною змінювати ширину фрейму (атрибут noresize).
У лівий фрейм помістити файл меню (menu.html), який складатиметься із списку лабораторних робіт. Меню розмістити в таблиці, що складається з 3-х рядків (у кожен рядок фоном помістити рисунок fon.jpg, взятий із архіву до лабораторної роботи).
<table>
<tr>
<td
background=fon.jpg width="210" height="24"
align="center"><a href="Lab1.html">Лабораторна
робота 1</a></td>
</tr>
<tr>
<td background=fon.jpg width="210" height="24" align="center"><a href="Lab2.html">Лабораторна робота 2</a></td>
…
…
<td background=fon.jpg width="210" height="24" align="center"><a href="Lab5_anketa.html">Лабораторна робота 5</a></td>
</tr>
</table>
Задати для кожної лабораторної роботи посилання на відповідний документ, який буде відкриватися в правому нижньому фреймі. Для відкриття посилання в іншому фреймі використати атрибут target тегу <a>, як значення атрибута target вказати ім’я фрейму, в якому необхідно відкрити файл.
<a href="Lab1.html" target="foot">Лабораторна робота 1</a>
У верхній фрейм помістити, як джерело, пошукову систему google.com.ua. Значення атрибута src для другого тегу <frame>:
<frame src="http://www.google.com.ua/" name="head">
Створити в своїй папці файл lab6_map.htm, який буде містити карту-зображень.
Помістити у файл map.htm зображення-карту з геометричними фігурами:
<img src="figure_1.png" border="0" usemap="#navigation">
Доповнити файл обробкою карти зображень:
<map name="navigation">
<area shape="circle" coords="72,93,40" href="krug.html" title="Коло ">
<area shape="rect" coords="129,129,268,194" href="pryam.html" title="Прямокутник ">
<area shape="poly" coords="168,108,221,15,279,108" href="triangle.html" title="Трикутник ">
</map>
Перевірити роботу карти-зображень. Звернути увагу на спливаючі підказки і посилання.
Створити в окремому файлі аналогічну карту-зображень для задання областей України. У карті-зображень виділити три області, на київську область призначити посилання на сайт http://meta.ua/, на дві інших області – посилання на сайт міської адміністрації. Щоб дізнатися координати точок зображення можна використати програму Paint).
Додати у лівий фрейм файлу lab6_frame.html, посилання на створену карту-зображень.
Показати виконану роботу викладачеві.