28_matvienko-web
.pdf
<TR>
<TD><IMG SRC=”BUT1_UP.GIF” WIDTH=60 ALT =” “></TD> <TD><A HREF=”1.HTM”>
<FONT SIZE=5><B>Типи поселень</B></FONT></A><BR></TD> <TD>Поселення землеробської людності України, які складалися з
будівель, пристосованих для життя, різноманітних підсобних занять, утримання свійських тварин та зберігання продуктів, сягають глибини
віків.</TD></TR> <TR>
<TD><IMG SRC=”BUT1_UP.GIF” WIDTH=60 ALT =” “></TD > <TD><A HREF=”2.HTM”>
<FONT SIZE=5><B> Типи народного житла</B></FONT></A></TD> <TD>В основі типології традиційного сільського житлового комплексу
також лежить поділ території України на зони, проте він більш розгалужений і детальніший.</TD></TR></TABLE>
</BODY>
</HTML>
Відображення файла програмою-броузером:
Управління кольором елементів таблиці
Атрибути управління кольором : BORDERCOLOR – колір рамки і BGCOLOR – колір фону, використовуються для тегів : <TABLE>, <TR>, <TH>, <TD>. Відповідно областю їх дії може бути вся таблиця, рядок або окрема комірка.
Наприклад:
<TABLE BORDER BORDERCOLOR=RED BGCOLOR=YELLOW>...</TABLE> - колір всієї таблиці.
<TR BORDERCOLOR=RED BGCOLOR=YELLOW></TR> - колір рядка.
<TD BORDERCOLOR=RED BGCOLOR=YELLOW></TD> - колір комірки.
За допомогою таблиць можна створювати виділені цитати. Цитата вміщується в таблицю між двома горизонтальними лініями. Завдяки атрибуту ALIGN тега <TABLE> текст, який слідує за таблицею, починає її “ обтікати”. Основний текст розташовується праворуч від таблиці і “ обтікає” цитату після того, як перевищить її по висоті. Для виступів тексту від меж сторінки можна
51
застосувати тег <BLOCKQUOTE> (навіть декілька разів). Атрибут BORDER в даному випадку використовувати не слід.
ПРИКЛАД
Файл у форматі HTML:
<HTML>
<BODY>
<H2 ALIGN=CENTER>ІСТОРІЯ КУЛЬТУРИ</H2> <TABLE ALIGN=LEFT>
<TR>
<TD ALIGN=CENTER>
<HR>
<B>...Той, хто не знає свого минулого,<BR> не вартий майбутнього...<BR> М.Рильський </B><HR></TD>
</TR>
</TABLE>
<BLOCKQUOTE><BLOCKQUOTE><BLOCKQUOTE>
<P ALIGN=JUSTIFY> Звертання до традицій зовсім не означає нехтування сьогоденням. Тільки осмисливши минуле, пізнавши витоки своєї культури та історії, можна чіткіше зрозуміти сьогодення і уявити майбутнє. Традиційна етнокультурна інформація може зберігатися тільки передаючись від батьків до дітей та онуків
</BLOCKQUOTE></BLOCKQUOTE></BLOCKQUOTE>
</BODY>
</HTML>
Відображення файла програмою-броузером:
Завдання для самостійної роботи
1. Створити таблицю з двох стовпчиків і трьох рядків. Вертикальне розташування вмісту комірки повинне бути по центру, а горизонтальне – вирівнювання ліворуч.
Приклад тексту:
ЗАЧІСКИ ТА ГОЛОВНІ УБОРИ
52
ВІНКИ-ШНУРИ – тоненька стрічка, яку пов’язували навколо голови і закріпляли ззаду, стримуючи розпущене волосся.
ПЛОЩИННІ ВІНКИ – робили на твердій основі, яка мала циліндричну форму. Часом на неї у багато рядків нашивали вузенькі різнокольорові стрічечки, зібрані у дрібні складки.
ОЧІПОК – обов’язковий головний убір заміжніх жінок. Твердий очіпок шився з парчі та шовку і виразно прикрашався вишивкою.
2.Створити таблицю з двох стовпчиків і трьох рядків. У комірки першого стовпчика вмістити зображення, так підібравши їх розмір, щоб вся таблиця вміщувалась на один екран. У комірках другого стовпчика розмістити текст, задавши його вертикальне і горизонтальне розташування по центру.
3.Створити таблицю з двох стовпчиків і трьох рядків. У кожній з комірок встановити власний колір фону і колір тексту. Фон сторінки за замовчуванням.
4.Створити таблицю з двох стовпчиків і чотирьох рядків. Встановити колір у рядках таким чином, щоб його відтінок ставав більш темним від першого рядка до останнього ( за основу взяти зелений, сірий, жовтий колір). Для виконання завдання можна скористатись Додатком 2.
5.Внести зміни до прикладу створення цитати, наведеного вище, так, щоб текст був розташований під цитатою.
Запитання для самоперевірки
1.Що є основним структурним елементом таблиці?
2.Які атрибути контролюють горизонтальне і вертикальне розташування вмісту комірок?
3.Яку інформацію можна вміщувати у комірки таблиці?
4.Як задається розмір комірки?
5.Пояснити значення атрибуту ALIGN тега <TABLE>.
53
54
РОЗДІЛ 13. ФРЕЙМИ
Мета: опанувати технологію представлення інформації у документі з використанням фреймів.
Фрейми (Frames - кадри) надають користувачеві можливість поділяти екран на дві або більше незалежних динамічних або статичних частини.
Кожен фрейм може мати такі властивості:
-всі фрейми мають свій URL, що дозволяє завантажувати їх незалежно від інших фреймів;
-кожний фрейм має власне ім’я (атрибут NAME), яке дозволяє переходити до нього з іншого фрейма;
-розмір фрейма може бути змінений користувачем безпосередньо на екрані за допомогою мишки.
Ці властивості фреймів дозволяють:
-розміщувати статичну інформацію, яку автор вважає за необхідне постійно показувати користувачу, у одному статичному фреймі;
-розміщувати у статичному фреймі зміст всіх або частини документів, які містяться на сервері, що дозволяє користувачеві швидко знаходити інформацію, яка його цікавить;
-створювати вікна результатів запитів, коли в одному фреймі знаходиться власне запит, а в другому – результати запиту. Фрейм-документ є специфічним видом HTML-документа, оскільки не
містить елемента BODY і, відповідно, будь-якого змістового навантаження. Він описує тільки фрейми, які будуть містити інформацію.
Основний документ, який містить опис фреймів, виглядає так: <HTML>
<HEAD> …..</HEAD> <FRAMESET>….</FRAMESET>
</HTML>
Атрибути тегу <FRAMESET>
Атрибут |
Призначення |
ROWS=pixels|persent|* |
поділ екрану на декілька смуг |
COLS=pixels|persent|* |
поділ екрану на декілька |
|
стовпчиків |
FRAMEBORDER |
описує сітку фреймової структури |
|
(за замовчуванням значення YES - |
|
тривимірна сітка, NO - без сітки) |
BORDER |
ширина сітки фреймової структури |
|
(за замовчуванням значення 5) |
BORDERCOLOR |
колір сітки фреймової структури |
Значення (*) відповідає використанню всього простору екрану, який залишився.
55
Для вміщення змісту в фрейми, які утворились в результаті поділу, використовується тег <FRAME>... </FRAME>. Важливим атрибутом цього тега є атрибут SRC, який сповіщає URL документа, який необхідно завантажити у фрейм.
Кожний елемент фреймової структури описується за допомогою тега <FRAME>, який має такі атрибути:
-SRC - URL вмісту фрейма;
·NAME – ім‘я фрейма (аналогія імені вікна броузера) для здійснення доступу до фрейма і оновлення його змісту;
·MARGINHEIGHT - ширина верхнього і нижнього вільного поля фрейма у пікселях;
·MARGINWIDTH - ширина лівого і правого вільного поля фрейма
упікселях;
·SCROLLING – смуги гортання для перегляду вмісту фрейма (AUTO/YES/NO, за замовчуванням значення - AUTO);
·NORESIZE – наявністю даного атрибута користувачу забороняється змінювати розміри фрейма при перегляді документа (за
замовчуванням це можливо за допомогою миші);
·FRAMEBORDER – описує сітку фрейма (YES/NO);
·BORDERCOLOR – колір сітки фрейма.
Визначення фреймової структури
Порядок створення сторінки з фреймами:
1.Створюється початкова сторінка, у якій задаються розміри і кількість фреймів, а також імена файлів, які відповідають фреймам і атрибути для кожного фрейма.
2.Створюються окремі сторінки для кожного фрейма.
Необхідно уявити собі загальний вигляд сторінки – де і якого розміру будуть фрейми. Наприклад, ліворуч має бути фрейм змісту з переліком статей, праворуч – сторінка із власне статтями. Необхідно зробити так, щоб натискання мишкою на назві статті у лівій частині екрану, викликало появу змісту статті у правій частині. Або фреймова структура має ділити екран на три проздовжні частини. Верхня частина займає 15% висоти вікна броузера, її змістом є документ header.htm. Середній фрейм займає 70% вікна, в нього вводиться зміст документа body.htm. Решту частини вікна броузера займає фрейм, у який виводиться зміст документа footer.htm.
<FRAMESET ROWS=”15%, 70%, 15%”>
<FRAME SRC=”header.htm” NORESIZE SCROLLING=NO> <FRAME SRC=”body.htm”>
<FRAME SRC=”footer.htm” NORESIZE SCROLLING=NO>
</FRAMESET>
Верхній і нижній фрейми даної структури не містять смуг гортання вмісту і мають постійний розмір. Атрибут NORESIZE для середнього фрейма
56
не задається, оскільки заборона зміни розмірів фреймів, які знаходяться поруч, не дозволяє зміни розміру середнього фрейма.
Для створення “ вкладеної” структури фреймів, наприклад, у середній області фрейма з попереднього прикладу, яка поділяє її на два рівних стовпці, можна навести такий приклад:
FRAMESET ROWS=”15%, 70%, 15%”>
<FRAME SRC=”header.htm” NORESIZE SCROLLING=NO> <FRAMESET COLS=”*,*”>
<FRAME SRC=”left.htm”>
<FRAME SRC=”right.htm”> </FRAMESET>
<FRAME SRC=”footer.htm” NORESIZE SCROLLING=NO>
</FRAMESET>
Створення індексного (початкового) екрана з двох фреймів:
ПРИКЛАД
Файл у форматі HTML:
<HTML>
<FRAMESET cols=”*,310">
<FRAME SRC=”LAB_fr.htm” NAME=”frame1">
<FRAME SRC=”home_fr.htm” NAME=”frame2"> </FRAMESET>
</HTML>
У лівому фреймі у пункті “ Обрядова їжа” зроблене посилання на відповідний файл, який розкриє зміст цього пункту і буде відображений у правому вікні. Для цього зміни вносяться до файлу, який завантажується у цей фрейм. При встановленні гіперосилання вказують на NAME відповідного фрейма введенням команди TARGET.
Відображення файла програмою-броузером:
57
ПРИКЛАД
Файл у форматі HTML:
<HTML>
<BODY>
<H1 ALIGN=CENTER>
УКРАЇНСЬКА МИНУВЩИНА</H1><BR>
<P ALIGN=CENTER><B>УКРАЇНСЬКА КУХНЯ</B></P>
<UL>
<LI>ПОВСЯКДЕННА Й СВЯТКОВА ЇЖА ТА НАПОЇ</LI> <LI>РЕЖИМ І СЕЗОННІСТЬ ХАРЧУВАННЯ, ХАРЧОВІ ЗАБОРОНИ
</LI>
<A HREF=”LAB2-4_FR.HTM” TARGET = “FRAME2”> <LI>
ОБРЯДОВА ЇЖА </LI></A> </UL>
</BODY>
</HTML>
Завдання для самостійної роботи
1.Поділити екран на 3 смуги: перша має висоту 50 пікселів, друга – 15 пікселів, весь інший простір займає третя смуга.
2.Створити фреймову структуру (із сіткою шириною 5 пікселів) з трьох рядків: перший рядок - 15% висоти вікна броузера, другий - 70% , третій -
15%; 3.Створити фреймову структуру з двох стовпчиків: перший - 1/4 ширини
вікна броузера, другий - 3/4 ширини, з сіткою шириною 3 пікселя, колір сітки – сірий.
4.Поділити екран на чотири однакові області. В кожну вмістити відповідну інформацію.
Запитання для самоперевірки
1.З якою метою використовуються фрейми на HTML-сторінках? 2.Які особливості структурної побудови фрейм-документа?
3.Чи може кожен з документів, вміщених у фрейми, мати свою окрему адресу?
58
РОЗДІЛ 14. ФОРМИ ДЛЯ ОДЕРЖАННЯ
ІНФОРМАЦІЇ ВІД КОРИСТУВАЧА
Мета: опанувати технологію створення форм для інтерактивної взаємодії з користувачем.
Одним із способів привернення уваги до Web-сторінок є введення до них елементів інтерактивності, яке передбачає обмін інформацією між користувачем і сервером. Одним із засобів, за допомогою яких на сервер подається інформація про запити користувача, є HTML-форми і сценарії
Common Gatewey Interfase (CGI) – спільний інтерфейс шлюзів. Форми в Internet Explorer нагадують бланки і складаються з полів для введення текстової інформації, списків вибору варіантів і можливих опцій. За допомогою форм і завдяки механізму CGI-сценаріїв автори Web-сторінок можуть задавати певні питання користувачу і одержувати від нього відповіді. Форми можуть бути діловими або неформальними, залежно від потреб.
Теги форми |
|
<FORM>….</FORM> |
Визначає початок і кінець форми, як і куди |
|
буде відправлено інформацію, вказану в ній |
<TEXTAREA>… |
|
</TEXTAREA> |
Текстове поле введення |
<SELECT>…</SELECT> |
Вибір із меню |
<INPUT>…</INPUT> |
Кнопки команд |
Теги <TEXTAREA>, <SELECT>, <INPUT> повинні бути визначені всередині пари тегів <FORM>….</FORM>.
Атрибути тега <FORM>
ACTION Визначає адресу URL, за якою надсилається введена у форму інформація
METHOD=GET| POST Визначає, як інформація, що зібрана формою, надсилається за URL-адресою. Визначається CGI-сценарієм
Тег <INPUT> можна застосовувати для різних способів організації графічного інтерфейсу з користувачем за рахунок використання таких елементів вікна введення тексту: прапорці, перемикачі і меню. Тип введення визначається атрибутом TYPE.
Типи полів тега <INPUT>
Тип поля Вид тега
Вікно для
введення тексту <INPUT TYPE=”TEXT”>
Вікно для
введення пароля <INPUT TYPE=”PASSWORD”> Прапорець <INPUT TYPE=”CHECKBOX”>
59
Перемикач <INPUT TYPE=”RADIO”>
Файл <INPUT TYPE=”HIDDEN”>
Невидима зона <INPUT TYPE=”FILE”> Текстове вікно <TEXTAREA>…</TEXTAREA>
Меню <SELECT>…<OPTIONS>…</SELECT>
Типи TEXT і PASSWORD схожі і створюють текстове поле для введення з одним рядком. Тип PASSWORD відображає текст, що вводиться у вигляді зірочок ****.
Якщо у тега <INPUT> значенням атрибута TYPE є TEXT, повинно бути визначене значення NAME, а також SIZE, MAXLENGTH, VALUE.
Значення атрибута TEXT
SIZE |
Визначає ширину поля введення тексту |
MAXLENGTH |
Визначає максимальну кількість символів, яке |
користувач може ввести у цьому полі |
|
VALUE |
Визначає задане за замовчуванням значення поля (або |
не застосовується взагалі)
Багаторядкові текстові поля введення
Багаторядкове поле створюється за допомогою тега <TEXTAREA>… </TEXTAREA>, який задає розміри текстового вікна.
Синтаксис тега:
<TEXTAREA NAME=”Name” [ROWS=”rows”] [COLS=”columns” ]>
Пояснювальний текст до використання вікна
</TEXTAREA>
Атрибут NAME надає вікну унікальний ідентифікатор, ROWS і COLS визначають розмір поля перегляду у вікні броузера.
Створення меню у формах
Меню у формах створюється за допомогою використання конвейєрного тега <SELECT>…<OPTIONS>…</SELECT>
Синтаксис тега такий:
<SELECT NAME =”Name” [SIZE=”Size”] [MULTIPLE]> <OPTIONS [SELECTED]> Options 1
<OPTIONS [SELECTED]> Options 1
<OPTIONS [SELECTED]> Options 1
</SELECT>
Атрибут SIZE визначає число пунктів меню, які будуть показані на сторінці броузера. При вміщенні більш ніж однієї опції вибору необхідно включити атрибут MULTIPLE. Кожний пункт меню визначається тегом OPTIONS. Якщо один з пунктів повинен бути обраний за замовчуванням, для нього слід вказати атрибут SELECTED.
Типи введення
Тип введення RESET дозволяє створити на екрані кнопку, яка очищає форму і повертає всі установки до їх початкових значень за замовчуванням.
60