Списки в 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: Створіть список справ на тиждень. Першими пунктами мають іти назви днів тижня з вкладеними в них справами, які треба зробити в цей день тижня. (Пошукайте підказку вище на сторінці у розділі “Вкладений список”)
Приклад:
- Понеділок
- Полити квіти
- Вивчити вірш
- Погуляти з друзями
- Вівторок
- Сходити на тренування
- Прибрати в кімнаті
- Середа
- Зробити алгебру
- Почитати аніме
- Відпочити
