Створення гіперпосилань засобами HTML

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

;-iREF="http: //www. Intel. com/cd/corporate/europe/EMEA/R US/about/index.Ь±т">Інформац±я про компанію Intel</A>,

де значення атрибута HREF - адреса документа "index.htm" у каталозі «cd/corporate/europe/EMEA/RUS/about» на машині "www.intel.com", доступ до якої здійснюється за протоколом HTTP. Форма запису цієї адреси називається універсальним локатором ресурсів URL;i|e складовою частиною технології WWW.

Задана у такому виді адреса ресурсу називається абсолютною або повною адресою ресурсу.

Можливі також і посилання на інші види ресурсів:

<А HREF="ftp://server/directory/file.ext">3авант файл</А>

Таке посилання, якщо ним скористатись, запустить протеї передачі файлів і почне завантаження файлу file.ext, що знаходить^ каталозі directory на сервері server, на локальний диск користувача. <А HREF="mailto:user@mail.box"> Відправити лист</АІ|

Якщо користувач здійснить перехід за таким посиланням, то у имі на екрані відкриється вікно вводу вихідного повідомлення його пошто| програми. У рядку То: ("Куда") вікна поштової програми буде вкаЩ user@,mail.box.

HTML форми

Деякі WWW browser дозволяють користувачу, заповіти спеціальну форму, що повертає отримане значення, виконувати деякі Щ на WWW-сервері користувача. Коли форма інтерпретується Wf'l броузером, створюються спеціальні екранні елементи GUI, такі, як ІІЙЦ введення, checkboxes, radiobuttons, випадаючі меню, скролінгуючі сші(Щ| кнопки і т.д. Коли користувач заповнює форму і натискує кишіиу "Підтвердження" (SUBMIT — спеціальний тип кнопки, що задається при опису документа), інформація, введена користувачем у форму, посилається HTTP-серверу для обробки і передачі іншим1 програмам, ній працюють під сервером, відповідно д*о CGI (Common Gateway Interiiiof) інтерфейсу.

Коли користувач описує форму, кожен елемент введення даних мв§

тег <INPUT>. Коли користувач помішує дані в елемент форми, інформяш

розміщується в розділі VALUE даного елементу..

Синтаксис форм * ■ "Я

Усі форми починаються тегом <FORM> і завершуються^тегвщ

</FORM>. уЩ

<FORM METHOD="getIpost" ACTION="URL">

Елементи_форми__і_інші_ елементи_НТМЬ Щ

<?FORM>

METHOD. ЧН

Метод посилання повідомлення з даними із форми. В залежності ПІД

методу, що використовується, користувач може посилати результати

введення даних у форму двома шляхами:

• GET: Інформація з форми додається в кінець URL, що був зазначений в описі заголовка форми. CGI-програма (CGI-скрипт) одержує дані Щ форми у вигляді параметра змінного середовища QUERY_STRIN(J Метод GET не рекомендується використовувати.

• POST: Даний метод передає всю інформацію про форму одразу після

звертання до зазначеного URL. CGI-програма одержує данй форми в

стандартний потік введення. Сервер не буде пересилати повідомлення

про закінчення пересилання даних в стандартний потік введення;

замість цього використовується змінна середовища

CONTENT LENGTH для визначення, яку кількість даних необхідно зчитати зі стандартного потоку введення. Даний метод рекомендується до використання. ACTION.

ACTION описує URL, який буде викликатися для обробки форми. Даний URL майже завжди вказує на CGI-програму, що обробляє дану форму.

Розглянемо теги форми. TEXTAREA.

Тег <TEXTAREA> використовується для того, щоб дозволити користувачу вводити більше одного рядка інформації (вільний текст). Приклад використання тега <TEXTAREA>: <TEXTAREA NAME="address" ROWS=10 COLS=50> Вінниця, Соборна, 13 </TEXTAREA>

Атрибути, що використовуються всередині тега <TEXTAREA>, описують зовнішній вигляд та ім'я значення, що 'вводиться. Тег </TEXTAREA> необхідний навіть тоді, коли поле введення постійно порожнє. Опис атрибутів:

• NAME - ім'я поля введення;

•' ROWS - висота поля введення в символах; о COLS — ширина поля введення в символах.

Якщо потрібно, щоб в поле введення за замовчуванням видавався будь-який текст, то необхідно вставити його всередину тегів <TEXTAREA> і </TEXTAREA>.

INPUT. Тег <INPUT> використовується для введення одного рядка тексту або одного слова. Атрибути тега:

• CHECKED - означає, що CHECKBOX або RADIOBUTTON буде обраний. і»WP

• MAXLENGTH - визначає кількість символів, яку можна ввести в поле введення. При перевищенні кількості припустимих символів браузер реагує на спробу введення нового символу звуковим сигналом і не дає його ввести. Не плутати з атрибутом SIZE. Якщо MAXLENGTH більше чим SIZE, то в полі здійснюється скролінг. За замовчуванням значення MAXLENGTH дорівнює безкінечності.

• NAME - ім'я поля введення. Дане ім'я використовується як унікальний ідентифікатор поля, за яким Mfi^m одержати дані, розміщещ користувачем в ньому.

• SIZE - визначає візуальний розмір поля введення на екрані в символах.

• SRC - URL,. вказує на картинку (використовується разом з атрибутом! IMAGE).

• TYPE - визначає тип поля введення. За замовчуванням це просте поле і введення для одного рядка тексту. Інші типи повинні бути явно (зазначені.

CHECKBOX.

Використовується для простих логічних (BOOLEAN) значень, Значення, що асоціюється з ім'ям даного поля, яке буде передаватися в CGI-програму, може приймати значення ON або OFF.

HIDDEN.

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

Даний тип поля введення дозволяє зв'язувати графічний малюнок з ім'ям поля. При натискуванні мишкою на будь-якій частині малюнка буде негайно викликана асоційована формі CGI-гфограма.

Значення, привласнені змінній NAME будуть мати такий вигляд — створюється дві нових змінних: перша має ім'я, зазначене в полі NAME з додаванням.х наприкінці імені. У цю змінну буде поміщена Х-координата точки в пикселях (вважаючи початком координат лівий верхній кут малюнка), на яку вказував курсором мишки в момент натискання, а змінШ з ім'ям, що міститься в NAME і доданим.у, буде містити У-координатуя Усі значення атрибута VALUE ігноруються. Сам опис картинки здійснюється через атрибут SRC і по синтаксису збігається з тегом <IMG>.

PASSWORD.

Має таке яс значення, що й атрибут TEXT, але значення^ що вводиться користувачем, не відображається браузером на екрані. RADIO.

Даний атрибут дозволяє вводити одне значення з декількох альтернатив. Для створення набору альтернатив необхідно створити кілька полів введення з атрибутом TYPE="RADIO" з різними значеннями атрибута VALUE, але з однаковими значеннями атрибута NAME. В CGI-програму буде передане значення типу NAME=VALUE, причому VALUE

прийме значення атрибута VALUE того поля введення, яке в даний момент буде вибране (буде активним). При виборі одного з полів введення типу RADIO всі інші поля даного типу з тим же ім'ям (атрибут NAME) автоматично стануть невибраними на екрані.

RESET.

Даний тип позначає кнопку, при натисканні якої всі поля форми приймуть значення, описані для них за замовчуванням.

SUBMIT.

Даний тип позначає кнопку, при натисканні якої буде викликана CGI-програма (або URL), описана в заголовку форми. Атрибут VALUE може містити рядок, що буде висвітлена на кнопці.

TEXT.

Даний тип поля введення описує однорядкове поле введення. Для визначення максимальної довжини значення, що вводиться, у символах і розміру поля введення, що відображається на екрані (за замовчуванням приймається 20 символів), слід використовувати атрибути MAXLENGTH і SIZE.

VALUE - привласнює полю значення за замовчуванням або значення, що буде обране при використанні типу RJADIO (для типу RADIO даний атрибут обов'язковий). Меню вибору у формах

Під меню вибору у формах розуміють такий елемент інтерфейсу, як LISTBOX. Існує три типи тегів меню вибору для форм:» Select - користувач вибирає одне значення з фіксованого списку значень, представлених тегами OPTION. Даний вид представляється як випадає LISTBOX. ** Select single - тім же саме, що і Select, але на екрані користувач бачить одночасно три елементи вибору. Якщо їх більше, то з'являється автоматичний вертикальний скролінг. • Select multiple - дозволяє вибрати кілька елементів з LISTBOX.

SELECT.

Тег SELECT дозволяє користувачу вибрати значення з фіксованого списку значень випадаючого меню.

Тег SELECT має один або більш параметр між стартовим тегом <SELECT> і завершальним </SELECT>. За замовчуванням, перший елемент відображається в рядку вибору. Приклад тега <SELECT>: <FORM>

<SELECT NAME=group> <OPTION> AT 38 6 <OPTION> AT 48 6 <OPTION> AT 58 6 </SELECT>

</FORM>

SELECT SINGLE..

Ter SELECT SINGLE - це теж саме, що і Select, але на екрані! користувач бачить одночасно кілька елементів вибору (три за 1 замовчуванням). Кількість елементів» що одночасно відображаються, ] визначається атрибутом SIZE. Приклад: <FORM>

<SELECT SINGLE NAME=group SIZE=4>

<OPTION> AT 38 6

<OPTION> AT 48 6

<OPTION> AT 586

<OPTIONS> Pentium PRO

</SELECT>

</FORM>

SELECT MULTIPLE. Ter SELECT MULTIPLE схожий на тег SELECT SINGLE, але ] користувач може одночасно вибрати більш ніж один елемент списку. І Атрибут SIZE визначає кількість одночасна видимих на екрані елементів, І атрибут MULTIPLE - максимальна кількість одночасно вибраних і елементів. Приклад: <FORM>

<SELECT SINGLE NAME=group SIZE=4 MULTIPLE=2>

<OPTION> AT 38 6 •

<OPTION> AT 486

<OPTION> AT 58 6

<OPTIONS> Pentium PRO

</SELECT>

</FORM>

Якщо вибрано одночасно кілька значень, то серверу передаються! значення відповідно обраній кількості параметрів NAME=VALUE з однаковими значеннями NAME, але різними VALUE. Форми можна використовувати як для невеликих інформаційних повідомлень у вигляді параметрів, так і для передачі файлів. Оскільки дана можливість вимагає підтримки одержання файлів WEB-сервером, то, відповідно, необхідно, щоб сервер підтримував одержання файлів.

Приклад:

<FORM ENCTYPE="multipart/form-dat.a" ACTION="url" METHOD=P0ST>

Відправити даний файл: <INPUT NAME="userfile" TYPE="file">

<р>

<INPUT TYPE="submit" УАЬиЕ="Відправити файл"> </FORM>

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

1. Охарактеризуйте деревоподібну структуру сайту.

2. Охарактеризуйте лінійну структуру сайту.

3. Охарактеризуйте гібридні структури сайту.

4. Для чого призначені гіперпосилання на Web-сторінці?

5. Як створити загальне посилання на Web-сторінці?

6. Для чого створюється якір на Web-сторінці?

7. Як створити контексне посилання на Web-сторінці?

8. Як створити гіперпосилання на Web-сторінці?

9. Як створити посилання, яке буде відкривати вікно вводу вихідного

повідомлення поштової програми із вказаною адресою? 1 0. Призначення та типи форм.

Не нашли, что искали? Воспользуйтесь поиском: