Читайте также:
|
Табличні теги мови HTML дозволяють подавати дані у зручній для сприйняття формі. Основним структурним елементом таблиці є комірка, яка містить елемент даних таблиці або заголовок стовпчика даних. Логічно пов'язані комірки групуються разом у рядок таблиці. Рядки, в свою чергу, складають таблицю.
Теги для побудови таблиці Таблиця 2.1
| Тег | Призначення |
| <САРТION>...</CAPTION> | заголовок до таблиці |
| <TABLE>...</TABLE> | визначає таблицю |
| <TR>...</TR> | визначає рядок таблиці |
| <TD>...</TD> | визначає елемент даних таблиці |
Для створення таблиці використовують тег <TABLE> і відповідний йому закриваючий тег </TABLE>. Між ними розташовані всі теги, необхідні для створення таблиці.
Тег <TABLE> може мати атрибут рамки BORDER=n, який створює рамку шириною n пікселів. За замовчуванням таблиця не окреслена рамкою. У тегу <TABLE> можна використати атрибут BORDERCOLOR для кольору рамки таблиці. Атрибут BORDERCOLOR може бути рівний шістнадцятковому RGB або англійській назві кольору. Атрибут UNIT= тега <TABLE> визначає одиниці вимірювання, які використовуються при зазначенні розмірів як всієї таблиці, так і окремих стовпчиків. Атрибут UNIT= може приймати такі значення:
- UNIT=EN - це значення надається за замовчуванням і визначає одиницю вимірювання, яка дорівнює еn -пробілу. en -пробіл - це друкарська одиниця вимірювання, яка дорівнює ширині літери n. Реальний розмір пробілу залежить від обраного шрифту. Як правило, еп -пробіл дорівнює половині розміру шрифту;
- UNIT=RELATIVE - використовується для визначення відносної ширини стовпчиків у процентах від загальної ширини таблиці;
- UNIT=PIXELS - це значення використовується, якщо необхідно точно визначити ширину стовпчика на екрані. Наприклад, тег <TABLE UNIT=PIXELS WIDTH=340> сформує таблицю шириною 340 пікселів.
Атрибут CELLPADDING=k визначає ширину порожнього простору між вмістом комірки і її межами, тобто задає поля, в пікселях, всередині комірки.
Для визначення заголовка таблиці призначається тег <CAPTION>, який слід розташовувати посередині контейнеру <TABLE>...</TABLE>. Тег <CAPTION> може містити атрибут ALIGN=TOP|BOTTOM який визначає розташування заголовка відносно таблиці (зверху або знизу таблиці, за замовчуванням - зверху)
Оскільки таблиці будуються з рядків, між тегами <TR> і </TR> розташовуються всі елементи, необхідні для створення рядка таблиці. Для створення заголовків стовпчиків даних використовуються теги <ТН> і </TH>, текст в яких автоматично виводиться потовщеним шрифтом з вирівнюванням по центру. Комірка, яка містить елемент даних, задається парою тегів <TD> і </ТD>. У тегу <TD> можна використати атрибут BGCOLOR, який задає колір фону комірки таблиці. Вирівнювання інформації в комірках таблиці визначається за допомогою атрибуту ALIGN=LEFT|RIGHT|CENTER, який може приймати значення LEFT (ліворуч), CENTER (по центру), RIGHT (праворуч). Атрибути горизонтального та вертикального розташування інформації в комірці ALIGN та VALIGN можуть застосовуватися до окремих комірок, до всього рядка або до всієї таблиці. Залежно від того, де використано цей атрибут (в <TABLE>, <TR> або <TD>) відповідно буде проведено вирівнювання інформації у всій таблиці, у рядку або у окремій комірці. Вертикальне вирівнювання інформації в комірках таблиці визначається за допомогою атрибуту VALIGN=TOP|BOTTOM|MIDDLE, який може приймати значення ТОР (догори), BOTTOM (донизу), MIDDLE (посередині).
Атрибут COLSPAN (Column Span) дозволяє здійснювати об'єднання стовпчиків. COLSPAN=n (n - ціле число, за замовчуванням n=1) визначає кількість стовпчиків таблиці, які перекриває комірка. Наприклад:
<TR><TD BGCOLOR=WHITE COLSPAN=2> Приклад застосування атрибута об'єднання комірок</TD></TR>
Приклад використання атрибуту COLSPAN для об'єднання стовпчиків:
Ширина рамки регулюється в тегу <TABLE> за допомогою атрибуту BORDER=n (n - ціле число, дорівнює ширині рамки в пікселях).
| Заголовок 1 | Заголовок 2 | ||
<TABLE BORDER=1><TR>
<TH COLSPAN=2>Заголовок 1</ТН><TH COLSPAN=2>Заголовок 2</ТН>
</TR><TR>
<ТD>1</ТD><ТD>2</ТD><TD>3</TD> <ТD>4</ТD>
</TR> <TR>
<ТD>5</TD> <TD>6</TD><TD>7</TD> <ТD>8</ТD>
</ТR></TABLE>
Для об'єднання рядків та стовпчиків використовується атрибут ROWSPAN=n (де n-ціле число, за замовчуванням n=1) визначає кількість рядків таблиці, які перекриває комірка.
Приклад таблиці з атрибутом ROWSPAN:
| Комірка 1 | Комірка 2 | Комірка 3 |
| Комірка 4 | Комірка 5 |
<TABLE BORDER><TR>
<ТD> Комірка 1</TD><TD ROWSPAN=2> Комірка 2</TD>
<ТD>Комірка 3</TD>
</TR> <TR>
<ТD> Комірка 4</TD><ТD> Комірка 5</TD>
</TR></TABLE>
Визначення ширини таблиці або окремих її стовпчиків здійснюється за допомогою атрибуту WIDTH=n (n - число aбо проценти). Атрибут WIDTH може застосовуватись до окремих стовпчиків (визначається в <TD>) або до всієї таблиці (визначається в <TABLE>). Якщо атрибут WIDTH використано в <TABLE>, то він визначає ширину всієї таблиці у вікні броузера (якщо значення визначено - у пікселях, то ширина таблиці не залежить від розмірів вікна броузера, якщо значення визначено у відсотках, то таблиця буде займати саме цю частину вікна броузера), Атрибут WIDTH тега <TD> використовується броузером, якщо він не конфліктує з вимогами до ширини сусідніх комірок.
Приклад. Таблиця займає 75% ширини екрану, кожний стовпчик - 50% ширини таблиці:
<TABLE BORDER WIDTH=”75%”>
<TR><TD WIDTH =”50%”>Ширина стовпчика - 50% ширини таблиці</TD>
<TD WIDTH=”50%”> Ширина стовпчика - 50% ширини таблиці</TD> </TR>
<TR><TD>3</TD><TD>4</TD>
</TR> </TABLE>
Центрування таблиці на сторінці
Для центрування таблиці у вікні броузера використовується тег <CENTER>, який необхідно відкрити до початку розмітки таблиці тегом <TABLE> і закрити після </TABLE>.
Висота таблиці та її рядків
Атрибут HEIGHT використовується для визначення висоти таблиці (якщо він є атрибутом тегу <TABLE>) або для визначення висоти рядка відносно висоти таблиці якщо він є атрибутом тегу <TR>.
Управління кольором елементів таблиці
Атрибути управління кольором: BORDERCOLOR - колір рамки і BGCOLOR - колір фону, використовуються для тегів: <TABLE>, <TR>, <TH>, <TD>. Відповідно областю їх дії може бути вся таблиця, рядок або окрема комірка.
Наприклад: колір всієї таблиці
<TABLE BORDER BORDERCOLOR=Green BGCOLOR=YELLOW>...</TABLE>
колір рядка: <TR BORDERCOLOR=Blue BGCOLOR=YELLOW></TR>
колір комірки: <TD BORDERCOLOR=Red BGCOLOR=YELLOW></TD>
За допомогою таблиць можна створювати виділені цитати. Цитата вміщується в таблицю між двома горизонтальними лініями. Завдяки атрибуту ALIGN тега <TABLE>, текст, який слідує за таблицею, починає її “обтікати”. Основний текст розташовується праворуч від таблиці і “обтікає” цитату після того, як перевищить її по висоті. Для виступів тексту від меж сторінки можна застосувати тег <BLOCKQUOTE> (навіть декілька разів). Атрибут BORDER в даному випадку використовувати не слід.
Приклад:
<HTML><BODY>
<Н2 ALIGN=CENTER>Заголовок</Н2>
<TABLE ALIGN=LEFT><TD ALIGN=CENTER><HR>
<В>...Перший рядок тексту, <BR> другий рядок... <BR>Третій рядок </B><HR></TD></TR></TABLE>
<BLOCKQUOTE><BLOCKQUOTE><BLOCKQUOTE>
<P ALIGN=JUSTIFY>Наш вищий заклад освiти виступає органiзатором ряду мiжнародних конференцiй, пiдтримує науковi зв'язки iз провiдними закордонними унiверситетами США, Канади, Нiмеччини, Швецiї, Великобританiї, Польщi, Китаю, Росiї та iнших держав.</P>
</BLOCKQUOTE></BLOCKQUOTE></BLOCKQUOTE>
</BODY>
</HTML>
Вкладені таблиці
Теги <ТD> та <ТН> можуть містити всередині блоковий елемент. Це означає, що мова HTML дозволяє розмічати вкладені таблиці, тобто припустимою є конструкція <TD> <TABLE>...</TABLE></TD>
Лекція 3. Тема: Фреймові структури. Інтерактивні форми
3.1 Фреймові структури
Фрейми (Frames - кадри) надають користувачеві можливість поділяти екран на дві або більше незалежних динамічних або статичних частини. Кожен фрейм може мати такі властивості:
- всі фрейми мають свій URL, що дозволяє завантажувати їх незалежно від інших фреймів;
- кожний фрейм має власне ім'я (атрибут NAME), яке дозволяє переходити до нього з іншого фрейма;
- розмір фрейма може бути змінений користувачем безпосередньо на екрані за допомогою мишки.
Ці властивості фреймів дозволяють:
- розміщувати статичну інформацію, яку автор вважає за необхідне постійно показувати користувачу, у одному статичному фреймі;
- розміщувати у статичному фреймі зміст всіх або частини документів, які містяться на сервері, що дозволяє користувачеві швидко знаходити інформацію, яка його цікавить;
- створювати вікна результатів запитів, коли в одному фреймі знаходиться запит, а в другому - результати запиту.
Фрейм-документ є специфічним видом HTML документа, оскільки не містить елемента BODY і, відповідно, будь-якого змістового навантаження. Він описує тільки фрейми, які будуть містити інформацію. Основний документ, який містить опис фреймів, виглядає так:
<HTML>
<HEAD>...</HEAD>
<FRAMESET>...</FRAMESET>
</HTML>
Атрибути тегу <FRAMESET> Таблиця 3.1
| Атрибут | Призначення |
| ROWS=pixels|persent|* | поділ екрану на декілька смуг |
| COLS=pixels|persent|* | поділ екрану на декілька стовпчиків |
| FRAMEBORDER | описує сітку фреймової структури (за замовчуванням значення YES -тривимірна сітка, NО - без сітки) |
| BORDERCOLOR | Колір сітки фреймової структури |
Значення (*) відповідає використанню всього простору екрану, який залишився. Для вміщення змісту у фрейми, які утворились в результаті поділу, використовується тег <FRAME>... </FRAME>. Важливим атрибутом цього тега є атрибут SRC, який сповіщає URL документа, котрий необхідно завантажити у фрейм.
Атрибути тегу <FRAME> Таблиця 3.2
| Атрибут | Призначення |
| SRC | URL вмісту фрейма |
| NAME | ім'я фрейма (аналогія імені вікна броузера) для здійснення доступу до фрейма і оновлення змісту |
Таблиця 3.2(продовження)
| MARGINHEIGHT | ширина верхнього і нижнього вільного поля фрейма у пікселях |
| MARGINWIDTH | ширина лівого і правого вільного поля фрейма у пікселях |
| SCROLLING=AUTO/YES/NO | смуги прокрутки для перегляду вмісту фрейма, за замовчуванням значення – AUTO |
| NORESIZE | наявністю даного атрибута користувачу забороняється змінювати розміри фрейма при перегляді документа (за замовчуванням це можливо за допомогою мишки) |
| FRAMEBORDER=(YES/NO) | показує сітку фрейма |
| BORDERCOLOR | колір сітки фрейма |
3.2 Порядок створення сторінки з фреймами
1. Створюється початкова сторінка, у якій задаються розміри і кількість фреймів, а також імена файлів, які відповідають фреймам і атрибути для кожного фрейма.
2. Створюються окремі сторінки для кожного фрейма. Необхідно уявити собі загальний вигляд сторінки - де і якого розміру будуть фрейми. Наприклад, ліворуч має бути фрейм змісту з переліком статей, праворуч - сторінка із власне статтями. Необхідно зробити так, щоб фреймова структура ділила екран на три повздовжні частини. Верхня частина займає 20% висоти вікна броузера, її змістом є документ header.htm. Середній фрейм займає 70% вікна, в нього вводиться зміст документа center.htm. Решту частини вікна броузера займає фрейм, у який виводиться зміст документа bottom.htm.
<FRAMESET ROWS=”20%, 70%,*”>
<FRAME SRС=«header.htm» NORESIZE SCROLLING=NO>
<FRAME SRC=«center.htm»>
<FRAME SRC=«bottom.htm» NОRESIZE SCROILING=NO>
</FRAMESET>
Верхній і нижній фрейми даної структури не містять смуг гортання вмісту і мають постійний розмір. Атрибут NORESIZE для середнього фрейма не задається, оскільки заборона зміни розмірів фреймів, які знаходяться поруч, не дозволяє зміни розміру середнього фрейма. Для створення “вкладеної” структури фреймів, наприклад, у середній області фрейма з попереднього прикладу, яка поділяє її на два рівних стовпці, можна навести такий приклад:
<FRAMESET ROWS=”15%, *, 15%”>
<FRAME SRC=”header.htm” NORESIZE SCROLLING=NO>
<FRAMESET COLS=”*,*”>
<FRAME SRC=”left.htm”>
<FRAME SRC=”right.htm”>
</FRAMESET>
<FRAME SRC=”ticher.htm” NORESIZE SCROLLING=NO>
</FRAMESET>
Приклад створення індексного (початкового) екрана з двох фреймів:
<HTML>
<FRAMESET cols=”210,*”>
<FRAME SRC=”menu.htm” NAME= “menu_frame”>
<FRAME SRC=”lab.htm” NAME=”right_frame”>
</FRAMESET>
</HTML>
У лівому фреймі у пункті “Меню” зроблено посилання на відповідний файл, який розкриє зміст цього пункту і буде відображений у правому вікні. Для цього зміни вносяться до файлу, який завантажується у цей фрейм. При встановленні гіперпосилання вказують на NAME відповідного введенням команди TARGET.
3.3 Використання сторінок з формами
Одним із способів привернення уваги до Web -сторінок є введення до них елементів інтерактивності, які передбачають обмін інформацією між користувачем і сервером. Одним із засобів, за допомогою яких на сервер подається інформація про запити користувача, є HTML -форми і сценарії Common Gatewey Interfase (CGI) - спільний інтерфейс шлюзів. Форми в IE нагадують бланки і складаються з полів для введення текстової інформації, списків вибору варіантів і можливих опцій. За допомогою форм і завдяки механізму CGI -сценаріїв автори Web -сторінок можуть задавати певні питання користувачу і одержувати від нього відповіді. Форми можуть бути діловими або неформальними, залежно від потреб.
Теги форми Таблиця 3.3
| Тег | Призначення |
| <FORM>...</FORM> | Визначає початок і кінець форми, як і куди буде відправлено інформацію, вказану в ній |
| <TEXTAREA>...</TEXTAREA> | Текстове поле введення |
| <SELECT>...</SELECT> | Вибір із меню |
| <INPUT>...</INPUT> | Кнопки команд |
Теги <TEXTAREA>, <SELECT>, <INPUT> повинні бути визначені всередині пари тегів <FORM>...</FORM>.
Атрибути тага <FORM> Таблиця 3.4
| Тег | Призначення |
| ACTION | Визначає адресу URL, за якою надсилається введена у форму інформація |
| METHOD=GET| POST | Визначає, як інформація, що зібрана формою, надсилається за URL -адресою |
Tег <INPUT> можна застосовувати для різних способів організації графічного інтерфейсу з користувачем за рахунок використання таких елементів вікна введення тексту: прапорці, перемикачі і меню. Тип введення визначається атрибутом ТУРЕ.
Типи полів тега <INPUT> Таблиця 3.5
| Вид тега | Тип поля |
| <INPUT TYPE="TEXT'> | Вікно для введення тексту |
| <INPUT TYPE=PASSWORD"> | Вікно для введення пароля |
| <INPUT TYPE="CHECKBOX"> | Прапорець |
| <INPUT TYPE="RADIO"> | Перемикач |
| <INPUT TYPE=”HIDDEN”> | Файл |
| <INPUT TYPE="FILE"> | Невидима зона |
| <TEXTAREA>...</TEXTAREA> | Текстове вікно |
| <SELECT>...<OPTIONS>...</SELECT> | Меню |
Типи TEXT і PASSWORD схожі і створюють текстове поле для введення з одним рядком. Тип PASSWORD відображає текст, що вводиться у вигляді зірочок ****.
Багаторядкове поле створюється за допомогою тега <TEXTAREA>...</TEXTAREA>, який задає розміри текстового вікна.
Синтаксис тега:
<TEXTAREA NAME= «Name» [ROWS= «rows»] [COLS= «columns»]> Пояснювальний текст до використання вікна </TEXTAREA>
Атрибут NAME надає вікну унікальний ідентифікатор, ROWS і COLS визначають розмір поля перегляду у вікні броузера.
Якщо у тега <INPUT> значенням атрибута TYPE є TEXT, повинно бути визначене значення NAME, а також SIZE, MAXLENGTH, VALUE.
Призначення атрибутів поля TEXT Таблиця 3.6
| Атрибут поля | Призначення |
| SIZE | Визначає ширину поля введення тексту |
| MAXLENGTH | Визначає максимальну кількість символів, яке користувач може ввести у цьому полі |
| VALUE | Визначає задане за замовчуванням значення поля (або не застосовується взагалі). |
Меню у формах створюється за допомогою використання конвейерного тега <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 дозволяє створити на екрані кнопку, яка очищає форму і повертає всі установки до їхніх початкових значень за замовчуванням. Атрибутом VALUE визначається текст, який буде написаний на кнопці. Якщо цей атрибут відсутній, на кнопці буде напис “ Reset”.
Тип SUBMIT збирає дані і надсилає Web -серверу для обробки. Кнопку SUBMIT повинна мати кожна форма. Атрибут VALUE визначає текст, який буде написаний на кнопці. Якщо цей атрибут відсутній, на кнопці буде напис “Submit Query”.
Приклад:
<HTML>
<НЕАD><ТITLЕ>Сторінка форми</TITLE></HEAD>
<BODY>
<FORM ACTION=”userinfo.htm” METHOD=”POST”>
Ім`я: <INPUT TYPE=”TEXT” NAME=”FULLNAME” SIZE=30> <BR>
E-mail:<INPUT TYPE=”TEXT” NAME=”EMAIL” SIZE=30> <BR>
<P> <HR></P>
Зазначте тип операційної системи, з якою Ви постійно працюєте <BR>
<INPUT TYPE=”CHECKBOX” NAME=“DOS” VALUE = “YES” CHEKED>DOS <BR>
<INPUT TYPE=”CHECKBOX” NAME=“Windows” VALUE = “YES” CHEKED>Windows <BR>
<INPUT TYPE=”CHECKBOX” NAME=”MAC” VALUE=”YES” CHEKED>MAC <BR>
<INPUT TYPE=”CHECKBOX” NAME=”UNIX” VALUE=”YES” CHEKED>UNIX <BR>
<TEXTAREA NAME=”COMMENTS” COLS=80>
Повідомте Вашу думку щодо планування розвитку сайту
</TEXTAREA>
<INPUT TYPE=button VALUE=”Biдмінити”>
<INPUT TYPE=button VALUE=”Haдіслати”>
</FORM>
</BODY>
</HTML>
Дата добавления: 2014-12-20; просмотров: 191 | Поможем написать вашу работу | Нарушение авторских прав |