- •Загальні методичні вказівки
- •Лабораторна робота 1 Вивчення можливостей сервісу Google Docs
- •1.1 Теоретичні відомості
- •1.2 Хід роботи
- •Лабораторна робота 2 Створення простого html - документу. Використання тегів форматування тексту. Використання списків
- •2.1 Теоретичні відомості
- •2.2 Хід роботи
- •2.3 Вимоги
- •Лабораторна робота 3 Створення документів із таблицями. Використання таблиць для форматування і розміщення елементів. Активні зображення
- •3.1 Теоретичні відомості
- •3.2 Хід роботи
- •3.3 Вимоги
- •Лабораторна робота 4 Каскадні таблиці стилів і їхнє використання
- •4.1 Теоретичні відомості Внутрішні Таблиці Стилів
- •Глобальні стилі
- •Пов'язані таблиці стилів
- •4.2 Хід роботи
- •4.3 Вимоги
- •Лабораторна робота 5 Фреймові структури в документах html. Форми і теги запровадження в html
- •5.1 Теоретичні відомості
- •5.2 Хід роботи
- •5.3 Вимоги
- •Лабораторна робота 6 Робота із графічними зображеннями у gimp. Створення елементів дизайну web-сторінки у gimp
- •Теоретичні відомості
- •6.2 Хід роботи
- •6.3 Вимоги
- •Перелік рекомендованих джерел
Лабораторна робота 5 Фреймові структури в документах html. Форми і теги запровадження в html
Мета:
Закріпити на практиці теоретичні дані про фрейми і одержати практичні навички їхній використання в оформленні свого сайту . Навчитися створювати й описувати їх за допомогою стандартних тегів мови HTML.
Закріпити на практиці теоретичні відомості про форми й одержати практичні навички їхнього використання для забезпечення двостороннього обміну даними через Internet. Навчитися створювати й описувати їх за допомогою стандартних тегів мови HTML.
5.1 Теоретичні відомості
Поняття фреймів
У якомусь змісті фрейм - це саме те, що означає дане слово: рамка навколо картинки, віконце або сторінка. Вводячи тег <FRAME>, дизайнер HTML-сторінки розділяє екран браузера на частині. У результаті людина, що переглядає сторінку, може вивчати одну частину сторінки незалежно від іншої частини. Фактично браузер, що розпізнає фрейми, завантажує різні сторінки в різні секції, або фрейми, екрана. Наприклад, ви можете побудувати сторінку таким чином, що фірмовий знак буде зафіксований у верхній частині екрана, у той час як іншу частину сторінки користувач переглядає звичайним способом. Можна розташувати збоку кнопки навігації, що не переміщаються, коли читач клацає їх мишкою, так що змінюється тільки частина екрана, а сама смужка навігації залишається нерухомою.
Хоча фіксація фірмового знака або засобів навігації – найбільше очевидні засоби використання фреймів, їхні можливості тим і вичерпуються.
Але щораз, коли в екран браузера вставляється фрейм, ви урізуєте територію, на якій можна було б розмістити дані. Чим більше ви вводите фреймів, тим менше залишається корисного простору і тем скоріше ви заплутаєте своїх читачів, незнайомих із навігацією на Web-сторінці і фреймами.
Наприклад, розумно берегти у фреймі логотип компанії тільки на перших декількох рівнях найважливіших сторінок, а основні дані показувати без фреймів.
Створення простої сторінки з фреймами
Побудуємо сторінку з двома фреймами. Задамо зліва фрейм змісту з заголовками статей, а справа помістимо сторінку із самими статтями.
Зробимо так, що коли користувач клацає мишкою на посиланні в тій частині екрана, де знаходиться зміст, сама стаття з'являється в правому фреймі. Це основний, найбільше поширений засіб використання фреймів.
Завдання фреймової структури
Для початку ми повинні уявити собі загальний вид сторінки - де і якого розміру будуть фрейми. Потім можна подумати про їхній зміст. Нижче приводиться код простої фреймової структури з використанням тега <FRAMESET>. Звернете увагу: сторінка з фреймовою структурою не містить тега <BODY>.
Приклад
<HTML>
<HEAD>
<TITLE>Приклад фреймів</ТІТLЕ>
</HEAD>
<FRAMESET COLS="25%, 75%"
<FRAME SRC="a.html">
<FRAME SRC="b.html" NAME="main">
</FRAMESET>
<N0FRAMES>
Ви бачите цю сторінку браузером не підтримуючим фрейми.
</NOFRAMES>
</HTML>
От і весь код, необхідний для завдання фреймової структури. Зверніть увагу на відсутність тега <BODY>, тег <FRAMESET> може заміняти собою тіло документа.
У результаті ми одержали екран, розділений на два вікна. Ліве вікно займає 25 відсотків екрана і містить сторінку з назвою a.html. Вікно справа займе 75 відсотків і спочатку покаже файл b.html. Поки в нас їх немає, так що ви побачите сторінку з двома порожніми фреймами. Перед тим, як вона з'явиться, нам доведеться пару разів клацнути мишкою у відповідь на повідомлення про помилки, тому що браузер буде намагатися знайти неіснуючі сторінки. Зауважте, що праву сторінку ми назвали <main> (<головна>) за допомогою рядка:
<FRAME SRC="b. html" NAME="main">
Це означає, що фрейм під ім'ям main буде містити сторінку b.html. Зауважимо, що оскільки ми не збираємося показувати в лівому фреймі ніяких сторінок, крім menu.html, нам не потрібно його називати.
Підготування фрейму main
Правий фрейм main буде містити самі HTML-сторінки. Ваша задача так їх спроектувати, щоб вони добре дивилися в меншому, чим звичайно, вікні, тому що частина екрана буде зайнята лівим кадром змісту. Але більше ці сторінки нічим не примітні.
Приклад
<HTML>
<HEAD>
<TITLE> Головна сторінка</ТІТLЕ>
</HEAD>
<BODY>
<H1 ALIGN=CENTER>Компанія</Hl>
<HR>
<H3 ALIGN=LEFTXI>Відкрите акціонерне товариство
Компанія заснована в 1996 році, є одним із головних
постачальників побутової електроніки в Росії.</І></Н3>
<HR>
<НЗ>Основними напрямками діяльності Компанії є:
<OL>
<LІ>реалізація побутової електроніки головних фірм
світу через мережу магазинів; <ЬІ>створення сервісних
центрів по обслуговуванню побутової електроніки.</НЗ>
</0L>
<HR>
<H3>
<U><F0NT COLOR=RED> Компанія шукає агентів пo збуті
побутової електроніки.</F0NT></U></НЗ>
<Н5 ALIGN=CENTER>Контактна інформація</Н5>
<UL>
<LI>Telephone (123) 12-34-56
<LI>FAX (123) 12-34-56
<LІ>Поштова адреса 123456 p. Город, ул Лісова, 106
<UL ТІРЕ=СIRCLЕ>Електронна пошта<BR>
<LІ>Загальна інформація: abc@abc.su
<LІ>Продажі: abc@abc.abc.su
</UL>
</UL>
<BR><BLINK>Copyright</BLINK> 1997 Компанія
</BODY>
</HTML>
Зверніть увагу: на приведених сторінках ніде таємно не запрограмовано фрейм. Це значить, що можна без особливих проблем конвертувати всі документи вашого Web-серверу для використання у фреймової структурі.
Призначення форм
Інтерактивні форми дозволяють читачам Web-сторінок легко спілкуватися з їхніми власниками. Завдяки простоті використання тега <mailto:> i форм став можливий двосторонній діалог між власниками Web-вузлів і їхніх читачів. Це відчиняє для Web-навігаторів захоплюючі перспективи і комерційні можливості. На жаль, багато старих браузерів не підтримують тег <mailto:>.
Взаємодія серверу і форми через CGI
Інформація, яка вводиться користувачем у формі, передається на сервер через спеціальний протокол CGI (Common Gateway Interface). Цей інтерфейс призначений для обміну інформацією між користувачем Internet i сервером.
Цей інтерфейс дозволяє передавати інформацію в обидві сторони.
• Передача даних уведених користувачем у формах і деяких іншихзасобах (від користувача до серверу)
• Генерація тимчасових сторінок і передача їхньому клієнту (від серверу до користувача)
Роздивимося теги HTML, призначені для відображення елементів внесення на сторінці і наступній передачі введеної користувачем інформації на сервер.
Опис тега <FORM>
Тег призначений для представлення форми, що заповнюється, використовуваної для таких дій користувача, як реєстрація, упорядкування користувача або формування запиту. Форми можуть містити широкий діапазон прийомів розмітки HTML, включаючи такі види полів форм, як однорядкові або багаторядкові текстові поля, групи радіокнопок, перемикачі і меню.
Основний синтаксис
<FORM ACTION="URL">
зміст форми, включаючи елементи INPUT i, можливо,
елементи TEXTAREA і SELECT
</FORM>
Приклади
Приклад, що ілюструє структуру специфікації форми для простого випадку. У однім документі може бути декілька форм.
<SMALL>Приклад FORM-1.html</SMALL>:
<FORM ACTION=mailto:Jukka.Korpela@hut.fi METHOD=POST”> <TEXTAREAROWS=5COLS=72NAME=Comments></TEXTAREA>
<P>
<INPUTTYPE=SUBMITVALUE=Send>
</FORM>
Такий, більш складний приклад, включає на додаток до області вільного запровадження тексту меню вибору.
<SMALL>Приклад FORM-2.html</SMALL>:
<FORM ACTION=mailto:Jukka.Korpela@hut.fi METHOD=”POST”>
Pleasetellyouropinionabouttheoverallqualityofthisdocument:
<SELECTNAME=evaluation>
<OPTION>Verypoor
<OPTION>Ratherpoor
<OPTION>Average
<OPTION>Rathergood
<OPTION>Verygood
</SELECT>
<P>Youcanalsobemorespecificbywritingafewcomments:
<TEXTAREA NAME=CommentsROWS=5COLS=72></TEXTAREA>
<P>
<INPUTTYPE=SUBMIT VALUE=Send>
</FORM>