3. Списки.

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

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

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

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

• Вправа

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

Марковані списки - це списки, в яких елементи списку є маркерами. Для установки маркірованого списку використовуються теги <ul> і <li>

Тег <ul> - unordered list (неврегульований список). Тег <li> - list item (елемент списку)

Код, написаний таким чином

<ul> <li> Книги </li> <li> Електроніка </li> <li> CD і DVD </li> </ul>

відображуватиме на екрані так:

Маркери можуть приймати один з трьох видів: круг (за умовчанням), коло і квадрат. Для вибору типа маркера використовується параметр type=... тега <ul>.

За допомогою CSS можна задати як маркер будь-яке зображення. В цьому випадку слід пам'ятати: при масштабуванні тексту при перегляді в браузері стандартні маркери масштабуються разом з ним, а зображення, використовувані як маркер, не масштабуються.

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

Нумеровані (або впорядковані) списки є списками з пронумерованих пунктів. Для установки нумерованого списку використовується тег <ol> замість <ul> Тег <ol> - ordered list (впорядкований список).

Найпростіший список має наступний код:

<ol> <li> Вийдете на станції метро Войковськая. </li> <li> Сядьте на тролейбус 57 маршруту.</li> <li> Вийдете на четвертій зупинці. </li> <li> Перейдіть дорогу. Я Вас чекатиму в кіоску.</li> </ol>

На екрані він відображуватиметься так:

1. Вийдете на станції метро Войковськая.          2. Сядьте на тролейбус 57 маршруту.          3. Вийдете на четвертій зупинці.          4. Перейдіть дорогу. Я Вас чекатиму в кіоску.

Вигляд і тип нумерації залежить від параметрів тега <ol>

Код HTML	Відображення на екрані
<ol start="5">	Список починається з пяти:     5. Желтий     6. Синій     7. Червоний
<ol type="A">	Заголовні латинські букви: Жовтий Синій Червоний
<ol type="a">	Прописні латинські букви: Жовтий Синій Червоний
<ol type="I">	Cписок з римськими буквами: Жовтий Синій Червоний

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

Вкладений список - це список, розміщений усередині іншого списку.

Наприклад, код

<ol> <li> Крупні міста Росії:       <ul type="square">       <li> Москва       <li> Санкт-Петербург       </ul> <li> Крупні міста України:       <ul type="square">       <li> Київ       </ul> </ol>

відображуватиметься на екрані так:

 

Крупні міста Росії: Москва Санкт-Петербург Крупні міста України: Київ

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

Списки визначень є способом визначення термінів і понять. Списки визначень складаються з трьох елементів: елементу списку визначень <dl> ... </dl>, елементу визначення терміну <dt> ... </dt>, елементу визначення опису <dd> ... </dd>.

Код прикладу

<dl>       <dt>Пиксель</dt>       <dd>Элементарная кольорова крапка, сукупність яких утворює зображення.</dd>

      <dt>Экспозиция</dt>       <dd>Количественная міра світлової енергії, падаюча на світлочутливий елемент.</dd>

      <dt>Диафрагма</dt>       <dd>Параметр, регулюючий кількість світла, яке освітлює матрицю.</dd>

</dl>

відображуватиметься в браузері так:

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

Вправа

Створіть по образу скриншота html-документ з дотриманням всіх елементів оформлення списків.

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