YouTube

Got a YouTube account?

New: enable viewer-created translations and captions on your YouTube channel!

Ukrainian subtitles

← Основи HTML (Відео версія)

Get Embed Code
11 Languages

Showing Revision 14 created 03/28/2016 by Julia@0503.

  1. Ласкаво прошу на мою веб-сторінку!

  2. Я знаю, що вона має не дуже
    приголомшливий вигляд,
  3. адже вона повністю порожня.
    Але кожна сторінка так починається,
  4. і скоро я вам покажу, як зробити
    її такою, якою вона має бути.
  5. Спершу дайте мені хвилинку,
  6. щоб познайомити вас із структурою
    порожньої веб-сторінки.
  7. Кожна сторінка починається
  8. зі слова DOCTYPE у лівому
    верхньому кутку редактора.
  9. Це всього лише сигнал для браузера,
  10. що означає, що ця сторінка
    написана на сучасній версії HTML,
  11. а не на старій незрозумілій
    HTML з помилками.
  12. Далі переходимо до найпершого
    тега на сторінці.

  13. HTML – це мова гіпертекстової розмітки, тому
    ми постійно матимемо справу з тегами.
  14. Тег – це одна з тих речей,
  15. що починається кутовою дужкою
  16. і закінчується іншою кутовою дужкою.
  17. Або якщо ви любите математику,
    ви можете думати про них
  18. як про знаки більше/менше.
  19. Першим тегом кожної сторінки завжди
  20. є той тег, який знаходиться
    відразу під DOCTYPE.
  21. Цей тег є початковим тегом HTML-коду,
  22. а внизу, в самому кінці,
    є кінцевий тег HTML-коду.
  23. Він виглядає так само як і початковий,
    проте містить в собі символ "\" (зворотній слеш),
  24. який є дуже важливим.
  25. Тег HTML має містити усі інші теги,
  26. які формують веб-сторінку.
  27. Тому ми використовуємо кінцевий тег HTML
    лише вкінці.
  28. Багато тегів HTML є парними, як цей,
  29. але не всі.
  30. Після початкового тегу HTML
    завжди має бути <head> тег (головний тег).
  31. Він включає в себе теги, які допомагають
    браузеру відображати сторінку.
  32. Але насправді не містить нічого того,
    що може бачити користувач.
  33. Тут є <meta> тег (метатег),
    який надає браузеру
  34. додаткову інформацію про те,
    як саме потрібно відображати сторінку.
  35. Наприклад, якщо ви використовуєте
    загальновживані символи,
  36. такі як в англійській мові
  37. чи символи з арабської мови,
  38. які не складно відобразити,
  39. тоді в тезі <meta> вам слід
    використати набір символів utf-8.
  40. Далі йде тег <title> (тег заголовка),
  41. який бразуер використовує,
    щоб дати назву сторінці.
  42. Це те, що відображається
    у вкладці браузера зверху,
  43. в закладках та в результатах пошуку.
  44. На сайті Khan Academy заголовок можна побачити
    зверху над веб-сторінкою.
  45. Дозвольте я зміню заголовок.
  46. Я планую створити сторінку про кроликів.
  47. Тому я напишу "Все про кроликів",
  48. і ви можете відразу побачити,
    як зверху змінюється назва.
  49. Чудово, ми закінчили з цими деталями,
  50. тому ми завершуємо роботу з головним
    тегом і переходимо до наступного тега,
  51. в якому все відбувається. Переходимо до
    тега <body> (тег тіла сторінки).
  52. Зараз це виглядає досить нудно,
    всього лиш початок і кінець.
  53. Що я маю додати?
  54. Що ж, я роблю сторінку про кроликів,
  55. тому я напевно маю про це написати
  56. у великому заголовку зверху.
  57. Щоб додати заголовок,
    ми використовуємо тег <h1>.
  58. "Все про кроликів", чудово.
  59. Загалом ми маємо шість тегів,
  60. які ми можемо використовувати
    для написання заголовків: h1, h2, h3, h4, h5 та h6.
  61. h1 використовується для написання
    найважливішого заголовка сторінки,
  62. а h6 – для найменш важливого.
  63. Давайте додамо декілька заголовків
    для інших розділів.
  64. Я використаю h2, оскільки це є
  65. трішечки менш важливий розділ.
  66. І напишу в ньому "Пісні", добре.
  67. Тепер додамо трішки інформації.
  68. Цільовою аудиторією цієї сторінки
    є інопланетяни,
  69. які ніколи не бачили кроликів.
  70. Тому тут мені краще написати
    детальний опис кроликів.
  71. Насправді, я думаю, що мені потрібно
    цілий абзац інформації.
  72. Як я можу зробити абзац в HTML?
  73. Звичайно ж, за допомогою тега <p>.
  74. Ми ставимо тут тег <p>,
    і далі мені потрібно лише
  75. вставити інформацію,
  76. тому вам не потрібно буде дивитись,
    як я це все друкую.
  77. Прекрасно.
  78. Тепер інопланетянам потрібна пісенька,
    щоб привітати кроликів,
  79. тому я дам їм слова моєї улюбленої.
  80. Я знову використаю тег <p>
    і вставлю пісню
  81. "Маленький кролик ФуФу", така
    прекрасна пісня.
  82. Але...оу, вся пісня показана в одному рядку.
  83. Як інопланетяни знатимуть,
    коли зупинятись?
  84. Чому браузер не відображає
  85. поділ на рядки, який я зробила?
  86. Насправді, браузери переважно
    ігнорують перехід рядка
  87. і пробіли в HTML-коді.
  88. Якщо ми хочемо, щоб браузер
    відобразив переходи рядків,
  89. ми маємо це зрозуміло сказати,
    використавши інший тег,
  90. тег <br>, який означає розрив.
  91. Ми пройдемось по тексту
    і додамо тег <br> після кожного рядка.
  92. Тепер це виглядає, як пісня.
  93. А ви помітили дещо веселе
    в тезі <br>?
  94. Тут немає кінцевого тега.
  95. Якщо ви подумаєте про це,
  96. розрив рядка не містить ніякої інформації,
  97. тому й не має ніякого закінчення.
  98. Лише початковий тег – це все,
    що нам потрібно.
  99. Тут він і є.
  100. Інопланетяни вивчать основну
    інформацію про кроликів,
  101. а ви вже вивчили основи HTML.
  102. Після того як я закінчу свою лекцію,
  103. побавтеся з цими тегами
    і спробуйте щось змінити.
  104. Коли будете готові, переходьте
    до свого першого завданя з HTML.
  105. Переклад на українську мову: Зоряна Гаврилюк, рев'юер: Юлія Білаш, благодійний фонд "MagneticOne.org"