- •Тема I. Основи будови, функціонування та сервіси глобальної комп’ютерної мережі Інтернет
- •1. Загальна характеристика та етапи розвитку глобальної комп’ютерної мережі Інтернет
- •2. Інтернет з'єднання
- •2.1. Протоколи комп’ютерних мереж в Інтернеті
- •2.2. Локальна мережа (Local-area networks - laNs)
- •2.3. Глобальна мережа (Wide-area networks - waNs)
- •2.4. Віртуальні приватні мережі (Virtual private network - vpn)
- •2.4.1. Переваги використання віртуальних приватних мереж
- •3. Служби глобальної комп’ютерної мережі Інтернет
- •4. Мережні дані та класифікація комп’ютерних мереж
- •5. Мережні пристрої
- •5.1. Network interface card (nic) – мережний адаптер
- •5.2. Установка nic та модему
- •5.3. Мережні топології
- •6. Короткий огляд високошвидкісного і комутованого підключення
- •7. Опис tcp/ip. Тестування підключення за допомогою утиліти ping
- •Список рекомендованих джерел інформації
- •1. Мережні моделі
- •1.1. Використання рівнів для опису передачі інформації
- •1.2. Модель osi
- •1.4. Однорангова модель взаємодії (peer-to-peer communications)
- •1.5. Модель tcp/ip
- •1.6. Складові процесу інкапсуляції
- •2. Система адресації комп’ютерів у мережі Інтернет
- •3. Ідентифікація комп’ютерів у мережі Інтернет за допомогою символьних імен - dns
- •Список рекомендованих джерел інформації
- •Тема III. Основи Web-дизайну
- •1.1. Концептуальна модель web
- •1.2. Характеристики World Wide Web
- •1.3. Організації www
- •2. Елементи Web - документів
- •2.1. Етапи розвитку мови html
- •2.2. Інші мови розмітки
- •2.3. Ієрархія dom
- •2.4. Структура html документа
- •2.5. Елементи, дескриптори і атрибути
- •2.6. Дескриптори, що визначають структуру html-документа
- •2.7. Включення зображень в Web-сторінку
- •2.8. Гіпертекстові посилання
- •Зовнішній вид фрагмента коду html у вікні навігатора
- •2.9. Таблиці
- •2.10. Списки в html документі
- •2.11. Фрейми
- •Список рекомендованих джерел інформації
- •Тема III. Основи Web-дизайну
- •3.6. Поддержка стилей
- •3.6.1 Встраиваемые стили
- •3.6.2 Включаемые стили
- •3.6.3 Связываемые стили
- •3.6.4. Импортируемые стили и правило @import
- •4.1. Формати графічних файлів Web-сторінок
- •4.1.1. Формат jpeg
- •4.1.2. Формат gif
- •4.1.4. Який формат краще
- •4.2. Звук в документах html
- •5. Додатки cgi
- •5.1. Створення форм
- •5.1.1. Опис форми
- •5.1.2. Створення органів керування для форми
- •5.1.3. Приклад документа html із формою
- •5.2. Передача даних програмі cgi
- •5.2.1. Метод get
- •5.2.2. Метод post
- •5.2.3. Порівняння - get і post
- •Список рекомендованих джерел інформації
- •Лабораторна робота №1
- •2. Вміти використовувати мережні команди для одержання інформації про топологію та конфігурацію мережі, мережне обладнання робочих станцій та працездатність комп’ютерної мережі.
- •1. Визначення апаратного забезпечення робочої станції
- •2. Вивчення роботи мережних команд в режимі емуляції dos (командному рядку).
- •Net send 15-09 Як справи, друже. Як працює мережа?
- •3. Дослідження підключення локальної мережі класу до глобальної мережі Internet.
- •Ping.Exe -t ім’я робочої станції викладача
- •Ping.Exe -l розмір пакету ім’я робочої станції
- •Ping.Exe -w інтервал ім’я робочої станції
- •4. Висновки за результатами лабораторної роботи
- •Лабораторна робота №2
- •2. Набуття навичок використання служби електронної пошти Інтернет із Web-інтерфейсом.
- •1. Створення облікового запису у програмі поштового клієнту ms Outlook Express:
- •2. Відправка повідомлень у програмі електронної пошти ms Outlook Express:
- •3. Прийом повідомлень у програмі електронної пошти ms Outlook Express:
- •4. Створення ієрархії папок для повідомлень.
- •5. Включення у повідомлення різних об’єктів.
- •6. Перегляд і збереження вкладених файлів.
- •7. Робота з адресною книгою.
- •8. Відправка кореспонденції із використанням Адресної книги.
- •9. Створення власного підпису.
- •10. Створення електронних листів із використанням вбудованих шаблонів.
- •11. Відповідь на електронні листи.
- •12. Робота з електронною поштою Web-базування:
- •13. Висновки за результатами лабораторної роботи.
- •Лабораторна робота №2
- •2. Набуття навичок використання служби електронної пошти Інтернет із Web-інтерфейсом.
- •1. Створення облікового запису у програмі поштового клієнту ms Outlook Express:
- •2. Відправка повідомлень у програмі електронної пошти ms Outlook Express:
- •3. Прийом повідомлень у програмі електронної пошти ms Outlook Express:
- •4. Створення ієрархії папок для повідомлень.
- •5. Включення у повідомлення різних об’єктів.
- •6. Перегляд і збереження вкладених файлів.
- •7. Робота з адресною книгою.
- •8. Відправка кореспонденції із використанням Адресної книги.
- •9. Створення власного підпису.
- •10. Створення електронних листів із використанням вбудованих шаблонів.
- •11. Відповідь на електронні листи.
- •12. Робота з електронною поштою Web-базування:
- •13. Висновки за результатами лабораторної роботи.
- •Лабораторна робота №4
- •Вивчити структуру побудови та елементи html-документа.
- •Вивчити застосування непарних міток та Esc-послідовностей у html-документах.
- •Вивчити засоби та дескриптори фізичного форматування тексту в html-документах.
- •Завдання
- •Висновки за результатами роботи
- •Контрольні питання
- •Список рекомендованої літератури
5.1.3. Приклад документа html із формою
Форми краще вивчати на конкретному прикладі. У цій главі ми створимо форму, що містить майже всі органи керування, і роздивимося вихідний текст відповідного документа HTML.
Цей вихідний текст приведений у лістингу:
Листинг 7.1. Файл chap7\controls\controls. htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
<HEAD>
<TITLE>Органи керування у формах</ТITLЕ>
</HEAD>
<BODY BGCOLOR=#FFFFFF>
<FORM METHOD=POST ACTION="http://www.someserver.ru/frolov-cgi/controls.exe">
<TABLE>
<TR>
<TD VALIGN=TOP> Текстове поле ТЕХТ</ТD>
<TD><INPUT TYPE=text NAME="text1" VALUE="Sample of textl" SIZE=30></TD>
</TR>
<TR>
<TD VALIGN=TOP>Текстове поле PASSWORD</TD>
<TD><INPUT TYPE=password NAME="pwd" VALUE="Sample of password"></TD>
</TR>
<TR>
<TD VALIGN=TOP> Текстове поле TEXTAREA</TD>
<TD><TEXTAREA NAME="text2" ROWS=4 COLS=30>Sample of text</TEXTAREA></TD>
</TR>
<TR><TD VALIGN=ТОР>Перемикачі СНЕСКВОХ</ТD>
<TD>
<INPUT TYPE=CHECKBOX NAME="chk1" VALUE="on" CHECKED>Перший <BR>
<INPUT TYPE=CHECKBOX NAME="chk2" VALUE="оn">Другий<ВR>
<INPUT TYPE=CHECKBOX NAME="chk3" VALUE="on" СНЕСКЕD>Третій<ВR>
</TD>
</TR>
<TR><TD VALIGN=TOP>Перемикачі RADIO</TD>
<TD>
<INPUT TYPE=RADIO NAME="rad" VALUE="on1" СНЕСКЕD>Перший<ВR>
<INPUT TYPE=RADIO NAME="rad" VALUE="on2">Bтoрой<BR>
<INPUT TYPE=RADIO NAME="rad" VALUE="оn">Третій<ВR>
</TD>
</TR>
<TR><TD VALIGN=TOP>Список</TD>
<TD>
<SELECT NAME="sel" SIZE=”1”>
<0PTION Value="First Option">First Option</OPTION>
<OPTI0N Value="Second Option">Second Option</OPTI0N>
<OPTION Value="None">None Selected</OPTION>
</SELECT>
</TD>
</TR>
<TR>
<TD VALIGN=ТОР>Схований орган керування</ТЕ>
<TD>
<INPUT TYPE=HIDDEN NAME="hid" VALUE="Hidden"></TD>
</TR>
</TABLE>
<BR>
<INPUT TYPE=submit VALUE="Send">
<INPUT TYPE=reset VALUE="Reset">
<P><INPUT TYPEIMAGE SRC="$end.gif" BORDER=0>
</FORM>
</BODY>
</HTML>
Оператор <FORM> тут має 2 параметр - METHOD і ACTION:
Параметр METHOD має значення POST і задає засіб передачі даних програмі CGI через стандартний потік запровадження.
У параметрі ACTION зазначений шлях до завантажувального файла програми CGI, що знаходиться в каталозі frolov-cgi серверу WWW з адресою http://www.someserver.ru.
Програми CGI (а також розширення серверу WWW у виді бібліотек динамічного компонування DLL з інтерфейсом ISAPI, що будуть розглянуті в такій главі) можуть знаходитися не в будь-якому каталозі серверу WWW, а тільки в такому, для якого дозволене виконання програм. Якщо створюється виртуальный сервер WWW, що фізично розташовується в постачальника послуг Internet, можливо, вам прийдеться одержати дозвіл на створення або використання такого каталога.
Тепер можна зайнятися органами керування.
Всі органи керування розміщені в таблиці. У першому рядку цієї таблиці знаходиться однострочное поле для запровадження тексту, що вставлений у форму оператором <INPUT> і мають тип TEXT:
<TD><INPUT TYPE=text NAME="text1" VALUE="Sample of text1" SIZE=30></TD>
Ім'я поля зазначено в параметрі NAME як "text1”. У якості початкового значення для поля параметром VALUE заданий рядок "Sample of text1” Цей рядок можна буде редагувати після відображення форми. Також зазначений розмір поля, рівний 30 символам, параметром SIZE.
В другому рядку таблиці також за допомогою оператора <INPUT> визначене поле для запровадження пароля:
<TD><INPUT TYPE=password NAME=”pwd" VALUE=”Sample of password"></TD>
При запровадженні символів у цьому полі вони не відображаються. Аналогічно не відображається і початковий рядок, використаний для ініціалізації поля.
Для запровадження многострочного тексту в третьому рядку таблиці за допомогою оператора <TEXTAREA> розміщена область запровадження тексту:
<TD><TEXTAREA NAME="text2" ROWS=4 COLS=30>Sample of text</TEXTAREA></TD>
Ім'я цього поля задане як "text2". Поле має висоту, рівну чотирьом рядкам (параметр ROWS дорівнює чотирьом), і ширину, рівну 30 символам (параметр COLS дорівнює 30).
У четвертому рядку таблиці розташована група з трьох незалежних перемикачів типу CHECKBOX:
<TD>
<INPUT TYPE=CHECKBOX NAME="chk1" VALUE="on" СНЕСКЕD>Перший<ВР>
<INPUT TYPE=CHECKBOX NAME="chk2" VALUE="on">Другий<BR>
<INPUT TYPE=CHECKBOX NAME="chk3" VALUE="on" СНЕСКЕD>Третій<ВР>
</TD>
Кожний із цих перемикачів має власне ім'я, задане параметром NAME. Оператор VALUE задає значення, що буде послано в сервер WWW при вмиканні перемикача. До речі, якщо перемикач виключений, він не посилає в сервер WWW ніяких даних.
Нижче, у пятой рядку, знаходиться група з трьох перемикачів типу RADIO із залежною фіксацією:
<ТD>
<INPUT TYPE=RADIO NAME=*rad" VALUE="on1" СНЕСКЕD>Перший<ВR>
<INPUT TYPE=RADIO NAME="rad" VALUE="on2">Другий<ВR>
<INPUT TYPE=RADIO NAME="rad" VALUE="on3">Tpетий<BR>
</TD>
Всі перемикачі, що ставляться до одной' групи, повинні називатися однаково. У даному випадку за допомогою параметра NAME задано для всіх трьох перемикачів ім'я "rad".
Перший перемикач включений по умовчанню, тому що для нього заданий параметр CHECKED.
Для того щоб при аналізі даних, отриманих від форми, програма CGI могла визначити, який із перемикачів, що входять у групу, був включений, задано для кожного перемикача своє значення параметра VALUE.
Шостий рядок таблиці містить список, що складається з трьох рядків. Цей список визначений за допомогою операторів <SELECT> і <OPTION>, як це показано нижче:
<ТЕ>
<SELECT NAME="Sel" SIZE="1">
<OPTION Value="first Option">First Option</OPTION>
<OPTI0N Value="Second Option">Second Option</OPTION>
<OPTION Value="None">None S«lec1ed</OPTI0N>
</SELECT>
</TD
Ім'я списку задане як "sel", а висота його дорівнює одному рядку. Вміст рядків списку задається за допомогою параметра VALUE відповідних операторів <OPTION>.
Останній рядок таблиці містить схований орган керування, що не відображається у вікні навігатора:
<TD><INPUT TYPE=HIDDEN NAME="hid" VALUE="Hidden"></TD>
Орган посилає серверу WWW рядок "Hidden", задану в параметрі VALUE.
Під таблицею у формі розташовані три кнопки, перші дві з який стандартні, а третя зроблена за допомогою графічного зображення. Ці кнопки вставлені за допомогою оператора <INPUT> у такий спосіб:
<BR>
<INPUT TYPE=submit VALUE="Send">
<INPUT TYPE=reset VALUE="Reset”>
<P><INPUT TYPE=IMAGE SRC=”send. gif” BORDER=0>
Кнопка типу SUBMIT має напис Send і призначена для посилки даних із форми в сервер WWW для опрацювання програмою CGI.
Кнопка типу RESET призначена для того, щоб користувач, зрадивши дані у формі, міг знову повернутися до значень, заданим по умовчанню за допомогою параметра VALUE в операторах визначення органів керування. Ця кнопка має напис Reset.
Остання кнопка має тип IMAGE. Її зображення знаходиться у файлі send.gif, адреса URL котрого (у даному випадку це просто ім'я файла) зазначений у параметрі SRC. Для того щоб навколо зображення кнопки не було рамка, зазначена нульове значення параметра BORDER.
Програма CGI одержить від графічної кнопки координати точки, у якій знаходився курсор миші в момент натискання на цю кнопку. Таким чином, можливо створення кнопки у виді сегментированного графічного зображення. Програма CGI зможе визначити, у якій області зображення був зроблений щиголь мишею при відправленні заповненої форми на опрацювання.