Вкладені і множинні кадрові структури

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

В основному вкладені фрейми діють так само, як вкладені таблиці. Задайте кадрову структуру, а усередині якого-небудь фрейма в ній — ще одну структуру. Необхідно пам'ятати, що тег <FRАМЕ> не має закриваючого тега. Ви, напевно, помітили, що при роботі з фреймами не використовуються атрибути <СОLSРАN> і <ROWSРАN>. Їх роль грають множинні, або вкладені, фрейми. Задавши усередині однієї охоплюючої фреймової структури дві незалежні підструктури, можна помістити в лівій частині екрану стовпець з двох, а в правій — з трьох фреймів.

Плаваючі фрейми

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

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

Синтаксис

<iframe>...</iframe>

<iframe>...</iframe>

Атрибути:

align - визначає як фрейм вирівнюватиметься по краю, а також спосіб обтікання його текстом.

allowtransparency - встановлює прозорий фон фрейма, через який видно фон сторінки.

frameborder - встановлює, відображати межу навколо фрейма або ні.

height - висота фрейма.

hspace - Горизонтальний відступ від фрейма до навколишнього контенту.

marginheight - Відступ згори і знизу від змісту до межі фрейма.

marginwidth - Відступ ліворуч і праворуч від змісту до межі фрейма.

name - Ім'я фрейма.

sandbox - Дозволяє задати ряд обмежень на контент завантажуваний у фреймі.

scrolling - Спосіб відображення смуги прокрутки у фреймі.

seamless - Визначає, що вміст фрейма повинен відображатися так, немов воно є частиною документу.

src - Шлях до файлу, вміст якого завантажуватиметься у фрейм.

srcdoc - Зберігає вміст фрейма безпосередньо в атрибуті.

Vspace - Вертикальний відступ від фрейма до навколишнього контенту.

width - Ширина фрейма.

Навігаційні карти

Активні зображення(image maps), або зображення, чутливі до клацань миші, дозволяють створити на вузлі графічні меню довільної форми. Активне зображення — це зображення з так званими активними областями(hot spots), які посилаються на URL інших сторінок або вузлів.

Є два методи формування активних зображень : на сервері і у клієнта. Зображення першого типу використовують сервер для того, щоб знайти той, що відповідає цій активній області URL і передати на браузер потрібну сторінку. Активні зображення, працюючі на клієнтській машині, задають інформацію про активну область на НТМL- сторінці, так що браузер сам з'ясовує, які області є активними, і просить з сервера відповідну сторінку.

Активні зображення, працюючі у клієнта, мають декілька переваг. По-перше, сторінки з ними можна перенести на інший сервер. По-друге, серверу не доводиться виконувати зайву роботу(наприклад, переглядати усю інформацію про активні області), тобто навантаження на сервер зменшується. При використанні працюючих на сервері активних зображень в каталозі сgi - bin сервера має бути відповідний сценарій. З міркувань безпеки багато системних адміністраторів не записують сценарії в каталог сgi - bin. Тому детальніше ми розглянемо створення активних зображень у клієнта.

Створення активного зображення. Процес створення активного зображення складається з двох етапів. Спочатку необхідно визначити на картинці області, які треба зробити активними, а потім співвіднести їх з посиланнями на інші URL. Активні області задаються перерахуванням їх координат(у пікселах). Усе це можна зробити вручну, визначивши координати кутів активних областей, але набагато простіше скористатися якою-небудь програмою, наприклад МарЕdit.

Визначити карту легко. Треба відкрити в МарEdit HTML- файл, що містить зображення, на якому вимагається створити активні області, після чого вибране зображення буде завантажено в робоче вікно. Потім слід вибрати тип активної області(квадрат, трикутник і круг), клацнути і потягнути мишкою, позначивши межу області. Програма автоматично робить запис в HTML- файл, що описує межі активної області. Потім цій області треба приписати URL. У будь-яких місцях зображення можна намалювати активні області і визначити для кожної з них URL. Важливо залишати між областями трохи місця, щоб при читанні бути упевненим, що активізується правильне посилання. Межі активних областей задаються координатами кутів прямокутника і багатокутника або центру і радіусу круга. Якщо ви вирішили робити активне зображення у клієнта, Map Edit поставляє дані тільки для тегів <MAP>. Вам доведеться самим задати тег зображення з атрибутом USEMAP і помістити його після тега

</MAP>. Не забудьте перед ім'ям карти в

атрибуті USEMAP записати символ «#» таким чином:

<IMG SRC="mymap.gif" USEMAP="#sitemap">

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

<IMG SRC="ball.gif" ALT="Навігаційна карта" WIDTH="200" HEIGHT="200" USEMAP="#imap">

<MAP NAME="imap">

<AREA SHAPE="rect" COORDS="0,0,100,200" HREF="frame.html">

<AREA SHAPE="rect" COORDS="150,0,200,200" HREF="Untitled1.html">

<AREA SHAPE="default" nohref>

</MAP>

Форми

Форми були створені і використовуються в WWW для отримання відгуку користувача на надану інформацію і збору даних про користувача. Після заповнення користувачем форми і запуску процесу її обробки інформація з неї потрапляє до програми, працюючої на сервері. Простота використання тега <MAILTO:> у формах дозволяє навіть власникам невеликих сторінок отримувати відгук від своїх читачів. Для обробки великої кількості відгуків використовуються програми, підтримувальні Common Gateway Interface(CGI) і розташовані на сервері, на адресу якого поступають відгуки. Таким чином користувач може інтерактивно взаємодіяти з Web- сервером через Internet.

Завдання форми — елемент FORM

Елемент FORM означає документ як форму і визначає межі використання інших тегів, що розміщуються у формі. Тег <FORM> визначається послідовністю тегів <INPUT>, розміщених усередині пари <FORM> і </FORM>. У формі використовується як метод(method), так і дія(action) для опису обробки даних, що вводяться користувачем у форму. Метод(GET або POST) визначає, як повинні оброблятися входны΀? дані з форми, а дія вказує на URI(Uniform Resource Identifier) програми, відповідальної за обробку цих даних.

<FORM METHOD=post ACTION=mailto:yourname@your.email.address>

Визначення елементів управління форми — тег <INPUT>

Цей тег використовують для визначення області усередині форми, куди вводяться дані. Він формує поле для введення інформації користувачем. Це може бути текстове поле, опція, зображення або кнопка. Вид поля введення визначається значенням атрибуту TYPE.

Атрибут TYPE=text

Коли користувачеві необхідно ввести невелику кількість тексту(одну або декілька рядків), використовується тег <INPUT>, і атрибут TYPE встановлюється в значення text. Цього значення набуте за умовчанням і вказувати його необов'язково. Крім того, задається атрибут NAME для визначення найменування змінної поля.

Ваше ім'я <INPUT NAME=Name SIZE=35>

Є ще три додаткові атрибути, які можна використати. Перший називається MAXLENGTH, він обмежує число символів, що вводяться користувачем в поточне поле. За умовчанням це число не обмежене. Другим атрибутом є SIZE, визначальний розмір видимої на екрані області, займаної поточним полем. Значення за умовчанням визначається типом браузеру. Якщо значення MAXLENGTH більше, ніж SIZE, браузер прокручуватиме дані у вікні. Останнім з додаткових атрибутів є атрибут VALUE, що забезпечує початкове значення поля введення.

Атрибут TYPE=checkbox

Для створення незалежних прапорів у формах HTML використовується тег <INPUT> з атрибутом TYPE=checkbox. Залежно від змісту форми користувач може відмітити декілька прапорів. Коли форма використовує тег <INPUT> з атрибутом CHECKBOX, в нім мають бути присутніми і атрибути NAME, і VALUE. Атрибут NAME вказує на найменування цього поля(прапора) введення. У атрибуті VALUE міститиметься значення поля.

<BR>Росія <INPUT NAME="Країна" TYPE=checkbox VALUE="Росія">

Країни СНД<INPUT NAME="Країна" TYPE=checkbox VALUE="СНД">

В деяких випадках необхідно ініціалізувати цей прапор, як вже відмічений. У таких випадках тег <INPUT> повинен містити атрибут CHECKED.

Атрибут TYPE=radio

В деяких випадках вимагається організувати вибір одного з декількох можливих значень. Для створення форми введення при виборі користувачем одного значення з декількох можливих необхідно використати тег <INPUT> з атрибутом TYPE=radio. Коли у формі застосовується цей атрибут, в тегу <INPUT> мають бути вказані атрибути NAME і VALUE. Атрибут NAME вказує найменування того, що відповідає по΀?я(кнопки). Атрибут VALUE містить значення поля.

<BR>Пол чоловічий<INPUT NAME="Пол" TYPE=radio VALUE="Чоловічий">

Пол жіночий<INPUT NAME="Пол" TYPE=radio VALUE="Жіночий">

Атрибут TYPE=image

Залежно від вмісту форми може статися так, що користувачеві потрібно буде клацнути мишею на зображенні, щоб завершити роботу з формою. Для цього програмісти використовують тег <INPUT> з атрибутом TYPE=image. Коли користувач клацає мишею по зображенню, браузер зберігає координати відповідної точки екрану. Далі він «обробляє» введену у форму інформацію. Коли форма використовує атрибут image, тег <INPUT> повинен містити також атрибути NAME і SRC. NAME вказує найменування поля введення форми. Атрибут SRC містить URI файлу — джерела зображення. Атрибут ALIGN є додатковим і використовується аналогічно тому ж атрибуту тега <IMG>.

<BR>Виберіть точку<INPUT TYPE=image NAME=point SRC=image.gif>

Атрибут TYPE=password

Якщо у формі вимагається організувати введення пароля, то атрибут TYPE можна встановити в значення password(TYPE=password). Використовуючи цей тип, можна організувати введення пароля без виводу на екран складових його символів. При цьому слід пам'ятати, що введені дані передаються по незахищених каналах зв'язку і можуть бути перехоплені.

<BR>Підпис<INPUT NAME=login>Пароль <INPUT TYPE=password NAME="Слово">

Атрибут TYPE=reset

Коли користувач заповнює форму, йому може потрібно почати все спочатку. На такий випадок існує кнопка Reset, по якій користувач може клацнути мишею, щоб повернутися до первинних значень полів. Коли користувач вибирає цю кнопку, форма відновлює первинні значення усіх елементів, в яких є присутнім атрибут TYPE=reset. Для створення кнопки Reset використовується тег <INPUT> з атрибутом TYPE=reset. Браузер у свою чергу виводитиме зображення цієї кнопки. Якщо у формі використовується атрибут reset, тег <INPUT> може додатково містити атрибут VALUE. Цей атрибут визначає напис на зображенні кнопки.

<INPUT TYPE=reset VALUE="Очистити форму">

Атрибут TYPE=submit

Використовуючи форму HTML для введення інформації від користувача, необхідно забезпечити користувачеві можливість завершити введення даних. Для цього використовується тег <INPUT> з атрибутом TYPE=submit. Браузер, у свою чергу, виводить цей елемент, як кнопку, по якій користувач може клацнути, щоб завершити процес редагування. Коли у формі використовується тег <INPUT> з атрибутом submit, цей елемент може містити два додаткові атрибути: NAME і VALUE. Атрибут NAME зберігає значення змінної поля у вашій формі. Атрибут VALUE — вказує найменування кнопки Submit.

<BR><INPUT TYPE=submit VALUE="Відправити повідомлення">

Атрибут TYPE=hidden

Приховані поля. Додавання в тег INPUT атрибуту TYPE=hidden дозволить включити у форму значення атрибутів NAME і VALUE, що відправляється, які користувач змінити не може. Такі мітки корисні за наявності декількох форм для подальшої обробки даних.

Створення багаторядкових областей введення тексту — тег <TEXTAREA>

Залежно від типу форми може потрібно організувати введення великої кількості тексту. У таких випадках використовується тег <TEXTAREA> для створення текстового поля з декількох рядків. Цей тег використовує три атрибути: COLS, NAME і ROWS.

Атрибут COLS

Вказує(число символів) число колонок, що містяться в текстовій області.

Атрибут NAME

Визначає найменування поля.

Атрибут ROWS

Задає кількість видимих рядків текстової області.

<BR><TEXTAREA NAME=тема COLS=38 ROWS=3></TEXTAREA>

Використання списків у формі — тег <SELECT>

Коли форми HTML стають складнішими, в них часто включають списки з прокруткою і випадні меню. Для цього використовують тег SELECT з атрибутом TYPE=select. Для визначення списку пунктів використовують тег <OPTION>. Тег <SELECT> підтримує три необов'язкові атрибути: MULTIPLE, NAME і SIZE.

Атрибут MULTIPLE

Дозволяє вибрати більш ніж одно найменування.

Атрибут NAME

Визначає найменування об'єкту.

Атрибут SIZE

Визначає число видимих користувачеві пунктів списку. Якщо у формі встановлено значення атрибуту SIZE=1, то браузер виводить на екран список у вигляді випадного меню. У разі SIZE > 1 браузер представляє на екрані звичайний список.

У формі може використовуватися тег <OPTION> тільки усередині тега <SELECT>. Ці теги підтримують два додаткові атрибути: SELECTED і VALUE.

Атрибут SELECTED

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

Атрибут VALUE

Вказує на значення, повертане формою після вибору користувачем цього пункту. За умовчанням значення поля дорівнює значенню тега <OPTION>.

<BR>Вибір

<SELECT NAME="Вибір">

<OPTION>Варіант 1

<OPTION>Варіант 2

<OPTION VALUE="Варіант 3">Варіант 3

<OPTION SELECTED>Варіант 4

</SELECT>