- •2.1. Загальний огляд технологій створення інтерактивних
- •5.1. Особливості методичної системи вивчення основ
- •1 Розділ
- •1.1. Основні принципи побудови та функціонування мережі Internet
- •1.2. Форматування тексту мовою html
- •1.3. Використання гіперпосилань
- •1.5. Списки і таблиці у html-документах
- •1.6. Використання фреймів
- •1.7. Каскадні таблиці стилів (css)
- •1.8. Введення даних за допомогою форм
- •1.9. Розробка Web-сайтів
- •2 Розділ
- •2.1. Загальний огляд технологій створення інтерактивних Web-документів
- •2.2. Використання скриптів JavaScript
- •2.3. Використання рнр і MySql
- •Додатки Створення шкільної Intranet
1.5. Списки і таблиці у html-документах
Одним із способів структурування інформації на Web-сторінках є використання списків. Списки дозволяють подати інформацію у впорядкованому вигляді. З їх допомогою можна організувати чітку подачу матеріалу. Основні типи списків, які використовуються у Web: впорядкований (нумерований) і невпорядкований (маркірований). Впорядкований список створюється за допомогою контейнера <ОL> </ОL>, у середині якого кожен елемент списку визначається за допомогою дескриптора <LІ> (від слів list item — елемент списку).
Простий впорядкований список задається таким кодом:
<ОL>
<LI> Перший елемент списку
<LI> Другий елемент списку
………….
<ІЛ> Останній елемент списку
</ОL>
У цьому випадку елементами списку є просто текстові рядки, але взагалі ними можуть бути будь-які елементи Web-сторінки: текст, зображення, гіпер-посилання тощо.
У впорядкованих списках за допомогою атрибута TYPE дескриптора <ОL> можна вказати тип нумерації (табл. 1.5).
Таблиця 1.5. Типи нумерації у впорядкованих списках
ФОРМАТ ДЕСКРИПТОРА |
СПОСІБ НУМЕРАЦІЇ |
<ОL TYPE =1> |
стандартний спосіб нумерації за допомогою арабських цифр |
<ОL TYPE =a> |
нумерація за допомогою малих букв алфавіту |
<ОL TYPE =A> |
нумерація за допомогою великих букв алфавіту |
<ОL TYPE =I> |
нумерація за допомогою римських цифр |
Найбільш розповсюдженим типом списку, який використовується у Web, є невпорядкований або маркірований список. Коди маркірованих і нумерованих списків виглядають однаково, за виключенням того, що контейнер <ОL></ОL> для нумерованого списку замінюється на <UL></UL> для маркірованого.
Розглянемо приклад:
Лістинг 1.15
<HTML>
<HEAD>
<ТІTLE>Приклад вкладених списків</ТІТLЕ>
</HEAD>
<BODY>
<Н2> Вкладені списки </Н2>
<HR>
<НЗ> Типи зображень у Web </H3>
<ОL>
<LI> Вбудовані
<LI> Плаваючі:
<UL>
<LI> вздовж лівого поля;
<LI> вздовж правого поля;
</UL>
<LI> Зображення-гіперпосилання
<LI> Зображення-мініатюри
<LI> Фонові зображення
</ОL>
</BODY>
<HTML>
Цим кодом задано вкладені списки. Відображення сторінки з таким кодом у броузері подано на рис. 1.16.
Рис. 1.16.
За допомогою дескрипторів <DL></DL> задається ще один тип списку — список визначень. Цей список складається із термінів і відповідних їм визначень. Терміни помічаються дескриптором <DT>, а відповідні їм визначення — дескриптором <DD>. Визначення відображуються у вікні броузера з відступом від лівого краю.
Часто виникає необхідність подати дані на Web-сторінці у вигляді таблиці. У HTML-таблицях можуть міститися елементи будь-якого типу. З їх допомогою можна ефективніше розмістити на сторінці текст і графіку, а також створити чітку структуру Web-сторінки.
Перед створенням таблиці необхідно визначити максимальну кількість рядків та стовпців. Код таблиці міститься у контейнері <TABLE></TABLE>. Кожна пара дескрипторів <TR></TR> визначає один рядок таблиці. Дані окремих комірок поміщуються у контейнер <TD></TD> (закриваючий дескриптор </TD> є необов'язковим).
Однією з характеристик таблиці є рамка. Для побудови таблиці з рамкою треба задати товщину рамки за допомогою атрибута BORDER дескриптора TABLE. Формат атрибута: BОRDER=n, де п — товщина рамки у пікселях.
Наприклад:
Лістинг 1.16
<TABLE BОRDER=1>
<ТН><ТD>Комп'ютери<ТD>Принтери</ТR>
<ТН><ТD>Клавіатури<ТD>Миші</ТR>
</TABLE>
У цьому прикладі описується найпростіша таблиця з рамкою, яка складається з двох рядків і двох стовпців:
Рис. 1.17
Для визначення ширини таблиці в дескрипторі <TABLE> використовується атрибут WIDTH, в якому вказується значення ширини таблиці або у пікселах, або у відсотках від ширини вікна броузера. Крім дескриптора даних комірки — <TD> можна використовувати дескриптор даних заголовка — <ТН>. Текст, поміщений в контейнер <ТН></ТН>, буде відображатися напівжирним шрифтом.
Із допомогою контейнера <CAPTIОN> можна задати підписи до таблиці.
При побудові таблиць велике значення мають атрибути CОLSPAN та RОWSPAN дескриптора <TD>. З їх допомогою можна задавати комірки, які займатимуть декілька стовпців або рядків. Для цього в атрибуті CОLSPAN необхідно вказати значення тієї кількості стовпців, а в атрибуті RОWSPAN значення тієї кількості рядків, які повинна займати комірка, наприклад:
Лістинг 1.17
<HTML>
<HEAD>
<TITLE> Задания кольору таблиць і рамок </TITLE>
</HEAD>
<BODY>
<Н4 ALIGN=CENTER>fl/ia задания кольору таблиці і рамок
дескриптор <TABLE> використовується разом з
атрибутами BGCOLOR, BORDERCOLOR, BORDERLIGHT. Для задания
кольорів окремих комірок ці атрибути можуть
використовуватися в дескрипторах <TD>,<TH>.
</H4> <!-з допомогою спеціальних символів < та &qt задаємо відповідно відкриваючу "<" та закриваючу ">" дескрипторні дужки -->
<!--задаємо таблицю шириною 700 пікселів з рамкою голубого кольору -->
<TABLE WIDTH=700 BОRDER=3 BОRDERCОLОR=blue BORDERLIGHT=lightblue>
<CAPTI0N ALIGN=T0P> Атрибути задания кольорів у таблиці
</CAPTI0N>
<TR>
<TD C0LSPAN=2>Aтрибут BGCOLOR
<TD C0LSPAN=2>Aтрибут BORDERCOLOR
</TR>
<TR>
<TD BGC0L0R="aqua"><FONT SIZE="-1">
<TD BGC0L0R="aqua">
<TD BGC0L0R="#00FF40"><FONT SIZE="-1">
<TD BGC0L0R="#00FF40">
<FD BORDERCOLOR="green"><FONT SIZE="-1">
<';TD BORDERCOLOR="green" >
<TD BORDERC0L0R="#F89887">
<FONT SIZE="-1">
<TD B0RDERC0L0R="#F89887">
</TR></TABLE>
</BOOY>
</HTML>
Відображення сторінки з таким кодом подано на рис. 1.18.
Рис. 1.18
Для вирівнювання даних у комірках таблиці використовуються атрибут ALIGN (для вирівнювання по горизонталі) та VALIGN (для вирівнювання п вертикалі). Ці атрибути можуть застосовуватись разом із дескрипторами <ТR> <ТН> або <TD>.
Використання атрибутів вирівнювання в таблицях розглянемо на прикладі:
Лістинг 1.18
<HTML>
<HEAD>
<ТІТІLЕ>Вирівнювання в таблицях</ТПLЕ>
</HEAD>
<BODY>
<ТАВLЕ CELLSPACING =1 cellpadding=3 border=1>
<!-за допомогою атрибута CELLSPACING задається
відстань між комірками таблиці, за допомогою атрибута
CELLPADDING можна задати більший, ніж це вимагає
поміщений у неї текст розмір комірки -->
<tr>
<td></td>
<td>ALIGN=LEFT
<td>ALIGN=CENTER
<td>ALIGN=RIGHT
</tr>
<tr>
<td>VALIGN=TOP
<td valign="top" align="left"><img src=kolo.gif>
<td valign="top" align="center"><img src=kolo.gif>
<td valign="top" align="right"><img src=kolo.gif>
</tr>
<tr>
<td>VALIGN=MIDDLE
<td valign="middle" align="left"ximg src=kolo.gif>
<td valign="middle" align="center"><img src=kolo.gif>
<td valign="middle" align="right"><img src=kolo.gif>
</tr>
<tr>
<td>VALIGN=BOTTOM
<td valign="bottom" align="left"><img src=kolo.gif>
<td valign="bottom" align="center"ximg src=kolo.gif>
<td valign="bottom" align="right"ximg src=kolo.gif>
</tr>
</table>
</body>
</html>
Відображення сторінки з таким кодом подано на рис. 1.19.
Рис.1.19
Web-сайт навчального закладу: версія з використанням таблиць
Як уже зазначалось, таблиці часто застосовують для форматування чіткої структури Web-сторінок. Оскільки створені і поміщені на сервер сторінки переглядаються користувачами на екранах із різною роздільною здатністю, то часто сторінка, яка розроблялась і тестувалась на екрані з однією роздільною здатністю (наприклад, 800x600) виглядає зовсім не так, як «задумано» при її перегляді з іншою роздільною здатністю (наприклад, 1024x768). Тому виникає необхідність задати чіткий горизонтальний розмір сторінки. Це досягається завдяки поміщенню всіх елементів сторінки у таблицю фіксованої ширини. Оскільки екрани з роздільною здатністю 640x480 все рідше трапляються серед користувачів Internet, доцільно сторінку форматувати так, щоб вона коректно відображувалась на екранах роздільною здатністю 800x600. Для цього можна використати таблицю шириною ~ 760 пікселів.
Форматування сторінки зі складним розміщенням об'єктів можна досягти шляхом їх поміщення в окремі комірки таблиці.
Описані прийоми використані при створені наступної версії нашої головної сторінки (рис. 1.20).
Рис. 1.20
На рис. 1.21 подано відображення цієї ж сторінки, в якій зроблені видимі межі таблиць.
Рис. 1.21
Код сторінки:
Лістинг 1.19
<HTML>
<HEAD>
<TITLE>Fizmat home</TITLE>
<META content="text/html; charset=windows-1251" http-equiv=Content-Type>
</HEAD>
<BODY BGCOLOR=#ffffff>
<TABLE ALIGn="center" BGCOLOR="#ffffff" WIDTH="760" BORDER=0>
<! --задаємо зовнішню "обмежуючу" таблицю -->
<TR>
<TD>
<!--далі задаємо таблицю для макетування гіперпосилань
і графічних зображень -->
<TABLE ALIGN = "center" WIDTH="665" B0RDER=0>
</TR>
<TR>
<TD CОLSPAN=3>
<IMG SRC="logo.gif" > <!--фотографія корпусу-->
</TR>
<TR>
<TD><A HREF="about.html">npo фізмат</А>
<TD align="center" RОWSPAN="4"><IMG SRC="main_foto.gif">
<TD><A HREF="news.html">новини</A>
<TR>
<TD><A HREF="specialnosti.html">Cпеціальності</A>
<TDXA HREF="indz.html">IHДЗ</A>
<AR> <TR>
<TD><A HREF="kafedra.html">Kaфeдpи</A>
<TD><A HREF="forum. html ">Форум</А> </TR>
<TR>
<TD><A HREF="activity. html ">Діяльність</А>
<TD><A HREF="services.html">Cepвіси</A> </TR>
<TR>
<TDXA HREF="sport.html">Cпорт</A>
<TD></TD>
<TD><A HREF="programs.html">пpoгpaми</A>
</TR> <TR>
<TD></TD>
<TD align="center"><A ННЕР="р1апз.Іі1:[гі1">Навчальні плани</А>
<A HREF="resources.И1ш1">Навчальні ресурси</А>
<TD></TD>
</TR>
</table>
</tr>
</table>
</BODY>
</HTML>
Відмітимо, що для побудови наведеної сторінки було б достатньо лише однієї таблиці, проте для загальності використано дві — зовнішню «обмежуючу таблицю» і таблицю, безпосередньо необхідну для форматування взаємного розміщення гіперпосилань і графічних зображень.
Додамо рамку та розмістимо гіперпосилання так, як це подано на рис. 1.22. Рамку можна додавати, вказавши у таблиці атрибут border=1. Проте лінія, якою відображається стандартна рамка таблиці, є занадто товстою. Для задания тоншої рамки використовується додаткова таблиця з ненульовим кольором фону— який і буде кольором майбутньої рамки. Для визначення товщини рамки, що створюється, використати атрибут cellpading=1 (лістинг 1.20).
Рис. 1.22
<!--таблиця з ненульовим кольором фону для створення рамки-->
<table align = "center" width="665" bgcolor="#101010"
cellPadding=1 cellSpacing=0 border=0>
<tr>
<td>
<!--таблиця з вмістом сторінки на білому фоні-->
<table width="100%" bgcolor="white" cellPadding=4
cellSpacing=0 border=0>
Зміщення гіперпосилань досягнуто завдяки вміщенню прозорих зображень із змінною шириною:
<IMG border=0 height="15" src="spacer.gif" WIОTH="8">
Цей метод дозволяє точніше здійснювати позиціонування в порівнянні з методом поміщення нероздільних пропусків .
Повний код головної сторінки Web-сайта подано в лістингу 1.21.
Лістинг 1.21
<HTML>
<HEAD>
<TITLE>Fizmat home</TITLE>
<META content="text/html; charset=windows-1251" http-equiv=Content-Type>
</HEAD>
<BODY BGCОLОR=#ffffff>
<TABLE ALIGN="center" BGC0L0R="#ffffff" WIDTH="760" BОRDER=0>
<TR>
<TD>
<TABLE ALIGN = "CENTER" WIDTH="665" BGCОLОR="#101010"
CELLPADDING=1 CELLSPACINGS BОRDER=0>
<!--таблиця з ненульовим кольором фону для створення рамки-->
<TR>
<TD>
<TABLE WIDTH="100%" BGCОLОR="WHITE" CELLPADDING=4
CELLSPACING=0 BORDER=0>
<TR>
<TD CОLSPAN=3>
<IMG SRC="logo.gif" >
<!--фотографія корпусу-->
</TR>
<TR>
<TD> <A HREF="about.html">Пpo фізмат</А>
<TD ALIGN="center" RОWSPAN="4">
<IMG SRC="main_foto.gif"></TD>
<TD>
<!-- поміщаємо прозоре зображення певної ширини
для зміщення наступного гіперпосилання-->
<IMG border=0 height="15" src="spacer.gif"
WIDTH="38">
<A HREF="news.html">Hoвини</A>
<TR>
<TD>
<IMG border=0 height="15" src="spacer.gif"
WIDTH="8">
<A HREF=''specialnosti.htmr'>Cпеціальності</A>
</TD>
<TD>
<IMG border=0 height="15" src="spacer.gif"
WIDTH="30">
<A HREF="indz.html">ІНДЗ</A>
</TD>
</TR>
<TR>
<TD>
<IMG B0RDER=0 HEIGHT="15" SRC="spacer.gif"
WIDTH="16">
<A HREF=''kafedra. html">Кафедри</А>
</TD>
<TD>
<IMG B0RDER=0 HEIGHT="15" SRC="SPACER.GIF"
WIDTH="22">
<A HREF="F0RUM.HTML">ФОPУM</A>
</TD>
</TR>
<TR>
<TD>
<IMG B0RDER=0 HEIGHT="15" SRC="SPACER.GIF"
WIDTH="28">
<A HREF="ACTIVITY. НТМL">ДІЯЛЬНІСТЬ</А>
</TD>
<TD>
<IMG BORDER=0 HEIGHT="15" SRC="SPACER.GIF"
WIDTH="10">
<A HREF="SERVICES.HTML">CEPBICИ</A>
</TD>
</TR>
<TR>
<TD>
<IMG BORDER=0 HEIGHT="15" SRC="SPACER.GIF"
WIDTH="48">
<A HREF="SPORT.HTML">CПОPT</A>
</TD>
<TD> </TD>
<TD> <A HREF="programs. html">Програми </А>
<TR>
<TD> </TD>
<TD align="center">
<A НРЕF="р1аns.html">Навчальні плани </А>
<A HREF="resources.html">Навчальні ресурси </А>
<TD></TD>
</TR>
</TABLE>
</TR>
</TABLE>
</TR>
</TABLE>
</BODY>
</HTML>
Контрольні запитання
1. Які дескриптори використовуються для створення списків у HTML?
2. Для чого призначений атрибут TYPE дескрипторів <OL> та <UL>?
3. Як помістити на Web-сторінку таблицю?
4. Як змінити товщину рамки таблиці?
5. Для чого використовуються атрибути <C0LSPAN> та <ROWSPAN>?
6. Як вирівняти дані у комірках таблиці?
7. Як змінити колір фону комірок таблиці?
Практичні завдання
1. Створити маркірований список студентів групи. Використати різні форми зображення маркерів.
2. Створити нумерований список планет сонячної системи. Використати різні форми нумерації елементів списку.
3. Створити список означень таких чотирикутників: квадрат, прямокутник, трапеція, ромб.
4. Створити вкладений список супутників деяких планет Сонячної системи.
5. Використати для одного із щойно створених списків графічні маркери.
6. Створити таблицю, що має таку структуру:
Прізвище
|
Оцінки за рік |
||||
Алгебра |
Геометрія |
Фізика |
Інформатика |
Хімія |
|
Іваненко |
5 |
5 |
4 |
4 |
3 |
Петренко |
4 |
5 |
5 |
5 |
4 |
8. Задайте для рядка заголовків таблиці колір фону.
9. Змініть колір фону таблиці.
10. Задайте для таблиці фонове зображення.