ЗАГОЛОВОК
1 Завдання списків на Web-сторінці засобами HTML
1.1 Нумеровані списки
1.2 Ненумеровані списки
1.3 Списки-визначення
2 Використання CSS для завдання параметрів списків
Приклад №1
Приклад №2
1. Завдання списків засобами HTML
В текстових документах використовуються списки (перерахування) елементів різних типів. HTML підтримує списки трьох видів:
- нумеровані списки;
- ненумеровані списки;
- списки-визначення.
1.1. Нумеровані списки
Для завдання нумерованих списків, тобто таких списків, перед перерахованими елементами яких зазначаються або цифри або букви, використовується у HTML тег-контейнер <OL> . . . </OL> (OL - Ordered List, впорядкований список). Він містить два параметри:
- TYPE - задає тип нумерації:
- 1 - арабськими цифрами (задається за замовчуванням);
- A - великими латинськими літерами;
- a - малими латинськими літерами;
- I - прописними римськими цифрами;
- i - малими римськими цифрами.
- START - задає початок нумерації списку (типово - з першого елемента).
Самі елементи списку вказуються з допомогою тега-контейнера <LI> . . . </LI> (LI - List Item, елемент списку). Закриваючий тег </LI> можна не виконувати.
пВ прикладі №1 показано завдання вкладених списків засобами HTML (у їх числі й нумеровані списки).
1.2. Ненумеровані списки
Для завдання ненумерованных списків, тобто таких списків, перед кожним перерахованими елементом яких указыватся один і той же знак, використовується у HTML тег-контейнер <UL> . . . </UL> (UL - Unordered List, невпорядкований список). Він містить параметр TYPE, значеннями якого є:
- DISC - диск (задається за замовчуванням);
- CIRCLE коло;
- SQUARE - квадрат.
Елементи ненумерованных списків так же, як і елементи нумерованих списків, задаються за допомогою тега-контейнера <LI> . . . </LI> (див. пункт 1.1).
пВ прикладі №1 показано завдання вкладених списків засобами HTML (у їх числі і ненумеровані списки).
1.3. Списки-визначення
Для завдання списків-визначень використовується у HTML тег-контейнер <DL> . . . </DL> (DL - Defination List, список визначень). Для завдання визначень (наприклад, фрукти) використовується тег-контейнер <DT> . . . </DT> (DT - Defination Type, тип визначення ). Елементи визначення перераховуються за допомогою тега-контейнера <DD> . . . </DD> (DD - Defination Data, що визначаються дані). Закриваючий тег </DD> можна не виконувати.
У прикладі №1 показано список HTML.
Приклад 1
<HTML>
<HEAD>
<TITLE> Використання списків на Web-сторінці </TITLE>
<LINK REL= STYLESHEET HREF="my.css">
<STYLE>
DT{color:#000070; font:italic 0.70cm}
DD{color:#006000; font:italic 0.60cm}
UL{color:#B00000; font:italic 0.55cm}
OL{color:#FF9090; font:italic 0.55cm}
</STYLE>
</HEAD>
<BODY>
<H1> Списки на Web-сторінці </H1>
<DL>
<DT> Списки, які підтримує HTML:
<DD> Ненумеровані з такими знаками перерахування:
<UL TYPE=square>
<LI> disc;
<LI> square;
<LI> circle.
</UL>
<DD> addbaseНумеровані з такими видами нумерації:
<OL TYPE=a>
<LI> арабськими цифрами;
<LI> великими латинськими літерами;
<LI> малими латинськими літерами;
<LI> прописними римськими цифрами;
<LI> малими римськими цифрами.
</OL>
<DD> Списки-визначення.
</DT>
</DL>
</BODY>
</HTML>
Колір, розмір і тип шрифтів в списках в прикладі №1 задані за допомогою внутрішнього завдання CSS для тегів DT, DL, UL і OL.
2 Використання CSS для завдання параметрів списків
Каскадні листи стилів CSS так само, як при форматуванні тіста, використовуються для розширення можливості HTML при завданні параметрів списків.
Для завдання параметрів списків в CSS є два властивості:
- list-style-type - ставить такі види знаків при перерахуванні елементів:
- disc - диск;
- circle коло;
- square - квадрат;
- decimal - арабські цифри;
- lower-roman - малі римські цифри ;
- upper-roman - великі римські цифри;
- lower-alpha - малі латинські літери;
- upper-alpha - прописні латинські літери.
- list-style-image - задає довільний (задається розробником) знак при перерахуванні елементів списку у вигляді посилання на файл, що містить зображення знака, у вигляді list-style-image: url(посилання).
Використання властивості list-style-image дозволяє реалізувати перерахування з використанням російських або українських букв, ставлячи їх у вигляді зображень.
У прикладі №2 показано використання властивостей list-style-type та list-style-image.
Приклад 2
<HTML>
<HEAD>
<TITLE> Створення списків з допомогою CSS </TITLE>
<LINK REL= STYLESHEET HREF="my.css">
<STYLE>
.image{color:#000070; font:italic 0.5cm; list-style-image: url(tre1.gif)}
</STYLE>
</HEAD>
<BODY>
<H1> Списки на Web-сторінці </H1>
<P> CSS дозволяє формувати на Web-сторінці списки:
<UL CLASS="image">
<LI> із завданням знаків перечесления з допомогою властивості list-style-type:
<UL style="color:#000070; font:italic 0.5cm; list-style-type:decimal;
list-style-image:none">
<LI> disc;
<LI> square;
<LI> circle;
<LI> decimal;
<LI> lower-roman;
<LI> upper-roman;
<LI> lower-alpha;
<LI> upper-alpha.
</UL>
<LI> із завданням знаків перерахування у вигляді довільних зображень (
) за допомогою властивості list-style-image.
</UL>
</BODY>
</HTML>
Колір, розмір і тип шрифтів в списках в прикладі №2 задані для тегу UL зовнішнього списку за допомогою внутрішнього завдання CSS, для тегу UL внутрішнього списку - за допомогою вбудованого.
