Добавил:
Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
Опорний кнспект.doc
Скачиваний:
1
Добавлен:
30.05.2020
Размер:
9.78 Mб
Скачать

5. Списки

Для подання тексту в структурованому вигляді, коли кожен аб­зац виділено за допомогою позначки або номера, призначені спи­ски. У HTML-документах використовують три види списків:

  • невпорядкований (маркований);

  • упорядкований (нумерований);

  • список визначень.

HTML| дозволяє визначати зовнішній вигляд цілих абзаців тексту. Абзаци можна організовувати в списки, виводити їх на екран у вигляді, що відформатував, або збільшувати ліве поле.

 

  • Нумеровані списки

 

Пронумерований список починається з дескриптора <OL|> (означає «ordered| list|») і закінчується дескриптором </OL>. Ця пара дескрипторів автоматично форматує список і стежить за інтервалами між списком і рештою вмісту HTML-страницы|.

type| =  інформація про стиль — даний атрибут встановлює стиль елементу списку. Доступні в даний час значення призначені для візуальних агентів користувачів. Можливі значення описані у таблиці (включаючи інформацію про регістр).

Type|

Стиль нумерації

1

арабські цифри

1, 2, 3, ...

а

букви нижнього регістра

а, b, з ...

A

букви верхнього регістра

A, B, C ...

i

римські цифри в нижньому регістрі

i, ii|, iii| ...

I

римські цифри у верхньому регістрі

I, II, III ...

 

start| = число — Цей атрибут задає початковий номер першого елементу у впорядкованому списку. За умовчанням початковий номер - "1"|. Пам'ятаєте, що, хоча значенням цього атрибуту є ціле число, відповідна мітка може бути нецифрова. Якщо як стиль вибрані латинські букви верхнього регістра (A, B, C ...), start=3| означає "C"|. Якщо як стиль вибрані римські цифри нижнього регістра, start=3| означає "iii|" і так далі

Compact| — Якщо цей логічний атрибут встановлений, він повідомляє візуальних агентів користувачів про те, що генерувати список потрібно компактніше. Інтерпретація цього атрибуту залежить від агента користувача.

Елементи списків визначаються за допомогою дескриптора <LI|>. Представлення елементу на готовій сторінці повністю залежить від настройки браузера| і атрибутів списку. У неврегульованих і нумерованих списках як елемент можуть виступати цілі абзаци тексту. Елементи в каталогах і меню, навпаки, зазвичай короткі і «укладаються» браузерами| в рядок без перенесення.

Кінцевий дескриптор </LI> можна не вставляти в документ, оскільки наступний <LI|> розглядається браузером| як початок наступного елементу списку і відповідно кінець поточного. Дескриптор <LI|> повинен знаходитися між дескрипторами <UL|> — </UL> або <OL|> — </OL>.

 

Приклад 2. Нумерований список, в якому для позначення елементів використовують малі римські цифри

<HTML>

<TITLE>Райдуга</TITLE> <BODY>

<BASEFONT SIZE=6> <OL TYPE=i>

<LI><FONT COLOR=red>Червоний</FONT></LI>

<LI><FONT COLOR=orange>Оранжевий</FONT></LI>

<LI><FONT COLOR=yellow>Жoвтий</FONT></LI>

<LI><FONT COLOR=green>Зелений</FONT></LI>

<LI><FONT COLOR=lightblue>Блакитний</FONT></LI>

<LI><FONT COLOR=blue>Синій</FONT></LI>

<LI><FONT COLOR=darkmagenta>Фіолетовий</FONT></LI> </OL>

</BODY> </HTML>

Ha мал. 3 показаний вигляд цього документа у вікні браузера Internet Explorer.

мал. 3 Нумерований список

Зверніть увагу на те, що за допомогою тегу < B A S E F O N T > для всього документа призначено розмір шрифту 6, а за допомогою тегів <FONT> визначено колір шрифту для кожного елемента списку.

  • Ненумеровані списки:

<UL|> ... </UL>

Текст, розташований між мітками <UL|> і </UL>, сприймається як ненумерований список. Кожен новий елемент списку слід починати з мітки <LI|>. У мітки <LI|> немає парної закриваючої мітки.

type| =  інформація про стиль — Цей атрибут встановлює стиль елементу списку. Доступні в даний час значення призначені для візуальних агентів користувачів. Можливі значення описані у таблиці (включаючи інформацію про регістр).

Графічні агенти користувач можуть генерувати їх як:

  • для значення "disc|"

○ для значення "circle|"

■ для значення "square|"

value| = число — Цей атрибут встановлює номер поточного елементу списку. Пам'ятаєте, що, хоча значенням атрибуту є ціле число, відповідна мітка може бути нечислова.

Compact| — Якщо цей логічний атрибут встановлений, він повідомляє візуальних агентів користувачів про те, що генерувати список потрібно компактніше. Інтерпретація цього атрибуту залежить від агента користувача.

Приклад 3 . Маркований список, в якому для позначення елементів використовують коло

<HTML>

<TITLE>Райдуга</TITLE> <BODY>

<BASEFONT SIZE=6> <UL ТУРЕ=сігсlе>

<LI><FONT COLOR=red>Червоний</FONT></LI>

<LI><FONT COLOR=orange>Оранжевий</FONT></LI>

<LI><FONT COLOR=yellow>Жовтий</FONT></LI> <LI><FONT COLOR=green>Зелений</FONT></LI> <LI><FONT COLOR=lightblue>Блакитний</FONT></LI>

<LI><FONT COLOR=blue>Синій</FONT></LI>

<LI><FONT COLOR=darkmagenta>Фioлeтoвий</FONT></LI> </UL>

</BODY>

</HTML>

Ha мал. 4 показаний вигляд цього документа у вікні браузера Internet Explorer.

Мал. 4. Маркований список

  • Списки визначень: <DL|> ... </DL>

Список визначень (definition list) порівняно з маркованим або нумерованим має дещо складнішу будову. Кожен елемент такого списку складається з двох частин: терміна та його визначення. У такий спосіб можуть бути оформлені словники та термінологічні довідники. Однак цей тип списку використовують рідко, і тому описувати його докладніше не будемо.

Список визначень декілька відрізняється від інших видів списків. Замість міток <LI|> в списках визначень використовуються мітки <DT|> (від англійського definition| term| — визначуваний термін) і <DD|> (від англійського definition| definition| — визначення визначення). Розберемо це на прикладі. Нехай, у нас є наступний фрагмент HTML-текста|:

<DL|> 

<DT>HTML| 

<DD>Термин| HTML| (HyperText| Markup| Language|) означає 'мову 

маркіровки гіпертекстів'. Першу версію HTML| розробив співробітник 

Європейській лабораторії фізики елементарних частинок Тім Бернерс-лі. 

<DT>HTML-документ| 

<DD>Текстовий| файл з розширенням *.htm (Unix-системи| можуть 

містити файли з розширенням *.html). 

</DL>

 

Цей фрагмент буде виведений на екран таким чином:

 

Точно так, як і мітки <LI|>, мітки <DT|> і <DD|> не мають парних закриваючих міток. Якщо визначувані терміни достатньо короткі, можна використовувати модифіковану відкриваючу мітку <DL| COMPACT|>. Наприклад, ось такий фрагмент HTML-текста|:

 

<DL| COMPACT|> 

<DT>А| 

<DD>Первая| буква алфавіту 

<DT>Б| 

<DD>Вторая| буква алфавіту 

<DT>В| 

<DD>Третья| буква алфавіту 

</DL>

 

  • Вкладені списки

Елемент будь-якого списку може містити в собі цілий список будь-якого вигляду. Число рівнів вкладеності в принципі не обмежене, проте зловживати вкладеними списками все ж таки не слідує. Вкладені списки дуже зручні при підготовці різного роду планів і змісту. Наші знання про списки можна коротко звести в приклад:

 <html|>

<head|> 

<title>Приклад 6</title> 

</head> 

<body|> 

<H1>HTML| підтримує декілька видів списків </H1> 

<DL|>

<DT>Ненумеровані| списки 

<DD>Елементи ненумерованого списку виділяються спеціальним 

символом і відступом зліва: 

<UL|> 

<LI>Елемент 1 

<LI>Елемент| 2 

<LI>Елемент| 3 

</UL> 

<DT>Нумеровані| списки 

<DD>Елементи| нумерованого списку виділяються відступом зліва, а 

також нумерацією: 

<OL|> 

<LI>Елемент| 1 

<LI>Елемент| 2 

<LI>Елемент| 3 

</OL> 

<DT>Списки| визначень 

<DD>Цей вид списків трохи складніший, ніж два попередніх, але і 

виглядає ефектніше. 

<P>Пам’ятайте|, що списки можна вбудовувати один в іншій, але не 

слід закладати дуже багато рівнів вкладеності. </P> 

<P>Зверніть увага, що усередині елементу списку може знаходитися 

декілька абзаців. Всі абзаци при цьому матимуть однакове 

ліве поле. </P> 

</DL> 

</body> 

</html>

Підсумок заняття: виконати приведені у лекції приклади на ПК, результати – роздрукувати.

Підготуватися до лабораторної роботи, вивчити основні теги форматування тексту, гіперпосилань та списків.