Завдання до лабораторної роботи
Завдання №1.
1. Створіть форму й зв'яжіть всі прапорці й перемикачі з відповідними написами.
2. Додайте до створеної форми вибірково підказки, розширте зміст форми.
Приклад форми
<FORM enctype="multipart/ form-data" action="url" method="post">
Уведіть ім'я файлу:<BR>
<INPUT type="file" name="myfile" ><BR><BR>
<INPUT type="submit" value="Послати файл"><br>
<h2>Меню китайського ресторану</H2>
<h3>Зробіть замовлення</h3>
<P>
<INPUT type="checkbox" id=a1 name="menu" value="shark" title="Для вибору блюда - натисніть ліву кнопку миши">
<label for="a1">Акулячі плавці </label> <br>
<INPUT type="checkbox" name="menu" value="fish">Риб'ячий шлунок <BR>
<INPUT type="checkbox" name="menu" checked value="bat"> Кажан <BR>
<INPUT type="checkbox" name="menu" value="bamboo"> Паростки бамбука <br><br>
<I>Де Ви збираєтеся провести відпустку? </I>
<P> <font face="Times New Roman, Times, serif">
<INPUT type="radio" name="rest" value="sea">
На морі <BR>
<INPUT type="radio" checked name="rest" value="mount">
B горах <BR>
<INPUT type="radio" name="rest" value="cru">
B круїзі <BR>
<INPUT type="radio" name="rest" value="abr">
B закордонної поїздки</font>
</FORM>
Завдання №2.
1. Створіть форму, HTML-код якої поданий нижче, вивчите її елементи
<form>
<h2 align="center" > текстові поля</h2><BR>
<label>Уведіть своє прізвище </label><BR>
<input type="text" align="middle" name="text1" value="Іванов"><BR><BR>
<label>Уведіть своє ім'я </label><BR>
<input type="text" align="middle" name="text2" value="Іван"><BR><BR>
<label>Уведіть пароль</label>
<input type="hidden" name=" e-mail" value="anri@rambler.ru"><BR><BR>
<input type="password» name="pass" maxlength="10"><br><BR>
<TEXTAREA name="recipe" cols=50 rows=4>
1.Висипте вміст кожного пакета в окрему ємність.
2.Розчините кожний компонент у невеликій кількості води.
3.Улийте один розчин в інший і долийте води до 1 літра.
</TEXTAREA> <br>
<hr>
<h2 align="center" > кнопки</h2>
<INPUT type="button" value="Пуск" name="start"> <BR><BR>
<INPUT type="submit" value= "Передача" name="trans"><BR><BR>
<INPUT type="reset" value="Повторне уведення"><BR><BR>
<input type="image" src="5.gif» align="middle" name="scr1" width="80" height="50"><BR>
<hr>
<h2>Приклади списків</h2>
<SELECT name="list1">
<OPTION value-"0">пісні
<OPTION value="l">танці
<OPTION value="2">застілля
</SELECT> - список, що розкривається,<BR><BR>
<SELECT name="list2" size=3>
<OPTION value="O">Будні
<OPTION value="l">Вихідні
<OPTION value="2">Свята
<OPTION value="3">Торжества
<OPTION value="4">Прикрості
</SELECT>
<SELECT name="prod3" size=4 multiple>
<OPTION value="O">1 курс
<OPTION value="1">2 курс
<OPTION value="2">3 курс
<OPTION value="3">4 курс
<OPTION value="4">5 курс
</SELECT> - список із множинним вибором<BR><BR>
<FIELDSET>
<LEGEND>ФИО</LEGEND>
Прізвище: <INPUT type="text" name="subj" id="surn">
Ім'я: <INPUT type="text" name="subj" id="nam">
По батькові: <INPUT type="text" name="subj" id="patr">
</FIELDSET>
<FIELDSET>
<LEGEND>Освіта</LEGEND>
<INPUT type="radio" value="yes" checked name="educ" id="ss"> Середня<br>
<INPUT type="radio" value="no" name="educ" id="hs"> Вища
</FIELDSET>
</form>
2. Перевірте роботу програми:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<FORM action="http://somesite.com/prog/someprog" method="post">
<P>
<SELECT name="ComOS">
<OPTION selected label="none" value="none">None</OPTION>
<OPTGROUP label="PortMaster 3">
<OPTION label="3.7.1" value="pm3_3.7.1">PortMaster 3 with ComOS 3.7.1</OPTION>
<OPTION label="3.7" value="pm3_3.7">PortMaster 3 with ComOS 3.7</OPTION>
<OPTION label="3.5" value="pm3_3.5">PortMaster 3 with ComOS 3.5</OPTION>
</OPTGROUP>
<OPTGROUP label="PortMaster 2">
<OPTION label="3.7" value="pm2_3.7">PortMaster 2 with ComOS 3.7</OPTION>
<OPTION label="3.5" value="pm2_3.5">PortMaster 2 with ComOS 3.5</OPTION>
</OPTGROUP>
<OPTGROUP label="IRX">
<OPTION label="3.7R" value="IRX_3.7R">IRX with ComOS 3.7R</OPTION>
<OPTION label="3.5R" value="IRX_3.5R">IRX with ComOS 3.5R</OPTION>
</OPTGROUP>
</SELECT>
</FORM>
</body>
</html>
3. За аналогією розробіть форму, «Електронна книгарня» з реєстрацією відвідувача, кодом доступу, можливістю вибору розділу літератури, пам'яткою по проведенню покупки й інших полів.
Контрольні питання
Який тег застосовується для організації взаємодії з користувачем (вікна введення тексту, прапорці, перемикачі, меню тощо)?
За допомогою яких тегів створюються кнопки у формах для інтерактивної взаємодії з користувачем?
За допомогою яких атрибутів задається розмір текстового вікна для введення інформації?
Лабораторна
робота №
8
Аркуші стилів
Мета: отримати первинні відомості про аркуші стилів та CSS правила, опанувати основні принципи побудови аркушів стилів. Вивчити основні стильові властивості та їх значення, навчитися використовувати стильові властивості при створенні HTML-документів.