Файл: Опорний_кнспект.pdf

<input type=checkbox name=option1 value=a1 checked>Windows 95/98<br> <input type=checkbox name=option2 value=a2>Windows 2000 <br>

<input type=checkbox name=option3 value=a3>Linux </form>

Ось що виходить:

Ви можете поставити або зняти галочок у одного або відразу декількох елементів.

Значення поля value= визначає, що буде відправлене на сервер при поставленій галочці. Решта параметрів аналогічна параметрам кнопок.

Перемикачі (radiobutton)

Перемикачі використовують, коли необхідно вибрати один єдиний варіант із запропонованих. Використовуваний type=radio

<form action="/cgi-bin/handler.cgi">

<b>Яка пора року Вам більше подобається? </b>

<input type=radio name=answer value=a1>Весну <input type=radio name=answer value=a2>Лето <input type=radio name=answer value=a3>Осень <input type=radio name=answer value=a4>Зиму </form>

На сторінці можна буде побачити наступне:

Тобто, використовуючи радіокнопки Ви можете вибрати тільки одне значення.

Поле із списком

У спадаючому списку можна вибирати одне або декілька значень. Зробимо вибір пори року за допомогою спадаючого списку. Поля вибору починаються тегом <select> і закінчуються </select> Кожне вибиране поле поміщене в теги

<option> і </option >

Приклад:

<form action="/cgi-bin/handler.cgi">

<b>Яка пора року Вам більше подобається?</b>

<p align=center>

<select name= пора року> <option>Весну</option> <option>Лето</option> <option>Осень</option> <option>Зиму</option>

</select>

</form>

На сторінці побачимо наступне:

Для списків використовуються наступні параметри:

вибраному пункті списку.

Кнопка із зображенням

Кнопки із зображеннями аналогічні по дії кнопці Submit, але є малюнком. Використовуваний type=image

<form action="/cgi-bin/handler.cgi"> <table align=center>

<tr><td colspan=2>Введіть ваше ім'я: <tr> <td><input type=text width=25></td>

<td><input type=image src=‘smile3.jpg‘ width=90 height=68 border=0></td> </tr>

</table>

</form>

На сторінці побачимо наступне:

Картинка задається за допомогою тега scr і адрес картинки. src=‘smile3.jpg‘

Таким чином, комбінуючи різні способи створення форм, ми можемо на одній сторінці розмістити декілька форм відразу. Для відокремлення одного виду форми від іншого використовуватимемо тег <fieldset>

Заповните, будь ласка, цю форму Вашими даними і натисніть кнопку "Відправити дані"! Ви зможете побачити варіант обробки Ваших даних.

Ця форма має наступний код:

<form method="post" action="8.php"> <fieldset>

<b>Зaполните Ваші дані:</b>

<br><br>

Ім'я: <input type=text name="name" maxlength=25 size=20 value=" "> <br><br>

</fieldset>

<p>

<fieldset>

<b>Виберітьулюблений колір:</b><br>

<p align=center> <input type=radio name=answer value="#F4F090">Жовтий<br> <Input type=radio name=answer value="#80ECF3">Блакитний<br>

<input type=radio name=answer value="#F3ACC5">Рожевий<br> <Input type=radio name=answer value="#A7F4AB">Зелений<br> </select>

<br><br>

</fieldset>

<p>

<fieldset>

<b>Напишіть тут текст </b><br>

<textarea name="basictext" rows=7 cols=45 ></textarea>

</fieldset>

<p>

<fieldset>

<input type=reset value="Сбросить данные"> <Input type="submit" value="Отправить данные"> </fieldset>

</form>

Контрольні запитання

1.Що таке форма?

2.Який тег описує форму у HTML коді?

3.Які атрибути є обов‘язковими при додаванні форми?

4.Назвіть елементи форми.

5.Який атибут допомагає створити кнопку із зображенням?

Лекція 7 Тема: Фреймова структура web-сторінки

Мета: вивчити теги для створення веб-сторінки з фреймами, визначити їх атрибути, розглянути приклади сторінок з фреймовою структурою, навчитися будувати код веб-сторінки з фремовою структурою та навігаційною панеллю.

План

1.Фрейми, їхні теги та атрибути.

2.Використання посилань у фреймах.

3.Вкладені набори фреймів.

HTML-документи, які містять фрейми

Ви, мабуть, помітили, що користуватися створеним сайтом не дуже зручно, оскільки для переходу на сторінку з головним меню необхідно клацати кнопку Назад. Тому в мові HTML є засіб, за допомогою якого можна створити меню, що постійно відображатиметься під час перегляду сайту. Інформація, що відкривається за допомогою його посилань, буде розташована в іншому наперед визначеному місці.

Список усіх таких посилань, який фактично є змістом веб-сайту і постійно відображається на екрані, називають меню сайту або навігаційним меню. Типове меню складається з графічних зображень у вигляді кнопок або з текстових гіперпосилань, призначених для переходу в основні розділи сайту. Продумане навігаційне меню може легко провести відвідувача сайту всіма основними і додатковими розділами. Постійне відображення меню суттєво спрощуе навігацію розділами, тому відвідувачі можуть більше часу присвячувати опрацюванню вебсайту.

1. Фрейми, їхні теги та атрибути

Веб-сторінка сайту може містити кілька блоків або вікон, які називають фреймами, або кадрами. У кожному з них відображається свій HTML-документ. В одному фреймі може міститися навігаційне меню, а в іншому відкриватися вебсторінки, на які вказують його пункти.

Для того щоб створити веб-сторінку з фреймами, потрібно кілька HTML-

документів. В одному з них задають розмітку екрана, тобто розташовують у вікні браузера фрейми, кожному з яких призначають свої документи.

Сторінка з розміткою, як і звичайна, починається з тегу <HTML> і закінчується тегом < / H T M L > . Для поділу екрана на кілька фреймів використовують теги <FRAMESET> і </ FRAMESET> . Перший має бути розташований після тегу заголовка, але перед тегом <BODY>. Іноді в таких документах зовсім не використовують тег <BODY> .

Два фрейми можна розташовувати поруч по горизонталі або один над одним. У першому випадку використовують атрибут COLS, а в другому — атрибут ROWS тегу <FRAMEZЕТ>. Для поділу вікна на фрейми через кому записують два числа, які визначають розміри фреймів. Для трьох фреймів потрібно три числа. Розміри фреймів вимірюють у пікселах або відсотках від розміру екрана. Якщо потрібно зазначити, що фрейм займає те місце, яке залишилося, використовують символ *.

Елемент FRAMESET

Визначення атрибутів rows = multi-length-list

Цей атрибут визначає розташування горизонтальних фреймів. Це розділений комами список пікселів, відсотків і відносних довжин. За умовчанням використовується 100%, що зазначать один рядок.

cols = multi-length-list

Цей атрибут визначає розташування вертикальних фреймів. Це розділений комами список пікселів, відсотків і відносних довжин. За умовчанням використовується 100%, що зазначать один стовпець.

Елемент FRAMESET визначає макет основного вікна користувача у вигляді прямокутних просторів.

Установка атрибуту rows визначає число горизонтальних відрізань простору в наборі фреймів. Установка атрибуту cols визначає число вертикальних відрізань. Для створення сітки можна встановити обидва атрибути одночасно.

Якщо атрибут rows не встановлений, кожен стовпець займає всю довжину сторінки. Якщо атрибут cols не встановлений, кожен рядок займає всю ширину сторінки. Якщо не встановлений жоден з цих атрибутів, фрейм займає всю сторінку.

Фрейми створюються в напрямі зліва направо для стовпців і зверху вниз для рядків. Якщо вказано обидва атрибути, розділи вікон створюються зліва направо у верхньому рядку, зліва направо в другому рядку і так далі.

Наприклад, тег <FRAMESET ROWS="150, *"> задає поділ вікна на два горизонтальні фрейми, один з яких має висоту 150 пікселів?a другий займає те місце, що залишилося.

Тег <FRAMESET COLS="20%, 55%, *"> задає поділ вікна на три вертикальні фрейми, один з яких займає 20 % від ширини екрана, другий — 55 %, а третій займає те місце, що залишилося. Можна використовувати одночасно і горизонтальний, і вертикальний поділ вікна на фрейми — це роблять за допомогою вкладення тегів <FRAMESET> один в один.

Розглянемо деякі варіанти поділу простору на частини:

5.Екран розділяється горизонтально на дві частини (тобто створюються верхня і нижня частини).

<FRAMESET rows= «50%, 50%»>

.продовження визначення.

</FRAMESET>

6.Створюється три стовпці: другою має фіксовану ширину 250 пікселів (це корисно, наприклад, для представлення зображення відомої ширини). Перший фрейм отримує 25% простору, що залишився, а третій – 75%.

<FRAMESET cols= «1*, 250,3*»>

.продовження визначення.

</FRAMESET>

7.У наступному прикладі створюється сітка 2x3.

<FRAMESET rows= «30%, 70%» cols= «33%, 34%, 33%»>

.продовження визначення.

</FRAMESET>

8.Для наступного прикладу припустимо, що вікно браузера має висоту строгі 1000 пікселів. Перший розділ отримує 30% загальної висоти (300 пікселів). Другою має висоту рівно 400 пікселів. Залишається 300 пікселів на два інші фрейма. Для четвертого фрейма задана висота «2*», так що він повинен бути удвічі вище третього, для якого задані висота «*» (еквівалентно 1*). Таким чином, третій фрейм матиме висоту 100 пікселів, а четвертий – 200.

<FRAMESET rows= «30%, 400,*, 2*»>

.продолжение визначення.

</FRAMESET>

Після поділу екрана на вікна для кожного фрейму слід задати HTML-документ, який відображатиметься в ньому. Для цього використовують тег <FRAME> з атрибутами, що керують властивостями фреймів:

•SRC — задає ім'я файлу, що відображатиметься у фреймі;

•NAME — задає ім'я фрейму;

•MARGINHEIGHT — додає порожнє поле, висота якого визначена в пікселах, між верхньою межею фрейму і початком тексту або графіки;

•MARGINWIDTH — додає порожнє поле, ширина якого визначена в пікселах, між боковими межами фрейму і початком тексту або графіки.

•SCROLLING — визначає наявність (значення yes ) або відсутність (значення no) смуг прокручування у вікні фрейму (за умовчанням — yes);

•NORESIZE — забороняє користувачу змінювати розміри фрейму;

•BORDER — визначає ширину розділювальної смуги між фреймами в пікселах;

•BORDERCOLOR — визначає колір розділювальної смуги між фреймами;

Приведемо запис тега <FRAME> зі всіма параметрами:

<FRAME SRC="url" NAME="window_name" SCROLLING=YES|NO|AUTO

MARGINWIDTH="value" MARGINHEIGHT="value" NORESIZE>

На практиці в тегу <FRAME> рідко використовуються одночасно всі параметри.