Міністерство освіти і науки України
Севастопольський національний технічний університет
Кафедра технічної кібернетики
ЗВІТ
з контрольної роботі
Брусино С. Е.
Перевірив: Альчаков В.В.
Севастополь - 2007
2 Основні положення
В основі гіпертекстового мови лежить поняття теги (tag - мітка, ярлик, етикетка, бирка) визначальним інструкцію щодо форматування наступного за тегом текстового (або іншого) фрагмента документа.
Кожен тег починається зі знака «менше (<)» закінчується знаком «більше (>)». Між цими двома символами знаходиться ключове слово, що вказує основну функцію тега. Наприклад, ключове слово IMG в теге <IMG> означає, що тег вставляє зображення в документ. Різноманітність ключових слів дозволяє створювати величезні кількості ефектів форматування.
Багато теги HTML, особливо ті, які забезпечують спеціальне форматування, є парними. Перший тег в парі активізує ефект, а другий тег - завершує його дію. Наприклад, тег <I> включає курсив. У кінці тексту, виділяється курсивом, ставиться тег </ I>. Слеш (/) перед ключовим словом означає переривання ефекту, керованого цим словом. Перший тег в парі називається відкриває, другий - що закриває. Парні теги називаються контейнерними, тому що вони утворюють як би контейнер для форматіруемого тексту. Наприклад, в HTML-коді, HTML - теги <I> дуже важливі </ I>, теги <I> і </ I> є контейнерними для тексту "дуже важливі".
Інші HTML-теги стоять самі по собі і називаються поодинокими. Вони, як правило, є «одномоментними» інструкціями форматування, наприклад, вставкою зображення, горизонтальній лінії, перекладу рядка і т.д.
Крім ключового слова, що є у кожного тега, деякі теги містять атрибути, модифікують його дію. Підбираючи значення атрибутів, можна експериментувати в пошуках оптимальної схеми розміщення елементів на сторінці. Наприклад, тег <HR>, який зображує горизонтальну лінію, має декілька атрибутів, що впливають на зовнішній вигляд лінії. Так, використовуючи атрибут WIDTH, можна змусити лінію дійти до середини рядка (width = 50%), а атрибутом SIZE змінювати товщину лінії (size = 4, значення за замовчуванням = 1).
2.3 З труктура будь-якого HTML-документа
Теги <html> і </ html> відкривають і відповідно закривають HTML документ. Теги <head> і </ head> відокремлюють заголовок, де, як правило, записується службова інформація не читається у вікні програми перегляду, наприклад, у нашому випадку в заголовку документа командами <title> і </ title> у верхньому лівому куті браузера виводяться слова "приклад". Тіло всього документа виділяється тегами <body> і </ body>. Між цими тегами, як правило, записується все те, що буде відображатися при відкритті документа. Слово "привіт!" відображається при перегляді великими літерами тому, що укладена між тегами <h1> і </ h1> ці теги застосовуються для оформлення заголовків у тексті відображену браузером. У ці тегах Ви можете застосовувати числа від 1 до 6. Основний текст нашого документа "приклад HTML - документа" виокремлено тегами <p> і </ p> це теги абзацу. Зазвичай між цими тегами у програмі пишуть текст, який потім буде виводитися на екран.
2.4 Види списків, які можливо реалізувати в HTML-документі
HTML підтримує три різних типів списків, кожен з яких дозволяє красиво організувати велику кількість інформаційних елементів. Для завдання списку необхідна пара тегів на весь список і по парі на кожен елемент списку Якщо мова йде про упорядкованих списках, то маються на увазі теги <OL> і </ OL>, якщо ж мова йде про невпорядкованих списках (маркованих), то маються на увазі теги <UL> & </ UL>.
Браузер автоматично нумерує елементи впорядкованого списку, починаючи з 1.
Третій тип списків - списки описів (глосарії) дозволяють перераховувати терміни, за якими йдуть їх визначення. Терміни полягають в теги <DT> & </ DT>, а опису (визначення) в теги <DD> & </ DD>.
Для визначення кожного елемента списку використовується відкривається та закривається теги <LI> & </ LI>.
Наприклад:
<OL>
<LI> Numered list items </ LI>
<LI> List items are idented </ LI>
</ OL>
Тег <OL> має два атрибути: Type і Start. Атрибут TYPE устанавливат рівним 1, А, а, i або I, в залежності від типу нумерації списку - цифрами, великими чи малими літерами, великими чи малими римськими цифрами.
Атрибут START використовується, якщо нумерація повинна починатися не з одиниці.
Наприклад:
<OL TYPE = "A" START = 3> - значить, нумерація списку буде починатися з літери С.
Тег <UL> підтримує атрибут Type, що дозволяє замість маркувального символу «гурток» (О), (Type = "dise"), що встановлюється за умовчанням, задавати маркований символ «квадрат» (Type = "square") або «окружність» (Type = "circle").
Раціональне використання тегів <UL> & <OL> дозволяє створювати вкладені одна в одну марковані та нумеровані списки, а також використання атрибуту TYPE тега <OL> дозволяє створювати вкладені нумеровані списки з різним типом нумерації (букви і цифри).
2.5 Використання іменованих якоря їй гіперпосилань
Коли користувач вибирає гіперпосилання, браузер завантажує документ, на який вказує гіпертекст і виводить на екран його початок. У тому випадку, якщо документ дуже великий користувачеві доводиться довго його прокручувати, щоб перейти до потрібного місця. Щоб уникнути цього, HTML надає можливість встановити іменовані якоря (закладки в документі), а гіперпосилання будуть безпосередньо вказувати на ці якоря (тобто буде здійснюватися перехід по закладці всередині документа).
Для створення точок прив'язки (встановлення закладок) в межах одного документа використовується наступний синтаксис:
<A name = «унікальное_імя_закладкі»> [тіло посилання] </ A>,
де «унікальное_імя_закладкі» - це унікальне ім'я точки прив'язки, а «тело_ссилкі» - це літерал, що відображається на екрані.
Нижче наведено приклад програми, що пояснює механізм розстановки закладок всередині документа.
<HTML>
<HEAD>
<TITLE> Anchors </ TITLE>
</ HEAD>
<BODY>
<A name = "Topic_1"> Topic.1 </ A>
Topic 1 stuff
<A name = "Topic_2"> Topic.2 </ A>
Topic 2 stuff
<A name = "Topic_3"> Topic.3 </ A>
Topic 3 stuff
</ BODY>
</ HTML>
В якості місця, для якого створюється закладка, можуть виступати заголовки розділів всередині великого за розмірами документа. Перехід по цих закладок забезпечує швидке переміщення по документу до потрібного розділу.
Теги, що використовуються для зв'язування з точками прив'язки в межах одного HTML-документа, ідентичні тегам створення гіперпосилань на зовнішні документи. Для створення гіперпосилання на новий фрагмент використовується з'єднує синтаксис:
<A href = [URL] # "імя_закладкі"> імя_якоря </ A>
, Де [URL] - необов'язковий адресу, «імя_закладкі» - назва точки прив'язки в межах поточного документа, «імя_якоря» - це текст або яке-небудь інший вміст, щелчек за яким буде активізувати гіперпосилання.
Іменовані якоря корисні при створенні змісту, посилання якого вказують на різні частини документа. Найбільш поширений метод зв'язування з точкою внутрішньої прив'язки передбачає використання символу «#» і назви точки прив'язки без вказівки URL. У цьому випадку перехід за потрібною адресою здійснюється без повторного завантаження документа.
Приклад визначення точок прив'язки і встановлення гіпертекстових посилань на ці точки наведено нижче:
<HTML>
<HEAD>
<TITLE> Anchors </ TITLE>
</ HEAD>
<BODY>
Read About <A href = "# Topic_1"> Topic_1 </ A>
Read About <A href = "# Topic_2"> Topic_2 </ A>
Read About <A href = "# Topic_3"> Topic_3 </ A>
<HR>
<A name = "Topic_1"> <HR> Topic 1 </ HR> </ A>
Topic 1 stuff
<A name = "Topic_2"> <HR> Topic 2 </ HR> </ A>
Topic 2 stuff
<A name = "Topic_3"> <HR> Topic 3 </ HR> </ A>
Topic 3 stuff
</ BODY>
</ HTML>
2.6 Графічні об'єкти для гіперпосилань в HTML-документі
Щоб розмістити зображення на сторінці необхідно скористатися тегом <IMG>. При роботі з цим тегом вставки зображення використовується наступний синтаксис:
<IMG SRC = "[URL] ім'я_файлу">.
Значення атрибуту SRC задає «ім'я_файлу» із зображенням.
Тег <IMG> включає кілька корисних атрибутів, характеристика яких дана нижче:
Атрибут ALT. З допомогою цього атрибуту вказується рядок тексту, що використовується браузером замість зображення, яке з яких-небудь причин неможливо завантажити.
Атрибут ALIGN. Визначає вирівнювання тексту відносно зображення. Якщо цей атрибут приймає одне із значень TOP, MIDDLE або BOTTOM, то текст, наступний за зображенням, вирівнюється по верхньому краю, по центру або по нижньому краю зображення. Якщо атрибут ALIGN встановити в значення LEFT або RIGHT, то зображення буде плавати у лівого чи правого поля відповідно, а текст буде його обтікати.
Атрибут HEIGHT і WIGTH дозволяють визначати розмір зображення у пікселях. В якості прикладу, що пояснює дію атрибутів HEIGTH & WIGTH на зображення, може бути приведений следущий синтаксис тега <IMG>:
<IMG SRC = "URL" wigth = пікселі heigth = пікселі>.
У тому випадку, коли графічне зображення використовується як альтернатива гіпертексту, синтаксис встановлення графічного якоря такий же, як при установці текстового. Між тегами <A href = "URL"> і </ A> замість тексту повинен бути поміщений тег <IMG>, у відповідності з наступним снтаксісом:
<A href = "URL"> <IMG = "файл_ізображенія"> </ A>.
Примітка. У тому випадку, якщо графічний об'єкт інтерпретується як якір гіперпосилання, тоді викликається HTML-документ, саме зображення, а також викликає документ повинні знаходитися в одній папці (на локальному комп'ютері). У цьому випадку синтаксис гіперпосилання має наступний вигляд:
<A HREF = "bs.htm"> <IMG SRC = "km.jpg"> </ A>
2.7 Ф Реймі їх використання
Фрейми дозволяють розділити Web-сторінки на незалежні області свавільного або фіксованого розміру. Виконуючи певні дії в одних фреймах, можна змінювати вміст інших фреймів - це дозволяє розглядати фрейми як інструмент навігації. Перелік гіперпосилань на документи на вузлі поміщається в одному фреймі, а інший фрейм виділяється власне під вміст.
Перший крок у створенні фреймової схеми розташування полягає в розбивці вікна на потрібні області. Це здійснюється шляхом реалізації окремого HTML - документа, який цілком використовується для визначення фрейму. У цьому документі замість тегів <BODY> & </ BODY> використовуються теги <FRAMESET> і </ FRAMESET>, призначені для визначення фреймів. Атрибути тега <FRAMESET> визначають, як екран розбивається на частини.
Тег <FRAMESET> може мати один з двох атрибутів:
ROWS - для розбивки екрана на дві і більше рядка;
COLS - для розбивки екрана на стовпці.
Кожному атрибуту присвоюється список значень повідомляє браузеру розмір рядків і стовпців (у% від загальної ширини вікна, у пікселях або символом (*), який означає, що браузер має використовувати усі місце, що залишилося). Як приклад може бути приведений наступний синтаксис:
<FRAMESET ROWS = "25%, 40%, 35%">
. . .
</ FRAMESET>
або
<FRAMESET COLS = "55, 120, 20, * ">
. . .
</ FRAMESET>
Перший приклад визначає ширину фреймів у відсотках, другий - у пікселях.
Атрибут <FRAMEBORDER> тега <FRAMESET> дозволяє встановлювати обрамлення у фреймів. Він може приймати одне з двох значень:
1 - відповідає наявності обрамлення
0 - відсутності обрамлення.
У випадку, якщо необхідно конструювати досить складну схему розбиття екрану на фрейми здійснюють вкладення тегів <FRAMESET> & </ FRAMESET> один в одного.
Наприклад, схемою організації фреймів, коли екран розбивається спочатку на два фрейми по вертикалі, а потім перший кадр розбивається на два по горизонталі (див. Мал.1а), відповідає наступний HTML-код тега FRAMESET:
<FRAMESET COLS = "55%, 45%">
<FRAMESET ROWS = "75%; 25%">
. . . дані, що розміщуються у верхній частині першого стовпця. . .
. . . дані, які розташовують у нижній частині першого стовпця. . .
</ FRAMESET>
. . . дані, що розміщуються в другому стовпці. . .
</ FRAMESET>
а) б)
Рис. 1 Схеми розбиття фреймів.
Схемі розбиття вікна на фрейми, зображеної на рис.1б, відповідає наступний фрагмент HTML-програми:
<FRAMESET ROWS = "50%, 50%">
. . . дані, що розміщуються у верхній частині. . .
<FRAMESET COLS = "50%, 50%">
. . . дані, що розміщуються в першому стовпці нижній частині. . .
. . . дані, що розміщуються в другому стовпці нижній частині. . .
</ FRAMESET>
<FRAMESET>
Використовуючи вкладені теги <FRAMESET>, можна добиватися побудови схеми з фреймами будь-якого ступеня складності.
Розміщення вмісту в фреймах управляє тег <FRAME>. Цей тег має обов'язковий атрибут SRC, який повідомляє браузеру URL-документа, що завантажується в кадр. Серед шести атрибутів (крім SRC) тега <FRAME> необхідно виділити два найбільш важливих:
Атрибут NAME, за допомогою якого здійснюється присвоєння фрейму імені. Унікальні імена фреймів важливі при націлювання гіперпосилань (атрибут TARGET тега <A>) на конкретні фрейми.
Атрибут SCROLLING = YES / NO / AUTO, який управляє появою горизонтальної і вертикальної смуг прокрутки (в разі, якщо він дорівнює YES). Якщо атрибут SCROLLING = AUTO (це значення встановлюється за умовчанням), то браузер сам виводить лінійки прокрутки, якщо вони необхідні.
Націлювання гіперпосилань на фрейми дозволяє постійно мати в одному фреймі їх незмінний список, а викликаються документи завантажувати в інші фрейми. Спочатку, у фрейми, призначені для виведення вмісту документів, викликаних за гіперпосиланнями, можна завантажувати будь-які HTML-документи (що не несуть ніякої принципової інформації), а потім вміст документів, викликаних за гіперпосиланнями.
Найпростіший приклад формування фреймової схеми та визначення її вмісту (проте є закінченим HTML-документом) має наступний синтаксис:
<HTML>
<HEAD>
<TITLE> Фреймів </ TITLE>
</ HEAD>
<FRAMESET COLS = "50%, 50%">
<FRAME SRC = "Logo1.htm" NAME = "NUMBER 1">
<FRAME SRC = "Logo2.htm" NAME = "NUMBER 2">
Севастопольський національний технічний університет
Кафедра технічної кібернетики
ЗВІТ
з контрольної роботі
створення інтерактивних WEB - сторінок для отримання інформації в мережі Інтернет з використанням форм, заповнених користувачем.
Виконав: студент гр. А-41зБрусино С. Е.
Перевірив: Альчаков В.В.
Севастополь - 2007
1 Мета роботи
Вивчити можливості створення інтерактивних WEB - сторінок для отримання інформації в мережі Інтернет з використанням форм, заповнених користувачем.
2 Основні положення
2.1 Коротко про WWW та про гіпертексті
INTERNET визначається як глобальна інформаційна мережа, що має доступ практично до всієї сукупності всесвітніх комп'ютерних мереж. В INTERNET знаходять застосування різні служби (сервіси), такі як електронна пошта, телеконференції, системи пошуку і доставки файлів, Всесвітня павутина - Word Wide Web, в основі якої лежить ідея формування документа у формі гіпертекстової структури.
Всесвітня павутина - WWW - це засіб підтримки системи гіпертексту на INTERNET.
Гіпертекст є формою організації документа, текст якого може містити посилання до окремих слів, фраз, малюнків і інших елементів тексту, що дозволяє отримати додаткову інформацію про ці елементах тексту. За допомогою посилань окремі сторінки тексту пов'язуються між собою, утворюючи гіпертекстовий документ. Таким чином, гіпертекстовий документ складається з набору текстових фрагментів, графіки, виділених елементів документа і системи зв'язку виділених елементів з іншими документами.
2.2 Т ег, контейнер, атрибутВ основі гіпертекстового мови лежить поняття теги (tag - мітка, ярлик, етикетка, бирка) визначальним інструкцію щодо форматування наступного за тегом текстового (або іншого) фрагмента документа.
Кожен тег починається зі знака «менше (<)» закінчується знаком «більше (>)». Між цими двома символами знаходиться ключове слово, що вказує основну функцію тега. Наприклад, ключове слово IMG в теге <IMG> означає, що тег вставляє зображення в документ. Різноманітність ключових слів дозволяє створювати величезні кількості ефектів форматування.
Багато теги HTML, особливо ті, які забезпечують спеціальне форматування, є парними. Перший тег в парі активізує ефект, а другий тег - завершує його дію. Наприклад, тег <I> включає курсив. У кінці тексту, виділяється курсивом, ставиться тег </ I>. Слеш (/) перед ключовим словом означає переривання ефекту, керованого цим словом. Перший тег в парі називається відкриває, другий - що закриває. Парні теги називаються контейнерними, тому що вони утворюють як би контейнер для форматіруемого тексту. Наприклад, в HTML-коді, HTML - теги <I> дуже важливі </ I>, теги <I> і </ I> є контейнерними для тексту "дуже важливі".
Інші HTML-теги стоять самі по собі і називаються поодинокими. Вони, як правило, є «одномоментними» інструкціями форматування, наприклад, вставкою зображення, горизонтальній лінії, перекладу рядка і т.д.
Крім ключового слова, що є у кожного тега, деякі теги містять атрибути, модифікують його дію. Підбираючи значення атрибутів, можна експериментувати в пошуках оптимальної схеми розміщення елементів на сторінці. Наприклад, тег <HR>, який зображує горизонтальну лінію, має декілька атрибутів, що впливають на зовнішній вигляд лінії. Так, використовуючи атрибут WIDTH, можна змусити лінію дійти до середини рядка (width = 50%), а атрибутом SIZE змінювати товщину лінії (size = 4, значення за замовчуванням = 1).
2.3 З труктура будь-якого HTML-документа
Теги <html> і </ html> відкривають і відповідно закривають HTML документ. Теги <head> і </ head> відокремлюють заголовок, де, як правило, записується службова інформація не читається у вікні програми перегляду, наприклад, у нашому випадку в заголовку документа командами <title> і </ title> у верхньому лівому куті браузера виводяться слова "приклад". Тіло всього документа виділяється тегами <body> і </ body>. Між цими тегами, як правило, записується все те, що буде відображатися при відкритті документа. Слово "привіт!" відображається при перегляді великими літерами тому, що укладена між тегами <h1> і </ h1> ці теги застосовуються для оформлення заголовків у тексті відображену браузером. У ці тегах Ви можете застосовувати числа від 1 до 6. Основний текст нашого документа "приклад HTML - документа" виокремлено тегами <p> і </ p> це теги абзацу. Зазвичай між цими тегами у програмі пишуть текст, який потім буде виводитися на екран.
2.4 Види списків, які можливо реалізувати в HTML-документі
HTML підтримує три різних типів списків, кожен з яких дозволяє красиво організувати велику кількість інформаційних елементів. Для завдання списку необхідна пара тегів на весь список і по парі на кожен елемент списку Якщо мова йде про упорядкованих списках, то маються на увазі теги <OL> і </ OL>, якщо ж мова йде про невпорядкованих списках (маркованих), то маються на увазі теги <UL> & </ UL>.
Браузер автоматично нумерує елементи впорядкованого списку, починаючи з 1.
Третій тип списків - списки описів (глосарії) дозволяють перераховувати терміни, за якими йдуть їх визначення. Терміни полягають в теги <DT> & </ DT>, а опису (визначення) в теги <DD> & </ DD>.
Для визначення кожного елемента списку використовується відкривається та закривається теги <LI> & </ LI>.
Наприклад:
<OL>
<LI> Numered list items </ LI>
<LI> List items are idented </ LI>
</ OL>
Тег <OL> має два атрибути: Type і Start. Атрибут TYPE устанавливат рівним 1, А, а, i або I, в залежності від типу нумерації списку - цифрами, великими чи малими літерами, великими чи малими римськими цифрами.
Атрибут START використовується, якщо нумерація повинна починатися не з одиниці.
Наприклад:
<OL TYPE = "A" START = 3> - значить, нумерація списку буде починатися з літери С.
Тег <UL> підтримує атрибут Type, що дозволяє замість маркувального символу «гурток» (О), (Type = "dise"), що встановлюється за умовчанням, задавати маркований символ «квадрат» (Type = "square") або «окружність» (Type = "circle").
Раціональне використання тегів <UL> & <OL> дозволяє створювати вкладені одна в одну марковані та нумеровані списки, а також використання атрибуту TYPE тега <OL> дозволяє створювати вкладені нумеровані списки з різним типом нумерації (букви і цифри).
2.5 Використання іменованих якоря їй гіперпосилань
Коли користувач вибирає гіперпосилання, браузер завантажує документ, на який вказує гіпертекст і виводить на екран його початок. У тому випадку, якщо документ дуже великий користувачеві доводиться довго його прокручувати, щоб перейти до потрібного місця. Щоб уникнути цього, HTML надає можливість встановити іменовані якоря (закладки в документі), а гіперпосилання будуть безпосередньо вказувати на ці якоря (тобто буде здійснюватися перехід по закладці всередині документа).
Для створення точок прив'язки (встановлення закладок) в межах одного документа використовується наступний синтаксис:
<A name = «унікальное_імя_закладкі»> [тіло посилання] </ A>,
де «унікальное_імя_закладкі» - це унікальне ім'я точки прив'язки, а «тело_ссилкі» - це літерал, що відображається на екрані.
Нижче наведено приклад програми, що пояснює механізм розстановки закладок всередині документа.
<HTML>
<HEAD>
<TITLE> Anchors </ TITLE>
</ HEAD>
<BODY>
<A name = "Topic_1"> Topic.1 </ A>
Topic 1 stuff
<A name = "Topic_2"> Topic.2 </ A>
Topic 2 stuff
<A name = "Topic_3"> Topic.3 </ A>
Topic 3 stuff
</ BODY>
</ HTML>
В якості місця, для якого створюється закладка, можуть виступати заголовки розділів всередині великого за розмірами документа. Перехід по цих закладок забезпечує швидке переміщення по документу до потрібного розділу.
Теги, що використовуються для зв'язування з точками прив'язки в межах одного HTML-документа, ідентичні тегам створення гіперпосилань на зовнішні документи. Для створення гіперпосилання на новий фрагмент використовується з'єднує синтаксис:
<A href = [URL] # "імя_закладкі"> імя_якоря </ A>
, Де [URL] - необов'язковий адресу, «імя_закладкі» - назва точки прив'язки в межах поточного документа, «імя_якоря» - це текст або яке-небудь інший вміст, щелчек за яким буде активізувати гіперпосилання.
Іменовані якоря корисні при створенні змісту, посилання якого вказують на різні частини документа. Найбільш поширений метод зв'язування з точкою внутрішньої прив'язки передбачає використання символу «#» і назви точки прив'язки без вказівки URL. У цьому випадку перехід за потрібною адресою здійснюється без повторного завантаження документа.
Приклад визначення точок прив'язки і встановлення гіпертекстових посилань на ці точки наведено нижче:
<HTML>
<HEAD>
<TITLE> Anchors </ TITLE>
</ HEAD>
<BODY>
Read About <A href = "# Topic_1"> Topic_1 </ A>
Read About <A href = "# Topic_2"> Topic_2 </ A>
Read About <A href = "# Topic_3"> Topic_3 </ A>
<HR>
<A name = "Topic_1"> <HR> Topic 1 </ HR> </ A>
Topic 1 stuff
<A name = "Topic_2"> <HR> Topic 2 </ HR> </ A>
Topic 2 stuff
<A name = "Topic_3"> <HR> Topic 3 </ HR> </ A>
Topic 3 stuff
</ BODY>
</ HTML>
2.6 Графічні об'єкти для гіперпосилань в HTML-документі
Щоб розмістити зображення на сторінці необхідно скористатися тегом <IMG>. При роботі з цим тегом вставки зображення використовується наступний синтаксис:
<IMG SRC = "[URL] ім'я_файлу">.
Значення атрибуту SRC задає «ім'я_файлу» із зображенням.
Тег <IMG> включає кілька корисних атрибутів, характеристика яких дана нижче:
Атрибут ALT. З допомогою цього атрибуту вказується рядок тексту, що використовується браузером замість зображення, яке з яких-небудь причин неможливо завантажити.
Атрибут ALIGN. Визначає вирівнювання тексту відносно зображення. Якщо цей атрибут приймає одне із значень TOP, MIDDLE або BOTTOM, то текст, наступний за зображенням, вирівнюється по верхньому краю, по центру або по нижньому краю зображення. Якщо атрибут ALIGN встановити в значення LEFT або RIGHT, то зображення буде плавати у лівого чи правого поля відповідно, а текст буде його обтікати.
Атрибут HEIGHT і WIGTH дозволяють визначати розмір зображення у пікселях. В якості прикладу, що пояснює дію атрибутів HEIGTH & WIGTH на зображення, може бути приведений следущий синтаксис тега <IMG>:
<IMG SRC = "URL" wigth = пікселі heigth = пікселі>.
У тому випадку, коли графічне зображення використовується як альтернатива гіпертексту, синтаксис встановлення графічного якоря такий же, як при установці текстового. Між тегами <A href = "URL"> і </ A> замість тексту повинен бути поміщений тег <IMG>, у відповідності з наступним снтаксісом:
<A href = "URL"> <IMG = "файл_ізображенія"> </ A>.
Примітка. У тому випадку, якщо графічний об'єкт інтерпретується як якір гіперпосилання, тоді викликається HTML-документ, саме зображення, а також викликає документ повинні знаходитися в одній папці (на локальному комп'ютері). У цьому випадку синтаксис гіперпосилання має наступний вигляд:
<A HREF = "bs.htm"> <IMG SRC = "km.jpg"> </ A>
2.7 Ф Реймі їх використання
Фрейми дозволяють розділити Web-сторінки на незалежні області свавільного або фіксованого розміру. Виконуючи певні дії в одних фреймах, можна змінювати вміст інших фреймів - це дозволяє розглядати фрейми як інструмент навігації. Перелік гіперпосилань на документи на вузлі поміщається в одному фреймі, а інший фрейм виділяється власне під вміст.
Перший крок у створенні фреймової схеми розташування полягає в розбивці вікна на потрібні області. Це здійснюється шляхом реалізації окремого HTML - документа, який цілком використовується для визначення фрейму. У цьому документі замість тегів <BODY> & </ BODY> використовуються теги <FRAMESET> і </ FRAMESET>, призначені для визначення фреймів. Атрибути тега <FRAMESET> визначають, як екран розбивається на частини.
Тег <FRAMESET> може мати один з двох атрибутів:
ROWS - для розбивки екрана на дві і більше рядка;
COLS - для розбивки екрана на стовпці.
Кожному атрибуту присвоюється список значень повідомляє браузеру розмір рядків і стовпців (у% від загальної ширини вікна, у пікселях або символом (*), який означає, що браузер має використовувати усі місце, що залишилося). Як приклад може бути приведений наступний синтаксис:
<FRAMESET ROWS = "25%, 40%, 35%">
. . .
</ FRAMESET>
або
<FRAMESET COLS = "55, 120, 20, * ">
. . .
</ FRAMESET>
Перший приклад визначає ширину фреймів у відсотках, другий - у пікселях.
Атрибут <FRAMEBORDER> тега <FRAMESET> дозволяє встановлювати обрамлення у фреймів. Він може приймати одне з двох значень:
1 - відповідає наявності обрамлення
0 - відсутності обрамлення.
У випадку, якщо необхідно конструювати досить складну схему розбиття екрану на фрейми здійснюють вкладення тегів <FRAMESET> & </ FRAMESET> один в одного.
Наприклад, схемою організації фреймів, коли екран розбивається спочатку на два фрейми по вертикалі, а потім перший кадр розбивається на два по горизонталі (див. Мал.1а), відповідає наступний HTML-код тега FRAMESET:
<FRAMESET COLS = "55%, 45%">
<FRAMESET ROWS = "75%; 25%">
. . . дані, що розміщуються у верхній частині першого стовпця. . .
. . . дані, які розташовують у нижній частині першого стовпця. . .
</ FRAMESET>
. . . дані, що розміщуються в другому стовпці. . .
</ FRAMESET>
а) б)
Рис. 1 Схеми розбиття фреймів.
Схемі розбиття вікна на фрейми, зображеної на рис.1б, відповідає наступний фрагмент HTML-програми:
<FRAMESET ROWS = "50%, 50%">
. . . дані, що розміщуються у верхній частині. . .
<FRAMESET COLS = "50%, 50%">
. . . дані, що розміщуються в першому стовпці нижній частині. . .
. . . дані, що розміщуються в другому стовпці нижній частині. . .
</ FRAMESET>
<FRAMESET>
Використовуючи вкладені теги <FRAMESET>, можна добиватися побудови схеми з фреймами будь-якого ступеня складності.
Розміщення вмісту в фреймах управляє тег <FRAME>. Цей тег має обов'язковий атрибут SRC, який повідомляє браузеру URL-документа, що завантажується в кадр. Серед шести атрибутів (крім SRC) тега <FRAME> необхідно виділити два найбільш важливих:
Атрибут NAME, за допомогою якого здійснюється присвоєння фрейму імені. Унікальні імена фреймів важливі при націлювання гіперпосилань (атрибут TARGET тега <A>) на конкретні фрейми.
Атрибут SCROLLING = YES / NO / AUTO, який управляє появою горизонтальної і вертикальної смуг прокрутки (в разі, якщо він дорівнює YES). Якщо атрибут SCROLLING = AUTO (це значення встановлюється за умовчанням), то браузер сам виводить лінійки прокрутки, якщо вони необхідні.
Націлювання гіперпосилань на фрейми дозволяє постійно мати в одному фреймі їх незмінний список, а викликаються документи завантажувати в інші фрейми. Спочатку, у фрейми, призначені для виведення вмісту документів, викликаних за гіперпосиланнями, можна завантажувати будь-які HTML-документи (що не несуть ніякої принципової інформації), а потім вміст документів, викликаних за гіперпосиланнями.
Найпростіший приклад формування фреймової схеми та визначення її вмісту (проте є закінченим HTML-документом) має наступний синтаксис:
<HTML>
<HEAD>
<TITLE> Фреймів </ TITLE>
</ HEAD>
<FRAMESET COLS = "50%, 50%">
<FRAME SRC = "Logo1.htm" NAME = "NUMBER 1">
<FRAME SRC = "Logo2.htm" NAME = "NUMBER 2">
</ FRAMESET>
</ HTML>
2.8 Розміщення і реалізація зображення у вигляді карти
Як ми вже знаємо, в HTML-документ можна включати зображення, які зчитуються програмою перегляду з файлів в одному з графічних форматів. Раніше (розділ 2.5) було сказано, що всі зображення цілком можна зробити якорем гіперпосилання. Однак, часом виникає цілком природне бажання зробити різні частини одного зображення гіперпосиланнями на різні документи. Уявімо собі, наприклад, документ з зображенням електронної схеми приладу, більш докладні відомості про елементи якого користувач може негайно отримувати, клацаючи мишею на відповідних ділянках креслення. HTML пропонує для цього наступний спосіб: додавши до прапора <IMG ...> спеціальний атрибут ISMAP та / або USEMAP, ви можете "сказати" програмі перегляду, що дане зображення є картою (Maps, Clickable Images, Imagemaps). Реакція на клацання миші на зображенні-картці буде різною в залежності від координат курсору миші в момент клацання.
Старий стандарт HTML 2.0 визначав тільки атрибут ISMAP, який передбачає обробку "клацання на карті" на WWW-сервері за допомогою CGI-запитів, аналогічних застосовуваним для обробки форм для заповнення. При такому способі обробки координатних запитів читач WWW-документа повинен клацнути на його цікавить точці і дочекатися відгуку сервера, перш ніж він отримає можливість хоча б дізнатися, чи відповідає дана точка який-небудь гіперпосилання, чи ні.
Альтернативу описаного вище механізму обробки "клацань на карті" сервером складає запропонований у версії HTML 3.0 механізм обробки клієнтом, тобто, самою програмою перегляду. Карти такого роду визначаються за допомогою атрибуту USEMAP. Опис областей зображення, асоційованих з різними гіперпосиланнями, міститься в HTML-файл, як показано в нижченаведеному прикладі. Уявімо собі нескладну радіосхему, що складається з трьох діодів і двох резисторів. Картинку з Радіосхеми ми помістили в файл mapex.gif, а опис функцій кожного з елементів схеми - у файли diode1.html, diode2.html, diode3.html, res1.html і res2.html (вміст цих файлів тут не наводиться). Ми хочемо, щоб читач, клацаючи на виконанні того або іншого елемента, завантажував відповідний документ з описом даного елемента
3 Хід виконання роботи
Завдання: вар № 2;
предметна область: соціологічне опитування;
схема фрейму:
елементи керування: кнопка (submit), текстове вікно (textarea)
3.1Созданіе завантажувального файлу
Спочатку був створений завантажувальний файл, який є головною сторінкою сервера і має ім'я index.html. У цьому файлі задані розміри, кількість і атрибути фреймів.
<HTML>
<TITLE> Соціологічне опитування </ TITLE> <FRAMESET rows="30%,*">
<FRAMESET Cols="33%,33%,*">
<FRAME Src="frame/2.html" name="2_page" scrolling="auto" noresize>
<FRAME Src="frame/3.html" name="3_page" scrolling="no" noresize>
<FRAME Src="frame/4.html" name="4_page" scrolling="auto" noresize>
</ FRAMESET>
<FRAME Src="frame/1.html" name="1_page" scrolling="auto">
3.2 Створення файлів для кожного фрейма
Потім вже будемо створювати файли для кожного з фреймів. Виходячи і варіанта завдання, у нас їх чотири. (1.html, 2.html, 3.html, 4.html) і два допоміжних файлу (2.html, 4.html) на які посилаються відповідно файли 2.html і 4.html.
Наведемо їх вміст нижчий:
Файл 1.html. У ньому записано текст форми
<html>
<head>
<title> Соціологічне опитування </ title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</ Head>
<body bgcolor="#cffed8">
<FORM Method="post" enctype="text/plain" id="soc_que" action="mailto:brusinov-se@rambler.ru">
<TABLE Id="tabl" border="0" bordercolor="#FFFFFF" width="100%" cellspacing="0" cellpadding="5">
<TR>
<TD Align="center" colspan="3"> <h2> Заповніть, будь ласка, анкету: </ h2> </ TD>
</ TR>
<TR>
<TD Width="40%"> Прізвище: </ TD>
<TD Width="5%" bgcolor="#FFFFFF"> </ TD>
<TD Width="50%"> <INPUT type="text" size="40" maxlength="100" name="fam"> </ TD>
</ TR>
<TR>
<TD Width="40%"> Ім'я: </ TD>
<TD Width="5%" bgcolor="#FFFFFF"> </ TD>
<TD Width="50%"> <INPUT type="text" size="20" maxlength="100" name="nam"> </ TD>
</ TR>
<TR>
<TD Width="40%"> батькові: </ TD>
<TD Width="5%" bgcolor="#FFFFFF"> </ TD>
<TD Width="50%"> <INPUT type="text" size="40" maxlength="100" name="lname"> </ TD>
</ TR>
<TR>
<TD Width="40%"> Стать: </ TD>
<TD Width="5%" bgcolor="#FFFFFF"> </ TD>
<TD Width="50%">
<INPUT Type="radio" name="m_f" value="male" checked onClick="document.bgColor='#3399FF'"> Чоловік
<INPUT Type="radio" name="m_f" value="female" onClick="document.bgColor='#FFCCFF'"> Жіночий
</ TD>
</ TR>
<TR>
<TD Width="40%"> Вік: </ TD>
<TD Width="5%" bgcolor="#FFFFFF"> </ TD>
<TD Width="50%">
<SELECT Name="age">
<OPTION Selected value="10"> Менше 20
<OPTION Selected value="20"> 20-30
<OPTION Selected value="30"> 30-50
<OPTION Selected value="50"> Більше 50
</ SELECT>
</ TD>
</ TR>
<TR>
<TD Colspan="3" bgcolor="#FFFFFF" height="30"> </ TD>
</ TR>
<TR>
<TD Width="40%"> Країна: </ TD>
<TD Width="5%" bgcolor="#FFFFFF"> </ TD>
<TD Width="50%"> <INPUT type="text" size="20" maxlength="100" name="country"> </ TD>
</ TR>
<TR>
<TD Width="40%"> Місто: </ TD>
<TD Width="5%" bgcolor="#FFFFFF"> </ TD>
<TD Width="50%"> <INPUT type="text" size="20" maxlength="100" name="town"> </ TD>
</ TR>
<TR>
<TD Width="40%"> Будинок: </ TD>
<TD Width="5%" bgcolor="#FFFFFF"> </ TD>
<TD Width="50%"> <INPUT type="text" size="20" maxlength="100" name="house"> </ TD>
</ TR>
<TR>
<TD Colspan="3" bgcolor="#FFFFFF" height="30"> </ TD>
</ TR>
<TR>
<TD Width="40%"> Місце роботи: </ TD>
<TD Width="5%" bgcolor="#FFFFFF"> </ TD>
<TD Width="50%"> <INPUT type="text" size="40" maxlength="100" name="work"> </ TD>
</ TR>
<TR>
<TD Width="40%"> Ваше соціальне становище (посада): </ TD>
<TD Width="5%" bgcolor="#FFFFFF"> </ TD>
<TD Width="50%"> <INPUT type="text" size="40" maxlength="100" name="post"> </ TD>
</ TR>
<TR>
<TD Width="40%"> Ваша заробітна плата: </ TD>
<TD Width="5%" bgcolor="#FFFFFF"> </ TD>
<TD Width="50%">
<SELECT Name="wages">
<OPTION Selected value="100"> Менш 200
<OPTION Selected value="200"> 200-500
<OPTION Selected value="500"> 500-1500
<OPTION Selected value="1500"> Більше 1500
</ SELECT>
</ TD>
</ TR>
<TR>
<TD Colspan="3" bgcolor="#FFFFFF" height="30"> </ TD>
</ TR>
<TR>
<TD Width="40%"> Ваші захоплення: </ TD>
<TD Width="5%" bgcolor="#FFFFFF"> </ TD>
<TD Width="50%">
<INPUT Name="hobby1" type="checkbox" value="Спорт"> Спорт
<INPUT Name="hobby2" type="checkbox" value="Турізм"> Туризм
<INPUT Name="hobby3" type="checkbox" value="Іскуство"> Мистецтво
<INPUT Name="hobby4" type="checkbox" value="Музика"> Музика
<INPUT Name="hobby5" type="checkbox" value="Техніка"> Техніка
</ TD>
</ TR>
<TR>
<TD Colspan="3" bgcolor="#FFFFFF" height="30"> </ TD>
</ TR>
<TR>
<TD Width="40%"> Ваші коментарі: </ TD>
<TD Width="5%" bgcolor="#FFFFFF"> </ TD>
<TD Width="50%">
<textarea name="IsItBad" cols="67"> Запишіть, чи влаштовує вас ваше соціальне становище, якщо ні, то чому?
</ Textarea>
</ TD>
</ TR>
<TR Bgcolor="#FFFFFF">
<TD Width="40%"> <INPUT type="reset" value="Очістіть анкету" "нажміте сюди щоб очистити поля форми" onClick="document.bgColor='#3399FF'"> </ TD>
<TD Width="5%"> </ TD>
<TD Width="50%" align="right"> <INPUT type="submit" value="Отправіть анкету" "нажміте сюди щоб відправити данние"> </ TD>
</ TR>
</ TABLE>
</ FORM>
</ Body>
</ Html>
Файл 2.html:
<html>
<head>
</ Head>
<BODY BGCOLOR="#CFFED8">
<A HREF="2.1.html" TARGET="2_page"> "Чим обумовлена необхідність в опитуванні" </ A>
</ BODY>
</ Html>
Файл 2.1.html.
</ Head>
<body>
<BODY BGCOLOR="#CFFED8">
<FONT COLOR="#FF0000">
<kbd>
<p> Кожен з нас в тій чи іншій мірі
стикається ... ... ... ... (текст пропущено) ... країні і в
інших країнах). </ P>
</ Kbd>
</ FONT>
</ Body>
</ Html>
Файл 3.html:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</ Head>
<BODY BGCOLOR="#CFFED8">
<kbd> <FONT COLOR="red"> <MARQUEE style="font-size: 24pt; color: #00000"> Допоможіть провести соціологічне опитування. Просто заповніть анкету, наведену ніже.Опрос допоможе дати оцінку соціальної ситуації в країні. Надані Вами дані абсолютно конфіденційні і розголошенню не підлягають. Дякуємо за співпрацю. </ MARQUEE>
</ FONT> </ kbd>
</ BODY>
</ Html>
Файл 4.html: <html>
<html>
<head>
<title> Зміст </ title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</ Head>
<BODY BGCOLOR="#CFFED8">
<A HREF="4.1.html" TARGET="4_page"> "Яким чином відбувається опитування" </ A>
</ BODY>
</ Html>
Файл 4.1.html:
<html>
<head>
<title> Як відбувається опитування </ title>
</ Head>
<body>
<BODY BGCOLOR="#CFFED8">
<FONT COLOR="#FF0000">
<kbd>
Все дуже ... ... (текст пропущено) ... ... ... картотеку.
</ P>
</ Kbd>
</ FONT>
</ Body>
</
4 Висновки
Вході виконання контрольної роботи були вивчені можливості інтерактивних WEB сторінок, була розроблена активна форма для передачі даних у мережу Internet відповідно до варіанта завдання.
</ HTML>
2.8 Розміщення і реалізація зображення у вигляді карти
Як ми вже знаємо, в HTML-документ можна включати зображення, які зчитуються програмою перегляду з файлів в одному з графічних форматів. Раніше (розділ 2.5) було сказано, що всі зображення цілком можна зробити якорем гіперпосилання. Однак, часом виникає цілком природне бажання зробити різні частини одного зображення гіперпосиланнями на різні документи. Уявімо собі, наприклад, документ з зображенням електронної схеми приладу, більш докладні відомості про елементи якого користувач може негайно отримувати, клацаючи мишею на відповідних ділянках креслення. HTML пропонує для цього наступний спосіб: додавши до прапора <IMG ...> спеціальний атрибут ISMAP та / або USEMAP, ви можете "сказати" програмі перегляду, що дане зображення є картою (Maps, Clickable Images, Imagemaps). Реакція на клацання миші на зображенні-картці буде різною в залежності від координат курсору миші в момент клацання.
Старий стандарт HTML 2.0 визначав тільки атрибут ISMAP, який передбачає обробку "клацання на карті" на WWW-сервері за допомогою CGI-запитів, аналогічних застосовуваним для обробки форм для заповнення. При такому способі обробки координатних запитів читач WWW-документа повинен клацнути на його цікавить точці і дочекатися відгуку сервера, перш ніж він отримає можливість хоча б дізнатися, чи відповідає дана точка який-небудь гіперпосилання, чи ні.
Альтернативу описаного вище механізму обробки "клацань на карті" сервером складає запропонований у версії HTML 3.0 механізм обробки клієнтом, тобто, самою програмою перегляду. Карти такого роду визначаються за допомогою атрибуту USEMAP. Опис областей зображення, асоційованих з різними гіперпосиланнями, міститься в HTML-файл, як показано в нижченаведеному прикладі. Уявімо собі нескладну радіосхему, що складається з трьох діодів і двох резисторів. Картинку з Радіосхеми ми помістили в файл mapex.gif, а опис функцій кожного з елементів схеми - у файли diode1.html, diode2.html, diode3.html, res1.html і res2.html (вміст цих файлів тут не наводиться). Ми хочемо, щоб читач, клацаючи на виконанні того або іншого елемента, завантажував відповідний документ з описом даного елемента
3 Хід виконання роботи
Завдання: вар № 2;
2 3 4 1 |
схема фрейму:
елементи керування: кнопка (submit), текстове вікно (textarea)
3.1Созданіе завантажувального файлу
Спочатку був створений завантажувальний файл, який є головною сторінкою сервера і має ім'я index.html. У цьому файлі задані розміри, кількість і атрибути фреймів.
<HTML>
<TITLE> Соціологічне опитування </ TITLE> <FRAMESET rows="30%,*">
<FRAMESET Cols="33%,33%,*">
<FRAME Src="frame/2.html" name="2_page" scrolling="auto" noresize>
<FRAME Src="frame/3.html" name="3_page" scrolling="no" noresize>
<FRAME Src="frame/4.html" name="4_page" scrolling="auto" noresize>
</ FRAMESET>
<FRAME Src="frame/1.html" name="1_page" scrolling="auto">
3.2 Створення файлів для кожного фрейма
Потім вже будемо створювати файли для кожного з фреймів. Виходячи і варіанта завдання, у нас їх чотири. (1.html, 2.html, 3.html, 4.html) і два допоміжних файлу (2.html, 4.html) на які посилаються відповідно файли 2.html і 4.html.
Наведемо їх вміст нижчий:
Файл 1.html. У ньому записано текст форми
<html>
<head>
<title> Соціологічне опитування </ title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</ Head>
<body bgcolor="#cffed8">
<FORM Method="post" enctype="text/plain" id="soc_que" action="mailto:brusinov-se@rambler.ru">
<TABLE Id="tabl" border="0" bordercolor="#FFFFFF" width="100%" cellspacing="0" cellpadding="5">
<TR>
<TD Align="center" colspan="3"> <h2> Заповніть, будь ласка, анкету: </ h2> </ TD>
</ TR>
<TR>
<TD Width="40%"> Прізвище: </ TD>
<TD Width="5%" bgcolor="#FFFFFF"> </ TD>
<TD Width="50%"> <INPUT type="text" size="40" maxlength="100" name="fam"> </ TD>
</ TR>
<TR>
<TD Width="40%"> Ім'я: </ TD>
<TD Width="5%" bgcolor="#FFFFFF"> </ TD>
<TD Width="50%"> <INPUT type="text" size="20" maxlength="100" name="nam"> </ TD>
</ TR>
<TR>
<TD Width="40%"> батькові: </ TD>
<TD Width="5%" bgcolor="#FFFFFF"> </ TD>
<TD Width="50%"> <INPUT type="text" size="40" maxlength="100" name="lname"> </ TD>
</ TR>
<TR>
<TD Width="40%"> Стать: </ TD>
<TD Width="5%" bgcolor="#FFFFFF"> </ TD>
<TD Width="50%">
<INPUT Type="radio" name="m_f" value="male" checked onClick="document.bgColor='#3399FF'"> Чоловік
<INPUT Type="radio" name="m_f" value="female" onClick="document.bgColor='#FFCCFF'"> Жіночий
</ TD>
</ TR>
<TR>
<TD Width="40%"> Вік: </ TD>
<TD Width="5%" bgcolor="#FFFFFF"> </ TD>
<TD Width="50%">
<SELECT Name="age">
<OPTION Selected value="10"> Менше 20
<OPTION Selected value="20"> 20-30
<OPTION Selected value="30"> 30-50
<OPTION Selected value="50"> Більше 50
</ SELECT>
</ TD>
</ TR>
<TR>
<TD Colspan="3" bgcolor="#FFFFFF" height="30"> </ TD>
</ TR>
<TR>
<TD Width="40%"> Країна: </ TD>
<TD Width="5%" bgcolor="#FFFFFF"> </ TD>
<TD Width="50%"> <INPUT type="text" size="20" maxlength="100" name="country"> </ TD>
</ TR>
<TR>
<TD Width="40%"> Місто: </ TD>
<TD Width="5%" bgcolor="#FFFFFF"> </ TD>
<TD Width="50%"> <INPUT type="text" size="20" maxlength="100" name="town"> </ TD>
</ TR>
<TR>
<TD Width="40%"> Будинок: </ TD>
<TD Width="5%" bgcolor="#FFFFFF"> </ TD>
<TD Width="50%"> <INPUT type="text" size="20" maxlength="100" name="house"> </ TD>
</ TR>
<TR>
<TD Colspan="3" bgcolor="#FFFFFF" height="30"> </ TD>
</ TR>
<TR>
<TD Width="40%"> Місце роботи: </ TD>
<TD Width="5%" bgcolor="#FFFFFF"> </ TD>
<TD Width="50%"> <INPUT type="text" size="40" maxlength="100" name="work"> </ TD>
</ TR>
<TR>
<TD Width="40%"> Ваше соціальне становище (посада): </ TD>
<TD Width="5%" bgcolor="#FFFFFF"> </ TD>
<TD Width="50%"> <INPUT type="text" size="40" maxlength="100" name="post"> </ TD>
</ TR>
<TR>
<TD Width="40%"> Ваша заробітна плата: </ TD>
<TD Width="5%" bgcolor="#FFFFFF"> </ TD>
<TD Width="50%">
<SELECT Name="wages">
<OPTION Selected value="100"> Менш 200
<OPTION Selected value="200"> 200-500
<OPTION Selected value="500"> 500-1500
<OPTION Selected value="1500"> Більше 1500
</ SELECT>
</ TD>
</ TR>
<TR>
<TD Colspan="3" bgcolor="#FFFFFF" height="30"> </ TD>
</ TR>
<TR>
<TD Width="40%"> Ваші захоплення: </ TD>
<TD Width="5%" bgcolor="#FFFFFF"> </ TD>
<TD Width="50%">
<INPUT Name="hobby1" type="checkbox" value="Спорт"> Спорт
<INPUT Name="hobby2" type="checkbox" value="Турізм"> Туризм
<INPUT Name="hobby3" type="checkbox" value="Іскуство"> Мистецтво
<INPUT Name="hobby4" type="checkbox" value="Музика"> Музика
<INPUT Name="hobby5" type="checkbox" value="Техніка"> Техніка
</ TD>
</ TR>
<TR>
<TD Colspan="3" bgcolor="#FFFFFF" height="30"> </ TD>
</ TR>
<TR>
<TD Width="40%"> Ваші коментарі: </ TD>
<TD Width="5%" bgcolor="#FFFFFF"> </ TD>
<TD Width="50%">
<textarea name="IsItBad" cols="67"> Запишіть, чи влаштовує вас ваше соціальне становище, якщо ні, то чому?
</ Textarea>
</ TD>
</ TR>
<TR Bgcolor="#FFFFFF">
<TD Width="40%"> <INPUT type="reset" value="Очістіть анкету" "нажміте сюди щоб очистити поля форми" onClick="document.bgColor='#3399FF'"> </ TD>
<TD Width="5%"> </ TD>
<TD Width="50%" align="right"> <INPUT type="submit" value="Отправіть анкету" "нажміте сюди щоб відправити данние"> </ TD>
</ TR>
</ TABLE>
</ FORM>
</ Body>
</ Html>
Файл 2.html:
<html>
<head>
</ Head>
<BODY BGCOLOR="#CFFED8">
<A HREF="2.1.html" TARGET="2_page"> "Чим обумовлена необхідність в опитуванні" </ A>
</ BODY>
</ Html>
Файл 2.1.html.
</ Head>
<body>
<BODY BGCOLOR="#CFFED8">
<FONT COLOR="#FF0000">
<kbd>
<p> Кожен з нас в тій чи іншій мірі
стикається ... ... ... ... (текст пропущено) ... країні і в
інших країнах). </ P>
</ Kbd>
</ FONT>
</ Body>
</ Html>
Файл 3.html:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</ Head>
<BODY BGCOLOR="#CFFED8">
<kbd> <FONT COLOR="red"> <MARQUEE style="font-size: 24pt; color: #00000"> Допоможіть провести соціологічне опитування. Просто заповніть анкету, наведену ніже.Опрос допоможе дати оцінку соціальної ситуації в країні. Надані Вами дані абсолютно конфіденційні і розголошенню не підлягають. Дякуємо за співпрацю. </ MARQUEE>
</ FONT> </ kbd>
</ BODY>
</ Html>
Файл 4.html: <html>
<html>
<head>
<title> Зміст </ title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</ Head>
<BODY BGCOLOR="#CFFED8">
<A HREF="4.1.html" TARGET="4_page"> "Яким чином відбувається опитування" </ A>
</ BODY>
</ Html>
Файл 4.1.html:
<html>
<head>
<title> Як відбувається опитування </ title>
</ Head>
<body>
<BODY BGCOLOR="#CFFED8">
<FONT COLOR="#FF0000">
<kbd>
Все дуже ... ... (текст пропущено) ... ... ... картотеку.
</ P>
</ Kbd>
</ FONT>
</ Body>
</
4 Висновки
Вході виконання контрольної роботи були вивчені можливості інтерактивних WEB сторінок, була розроблена активна форма для передачі даних у мережу Internet відповідно до варіанта завдання.