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

ТЕМА: Використання списків.

Мета: Вивчити на практиці специфіку використання тегів списків, навчитися застосовувати нумеровані і ненумеровані списки в документах HTML. Закріпити отримані раніше знання по створенню найпростіших документів.

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

Специфікація HTML передбачає три основних типи списків.

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

2. Маркеровані списки

3. Списки визначень

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

Нумерований список часто називається впорядкованим (Ordered List) і являє собою певну послідовність елементів. Для створення нумерованого списку використовується тег-контейнер <OL>, усередині якого розташовуються пункти переліку інформаційних даних, за вказівку яких відповідає спеціальний тег <LI> (List Item — пункт списку або елемент списку). Після кожного пункту списку здійснюється перенос рядка, причому без вказівки яких-небудь структурних тегів. Закриваючий тег </LI> відсутній, хоча й існує в специфікації HTML.

Іноді може виникнути ситуація, коли список містить певний розрив у послідовності подання пунктів (наприклад, після пункту 3 повинен іти пункт 5). Для цієї мети використовується спеціальний параметр тегу <LI> - VALUE.

Тег складання нумерованих списків <OL> може включати параметри TYPE, START і COMPACT.

Параметр TYPE використовується для вказівки типу нумерованого списку. Крім звичайних рабських цифр можуть застосовуватися великі та маленькі римські цифри, а також рядкові та прописні латинські букви.

Таблиця. Значення параметру TYPE тегу <OL>

Значення	Опис
TYPE=”1”	Нумерація арабськими цифрами
TYPE=”I”	Нумерація великими римськими цифрами
TYPE=”i”	Нумерація малими римськими цифрами
TYPE=”A”	Нумерація прописними латинськими буквами
TYPE=”a”	Нумерація рядковими латинськими буквами

Типом нумерації, використовуваним за замовчуванням, є TYPE="1", тому при створенні нумерованих списків такого типу необов'язково задавати значення параметра TYPE (сам параметр також можна опустити).

Параметр START дозволяє починати нумерований список не з першої позиції. При цьому значенням цього параметра може бути тільки числовий еквівалент конкретного типу списку. Наприклад, щоб почати список, створений на основі нумерації великими латинськими буквами, з букви F, треба вказати наступну HTML-конструкцію:

<OL TYPE="A" START="6">

У цьому випадку значенням параметра START буде цифра 6, тому що буква F — шоста по рахунку буква в латинському алфавіті. Параметр COMPACT був передбачений для списків, відображення яких повинне вироблятися у компактному вигляді, наприклад, з використанням меншого розміру шрифту, меншого відступу від краю сторінки або меншої відстані між пунктами списку. Однак на практиці цей параметр майже не використовується, оскільки найпоширеніші броузери ніяк не реагують, на його використання.

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

Однак броузери по-різному реагують на таке змішання стилів відображення списків.

Приклад:

<OL TYPE="1">

<LI>Drop Shadow

<LI TYPE="A">Bevel and Emboss

<LI TYPE="i">Color Overlay

<LI>Outer Glow

<LI TYPE="I">Stroke

</OL>

Маркеровані списки

Маркерований список являє собою ненумерований або неупорядкований (Unordered List) перелік елементів, для заголовка яких використовуються спеціальні маркери. Як маркери виступають спеціальні символи, називані буллетами (bullets).

Для створення маркерованих списків застосовується тег-контейнер <UL>, всередині якого розташовуються елементи самого списку (як і у випадку з нумерованими списками, використовується тег <LI>, не потребуючий закриваючого тегу).

Тег маркерованого списку <UL> може містити два основних параметри: TYPE й COMPACT. Параметр ТУРE відповідає за форму відображеного броузером маркера. Всього існує три можливих значення даного параметра:

TYPE=disc - значення, яке використовується за замовчуванням (вказівка необов'язково), що відображає маркер у вигляді зафарбованого кола;

TYPE=circle - маркер відображається у вигляді незафарбованого кола (кільця);

TYPE=square - відображення маркера у вигляді зафарбованого квадрата.

Слід зазначити, що розмір того або іншого маркера може змінюватися залежно від розміру використаного в електронному документі шрифту. Крім цього, як і у випадку з нумерованими списками, при змішуванні правил маркування різні броузери можуть відображати маркери по-різному.

Параметр тега <UL> COMPACT має ті ж характеристики, що й для нумерованих списків.

Графічні маркери

Відмінною рисою маркерованих списків є можливість використання замість стандартних HTML-маркерів свої власні графічні зображення. Такий підхід дозволяє створювати більш привабливі списки в електронних документах.

Для вказівки броузеру того, що як маркер буде використане графічне зображення, всередині тегу-контейнера <UL> замість показника елемента <LI> розміщується звичайна HTML-конструкція опису графічних об'єктів.

Броузер зрозуміє таку конструкцію як команду задати відступ від лівого краю документа до початку елементів маркерованого списку (де повторюваним маркером є файл малюнка "marker.gif").

У цьому випадку після кожного пункту маркерованого списку стоїть тег переносу рядка <BR>. Якщо його не вказувати, всі елементи списку будуть вибудувані в один ряд. Це пов'язане з тим, що створення графічних маркерів не відноситься до якихось особливих HTML-конструкцій, а реалізовано за рахунок відокремлення малюнків-маркерів тегом <UL>. Оскільки тег елемента списку <LI> відсутній, броузер не робить переносу рядка.

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

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

Графічні маркери також можуть застосовуватися всередині вкладених списків нарівні зі списками інших типів.

При складанні складних вкладених списків особливу увагу варто приділяти коректній вказівці закриваючих тегів </UL> та </OL>. Для того щоб не заплутатися в розгалуженій структурі HTML-коду вкладених списків, кожен наступний рівень вкладеності найкраще відокремлювати від попереднього невеликим відступом від лівого краю документа.

Списки визначень

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

На відміну від нумерованих і маркерованих списків, які можуть містити крім самих елементів ще й інші списки, список визначень складається всього із двох частин: самого визначення (терміна) і його змістовної частини (опису).

Структура списку визначень описується тегом-контейнером <DL> (Definition List), всередині якого вказується тег <DT> (Definition Term), що виділяє заголовок визначення, і тег <DD> (Definition Description), що описує змістовну частину визначення. Для двох останніх тегів наявність закриваючих тегів необов'язково.

Заголовок визначення та змістовна частина списку визначень дозволяють застосовувати форматування тексту, а також деякі теги структурного форматування. Кожне визначення в коді розділено тегом переносу рядка <BR>. Якщо цього не зробити, більшість броузерів створить між останнім і передостаннім рядком змістовної частини визначення проміжок, більший за розміром, чим між іншими рядками опису.

Крім цього, у структуру списків визначень можна включати інші типи списків -нумеровані та маркеровані (у т.ч. з графічними маркерами).

Тег структури списку визначень <DL> може містити параметр COMPACT.

Хід роботи

1. Продовжити створення особистого сайту. Включити в нього сторінку, що містить нумеровані і ненумеровані списки (наприклад, перелік улюблених фільмів, книжок, музичних гуртів тощо).

2. Зберегти документ під назвою spisok.html.

Вимоги

1. HTML-документ повинен містити раніше вивчені теги форматування тексту.

2. Використовувати теги <UL> i <OL> для створення відповідних списків.

3. Документ повинний містити маркірований список. Визначте вид маркера.

4. Документ повинний містити список з нумерацією. Визначте тип нумерації (числова, латинські букви, римські цифри).

Звіт

Повинен містити вихідний текст HTML-коду.

Підготовка до лабораторної роботи 3:

Підготуйте три графічних файли (у форматі .gif, .jpeg, .png): особисту фотографію, ілюстрацію вашого хоббі та малюнок до документа spisok.html.

Контрольні питання

1. Навіщо використовуються списки?

2. Які види списків ви знаєте?

3. Перелічіть теги для нумерованих списків.

4. Перелічіть теги для ненумерованих списків.

5. Перелічіть атрибути тегів <UL>,<OL>.

6. Що таке маркери, які їхні види ви знаєте?

7. Які існують варіанти нумерації в нумерованих списках?