Лабораторна робота №6

ТАБЛИЦІ, ФОРМИ, ФРЕЙМИ В HTML

Мета роботи: ознайомитись з основними можливостями мови HTML та основами Web-дизайну, навчитися створювати таблиці, форми та фрейми в HTML.

Теоретичні відомості

Важливим інструментом Web-дизайну є таблиці, які використовуються не тільки для виведення табличних даних, але й для керування взаємним розміщенням тексту і графіки. Браузер відображає вміст таблиці тільки після закінчення її завантаження, тому великий документ не варто розміщати в одній гігантській таблиці. Таблиця розміщується в тезі <TABLE>, що має ряд опцій.

Таблиця повинна містити хоча б один рядок і стовпчик. Для рядків використовується тег TR всередині тега TABLE, для колонок тег TD всередині тега TR.

Розглянемо приклад створення таблиці, що складається з одного рядка і п‘яти стовпчиків. НTML-код такої таблиці буде мати вигляд:

<table border=3>

<tr>

<td> Вміст комірки 1 </td>

<td> Вміст комірки 2 </td>

<td> І т.д. </td>

<td> </td>

<td> </td>

</tr>

</table>

На рисунку 6.1 показано таблицю, яку отримано в прикладі після завантаження файлу з НTML-кодом в браузер.

Вміст комірки 1

Вміст комірки 2

І т.д.

Рисунок 6.1 – Таблиця, що складається з одного рядка і п‘яти стовпчиків

Для того, щоб прибрати рамку, потрібно поставити border = 0. Часто цей прийом використовується для розміщення зображень на сайті.

В таблицю можна внести зміни, що стосуються ширини, висоти, рамок, відстаней між комірками і вирівнювання тексту.

Опис параметрів таблиці і їх властивостей наведено в таблиці 6.1.

Таблиця 6.1 – Опис параметрів тега TABLE

Опція	Значення	Опис	Приклад
align=	left right center	Вирівнювання таблиці	align=center
background=	URL	Фоновий рисунок	background=pic.gif
bgcolor=	#rrggbb	Колір фону таблиці	bgcolor=#FF9900
border=	n	Товщина рамки в пікселях	border=2
bordercolor=	#rrggbb	Колір рамки	bordercolor=#333333
bordercolordark=	#rrggbb	Тінь рамки	bordercolordark=#f0f0f0
cellpadding=	n	Відстань між коміркою і її вмістом	cellpadding=7
cellspacing=	n	Відстань між комірками	cellspacing=3
nowrap		Забороняє перенесення рядків в тексті	<table nowrap>
frame=	void above below lhs rhs hsides vsides box	Завдання типу рамки таблиці	frame=hsides
width=	n n%	Мінімальна ширина таблиці, задається у пікселях або відсотках	width=90%

Продовження таблиці 6.1

height	n n%	Мінімальна висота таблиці, можна задавати у пікселях або відсотках	height=18
valign=	top bottom	Вирівнювання по висоті	valign=top

Примітка.

1. Таблиця, якщо не вказано окремо, завжди вирівнюється по лівому краю;

2. Параметр background, що відповідає за малюнок фону, по різному розуміється в різних браузерах. Наприклад, Internet Explorer вставляє картинку на всю таблицю, якщо таблиця за розміром більше фонового малюнка, він повторюється по горизонталі або вертикалі. Netscape додає фонове зображення в кожну клітинку таблиці;

3. За замовчуванням, таблиця виводиться без рамки. Однак Netscape додає тонку лінію між комірками. Щоб її не було, завжди вказуйте параметр border = 0;

4. Якщо ширина таблиці не вказана, вона пристосовується під зміст комірок.

5. Для рядка - заголовка можна використати тег <th>, а не <td>. Такий тег дозволяє відразу центрувати текст і робити його "жирним".

Параметри комірок можуть бути додані до тегів TR і TD, наведені в таблиці 6.2.

Таблиця 6.2 – Опис параметрів комірок таблиці

Опція	Значення	Опис	Приклад
align=	left right center	Вирівнювання вмісту комірки	align=center
background=	URL	Встановлює фоновий малюнок в комірці	background=pic.gif
bgcolor=	#rrggbb	Колір фону комірки	bgcolor=#FF9900
valign=	top midlle bottom	Вирівнювання вмісту комірки по висоті	valign=top
width=	n n%	Мінімальна ширина комірки, задається у пік­селях або відсотках	width=90%

Продовження таблиці 6.2

height

n n%

Мінімальна висота комірки, можна задавати у пікселях або відсотках

height=37

Параметри використовуються тільки для тега TD наведені в таблиці 6.3.

Таблиця 6.3 – Опис параметрів для тега TD

Опція	Значення	Опис	Приклад
nowrap		Забороняє перенесення рядків в тексті	<td nowrap>
colspan=	n	Кількість колонок, що об‘єднуються	<td colspan=3>
rowspan=	n	Кількість строк, що об‘єднуються	<td rowspan=3>

Примітка.

1. Вміст комірок за замовчуванням вирівнюється по лівому краю по горизонталі і по центру - по вертикалі;

2. Параметри тега TD мають більший пріоритет ніж параметри тега TR, а властивості комірок вище властивостей самої таблиці.

В таблиці також можна додавати спецсимволи. Складні і красиві ефекти можуть бути досягнуті вкладенням таблиць одна в одну - внутрішня таблиця при цьому повинна бути цілком вкладена в тег <td> зовнішньої таблиці.

Форми є найбільш поширеним способом "зворотного зв'язку" з користувачем. За допомогою HTML можна створювати як прості форми, що припускають вибір одного з декількох відповідей, так і складні форми для замовлень або для того, щоб отримати від користувачів сторінки будь-які коментарі та побажання.

Форма являє собою кілька полів, де користувач може ввести деяку інформацію, або вибрати якусь опцію. Після того, як користувач відправить інформацію, вона обробляється програмою (скриптом), розміщеною на сервері. Існує також можливість обробляти форми "на стороні клієнта", це роблять скрипти, написані на мовах JavaScript і Visual Basic Script.

Форма відкривається тегом <FORM>, що має декілька опцій.

Опція action = "url" вказує URL, який прийме і опрацює дані форми. Якщо ця опція не вказана, дані відправляються за адресою сторінки, на якій розміщена форма.

Опція method = "стиль" вказує метод передачі даних програмі-оброблювачу форми. "Стиль" може приймати одне з двох значень. Значення get, що використовується за замовчуванням, наказує надсилати інформацію форми разом з URL, а значення post наказує надсилати інформацію форми окремо від URL. Значення post використовується в разі відправки даних форми по електронній пошті або при необхідності передавати значний об'єм інформації.

Опція name = "ім'я" вказує ім'я форми. Це необхідно, якщо потрібен доступ до даних форми за допомогою вбудованого скрипта на JavaScript або Visual Basic Script, а також у тому випадку, якщо дані форми призначені для відправки по електронній пошті.

Опція enctype = "кодування" задає спосіб кодування даних форми. У разі відправки даних як тексту вказується у вигляді enctype = "text / plain".

Наприклад, заголовок форми, яка використовується на пошуковій машині Яndex, має вигляд:

<form name="web" method="get" action="/yandsearch">

Заголовок форми, що відправляє інформацію на адресу E-mail, може мати вигляд:

<form action = "mailto: vita@lvs.ru? subject = Internet-Test"

method = "post" enctype = "text / plain" name = "Q" onSubmit = "return Validate ( )">

Тут форма має ім'я Q, як action вказана відправлення повідомлення по E-mail на адресу vita@lvs.ru з темою "Internet-Test", опція enctype наказує відправляти дані форми як текст, а опція onSubmit пов'язує відправку форми з функцією Validate ( ), написаною на Javascript. Цей прийом широко використовується для перевірки коректності заповнення форми.

Всередині тега <FORM> знаходяться поля форми. Перелічимо основні з них:

<textarea name="ім‘я" cols="кількість стовпців" rows="кількість строк" wrap="стиль"> ...</ textarea>

Тег призначений для багатострокового поля введення. Опції cols і rows вказують кількість рядків і стовпців у полі, опція wrap вказує на режим автоматичного розподілу тексту в комірці. Вона може приймати одне із значень off (вимкнено), virtual (розподіляти текст по всій комірці, але на сервер передавати як один рядок) або physical (розподіляти текст по всій комірці і передавати на сервер так, як він відображається). Опція name тут і далі означає ім'я поля і передбачається обов'язковою. Текст, написаний у тезі <textarea>, стає його значенням за замовчуванням.

Тег <select name="ім‘я" size="розмір" multiple> ...</ select> визначає у формі меню з одним або кількома варіантами вибору або список з смугою прокручування. Якщо опція size вказана у вигляді size = "1", відображення елементів буде організовано у вигляді спадаючого меню, в іншому випадку буде використаний список прокрутки, що включає вказане число елементів. Опція multiple, якщо вона вказана, дозволяє вибирати зі списку більше одного значення. Це можна зробити, наприклад, вибираючи елементи списку, утримуючи клавішу Ctrl.

Всередині тега <select> розміщуються елементи меню або списку, кожен - у своєму тезі <option>, що має загальний вигляд:

<option value="значення" selected> текст </ option>.

Опція value вказує значення, що повертається програмі обробки при виборі користувачем даної опції, опція selected вказує на елемент списку, обраний за замовчуванням. Всередині тега <option> пишеться текст, видимий в меню або списку на екрані.

Тег <input>, на відміну від <textarea> і <select>, не має закриватися і призначений для збору інформації різними способами, включаючи текстові поля, поля для введення пароля, перемикачі, прапорці, кнопки для відправки даних і очищення форми.

<input type="text" name="строка" maxlength="максимальний розмір" size="кількість символів" value="строка"> створює поле введення. Опція maxlength обмежує максимальну довжину тексту, що вводиться, а опція size показує максимальну кількість відображаються символів. Опція value вказує початкове значення поля введення.

Текстове поле із захистом символів, що вводяться (тобто, з заміною їх на зірочки, як прийнято під час введення паролів) можна створити, якщо замінити опцію type = "text" на type = "password". Інші опції поля введення пароля - ті ж самі.

<input type="checkbox" name="строка" value="строка" checked> створює прапорець. Опція value визначає значення, що повертається програмі обробки при виборі користувачем прапорця, опція checked, якщо вона вказана, робить прапорець обраним за замовчуванням.

<input type="radio" name="ім‘я" value="строка" checked> створює радіокнопку. Радіокнопки можна групувати, задаючи одне і те ж значення опції name. Опції value і checked мають ті ж значення, що й у прапорця.

<input type="reset" value="строка"> створює кнопку для очищення форми. Значення опції value дозволяє вказати напис для кнопки. Після очищення всі елементи форми приймають значення, які вони мали за замовчуванням.

<input type="submit" value="строка"> створює кнопку для відправки даних форми з додатку-обробнику. Опція value дозволяє вказати напис на кнопці.

Для створення довільної кнопки замість reset або submit вказується значення button. В основному це потрібно при написанні скриптів, що працюють на стороні клієнта.

Наприклад, кнопка, створена тегом <INPUT TYPE="button" VALUE="Вивести" onClick="Look()"> підписана словом "Вивести", а при натисканні на неї викликає функцію Look (), написану на JavaScript.

Приклад розробки форми показано на рис. 6.2

Начало формы

Ваше ім‘я:

Ваша стать: Чоловіча

Жіноча

На якому курсі Ви навчаєтесь?

Які мови програмування Ви знаєте?

Паскаль

Сі

Асемблер

Напишіть кілька слів про себе:

Рисунок 6.2 – Форма

Ця форма має наступний HTML-код:

<form method="post"

action="mailto:sdf@mail.ru?subject=Information">

<pre> Ваше ім'я: <input name="name" type="text" maxlength="40" size="40" value="">

Ваша стать: <input type="radio" name="pol" value="male"> Чоловіча

<input type="radio" name="pol" value="female"> Жіноча

На якому курсі Ви навчаєтесь? <select name="curs" size="1">

<option value="1" selected> Перший </ option>

<option value="2"> Другий </ option>

<option value="3"> Третій </ option>

<option value="4"> Четвертий </ option>

<option value="5"> П'ятий </ option>

</ select>

Які мови програмування Ви знаєте?

<input type="checkbox" name="pascal" value="yes" checked>

Паскаль

<input type="checkbox" name="c" value="yes"> Сі

<input type="checkbox" name="asm" value="yes"> Асемблер

Напишіть кілька слів про себе: </ pre>

<textarea name="about" rows="6" cols="60" wrap="off"> </ textarea>

<p> <input type="submit" value="Відправити дані">

<input type="reset" value="Очистити форму">

</ form>

Ця форма намагається надіслати дані за вказаною у заголовку адресою електронної пошти, використовуючи тему листа "Information". Подальші події залежать від того, чи встановлена на машині користувача поштова програма-клієнт. Якщо так, то інформація буде відправлена, причому дані з полів форми прийдуть у вигляді рядків тексту name = value, наприклад, інформація про курс у вигляді curs = 1. Якщо на машині немає програми електронної пошти, Windows попередить про це.

Зверніть увагу, що для кращого вирівнювання даних частина форми укладена в тег <pre>, а в частині, що знаходиться поза тегом <pre>, використані стандартні для HTML способи форматування тексту, наприклад, тег абзацу.

Фреймами або кадрами називають незалежні вікна всередині вікна браузера, в яких можуть одночасно відображатися різні документи. Фрейми зручні при створенні сторінок, які повинні мати як динамічний, так статичний вміст.

Наприклад, вузький лівий фрейм може містити зміст сайту, а широкий правий буде призначений для виведення інформації. Можливі також будь-які інші конфігурації.

Для створення фрейму використовується тег FRAMESET, який замінює тег BODY в документі і використовується для розділення екрану на області. Усередині даного тега знаходяться теги FRAME, які вказують на HTML-документ, призначений для завантаження в область.

Приклад розділення вікна браузера на фрейми наведено на рис. 6.3.

MENU

CONTENT

Рисунок 6.3 – Фрейми MENU і CONTENT

Код буде наступний:

<frameset cols="200,*">  <frame src=menu.html name=MENU>  <frame src=content.html name=CONTENT> </frameset>

Вікно браузера розбивається на дві колонки, ліва займає 200 пікселів (можна вказувати у відсотках від ширини сторінки, як в таблицях), а права - залишившийся простір (для цього стоїть символ зірочки).

У тезі FRAME задається ім'я HTML-файлу, що завантажується в зазначену область, за допомогою параметра src. У ліве вікно буде завантажений файл, названий menu.html, а в праве - content.html. Кожному фрейму бажано задати його унікальне ім'я, щоб документи можна було завантажувати у вказане вікно.

Якщо потрібна складніша структура фреймів, наприклад, як показано на рис. 6.4, теги FRAMESET можна вкладати один в іншій.

Приклад створення трьох фреймів:

TOP
MENU	CONTENT

Рисунок 6.4 – Фрейми TOP, MENU і CONTENT

Код буде наступний:

<frameset rows="10%,90%">

<frame src="top.html" name="TOP">

<frameset cols="200,*">

<frame src="menu.html" name="MENU">

<frame src="content.html" name="CONTENT">

</ frameset>

</ frameset>

У тезі FRAME задається ім'я HTML-файлу, завантаження в зазначену область, за допомогою параметра src. У ліве вікно буде завантажений файл, названий menu.html, а в праве - content.html. Кожному фрейму бажано задати його унікальне ім'я, щоб документи можна було завантажувати у вказане вікно.

Перший тег FRAMESET розбиває вікно браузера на два рядки шириною 10 і 90 відсотків. А наступний, вкладений - створює дві колонки.

За замовчуванням розміри фреймів можна змінювати за допомогою курсора миші, навівши його на кордон між фреймами. Для блокування можливості зміни користувачем розміру фреймів слід скористатися параметром noresize тега FRAME.

Приклад заборони зміни розміру фреймів:

<frameset cols=200,*>

<frame src=menu.html name=MENU noresize>

<frame src=content.html name=CONTENT>

</ frameset>

Параметр noresize не вимагає ніяких значень і використовується сам по собі. Для випадку двох фреймів цей параметр можна вказати лише в одному місці. Якщо в одного фрейму не можна змінювати розміри, то у довколишнього розміри теж мінятися не будуть.

Якщо вміст фрейма не вміщається у відведене вікно, автоматично з'являються смуги прокрутки для перегляду інформації. У деяких випадках, смуги прокрутки порушують дизайн веб-сторінки, тому від них можна відмовитися. Для управління відображенням смуг прокрутки використовується параметр scrolling. Він може приймати два основних значення: Yes - завжди викликає появу смуг прокрутки незалежно від обсягу інформації та No - забороняє їх появу.

Приклад. Відсутні смуги прокрутки:

<frameset cols=200,*>

<frame src=menu.html name=MENU noresize scrolling=no>

<frame src=content.html name=CONTENT>

</ frameset>

При виключених смугах прокрутки, якщо інформація не вміщається у вікно фрейма, проглянути її буде складно. Тому параметр scrolling = no слід використовувати обережно.

У звичайному HTML-документі, при переході по посиланню, у вікні браузера поточний документ замінюється новим. При використанні фреймів схема завантаження документів відрізняється від стандартної. Основна відмінність - можливість завантажувати документ у вибраний фрейм з іншого. Для цієї мети використовується параметр target тега А. Як значення використовується ім'я фрейму, в який буде завантажуватися документ, вказаний параметром name.

Приклад. Посилання на інший фрейм :

Файл index.html

<frameset cols=200,*>

<frame src=menu.html name=MENU noresize>

<frame src=content.html name=CONTENT>

</ frameset>

Файл menu.html

<a href=text.html target=CONTENT> Зміст </ a>

У наведеному прикладі фрейму привласнюється ім'я content. Щоб документ завантажувався у вказаний фрейм, використовується параметр target = content.

Ім'я фрейму повинно починатися на цифру або латинську букву. Як зарезервованих імен використовуються наступні:

- target = _blank - завантажує документ в нове вікно;

- target = _self - завантажує документ в поточний фрейм;

- target = _parent - завантажує документ у фрейм, займаний батьком, якщо фрейма-батька немає параметр діє також, як _top;

- target = _top - відміняє всі фрейми і завантажує документ в повне вікно браузера.

Щоб одночасно відновити відразу два фрейми і завантажити в них різні документи, доведеться скористатися JavaScsript.

Приклад. Одночасне завантаження документів у два фрейма:

Файл index.html

<frameset cols=200,*>

<frame src=menu.html name=MENU noresize>

<frame src=content.html name=CONTENT>

</ frameset>

Файл menu.html

<a href=menu2.html

onClick="parent.frames['CONTENT'].document.location='content2.html'"> Натисни на мене, натисни </ a>

або

onClick = "parent.frames.CONTENT.document.location = 'content2.html'"> Натисни на мене, натисни </ a>

Посилання використовується як звичайно, але як параметр додається подія onClick, яка відстежує натиснення на посилання. Зверніть увагу, що ім'я фрейму слід писати також, як воно вказане в параметрі name (в даному випадку великими символами), в JavaScript має значення регістр літери.

Браузери Netscape і Internet Explorer використовують різні підходи для визначення рамок між фреймами. Так, параметр frameborder в Netscape може приймати значення Yes або No, а в Internet Explorer допустимо використовувати в цьому випадку тільки числа. Щоб прибрати рамки між фреймами можна використовувати наступний код.

Приклад. Відсутні рамки між фреймами:

<frameset cols=200,* frameborder=no frameborder=0>

<frame src=menu.html name=MENU noresize>

<frame src=content.html name=CONTENT>

</ frameset>

У прикладі параметр frameborder використовується двічі, щоб кожен браузер міг вибрати собі значення. Можна взагалі обмежитися лише одним параметром frameborder = 0. Для Netscape таке написання є порушенням правил, але при цьому сприймається коректно. Браузер Opera в будь-якому випадку виводить фрейми з рамкою.

Якщо рамка все ж таки потрібна, в браузері вона малюється за замовчуванням, без завдання будь-яких параметрів. Можна, також, задати колір рамки за допомогою параметра bordercolor, який може застосовуватися як в тезі FRAMESET, так і FRAME. Колір вказується його назвою або шістнадцяткоим значенням.

Приклад. Зміна кольору рамки:

<frameset cols=200,* bordercolor=navy>

<frame src=menu.html name=MENU noresize>

<frame src=content.html name=CONTENT>

</ frameset>

У прикладі рамка буде синього кольору, але на вигляд розрізняється в браузерах Netscape і Internet Explorer.

Браузер Internet Explorer 3 і вище дозволяє використовувати плаваючі фрейми за допомогою тега IFRAME. Плаваючий фрейм знаходиться усередині звичайного документа і дозволяє вбудовувати на сторінці будь-які інші незалежні документи. У тезі IFRAME підтримуються ті ж параметри, що і в звичайному фреймі. Крім того можна використовувати наступні параметри: width, height, hspace, vspace, align, значення яких співпадає з відповідними параметрами тега IMG.

Приклад. Використання плаваючого фрейма:

<iframe src=banner.html width=468 height=60 hspace=10 vspace=10 align=center>

Ваш браузер не підтримує плаваючі фрейми!

</ iframe>

Тег IFRAME є контейнером, зміст якого ігнорується браузерами, що не підтримують цей тег. Для цих браузерів можна вказати альтернативний текст, який побачать користувачі.