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

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

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

Невпорядкований список

У невпорядкованому списку для виділення елементів використо­вуються певні позначки (крапки, квадрати тощо).

Починається такий список із тегу <UL>, а закінчується — </UL>. 

Кожний еле­мент списку починається з тегу <LI>.

 Тег <UL> може мати атрибут TYPE, який визначає форму позначки. Цей атрибут набуває таких значень:

• disk — зафарбоване коло;
• circle — коло;
• square — маленький чорний квадрат.

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

Упорядкований список

В упорядкованому списку всі елементи пронумеровані.

Починається список із тегу <0L>, а закінчується — </OL>.

Кожний елемент такого списку також починається з тегу <LI>.

Тег <OL> може мати атрибут TYPE, який визначає тип нумерації. Цей атрибут набуває таких значень:

• А — велика літера;
• а — мала літера;
• І — велика римська цифра;
• і — мала римська цифра;
• 1 — арабська цифра.

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

Упорядкований список

У разі потреби за допомогою атрибута START можна задати відмінний від одиниці початковий номер елемента, наприклад <0L TYPE="I" START="5">, Нумерований список, початковий елемент якого позначено латинською літерою Е, яка є п'ятою в алфавіті, описують так:

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

<LI>Перший елемент списку</LI>

<LI>Другий елемент списку</LI>

<LI>Третій елемент списку</LI>

<LI>Четвертий елемент списку</LI>

</OL>

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

Приклад 2 .1

Маркований список, в якому для позначення

елементів використовують коло

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

Приклад 2 .2

Нумерований список, в якому для позначення

елементів використовують малі римські цифри

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

Нумерований список- список з порядковими номерами 1, 2, 3 ... .

Нумерований список створюється тегом <ol></ol>

Наприклад:

<ol>

<li>Windows XP</li>

<li>Windows 7</li>

<li>Windows 8</li>

<li>Windows 10</li>

</ol>

результат:

1. Windows XP

2. Windows 7

3. Windows 8

4. Windows 10

​

Маркер можна змінити, вказавши атрибут type, який вказується для тегу <ol>:

<oltype="1">...</ol><!-- нумерація 1, 2, 3, ... , за замовчуванням-->

<oltype="A">...</ol><!-- нумерація A, B, C, ... -->

<oltype="a">...</ol><!-- нумерація a, b, c, ... -->

<oltype="I">...</ol><!-- нумерація I, II, III, IV, V , ... -->

<oltype="i">...</ol><!-- нумерація i, ii, iii, iv, v, ... -->

Наприклад:

<oltype="A">

<li>Радомир</li>

<li>Федір</li>

<li>Кіріл</li>

<li>Олексій</li>

</ol>

результат:

A. Радомир

B. Федір

C. Кіріл

D. Олексій

​

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

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

Список визначення створюється тегом <dl></dl>.

Між цими тегами пишуться пари тегів:

слово, для якого буде даватись визначення, вказується тегами <dt></dt>

визначення пишеться між тегами <dd></dd>

Наприклад:

<dl>

<dt>Телесеріал:</dt>

<dd>Школа</dd>

<dt>Головні герої:</dt>

<dd>Яніна</dd>

<dd>Нікіта</dd>

<dd>Олена</dd>

<dd>та ін.</dd>

</dl>

результат:

 Телесеріал: Школа

Головні герої:

Яніна

Нікіта

Олена

та ін.

Cписки можуть бути багаторівневими, тобто всередині одного списку може бути інший - з підпунктами.

Наприклад,

для ненумерованого списку:

<ul>

<li>Пункт 1</li>

<ul>

<li>Підпункт</li>

<li>Підпункт</li>

</ul>

<li>Пункт 2</li>

<li>Пункт 3</li>

<li>Пункт 4</li>

</ul>

​

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

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

для нумерованого списку

<ol>

<li>Пункт 1</li>

<ol>

<li>Підпункт 1.1</li>

<li>Підпункт 1.2</li>

</ol>

<li>Пункт 2</li>

<ol>

<li>Підпункт 2.1</li>

<ol>

<li>Підпункт 2.1.1</li>

<li>Підпункт 2.2.2</li>

</ol>

<li>Підпункт 2.2</li>

</ol>

<li>Пункт 3</li>

<li>Пункт 4</li>

</ol>

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

Завдання 1. Маркований список

1. Запишіть HTML-код для сторінки та збережіть цей файл як Браузери.html.
2. Відкрийте у вікні браузера сторінку створеного веб-сайту, на екрані відобразиться інформація списку браузерів.

​

Завдання 2. Нумерований список

1. Запишіть HTML-код для сторінки та збережіть цей файл як ЗНО.html.
2. Відкрийте у вікні браузера сторінку створеного веб-сайту, на екрані відобразиться інформація списку документів.

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

Завдання 3. Мої досягнення

1. Запишіть HTML-код для сторінки та збережіть цей файл як Досягнення.html.
2. Відкрийте у вікні браузера сторінку створеного веб-сайту, на екрані відобразиться таблиця досягнень.

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

Працюємо за комп’ютером