WEBVTT

00:00:00.411 --> 00:00:01.835
Ласкаво прошу на мою веб-сторінку!

00:00:01.835 --> 00:00:04.059
Я знаю, що вона має не дуже 
приголомшливий вигляд,

00:00:04.059 --> 00:00:07.477
адже вона повністю порожня. 
Але кожна сторінка так починається,

00:00:07.477 --> 00:00:10.166
і скоро я вам покажу, як зробити
її такою, якою вона має бути.

00:00:10.275 --> 00:00:11.681
Спершу дайте мені хвилинку,

00:00:11.681 --> 00:00:14.860
щоб познайомити вас із структурою
порожньої веб-сторінки.

00:00:15.389 --> 00:00:16.944
Кожна сторінка починається

00:00:16.944 --> 00:00:20.384
зі слова DOCTYPE у лівому 
верхньому кутку редактора.

00:00:20.562 --> 00:00:21.961
Це всього лише сигнал для браузера,

00:00:21.961 --> 00:00:24.603
що означає, що ця сторінка 
написана на сучасній версії HTML,

00:00:24.603 --> 00:00:27.823
а не на старій незрозумілій
HTML з помилками.

NOTE Paragraph

00:00:27.931 --> 00:00:31.026
Далі переходимо до найпершого
тега на сторінці.

00:00:31.026 --> 00:00:34.582
HTML – це мова гіпертекстової розмітки, тому
ми постійно матимемо справу з тегами.

00:00:34.635 --> 00:00:36.399
Тег – це одна з тих речей,

00:00:36.399 --> 00:00:38.314
що починається кутовою дужкою

00:00:38.314 --> 00:00:40.684
і закінчується іншою кутовою дужкою.

00:00:40.745 --> 00:00:42.346
Або якщо ви любите математику,
ви можете думати про них

00:00:42.346 --> 00:00:45.383
як про знаки більше/менше.

00:00:46.474 --> 00:00:48.356
Першим тегом кожної сторінки завжди

00:00:48.356 --> 00:00:51.343
є той тег, який знаходиться
відразу під DOCTYPE.

00:00:51.343 --> 00:00:53.871
Цей тег є початковим тегом HTML-коду,

00:00:53.871 --> 00:00:57.055
а внизу, в самому кінці,
є кінцевий тег HTML-коду.

00:00:57.055 --> 00:00:59.729
Він виглядає так само як і початковий, 
проте містить в собі символ "\" (зворотній слеш),

00:00:59.729 --> 00:01:01.747
який є дуже важливим.

00:01:01.889 --> 00:01:05.147
Тег HTML має містити усі інші теги,

00:01:05.147 --> 00:01:07.354
які формують веб-сторінку.

00:01:07.376 --> 00:01:11.051
Тому ми використовуємо кінцевий тег HTML
лише вкінці.

00:01:11.119 --> 00:01:13.351
Багато тегів HTML є парними, як цей,

00:01:13.351 --> 00:01:15.099
але не всі.

00:01:15.571 --> 00:01:19.176
Після початкового тегу HTML
завжди має бути  тег (головний тег).

00:01:19.437 --> 00:01:22.146
Він включає в себе теги, які допомагають 
браузеру відображати сторінку.

00:01:22.146 --> 00:01:25.162
Але насправді не містить нічого того, 
що може бачити користувач.

00:01:25.435 --> 00:01:27.885
Тут є  тег (метатег),
який надає браузеру

00:01:27.885 --> 00:01:30.017
додаткову інформацію про те, 
як саме потрібно відображати сторінку.

00:01:30.204 --> 00:01:31.885
Наприклад, якщо ви використовуєте 
загальновживані символи,

00:01:31.885 --> 00:01:33.281
такі як в англійській мові

00:01:33.281 --> 00:01:34.747
чи символи з арабської мови,

00:01:34.747 --> 00:01:36.628
які не складно відобразити,

00:01:36.628 --> 00:01:39.618
тоді в тезі  вам слід
використати набір символів utf-8.

00:01:40.100 --> 00:01:41.578
Далі йде тег  (тег заголовка),

00:01:41.578 --> 00:01:45.009
який бразуер використовує,
щоб дати назву сторінці.

00:01:45.212 --> 00:01:47.623
Це те, що відображається 
у вкладці браузера зверху,

00:01:47.623 --> 00:01:50.039
в закладках та в результатах пошуку.

00:01:50.161 --> 00:01:53.430
На сайті Khan Academy заголовок можна побачити 
зверху над веб-сторінкою.

00:01:53.687 --> 00:01:55.544
Дозвольте я зміню заголовок.

00:01:55.695 --> 00:01:59.348
Я планую створити сторінку про кроликів.

00:01:59.348 --> 00:02:01.914
Тому я напишу "Все про кроликів",

00:02:01.914 --> 00:02:04.923
і ви можете відразу побачити,
як зверху змінюється назва.

00:02:05.539 --> 00:02:08.149
Чудово, ми закінчили з цими деталями,

00:02:08.149 --> 00:02:11.946
тому ми завершуємо роботу з головним
тегом і переходимо до наступного тега,

00:02:11.946 --> 00:02:14.809
в якому все відбувається. Переходимо до 
тега  (тег тіла сторінки).

00:02:15.033 --> 00:02:17.805
Зараз це виглядає досить нудно,
всього лиш початок і кінець.

00:02:18.081 --> 00:02:19.521
Що я маю додати?

00:02:19.521 --> 00:02:21.921
Що ж, я роблю сторінку про кроликів,

00:02:21.921 --> 00:02:23.155
тому я напевно маю про це написати 


00:02:23.155 --> 00:02:25.455
у великому заголовку зверху.

00:02:25.559 --> 00:02:28.656
Щоб додати заголовок,
ми використовуємо тег .

00:02:29.574 --> 00:02:33.154
"Все про кроликів", чудово.

00:02:33.154 --> 00:02:34.772
Загалом ми маємо шість тегів,

00:02:34.772 --> 00:02:38.441
які ми можемо використовувати
для написання заголовків: h1, h2, h3, h4, h5 та h6.

00:02:38.461 --> 00:02:41.153
h1 використовується для написання
найважливішого заголовка сторінки,

00:02:41.153 --> 00:02:43.358
а h6 – для найменш важливого.

00:02:43.491 --> 00:02:45.682
Давайте додамо декілька заголовків
для інших розділів.

00:02:45.696 --> 00:02:49.035
Я використаю h2, оскільки це є

00:02:49.035 --> 00:02:51.197
трішечки менш важливий розділ.

00:02:51.957 --> 00:02:55.469
І напишу в ньому "Пісні", добре.

00:02:56.214 --> 00:02:58.240
Тепер додамо трішки інформації.

00:02:58.402 --> 00:03:00.435
Цільовою аудиторією цієї сторінки 
є інопланетяни,

00:03:00.435 --> 00:03:03.934
які ніколи не бачили кроликів.

00:03:03.934 --> 00:03:06.943
Тому тут мені краще написати 
детальний опис кроликів.

00:03:07.100 --> 00:03:10.174
Насправді, я думаю, що мені потрібно
цілий абзац інформації.

00:03:10.396 --> 00:03:12.856
Як я можу зробити абзац в HTML?

00:03:13.391 --> 00:03:16.049
Звичайно ж, за допомогою тега .

00:03:16.470 --> 00:03:20.736
Ми ставимо тут тег , 
і далі мені потрібно лише

00:03:20.736 --> 00:03:22.633
вставити інформацію,

00:03:22.633 --> 00:03:25.568
тому вам не потрібно буде дивитись,
як я це все друкую.

00:03:25.856 --> 00:03:27.116
Прекрасно.

00:03:27.699 --> 00:03:30.901
Тепер інопланетянам потрібна пісенька,
щоб привітати кроликів,

00:03:30.912 --> 00:03:33.170
тому я дам їм слова моєї улюбленої.

00:03:33.170 --> 00:03:38.170
Я знову використаю тег  
і вставлю пісню

00:03:39.521 --> 00:03:43.419
"Маленький кролик ФуФу", така
прекрасна пісня.

00:03:43.572 --> 00:03:47.672
Але...оу, вся пісня показана в одному рядку.

00:03:47.868 --> 00:03:50.315
Як інопланетяни знатимуть, 
коли зупинятись?

00:03:50.418 --> 00:03:51.660
Чому браузер не відображає

00:03:51.660 --> 00:03:54.092
поділ на рядки, який я зробила?

00:03:54.350 --> 00:03:57.052
Насправді, браузери переважно
ігнорують перехід рядка

00:03:57.052 --> 00:03:59.139
і пробіли в HTML-коді.

00:03:59.318 --> 00:04:01.647
Якщо ми хочемо, щоб браузер 
відобразив переходи рядків,

00:04:01.647 --> 00:04:05.022
ми маємо це зрозуміло сказати,
використавши інший тег,

00:04:05.022 --> 00:04:08.176
тег 
, який означає розрив.

00:04:08.398 --> 00:04:12.513
Ми пройдемось по тексту
і додамо тег 
 після кожного рядка.

00:04:12.777 --> 00:04:14.885
Тепер це виглядає, як пісня.

00:04:15.440 --> 00:04:18.890
А ви помітили дещо веселе 
в тезі 
?

00:04:19.221 --> 00:04:20.851
Тут немає кінцевого тега.

00:04:20.966 --> 00:04:21.938
Якщо ви подумаєте про це,

00:04:21.938 --> 00:04:23.492
розрив рядка не містить ніякої інформації,

00:04:23.492 --> 00:04:25.861
тому й не має ніякого закінчення.

00:04:26.006 --> 00:04:28.496
Лише початковий тег – це все, 
що нам потрібно.

00:04:29.062 --> 00:04:30.361
Тут він і є.

00:04:30.456 --> 00:04:32.704
Інопланетяни вивчать основну 
інформацію про кроликів,

00:04:32.704 --> 00:04:35.883
а ви вже вивчили основи HTML.

00:04:36.044 --> 00:04:37.158
Після того як я закінчу свою лекцію,

00:04:37.158 --> 00:04:39.915
побавтеся з цими тегами 
і спробуйте щось змінити.

00:04:39.976 --> 00:04:43.641
Коли будете готові, переходьте
до свого першого завданя з HTML.

00:04:43.641 --> 00:04:47.901
Переклад на українську мову: Зоряна Гаврилюк, рев'юер: Юлія Білаш, благодійний фонд "MagneticOne.org"