Return to Video

Списки HTML (Відео версія)

  • 0:01 - 0:03
    Ви знаєте, що я люблю? Списки!
  • 0:03 - 0:05
    Ви коли-небудь робили список покупок
    або завдань?
  • 0:05 - 0:07
    Ви коли-небудь читали списки
    на веб-сайтах?
  • 0:07 - 0:10
    Наприклад,
    "Топ-10 Найсмішнішніх Собачих Мордочок"?
  • 0:10 - 0:14
    Я впевнена, ви бачили, тому що
    світ наповнений списками.
  • 0:14 - 0:16
    HTML дає нам декілька тегів для
    створення списків,
  • 0:16 - 0:19
    і ми зараз трішки попрактикуємось з ними,
  • 0:19 - 0:24
    створивши список причин, чому кролики
    є прекрасними тваринками.
  • 0:25 - 0:27
    Отже, щоб створити маркований список,
  • 0:27 - 0:30
    ми повинні почати з тега < ul >.
  • 0:31 - 0:32
    Що означає тег < ul >?
  • 0:32 - 0:36
    Я закладаюсь, ви можете здогадатись,
    що "l" – це список (англ. "List").
  • 0:36 - 0:40
    З "u" – трохи складніше, ця літера означає
    "невпорядкований" (англ."unordered"),
  • 0:40 - 0:43
    і це означає, що браузер
    не нумеруватиме елементи списку.
  • 0:43 - 0:45
    Він всього лиш додаватиме
    маленькі маркери.
  • 0:45 - 0:48
    Щоб побачити, що я маю на увазі,
    давайте додамо перший елемент.
  • 0:48 - 0:50
    "Вони – пухнасті".
  • 0:50 - 0:52
    Бачите маленький кружечок збоку?
  • 0:52 - 0:53
    Це і є маркер.
  • 0:53 - 0:56
    Як ви думаєте, що означає < li >?
  • 0:56 - 1:00
    "l" – це список (англ. list), "і" - це елемент
    (англ. item), елемент списку.
  • 1:00 - 1:02
    Кожного разу, коли ми хочемо додати
    новий елемент,
  • 1:02 - 1:06
    ми маємо додати новий тег < li > під тегом < ul > .
  • 1:06 - 1:08
    Кожен тег < ul > має мати хоча б
    один тег < li > під собою,
  • 1:08 - 1:12
    тому що список без елементів -
    це дуже нудно.
  • 1:12 - 1:14
    Добре, давайте додамо ще щось.
  • 1:14 - 1:17
    "Хороші слухачі" і...
  • 1:17 - 1:22
    "Їдять всі твої залишки моркви".
  • 1:22 - 1:25
    Гаразд, думаю, це буде дуже
    переконливий список.
  • 1:25 - 1:28
    Думаю, прочитавши це,
    коже би захотів завести собі кролика.
  • 1:28 - 1:30
    Я не пронумерувала список,
  • 1:30 - 1:32
    тому що не вважаю,
    що одна причина
  • 1:32 - 1:34
    є важливішою за іншу,
  • 1:34 - 1:37
    але існує багато випадків,
    коли нам потрібно створити нумерований список.
  • 1:37 - 1:38
    Наприклад, якщо б
    ми захотіли створити список:
  • 1:38 - 1:43
    "Топ-3 найвідоміших кроликів".
  • 1:45 - 1:47
    Для того, щоб створити нумерований список,
  • 1:47 - 1:51
    ми використаємо тег < ol > замість < ul > .
  • 1:51 - 1:55
    Ви здогадались, що означає < ol > ?
  • 1:55 - 1:56
    Ось підказка, просто відкиньте
  • 1:56 - 1:59
    дві перші літери від слова,
    яке було означенням < ul >.
  • 1:59 - 2:03
    Правильно, ці літери означають
    "впорядкований список" (англ. "ordered list").
  • 2:03 - 2:05
    І цей тег каже браузеру автоматично
  • 2:05 - 2:07
    нумерувати кожен новий елемент списку.
  • 2:07 - 2:10
    Далі ми використовуємо тег < li >,
    для того щоб додати
  • 2:10 - 2:12
    нові елементи у список.
  • 2:12 - 2:13
    Тому ми напишемо "Багс Банні",
  • 2:13 - 2:16
    далі "Тампер",
  • 2:16 - 2:19
    і, звичайно, ми не можемо
    забути про "Різдвяного кролика".
  • 2:21 - 2:23
    В нумерованому списку важливе те,
  • 2:23 - 2:25
    що браузер сам створює для нас
    нумерацію.
  • 2:25 - 2:28
    Тому, якщо ми по-іншому впорядкуємо
    список, видалимо або додамо нові елементи,
  • 2:28 - 2:30
    він завжди правильно розставить наші числа.
  • 2:30 - 2:32
    Наприклад, якщо ви всі скажете,
  • 2:32 - 2:34
    що не знаєте, хто такий Тампер.
  • 2:34 - 2:36
    Тоді спочатку я вам скажу,
  • 2:36 - 2:37
    що ви маєте переглянути "Бембі".
  • 2:37 - 2:39
    Але потім я неохоче пересуну
  • 2:39 - 2:41
    Тампера в самий низ.
  • 2:41 - 2:44
    І зараз бідний Тампер є третім номером.
  • 2:44 - 2:47
    Отже, зараз ви маєте все,
    щоб створювати списки.
  • 2:47 - 2:50
    Тож вперед! Складайте списки!
  • 2:50 - 2:55
    Переклад на українську мову: Зоряна Гаврилюк, рев'юер: Юлія Білаш, Благодійний фонд "MagneticOne.org"
Title:
Списки HTML (Відео версія)
Description:
more » « less
Video Language:
English
Duration:
02:51

Ukrainian subtitles

Revisions

Our website uses cookies for analysis purposes.