05. Списки в HTML

Списки в HTML допомагають організувати та структурувати інформацію. Ми творимо сторінку з рецептом улюбленої страви і використаємо списки по повній.

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

Ненумерований список (Unordered list)

Цей список не використовую цифри. Кожен елемент починається з крапки чи іншого символу. Список починається і закінчується тегом ul, а елементи списку позначаються тегом li:

<ul>
  <li>Кава</li>
  <li>Час</li>
  <li>Молоко</li>
</ul>

Нумерований список. (Ordered list)

Вже здогадались? В цьому виді списку якраз цифри використовуються. Ось так він створюється:

<ol>
  <li>Кава</li>
  <li>Час</li>
  <li>Молоко</li>
</ol>

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

Можна обрати стиль для крапки, яка позначає новий елемент.

disc – чорний кружечок
circle – незаповнений кружечок
square – квадрат
none – немає

<ul style="list-style-type:circle;">
  <li>Какао</li>
  <li>ще Какао</li>
  <li>і ще трішки Какао</li>
</ul>

Це не основні види маркування, але можна додавати дуже різні маркери, особливо за допомогою сторонніх бібліотек. В інтернеті можна знайти багато прикладів

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

Виявляється, нумерувати теж можна по різному: арабськими та римськими цифрами, також буквами.
“1”
“A”
“a”
“I”
“i”

<ol type="1">
  <li>Врятувати світ</li>
  <li>Випити філіжанку какао</li>
  <li>Зробити домашку</li>
</ol>

Список-опис (Description list)

Це список з описом. Для кожного елементу існує опис, який виділяється відступами.

<dl>
  <dt>Coffee</dt>
  <dd>Black hot drink</dd>
  <dt>Milk</dt>
  <dd>White cold drink</dd>
</dl>

Вкладений список (Nested list)

Також часто використовуються вкладені списки. Коли в середині деяких елементів також є маленький список.

<ul>
  <li>Coffee</li>
  <li>Tea
    <ol>
      <li>black tea</li>
      <li>green tea</li>
    </ol>
  </li>
  <li>Milk</li>
</ul>

Смачненький проєкт HTML зі списками.

Сьогодні ми створимо сторінку з вашим найкращим рецептом! Подумайте про смачнющу страву, секретом створення якої ви хотіли б подивитися. Можливо вдома є сімейний рецепт, за яким готують вашу улюблену страву. А якщо немає, то не біда, гугл завжди допоможе знайти гарний рецепт. Тож обираємо страву і вперед!

 1: Додайте назву своєї страви та два менших заголовки:

<h1>Піца 4 сири</h1>

<h3>Інгредієнти</h3>

<h3>Приготування</h3>

2: Додайте інгредієнти, які потрібні для страви за допомогою списку:

<ul>
  <li>Продукт 1</li>
  <li>Продукт 2</li>
  <li>Продукт 3</li>
</ul>

Ось такий список вийшов у мене:

<ul>
  <li>тісто для піци 270 - 300 г</li>
  <li>сир Моцарела для піци 100 г</li>
  <li>сир Емменталь (або Маасдам)  100 г</li>
  <li>сир Горгонзола (або  інший сир з блакитною пліснявою) 50 г</li>
  <li>сир Пармезан 50 г</li>
  <li>олія оливкова 1 ст. ложка</li>
  <li>орегано сушений 1 ч. ложка </li> 
</ul>     

3: Давайте тепер опишемо кроки, які треба зробити, щоб страва вийшла. Перейдіть до розділу “Приготування” і додайте нумерований список, щоб описати процес приготування:

<ol>
  <li>Крок 1</li>
  <li>Крок 2</li>
  <li>Крок 3</li>
</ol>

4: Знайдіть в інтернеті картинку зі своєю стравою додайте її на сторінку:

<img src="картинка.jpg" alt="Піца">

5: Можете вибрати кольори тексту і заголовків:

<h3 style="color: red">Інгредієнти</h3>
<p style="color: blue">Для приготування візьми</p>

 6: За бажанням, можна додати додаткові стилі картинці: 

Цей код допоможе закруглити кути у картинки:

<img src="картинка.jpg" alt="Піца" style="border-radius: 15px">

А цей код зробить картинку овальною:

<img src="картинка.jpg" alt="Піца" style="border-radius: 50%">

Level Up

1:  Створіть список справ на тиждень. Першими пунктами мають іти назви днів тижня з вкладеними в них справами, які треба зробити в цей день тижня. (Пошукайте підказку вище на сторінці у розділі “Вкладений список”)

Приклад:

1. Понеділок
   1. Полити квіти
   2. Вивчити вірш
   3. Погуляти з друзями
2. Вівторок
   1. Сходити на тренування
   2. Прибрати в кімнаті
3. Середа
   1. Зробити алгебру
   2. Почитати аніме
   3. Відпочити