/ заголовок, текст в комірках і зображення, - за власним смаком ;) /
2. Створення карти <MAP>…</MAP>
Елемент MAP визначає набір областей графічного зображення, при якому різноманітні ділянки можуть посилатися на різні ресурси. Області задаються тегами <AREA>…</AREA>та атрибутомshape.Координати точок зображення можна визначити за допомогою будь-якого графічного редактора (наприклад Paint)
Створити карту зображення із використанням всіх видів контурів. Посилання виконуються на будь-які файли з першої лабораторної.
3. Форми <FORM>…</FORM>
Форми – найважливіші інтерактивні елементи HTML.Весь опис HTML- форми розташовується усередині тегів <form>…</form>. Закриваючий тег </form> ніколи не несе в собі якої-небудь інформації, а от відкриваючий заслуговує додаткового розгляду. Розглянемо синтаксис цього тега: <form method=”метод” action=”ім’я_сценарію”> Атрибут Method може приймати значення GET або POST. А атрибут action являє собою URL якого-небудь сценарію, що виконує дії відповідно до заповненої форми.
Тег <input> має кілька атрибутів. От основні з них: <input type=”тип поля” value=”значення” name=” ім’я”> Де name приймає будь-яке унікальне ім’я в межах однієї форми; будь-яке поле уведення повинне мати ім’я, для наступного оброблення даних із цього поля сценарієм. Value - це значення за замовчуванням даного поля. Атрибут type може приймати значення text, hidden, password, checkbox, radio, reset, submit. Зупинимося на них.
Text - указує браузеру, що потрібно відобразити поле введення. Значення атрибута value буде вказувати первісне значення даного поля. Також тут можуть бути присутнім два додаткових атрибути, це size й maxlenght. Size визначає довжину поля, а maxleght задає максимальну кількість символів, що може ввести користувач.
Hidden - цей тип текстового поля браузер на відображає. Він потрібний для приховання від відвідувача даних.
Password - цей тип поля відображається аналогічно текстовому, тільки всі уведені в ньому символи будуть закриті зірочками, для того, щоб ніхто не міг підглянути пароль, що вводить вами.
Checkbox - браузер відображає цей тип поля квадратом, у якому можна поставити прапорець. За замовчуванням value даного поля коштує ON, але якщо поставити прапорець у це поле, то value прийме значення checked.
Radio - трохи схоже на checkbox, але можна вибрати тільки одне з декількох полів radio, у відмінності від checkbox, може бути включено.
Submit - відображає кнопку, при натисканні на яку всі дані з форми відправляються сценарію, зазначеному в атрибуті action тегу <form>.
Reset - при натисканні на цю кнопку, вся уведена інформація у форму анулюється.
Тег <textarea> визначає багаторядкову область введення. Цей тег має також кілька атрибутів. От приклад: <textarea name=”ім’я” rows=”10″ cols=”20″>Цей текст буде перебуває в області уведення, даного типу, користувач може змінити цей текст</textarea> Атрибути rows й cols визначають висоту й довжину відповідно. “ім’я” - унікальне ім’я в межах однієї форми.
Теги <select>…</select>
Ці теги створюють список, кожний з варіантів якого задається тегом <option>. Тэг <select> може нести в собі атрибути size, name й multiple. З size й name все зрозуміло, а от з multiple… цей атрибут задає режим при якому користувач буде вибирати щось зі списку. Якщо цей атрибут присутній, то користувач може вибрати кілька значень зі списку, а якщо ж він опущений, то можна вибрати тільки одне значення.
Розглянемо приклад:
Створюємо код:
<html>
<head>
<title>Анкета</title>
</head>
<body>
<h3 align=left>Анкета</h3>
<form>
<b>Заповните наступні дані будь ласка:</b><br>
Прізвище <input type=text size=14 name=fam><br>
Ім’я<input type=text size=14 name=name><br>
По батькові<input type=text size=14 name=ot><br>
<b>Скільки вам років?</b><br>
<input name=1 type=radio name=1>Від 1 до 10<br>
<input name=1 type=radio name=2>Від 10 до 18<br>
<input name=1 type=radio name=3>Від 18 до 30<br>
<input name=1 type=radio name=4>Від 30 до 50<br>
<input name=1 type=radio name=5>Від 50 до 100<br>
</form>
</body>
</html>
Завдання:
Створити форму за наступним шаблоном
/ текст та оформлення, - за власним смаком ;) /
4. Фрейми <FRAMESET> … </FRAMESET>
Використання <FRAME> дозволяє розміщувати у вікно робочої області одночасно декілька окремих HTML-документів, змінювати їх розміри, зміст, та організовувати зміну вмісту одного вікна після виконання користувачем дій у іншому вікні. Саме ця властивість дозволяє використовувати фрейми у якості інструмента навігації. Теги <FRAMESET> та </FRAMESET> заміняють теги <BODY> і </BODY> відповідно. Всередині пари <FRAMESET>… </FRAMESET> можуть бути використані тільки теги <FRAME>,<FRAMESET> та <NOFRAMES>. Т.ч. створюється декілька окремих сторінок - фреймів, котрі виводяться на екран одночасно у вигляді декількох віконечок (згідно розбиттю на rows і cols) одного документа.
Приклад розбиття на фрейми:
<html>
<head>
<title> фреймы</title>
</head>
<frameset rows="25%,*" >
<frame src="boy.gif" name="A">
<frameset cols="20%,60%,*">
<frame src="1.html" name="B">
<frame src="hacker.gif" name="C">
</frameset><frame src="hacker.gif" name="C">
<frame src="forma.html" name="D">
</frameset>
</html>
Зверніть увагу на атрибут name !!!
Наприклад в коді<frame src="hacker.gif" name="C"> - це означає, що області, в якій зображено людину за комп’ютером ми надаємо ім’я "C". В майбутньому, якщо необхідно буде завантажити якийсь приклад саме в цю!!! область, то програмний код буде мати приблизно такий вигляд:
<a href="2.html " target="C">Приклад</a>
Тобто посилання знаходиться, в одному вікні, а файл 2.html буде завантажено саме в область "C".
Завдання:
Створити фреймову структуру за наступним шаблоном
/ зміст та оформлення, - за власним смаком ;) /
1. При першому відкритті файлу в головній області має бути написано «Лабораторна робота № 2», і це і буде вигляд головної (домашньої сторінки).
2. Список лівої області складається з трьох пунктів, кожен з яких посилається на окремій файл (з 1 лаб.роботи), при цьому файли завантажуються у Головну область екрану!
3. Таблиця в правій частині має розмір 2 х 2 і містить невеликі зображення
4. Верхня (топ) область містить будь-яке зображення, клік на яке призведе до відображення Головної сторінки, тобто «Лабораторна робота № 2» в головній області.
Блокноті (NotePad). Файли зберігаються із розширенням .html
