«Основи HTML»
Кучай А.В., Білан С.О.

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

Списком називається взаємопов'язаний набір окремих фраз або речень, які починаються з маркера або цифри. Списки надають можливість упорядкувати і систематизувати різні дані і представити їх у наочному і зручному для користувача ввигляді. Кожен список являє собою контейнер <ul>, який встановлює маркований список, або <ol>, який визначає список нумерований. Кожен елемент списку повинен починатися з тега <li>.

Маркований список (або невпорядкований) визначається тим, що перед кожним елементом списку додається невеликий маркер, зазвичай у вигляді зафарбованого кола. Сам список формується за допомогою контейнера <ul>, а кожен пункт списку починається з тега <li>, як показано нижче.

  <ul>
        <li>  Перший пункт </li>
        <li>  Другий пункт </li>
        <li>  Третій пункт </li>
  </ul>
Переглянути Редагувати

У списку неодмінно повинен бути присутнім закриваючий тег </ul>, інакше виникне помилка. Закриваючий тег </li> хоча і не є обов'язковим, але, щоб чітко розділяти елементи списку, рекомендується завжди його додавати.

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

  <!DOCTYPE html>
  <html>
      <head>
        <title> Маркований список </title>
      </head>
      <body>
        <hr>
        <p>З якого мультфільму наступні персонажі?</p>
          <ul>
            <li> Чебурашка </li>
            <li> Крокодил Гена </li>
            <li> Шапокляк </li>
            <li> Щур Лариса </li>
          </ul>
        <hr>
      </body>
  </html>
Переглянути Редагувати

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

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

Стилі маркерів списку

Тип списку Код HTML Приклад
Список з маркерами у вигляді кола <ul type = "disc">
    <li> ... </li>
</ul>
  • Перший
  • Другий
  • Третій
Список з маркерами у вигляді окружнoсті <ul type = "circle">
    <li> ... </li>
</ul>
  • Перший
  • Другий
  • Третій
Список з квадратними маркерами <ul type = "square">
    <li> ... </li>
</ul>
  • Перший
  • Другий
  • Третій

Вид маркерів може мати незначні відмінності в різних браузерах, а також при зміні шрифту і розміру тексту.

Приклад використання квадратного маркера

  <!DOCTYPE html>
  <html>
    <head>
      <title> Маркований список </title>
    </head>
    <body>
        <p> <strong> Атрибути тега body </strong> </p>
        <ul type = "square">
          <li> bgcolor="колір"</li>
          <li> background="url\*.jpg" </li>
          <li> text="колір" </li>
        </ul>
    </body>
  </html>
Переглянути Редагувати

Багаторівневі списки створювати досить просто. Досить лише вставити новий список перед закриваючим тегом </li> того елемента, у якого є підпункти.

Приклад списку з двома рівнями

  <!DOCTYPE html>
  <html>
    <head>
     <meta charset="utf-8">
      <title> Багаторівневий список </title>
    </head>
    <body>
      <ul>
        <li>Глава 1
    	<ul>
      	  <li>Розділ 1.1</li>
      	  <li>Розділ 1.2</li>
    	</ul>
  		</li>
        <li>Глава 2</li>
	  </ul>
    </body>
  </html>
Переглянути Редагувати

Нумеровані списки являють собою набір елементів з їх порядковими номерами. Вид і тип нумерації залежить від атрибутів тега <ol>, який і застосовується для створення списку. Кожен пункт нумерованого списку позначається тегом <li>, як показано нижче.

  <ol>
        <li>  Перший пункт </li>
        <li>  Другий пункт </li>
        <li>  Третій пункт </li>
  </ol>

Якщо не вказувати ніяких додаткових атрибутів і просто написати тег <ol>, то за замовчуванням застосовується список з арабськими числами (1, 2, 3, ...).

  <!DOCTYPE html>
  <html>
      <head>
        <title> Нумерований список </title>
      </head>
      <body>
        <p> <strong> Робота з часом </strong> </p>
        <ol>
          <li> Створення пунктуальності (ніколи не будете нікуди  спізнюватися). </li>
          <li> Лікування від пунктуальності (ніколи нікуди не будете  поспішати). </li>
          <li> Зміна сприйняття часу і годин. </li>
        </ol>
      </body>
  </html>
Переглянути Редагувати

Зауважте, що в нумерованому списку також додаються автоматичні відступи зверху, знизу і зліва від тексту.

При нумерації елементів можуть використовуватись наступні значення:

      • арабські числа (1, 2, 3, ...);
      • великі латинські літери (A, B, C, ...);
      • малі латинські букви (a, b, c, ...);
      • прописні римські числа (I, II, III, ...);
      • малі римські числа (i, ii, iii, ...).

Для вказівників типу нумерованого списку застосовується атрибут type тега <ol>.

Типи нумерованого списку

Тип списку Код HTML Приклад
Арабські числа <ol type = "1">
    <li>...</li>
</ol>
  1. Чебурашка
  2. Крокодил Гена
  3. Шапокляк
Прописні букви латинського алфавіту <ol type = "A">
    <li>...</li>
</ol>
  1. Чебурашка
  2. Крокодил Гена
  3. Шапокляк
Малі літери латинського алфавіту <ol type = "a">
    <li>...</li>
</ol>
  1. Чебурашка
  2. Крокодил Гена
  3. Шапокляк
Римські числа в верхньому регістрі <ol type = "I">
    <li>...</li>
</ol>
  1. Чебурашка
  2. Крокодил Гена
  3. Шапокляк
Римські числа в нижньому регістрі <ol type = "i">
    <li>...</li>
</li>
  1. Чебурашка
  2. Крокодил Гена
  3. Шапокляк

Щоб почати список з певного значення, використовується атрибут start тега <ol>. При цьому не має значення, який тип списку встановлений за допомогою type, атрибут start однаково працює і з римськими, і з арабськими числами. У наступному прикладі показано створення списку з використанням римських цифр у верхньому регістрі, який починається з восьми.

    
  <!DOCTYPE html>
  <html>
      <head>
        <title> римські числа </title>
      </head>
      <body>
        <ol  type = "I" start =  "8">
          <li> Король Магнум  XLIV </li>
          <li> Король Зігфрід XVI </li>
          <li> Король Сигізмунд XXI </li>
          <li> Король Хусбрандт I </li>
        </ol>
      </body>
  </html>
Переглянути Редагувати


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

        <dl>
        <dt> Термін 1 </dt>
        <dd> Визначення 1 </dd>
        <dt> Термін 2 </dt>
        <dd> Визначення 2 </dd>
        </dl>

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

Приклад cтворення списку визначень

  <!DOCTYPE html>
  <html>
        <head>
          <title> Список визначень </title>
        </head>
        <body>
          <dl>
            <dt> Тег </dt>
              <dd> − це  спеціальний символ розмітки,
			який застосовується для вставки різних елементів на 
			веб-сторінку таких як: малюнки, таблиці,посилання тощо,
			і для зміни їх виду. 
              </dd>
            <dt> HTML-документ </dt>
              <dd>  − це звичайний текстовий файл, 
			який може містити в собі текст, теги і стилі. 
			Зображення та інші об'єкти зберігаються окремо. 
			Вміст такого файлу зазвичай називається HTML-кодом. 
              </dd>
            <dt> Сайт </dt>
              <dd> − це набір окремих веб-сторінок, 
			які пов'язані між собою посиланнями і єдиним оформленням. 
              </dd>
          </dl>
        </body>
  </html>
Переглянути Редагувати


Питання для самоконтролю:

  1. За допомогою якого тегу створюються списки?
  2. Як створити ненумерований список?
  3. Як створити список визначень?
  4. За допопогою якого атрибуту визначається маркер або позначення нумерації списку?
  5. Як почати нумерацію із заданої позиції?