- •1. Як влаштований internet
- •1.1. Що таке мережа Internet
- •1.2. Сервери в мережі Internet
- •1.2.1. Сервери ftp
- •1.2.2. Сервери Gopher
- •1.2.3. Поштові сервери
- •1.2.4. Сервери новин
- •1.2.5. Сервери www
- •1.3.1. З'єднання з сервером www
- •1.3.2. Сервер www
- •1.3.3. Статичні і динамічні документи html
- •1.3. Як працює сервер www
- •1.3.4. Зв'язок сервера www з субд
- •1.3.5. Органи управління ActiveX
- •1.3.6. Що таке орган управління ActibeX?
- •1.3.7. Мови програмування Java, JavaScript і vbScript
- •2. Створення документів html
- •2.1. Перша сторінка html
- •2.2. Структура документа html
- •2.2.1. Заголовок документа
- •2.2.2. Тіло документа
- •2.2.3. Вирівнювання параграфів тексту
- •2.3. Шрифтовое виділення
- •2.3.1. Зміна розміру шрифту
- •Мал. 2.4. Зміна розміру шрифту
- •2.4. Колір в документах html
- •2.4.1. Позначення кольору
- •2.4.2. Зміна кольору фону документа html
- •2.4.3. Зміна кольору тексту
- •2.4.4. Колір в інших елементах документа html
- •2.5. Зміна зображення шрифту
- •2.5.1. Фізичне форматування символів
- •2.5.2. Логічне форматування символів
- •2.5.3. Вставка заздалегідь отформатированного тексту
- •2.5.4. Вказівка шрифту по його назві
- •2.5.5. Виділення параграфа горизонтальною лінією
- •2.6. Організація списків
- •2.6.1. Неврегульовані списки
- •2.6.2. Нумеровані списки
- •2.6.3. Список каталогів
- •2.6.4. Список визначень
- •2.7. Рядок, що Біжить
- •2.8.1. Скасування кэширования сторінки
- •2.8.2. Автоматичне перезавантаження документа
- •2.8.3. Автоматичне завантаження іншого документа
- •2.8.4. Включення додаткових заголовків http
- •2.8.5. Визначення набору символів
- •2.9. Таблиці стилів
- •2.9.1. Способи використання стилів
- •3. Таблиці в документах html
- •3.1. Найпростіша таблиця
- •3.2. Як змінити зовнішній вигляд таблиці
- •3.3. Приклади оформлення таблиць
- •3.3.1. Таблиці із заголовком
- •3.3.2. Об'єднання елементів таблиці
- •3.3.3. Багатошарові заголовки
- •3.3.4. Таблиці з підписом
- •3.3.5. Вирівнювання тексту в елементах таблиці
- •3.3.6. Таблиці всередині таблиць
- •4. Графіка, анімація, відео і звук
- •4.1. Розміщення графічних зображень
- •4.2. Як вибрати формат графічного файла
- •4.2.1. Формат jpeg
- •4.2.2. Формат gif
- •4.2.4. Який формат краще
- •4.3. Прозорі зображення
- •4.4. Підготовка черезстрочних зображень
- •4.4. Анімация
- •4.4.1. Редактор gif Construction Set
- •4.4.2. Редактор Microsoft gif Animator
- •4.4.3. Редактор PhotoImpact gif Animator
- •4.5. Відеофрагменти в документах html
- •4.6. Звук в документах html
- •5. Посилання у документах html
- •5.1. Універсальний ідентифікатор ресурсів url
- •5.2. Вставка посилання
- •5.2.1. Посилання на інші документи
- •5.2.2. Локальні посилання усередині документа
- •5.3. Використання графіки в посиланнях
- •5.3.1. Вставка графічного зображення в посилання
- •5.3.2. Сегментированная графіка
- •5.3.3. Додаток Map This!
- •5.4. Посилання на різноманітні ресурси Internet
- •6. ФреймИ
- •6.1. Структура документа з фреймами
- •6.2. Визначення параметрів фреймов
- •6.3. Приклад документа html із фреймами
- •6.4. Плаваючі фреймы
- •7. Додатки cgi
- •7.1. Створення форм
- •7.1.1. Опис форми
- •7.1.2. Створення органів керування для форми
- •7.1.3. Приклад документа html із формою
- •7.2. Передача даних програмі cgi
- •7.2.1. Метод get
- •7.2.2. Метод post
- •7.2.3. Що краще - get або post
- •7.3. Передача відповіді з програми cgi
- •7.4. Перемінне середовище для програми cgi
- •7.5. Приклади програм cgi
- •7.5.1. Програма cgihello
- •7.5.2. Програма controls
- •7.5.3. Програма aref
- •7.5.4. Програма counter
7.1. Створення форм
Частіше усього програми CGI застосовуються для опрацювання даних, уведених віддаленими користувачами за допомогою форм. Тому вивчення програм CGI ми почнемо зі створення форм.
Кожна форма містить органи керування, за допомогою яких користувач може вводити текстові або числові значення, вибирати рядка зі списків. У формі можуть розташовуватися перемикачі, звичайні або графічні кнопки.
7.1.1. Опис форми
Для того щоб зробити форму в документі HTML, ви повинні скористатися оператором <FORM>. Цей оператор застосовується в парі з оператором </FORM>, що завершує опис форми. Між оператора
ми <FORM> і </FORM> знаходяться описи органів керування у виді операторів <INPUT>, <TEXTAREA> і <SELECT> із відповідними параметрами.
От приклад визначення найпростішої форми:
<FORM METHOD=GET ACTI0N="http://www.myserver.ru/frolov-cgi/form.exe">
<TABLE>
<TR>
<TD><INPUT TYPE=text NAME="text1" VALUE="Sample of text1"></TD>
</TR>
<TR>
<TD><INPUT TIPE=text NAME=text2" VALUE="Sample of text2"></TD>
</TR>
<TR>
<INPUT TYPE=submit VALUE="Send">
</TR>
</TABLE>
</FORM>
Тут органи керування розміщаються в таблиці, що складається з одного стовпчика і трьох рядків. У верхніх двох рядках ми розмістили поля для запровадження і редагування тексту, в останньому рядку - кнопку з назвою Send. Зовнішній вигляд форми при її перегляді в навігаторі показаний на мал. 7.1.
Мал. 7.1. Найпростіша форма для запровадження двох текстових рядків
Перерахуємо припустимі параметри оператора <FORM>:
Параметр Опис
ACTION Адреса URL для виконання дій над формою
METHOD Засіб передачі даних із форми в сервер WWW
ENCTYPE Тип MIME переданих даних
Параметр ACTION визначає, яке дія буде виконано над формою, після того як користувач її заповнить і передасть серверу WWW. У прикладі, приведеному вище, у якості значення для параметра ACTION ми зазначили шлях до програми CGI, що буде виконувати опрацювання даних.
За допомогою параметра METHOD ви можете вибрати один із двох методів передачі даних із форми серверу WWW. Якщо значення цього параметра дорівнює GET (як у нашому прикладі), програма CGI, зазначена в параметрі ACTION, одержить дані з форми через переменную середовища з ім'ям QUERY_STRING. У тому випадку, коли значення параметра METHOD дорівнює POST, програма CGI одержить дані з форми через стандартний потік запровадження. Пізніше ми роздивимося розходження між цими методами більш докладно.
І нарешті, третій параметр - ENCTYPE використовується дуже рідко і тільки для методу POST. Він дозволяє зазначити тип переданих даних і по умовчанню має значення application/x-www-form-urlencoded.
7.1.2. Створення органів керування для форми
Для створення у формі різноманітних органів керування (поляж запровадження, перемикачів, кнопок і т.д.) використовуються оператори <INPUT>, <TEXTAREA> і <SELECT>.
Оператор <INPUT>
Оператор <INPUT> призначений для вставки у форму таких органів керування, як поля запровадження текстової інформації, перемикачі, кнопки (звичайні й у виді графічних зображень), а також органи керування для передачі локального файла через навігатора у віддалений сервер WWW.
Перерахуємо параметри оператора <INPUT>:
Параметр Опис
type Тип органа керування. У залежності від значення цього параметра будуть створюватися різноманітні органи керування (кнопки, перемикачі і т.д.)
NAME Ім'я органа керування. Це ім'я посилається програмі опрацювання форми і використовується для визначення стана органа керування (для перемикачів) або одержання інших даних (наприклад, для одержання рядка, введеної в текстовому полі)
VALUE Початковий стан або початкове значення для органа керування. Використовується для ініціалізації органа керування при початковому відображенні форми
CHECKED Цей параметр використовується для установки початкового значення перемикачів
SIZE Ширина поля для запровадження текстової інформації в символах. По умовчанню поле має ширину 20 символів
MAXLENGTH Максимальна кількість символів, що можна ввести в поле редагування текстової інформації. По умовчанню таке обмеження відсутніх
ALIGN Вирівнювання тексту, розташованого біля форми
SRC Адреса URL графічного зображення, якщо воно використовується в _________ органі керування
Параметр TYPE визначає тип утворюваного органа керування і може мати такі значення:
Значення Тип органа керування параметра TYPE
TEXT Однострочное поле для запровадження текстової інформації. Розмір цього поля визначається параметрами SIZE і MAXLENGTH
TEXTAREA Многострочное поле для запровадження текстової інформації. Розмір поля також визначається параметрами SIZE і MAXLENGTH
PASSWORD Цей орган керування призначений для запровадження такої інформації, як пароли. Він аналогічний органу керування типу TEXT, але відрізняється тим, що текст, уведений користувачем, не відображається на екрані
CHECKBOX Перемикач типу Check Box. Призначений для використання в наборі незалежних друг від друга перемикачів або окремо
RADIO Перемикач для групи залежних перемикачів. Використовується для вибору одного значення з декількох
FILE Орган керування для вибору і передача файла. Це значення використовується по-різному навігаторами Microsoft Internet Explorer і Netscape Navigator
BUTTON Кнопка з заданим написом
SUBMIT Кнопка, що призначена для посилки даних із заповненої форми серверу WWW. Напис на цій кнопці також можна задавать
RESET С поміччю цієї кнопки користувач може скинути вміст поляж запровадження і стан перемикачів у їхні початкові значення, задані операторами VALUE
IMAGE Для посилки даних із форми в сервер ви можете використовувати не тільки кнопку типу SUBMIT, але і довільне графічне зображення, задане параметром SRC. Відповідний графічний орган керування має тип IMAGE
HIDDEN Сховане поле, що не відображається. Вміст цього поля посилається серверу і може бути проаналізоване
Оператор <TEXTAREA>
Оператор <INPUT> із параметром TYPE, що має значення TEXT, дозволяє вставити у форму поле редагування текстового рядка. Якщо ж вам потрібно ввести многострочный текст, краще скористатися оператором <TEXTAREA>, що застосовується разом з оператором </TEXTAREA>.
Зауважимо, що, хоча параметр TYPE оператора <INPUT> дозволяє задати многострочное поле редагування з типом TEXTAREA, створене в такий спосіб поле працює як однострочное.
Для оператора <TEXTAREA> ви можете задати 3 параметр:
Параметр Опис
NAME Ім'я многострочного поля, що посилається програмі опрацювання форми і використовується для одержання введених рядків тексту
ROWS Розмір поля по вертикалі (у рядках)
COLS Розмір поля по горизонталі (у символах)
От приклад опису многострочного текстового поля:
<TEXTAREA NAME="multi" ROWS=54 COLS=60>
Це зразок
многострочного
тексту
</TEXTAREA>
Оператор <SELECT>
За допомогою оператора <SELECT> ви можете вставити у форму заздалегідь проинициализированный список довільних текстових рядків. Обраний рядок пересилається серверу WWW поряд із вмістом інших полів форми.
Для оператора <SELECT> визначено 2 параметр - NAME і SIZE. Параметр NAME задає ім'я списку, що передається серверу WWW у парі з обраним рядком. За допомогою параметра SIZE можна задати висоту списку в рядках.
Нижче ми призвели приклад використання оператора <SELECT>:
<SELECT NAME="number">
<ОРТIОN>Перший
<OPTI0N SELЕСТЕD>Другий
<ОРТI0N>Третій
<OРТI0N>Останній
</SELECT>
Для запису рядків у список тут використовується оператор <OPTION>. Рядок, відзначений параметром SELECTED, буде обрана в списку по умовчанню.
