2. Створення списків

Іноді при створенні веб-сторінок буває корисно (а часом навіть необхідно) упорядкувати представлену на них інформацію. У традиційній мові HTML для цього застосовують списки й таблиці.

У якості першого прикладу розглянемо веб-сторінку гіпотетичної фірми “Ледар”. Спочатку прагнемо перелічити надавані послуги, а потім указати послідовність дій, необхідних для їхнього замовлення.

Маркіровані списки. Перерахування послуг добре виглядає у вигляді маркірованого списку. Для його організації застосовується тег <UL>. Усе, що перебуває між ним і його закриваючим тегом (</UL>), уважається маркірованим списком. Кожний елемент списку повинен бути при цьому позначений тегом <LI>. Цей тег можна вживати без закриваючого (хоча можна й з ним). Тобто, можна написати:

<LI> Цей тег можна вживати без закриваючого (хоча можна й з ним)

або

<LI> Цей тег можна вживати без закриваючого (хоча можна й з ним)</LI>

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

Нумеровані списки. Що стосується перерахування порядку дій для замовлення, його можна організувати по різному у вигляді нумерованого списку. Для цього служить тег <OL>, а елементи списку також позначаються тегом <LI>. І нумеровані, і маркіровані списки в більшості браузерів виділяються невеликим відступом. Отже, як може виглядати ця сторінка:

<html>

<head><title> фірма "ЛЕДАР"</title></head>

<body bgcolor="#D2FFFF" text="#003737">

<H1><p ALIGN="center">фірма &#171ЛЕДАР&#187</p></H1>

<font size="+l"><b>Haшa фірма надає наступні послуги:</b></font>

<ul>

<li>Встановлення електричних лампочок

<li>Підмітання підлоги

<li>Винесення сміття з квартири

<li>Миття посуду

<li>Дефрагментацяя жорстких дисків

</ul>

<font size="+l"><b>Щоб скористатися нашими послугами,потрібно:</b></font>

<ol>

<li>Зареєструватися

<li>Заповнити форму замовлення

<li>Одержавши лист із паролем, послати порожню відповідь

<li>Заповнити форму-підтвердження замовлення

<li>Приготувати гроші для оплати послуг

</ol>

</body>

</html>

Вкладені списки. Завдяки тому, що списки відображаються з відступом, легко можна організовувати вкладені списки за допомогою тих же тегів. Для цього треба просто почати новий список усередині вже початого. Схема розташування тегів списку при цьому вийде приблизно така:

<UL>

<UL>

<UL>

</UL>

</UL>

</UL>

Відступи тут позначені тільки для наочності - щоб не переплутати, який закриваючий тег до якого відкриваючого тегу ставиться. При вкладенні декількох маркірованих списків хочеться кожний з них позначити своїм типом маркера. Деякі браузери так і роблять за замовчуванням. Наприклад, Internet Explorer елементи першого списку із серії вкладених позначає зафарбованим кружком, елементи другого - незафарбованим кружком, а елементи всіх наступних - квадратиком. Однак, по-перше, так роблять не всі браузери, а по-друге, буває необхідно змінити порядок маркерів. Для явного визначення типу маркера в тегу <UL> слід установити атрибут TYPE=. У нього можуть бути три значення: "disc", "square" і "circle", що означає, відповідно, зафарбований кружок, квадратик і незафарбований кружок.

У тегу нумерованого списку <OL> можна встановити атрибут TYPE= для визначення типу нумерації. Якщо не зазначене нічого або встановлене значення TYPE="1", то нумерація відбувається звичайними цифрами. Якщо встановити TYPE="I" або "i", то вийде нумерація римськими цифрами ( відповідно, з використанням прописних або малих літер). І, нарешті, для літерних позначень елементів списку встановлюють атрибут TYPE="A" або "а". Крім того, іноді може знадобитися почати нумерацію не з одиниці, а з якого-небудь іншого числа. Для цього існує атрибут START=. Наприклад, запис <OL START="43"> викличе нумерацію елементів списку, починаючи із числа 43. Далі підуть елементи з номерами 44, 45 і т.д.

<HTML>

<head>

<title>Фірма "ЛЕДАР"</title>

</head>

<body BGCOLOR="#D2FFFF" TEXT="#003737">

<H1><p ALING="center">Фірма &#171ЛEHTЯЙ&#187</p></H1>

<FONT SIZE="+l">Haшa фірма надає наступні послуги:</FONТ>

<UL TYPE="disc">

<LI>Побутові послуги

<UL TYPE="square">

<LI>Встановлення електричних лампочок

<LI> Послуги з наведення чистоти

<UL TYPE="circle">

<LI>Підмітання підлоги

<LI>Винесення сміття із квартири

<LI>Миття посуду

</UL>

</UL>

<LI>Готування їжі

<LI>Комп'ютерні послуги

<UL TYPE="square">

<LI>Дефрагментація жорстких дисків

<LI>Встановлення Windows

</UL>

</UL>

<FONT SIZE="+1"> Для того, щоб скористатися нашими послугами, випливає:</FONT>

<OL>

<LI>Зареєструватися

<LI>Заповнити форму замовлення

<LI>Підтвepдити замовлення:

<OL TYPE="I">

<LI>Одержавши лист із паролем підтвердження, послати порожню відповідь,

нажавши "Reply"

<LI>Заповнити форму-підтвердження замовлення

</OL>

<LI>Приготувати гроші для оплати послуг

</OL>

</body>

</html>

При бажанні можна змінити вид маркера навіть в окремого елементі списку. Для цього слід установити атрибут TYPE= у тегу <LI>. Однак це не буде виглядати дуже добре, за винятком спеціальних випадків.

Індивідуальне завдання:

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

Питання для захисту роботи № 15

1. Які списки можна створювати на веб-сторінках?

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

3. В який спосіб задається тип маркеру в маркірованому списку?

4. Яким чином можна визначити базовий шрифт?

5. Які теги відповідають за розмір та тип шрифту?

6. Тег кольору шрифту.

Державна служба України з надзвичайних ситуацій

Академія пожежної безпеки ім.Героїв Чорнобиля