[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.41,0:00:01.84,Default,,0000,0000,0000,,Ласкаво прошу на мою веб-сторінку!
Dialogue: 0,0:00:01.84,0:00:04.06,Default,,0000,0000,0000,,Я знаю, що вона має не дуже \Nприголомшливий вигляд,
Dialogue: 0,0:00:04.06,0:00:07.48,Default,,0000,0000,0000,,адже вона повністю порожня. \NАле кожна сторінка так починається,
Dialogue: 0,0:00:07.48,0:00:10.17,Default,,0000,0000,0000,,і скоро я вам покажу, як зробити\Nїї такою, якою вона має бути.
Dialogue: 0,0:00:10.28,0:00:11.68,Default,,0000,0000,0000,,Спершу дайте мені хвилинку,
Dialogue: 0,0:00:11.68,0:00:14.86,Default,,0000,0000,0000,,щоб познайомити вас із структурою\Nпорожньої веб-сторінки.
Dialogue: 0,0:00:15.39,0:00:16.94,Default,,0000,0000,0000,,Кожна сторінка починається
Dialogue: 0,0:00:16.94,0:00:20.38,Default,,0000,0000,0000,,зі слова DOCTYPE у лівому \Nверхньому кутку редактора.
Dialogue: 0,0:00:20.56,0:00:21.96,Default,,0000,0000,0000,,Це всього лише сигнал для браузера,
Dialogue: 0,0:00:21.96,0:00:24.60,Default,,0000,0000,0000,,що означає, що ця сторінка \Nнаписана на сучасній версії HTML,
Dialogue: 0,0:00:24.60,0:00:27.82,Default,,0000,0000,0000,,а не на старій незрозумілій\NHTML з помилками.
Dialogue: 0,0:00:27.93,0:00:31.03,Default,,0000,0000,0000,,Далі переходимо до найпершого\Nтега на сторінці.
Dialogue: 0,0:00:31.03,0:00:34.58,Default,,0000,0000,0000,,HTML – це мова гіпертекстової розмітки, тому\Nми постійно матимемо справу з тегами.
Dialogue: 0,0:00:34.64,0:00:36.40,Default,,0000,0000,0000,,Тег – це одна з тих речей,
Dialogue: 0,0:00:36.40,0:00:38.31,Default,,0000,0000,0000,,що починається кутовою дужкою
Dialogue: 0,0:00:38.31,0:00:40.68,Default,,0000,0000,0000,,і закінчується іншою кутовою дужкою.
Dialogue: 0,0:00:40.74,0:00:42.35,Default,,0000,0000,0000,,Або якщо ви любите математику,\Nви можете думати про них
Dialogue: 0,0:00:42.35,0:00:45.38,Default,,0000,0000,0000,,як про знаки більше/менше.
Dialogue: 0,0:00:46.47,0:00:48.36,Default,,0000,0000,0000,,Першим тегом кожної сторінки завжди
Dialogue: 0,0:00:48.36,0:00:51.34,Default,,0000,0000,0000,,є той тег, який знаходиться\Nвідразу під DOCTYPE.
Dialogue: 0,0:00:51.34,0:00:53.87,Default,,0000,0000,0000,,Цей тег є початковим тегом HTML-коду,
Dialogue: 0,0:00:53.87,0:00:57.06,Default,,0000,0000,0000,,а внизу, в самому кінці,\Nє кінцевий тег HTML-коду.
Dialogue: 0,0:00:57.06,0:00:59.73,Default,,0000,0000,0000,,Він виглядає так само як і початковий, \Nпроте містить в собі символ "\" (зворотній слеш),
Dialogue: 0,0:00:59.73,0:01:01.75,Default,,0000,0000,0000,,який є дуже важливим.
Dialogue: 0,0:01:01.89,0:01:05.15,Default,,0000,0000,0000,,Тег HTML має містити усі інші теги,
Dialogue: 0,0:01:05.15,0:01:07.35,Default,,0000,0000,0000,,які формують веб-сторінку.
Dialogue: 0,0:01:07.38,0:01:11.05,Default,,0000,0000,0000,,Тому ми використовуємо кінцевий тег HTML\Nлише вкінці.
Dialogue: 0,0:01:11.12,0:01:13.35,Default,,0000,0000,0000,,Багато тегів HTML є парними, як цей,
Dialogue: 0,0:01:13.35,0:01:15.10,Default,,0000,0000,0000,,але не всі.
Dialogue: 0,0:01:15.57,0:01:19.18,Default,,0000,0000,0000,,Після початкового тегу HTML\Nзавжди має бути  тег (головний тег).
Dialogue: 0,0:01:19.44,0:01:22.15,Default,,0000,0000,0000,,Він включає в себе теги, які допомагають \Nбраузеру відображати сторінку.
Dialogue: 0,0:01:22.15,0:01:25.16,Default,,0000,0000,0000,,Але насправді не містить нічого того, \Nщо може бачити користувач.
Dialogue: 0,0:01:25.44,0:01:27.88,Default,,0000,0000,0000,,Тут є  тег (метатег),\Nякий надає браузеру
Dialogue: 0,0:01:27.88,0:01:30.02,Default,,0000,0000,0000,,додаткову інформацію про те, \Nяк саме потрібно відображати сторінку.
Dialogue: 0,0:01:30.20,0:01:31.88,Default,,0000,0000,0000,,Наприклад, якщо ви використовуєте \Nзагальновживані символи,
Dialogue: 0,0:01:31.88,0:01:33.28,Default,,0000,0000,0000,,такі як в англійській мові
Dialogue: 0,0:01:33.28,0:01:34.75,Default,,0000,0000,0000,,чи символи з арабської мови,
Dialogue: 0,0:01:34.75,0:01:36.63,Default,,0000,0000,0000,,які не складно відобразити,
Dialogue: 0,0:01:36.63,0:01:39.62,Default,,0000,0000,0000,,тоді в тезі  вам слід\Nвикористати набір символів utf-8.
Dialogue: 0,0:01:40.10,0:01:41.58,Default,,0000,0000,0000,,Далі йде тег  (тег заголовка),
Dialogue: 0,0:01:41.58,0:01:45.01,Default,,0000,0000,0000,,який бразуер використовує,\Nщоб дати назву сторінці.
Dialogue: 0,0:01:45.21,0:01:47.62,Default,,0000,0000,0000,,Це те, що відображається \Nу вкладці браузера зверху,
Dialogue: 0,0:01:47.62,0:01:50.04,Default,,0000,0000,0000,,в закладках та в результатах пошуку.
Dialogue: 0,0:01:50.16,0:01:53.43,Default,,0000,0000,0000,,На сайті Khan Academy заголовок можна побачити \Nзверху над веб-сторінкою.
Dialogue: 0,0:01:53.69,0:01:55.54,Default,,0000,0000,0000,,Дозвольте я зміню заголовок.
Dialogue: 0,0:01:55.70,0:01:59.35,Default,,0000,0000,0000,,Я планую створити сторінку про кроликів.
Dialogue: 0,0:01:59.35,0:02:01.91,Default,,0000,0000,0000,,Тому я напишу "Все про кроликів",
Dialogue: 0,0:02:01.91,0:02:04.92,Default,,0000,0000,0000,,і ви можете відразу побачити,\Nяк зверху змінюється назва.
Dialogue: 0,0:02:05.54,0:02:08.15,Default,,0000,0000,0000,,Чудово, ми закінчили з цими деталями,
Dialogue: 0,0:02:08.15,0:02:11.95,Default,,0000,0000,0000,,тому ми завершуємо роботу з головним\Nтегом і переходимо до наступного тега,
Dialogue: 0,0:02:11.95,0:02:14.81,Default,,0000,0000,0000,,в якому все відбувається. Переходимо до \Nтега  (тег тіла сторінки).
Dialogue: 0,0:02:15.03,0:02:17.80,Default,,0000,0000,0000,,Зараз це виглядає досить нудно,\Nвсього лиш початок і кінець.
Dialogue: 0,0:02:18.08,0:02:19.52,Default,,0000,0000,0000,,Що я маю додати?
Dialogue: 0,0:02:19.52,0:02:21.92,Default,,0000,0000,0000,,Що ж, я роблю сторінку про кроликів,
Dialogue: 0,0:02:21.92,0:02:23.16,Default,,0000,0000,0000,,тому я напевно маю про це написати \N
Dialogue: 0,0:02:23.16,0:02:25.46,Default,,0000,0000,0000,,у великому заголовку зверху.
Dialogue: 0,0:02:25.56,0:02:28.66,Default,,0000,0000,0000,,Щоб додати заголовок,\Nми використовуємо тег .
Dialogue: 0,0:02:29.57,0:02:33.15,Default,,0000,0000,0000,,"Все про кроликів", чудово.
Dialogue: 0,0:02:33.15,0:02:34.77,Default,,0000,0000,0000,,Загалом ми маємо шість тегів,
Dialogue: 0,0:02:34.77,0:02:38.44,Default,,0000,0000,0000,,які ми можемо використовувати\Nдля написання заголовків: h1, h2, h3, h4, h5 та h6.
Dialogue: 0,0:02:38.46,0:02:41.15,Default,,0000,0000,0000,,h1 використовується для написання\Nнайважливішого заголовка сторінки,
Dialogue: 0,0:02:41.15,0:02:43.36,Default,,0000,0000,0000,,а h6 – для найменш важливого.
Dialogue: 0,0:02:43.49,0:02:45.68,Default,,0000,0000,0000,,Давайте додамо декілька заголовків\Nдля інших розділів.
Dialogue: 0,0:02:45.70,0:02:49.04,Default,,0000,0000,0000,,Я використаю h2, оскільки це є
Dialogue: 0,0:02:49.04,0:02:51.20,Default,,0000,0000,0000,,трішечки менш важливий розділ.
Dialogue: 0,0:02:51.96,0:02:55.47,Default,,0000,0000,0000,,І напишу в ньому "Пісні", добре.
Dialogue: 0,0:02:56.21,0:02:58.24,Default,,0000,0000,0000,,Тепер додамо трішки інформації.
Dialogue: 0,0:02:58.40,0:03:00.44,Default,,0000,0000,0000,,Цільовою аудиторією цієї сторінки \Nє інопланетяни,
Dialogue: 0,0:03:00.44,0:03:03.93,Default,,0000,0000,0000,,які ніколи не бачили кроликів.
Dialogue: 0,0:03:03.93,0:03:06.94,Default,,0000,0000,0000,,Тому тут мені краще написати \Nдетальний опис кроликів.
Dialogue: 0,0:03:07.10,0:03:10.17,Default,,0000,0000,0000,,Насправді, я думаю, що мені потрібно\Nцілий абзац інформації.
Dialogue: 0,0:03:10.40,0:03:12.86,Default,,0000,0000,0000,,Як я можу зробити абзац в HTML?
Dialogue: 0,0:03:13.39,0:03:16.05,Default,,0000,0000,0000,,Звичайно ж, за допомогою тега .
Dialogue: 0,0:03:16.47,0:03:20.74,Default,,0000,0000,0000,,Ми ставимо тут тег , \Nі далі мені потрібно лише
Dialogue: 0,0:03:20.74,0:03:22.63,Default,,0000,0000,0000,,вставити інформацію,
Dialogue: 0,0:03:22.63,0:03:25.57,Default,,0000,0000,0000,,тому вам не потрібно буде дивитись,\Nяк я це все друкую.
Dialogue: 0,0:03:25.86,0:03:27.12,Default,,0000,0000,0000,,Прекрасно.
Dialogue: 0,0:03:27.70,0:03:30.90,Default,,0000,0000,0000,,Тепер інопланетянам потрібна пісенька,\Nщоб привітати кроликів,
Dialogue: 0,0:03:30.91,0:03:33.17,Default,,0000,0000,0000,,тому я дам їм слова моєї улюбленої.
Dialogue: 0,0:03:33.17,0:03:38.17,Default,,0000,0000,0000,,Я знову використаю тег  \Nі вставлю пісню
Dialogue: 0,0:03:39.52,0:03:43.42,Default,,0000,0000,0000,,"Маленький кролик ФуФу", така\Nпрекрасна пісня.
Dialogue: 0,0:03:43.57,0:03:47.67,Default,,0000,0000,0000,,Але...оу, вся пісня показана в одному рядку.
Dialogue: 0,0:03:47.87,0:03:50.32,Default,,0000,0000,0000,,Як інопланетяни знатимуть, \Nколи зупинятись?
Dialogue: 0,0:03:50.42,0:03:51.66,Default,,0000,0000,0000,,Чому браузер не відображає
Dialogue: 0,0:03:51.66,0:03:54.09,Default,,0000,0000,0000,,поділ на рядки, який я зробила?
Dialogue: 0,0:03:54.35,0:03:57.05,Default,,0000,0000,0000,,Насправді, браузери переважно\Nігнорують перехід рядка
Dialogue: 0,0:03:57.05,0:03:59.14,Default,,0000,0000,0000,,і пробіли в HTML-коді.
Dialogue: 0,0:03:59.32,0:04:01.65,Default,,0000,0000,0000,,Якщо ми хочемо, щоб браузер \Nвідобразив переходи рядків,
Dialogue: 0,0:04:01.65,0:04:05.02,Default,,0000,0000,0000,,ми маємо це зрозуміло сказати,\Nвикориставши інший тег,
Dialogue: 0,0:04:05.02,0:04:08.18,Default,,0000,0000,0000,,тег \N, який означає розрив.
Dialogue: 0,0:04:08.40,0:04:12.51,Default,,0000,0000,0000,,Ми пройдемось по тексту\Nі додамо тег \N після кожного рядка.
Dialogue: 0,0:04:12.78,0:04:14.88,Default,,0000,0000,0000,,Тепер це виглядає, як пісня.
Dialogue: 0,0:04:15.44,0:04:18.89,Default,,0000,0000,0000,,А ви помітили дещо веселе \Nв тезі \N?
Dialogue: 0,0:04:19.22,0:04:20.85,Default,,0000,0000,0000,,Тут немає кінцевого тега.
Dialogue: 0,0:04:20.97,0:04:21.94,Default,,0000,0000,0000,,Якщо ви подумаєте про це,
Dialogue: 0,0:04:21.94,0:04:23.49,Default,,0000,0000,0000,,розрив рядка не містить ніякої інформації,
Dialogue: 0,0:04:23.49,0:04:25.86,Default,,0000,0000,0000,,тому й не має ніякого закінчення.
Dialogue: 0,0:04:26.01,0:04:28.50,Default,,0000,0000,0000,,Лише початковий тег – це все, \Nщо нам потрібно.
Dialogue: 0,0:04:29.06,0:04:30.36,Default,,0000,0000,0000,,Тут він і є.
Dialogue: 0,0:04:30.46,0:04:32.70,Default,,0000,0000,0000,,Інопланетяни вивчать основну \Nінформацію про кроликів,
Dialogue: 0,0:04:32.70,0:04:35.88,Default,,0000,0000,0000,,а ви вже вивчили основи HTML.
Dialogue: 0,0:04:36.04,0:04:37.16,Default,,0000,0000,0000,,Після того як я закінчу свою лекцію,
Dialogue: 0,0:04:37.16,0:04:39.92,Default,,0000,0000,0000,,побавтеся з цими тегами \Nі спробуйте щось змінити.
Dialogue: 0,0:04:39.98,0:04:43.64,Default,,0000,0000,0000,,Коли будете готові, переходьте\Nдо свого першого завданя з HTML.
Dialogue: 0,0:04:43.64,0:04:47.90,Default,,0000,0000,0000,,Переклад на українську мову: Зоряна Гаврилюк, рев'юер: Юлія Білаш, благодійний фонд "MagneticOne.org"