Одним із способів структурування інформації на 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 пікселів з рамкою голубого кольору -->
<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 задається
відстань між комірками таблиці, за допомогою атрибута
