-
Ви знаєте, що я люблю? Списки!
-
Ви коли-небудь робили список покупок
або завдань?
-
Ви коли-небудь читали списки
на веб-сайтах?
-
Наприклад,
"Топ-10 Найсмішнішніх Собачих Мордочок"?
-
Я впевнена, ви бачили, тому що
світ наповнений списками.
-
HTML дає нам декілька тегів для
створення списків,
-
і ми зараз трішки попрактикуємось з ними,
-
створивши список причин, чому кролики
є прекрасними тваринками.
-
Отже, щоб створити маркований список,
-
ми повинні почати з тега < ul >.
-
Що означає тег < ul >?
-
Я закладаюсь, ви можете здогадатись,
що "l" – це список (англ. "List").
-
З "u" – трохи складніше, ця літера означає
"невпорядкований" (англ."unordered"),
-
і це означає, що браузер
не нумеруватиме елементи списку.
-
Він всього лиш додаватиме
маленькі маркери.
-
Щоб побачити, що я маю на увазі,
давайте додамо перший елемент.
-
"Вони – пухнасті".
-
Бачите маленький кружечок збоку?
-
Це і є маркер.
-
Як ви думаєте, що означає < li >?
-
"l" – це список (англ. list), "і" - це елемент
(англ. item), елемент списку.
-
Кожного разу, коли ми хочемо додати
новий елемент,
-
ми маємо додати новий тег < li > під тегом < ul > .
-
Кожен тег < ul > має мати хоча б
один тег < li > під собою,
-
тому що список без елементів -
це дуже нудно.
-
Добре, давайте додамо ще щось.
-
"Хороші слухачі" і...
-
"Їдять всі твої залишки моркви".
-
Гаразд, думаю, це буде дуже
переконливий список.
-
Думаю, прочитавши це,
коже би захотів завести собі кролика.
-
Я не пронумерувала список,
-
тому що не вважаю,
що одна причина
-
є важливішою за іншу,
-
але існує багато випадків,
коли нам потрібно створити нумерований список.
-
Наприклад, якщо б
ми захотіли створити список:
-
"Топ-3 найвідоміших кроликів".
-
Для того, щоб створити нумерований список,
-
ми використаємо тег < ol > замість < ul > .
-
Ви здогадались, що означає < ol > ?
-
Ось підказка, просто відкиньте
-
дві перші літери від слова,
яке було означенням < ul >.
-
Правильно, ці літери означають
"впорядкований список" (англ. "ordered list").
-
І цей тег каже браузеру автоматично
-
нумерувати кожен новий елемент списку.
-
Далі ми використовуємо тег < li >,
для того щоб додати
-
нові елементи у список.
-
Тому ми напишемо "Багс Банні",
-
далі "Тампер",
-
і, звичайно, ми не можемо
забути про "Різдвяного кролика".
-
В нумерованому списку важливе те,
-
що браузер сам створює для нас
нумерацію.
-
Тому, якщо ми по-іншому впорядкуємо
список, видалимо або додамо нові елементи,
-
він завжди правильно розставить наші числа.
-
Наприклад, якщо ви всі скажете,
-
що не знаєте, хто такий Тампер.
-
Тоді спочатку я вам скажу,
-
що ви маєте переглянути "Бембі".
-
Але потім я неохоче пересуну
-
Тампера в самий низ.
-
І зараз бідний Тампер є третім номером.
-
Отже, зараз ви маєте все,
щоб створювати списки.
-
Тож вперед! Складайте списки!
-
Переклад на українську мову: Зоряна Гаврилюк, рев'юер: Юлія Білаш, Благодійний фонд "MagneticOne.org"
