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

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

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

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

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

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

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

0:00:16.944,0:00:20.384
зі слова DOCTYPE у лівому [br]верхньому кутку редактора.

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

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

0:00:24.603,0:00:27.823
а не на старій незрозумілій[br]HTML з помилками.

0:00:27.931,0:00:31.026
Далі переходимо до найпершого[br]тега на сторінці.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

0:01:07.376,0:01:11.051
Тому ми використовуємо кінцевий тег HTML[br]лише вкінці.

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

0:01:13.351,0:01:15.099
але не всі.

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

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

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

0:01:25.435,0:01:27.885
Тут є  тег (метатег),[br]який надає браузеру

0:01:27.885,0:01:30.017
додаткову інформацію про те, [br]як саме потрібно відображати сторінку.

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

0:01:31.885,0:01:33.281
такі як в англійській мові

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

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

0:01:36.628,0:01:39.618
тоді в тезі  вам слід[br]використати набір символів utf-8.

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

0:01:41.578,0:01:45.009
який бразуер використовує,[br]щоб дати назву сторінці.

0:01:45.212,0:01:47.623
Це те, що відображається [br]у вкладці браузера зверху,

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

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

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

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

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

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

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

0:02:08.149,0:02:11.946
тому ми завершуємо роботу з головним[br]тегом і переходимо до наступного тега,

0:02:11.946,0:02:14.809
в якому все відбувається. Переходимо до [br]тега  (тег тіла сторінки).

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

0:02:18.081,0:02:19.521
Що я маю додати?

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

0:02:21.921,0:02:23.155
тому я напевно маю про це написати [br]

0:02:23.155,0:02:25.455
у великому заголовку зверху.

0:02:25.559,0:02:28.656
Щоб додати заголовок,[br]ми використовуємо тег .

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

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

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

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

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

0:02:43.491,0:02:45.682
Давайте додамо декілька заголовків[br]для інших розділів.

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

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

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

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

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

0:03:00.435,0:03:03.934
які ніколи не бачили кроликів.

0:03:03.934,0:03:06.943
Тому тут мені краще написати [br]детальний опис кроликів.

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

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

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

0:03:16.470,0:03:20.736
Ми ставимо тут тег , [br]і далі мені потрібно лише

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

0:03:22.633,0:03:25.568
тому вам не потрібно буде дивитись,[br]як я це все друкую.

0:03:25.856,0:03:27.116
Прекрасно.

0:03:27.699,0:03:30.901
Тепер інопланетянам потрібна пісенька,[br]щоб привітати кроликів,

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

0:03:33.170,0:03:38.170
Я знову використаю тег  [br]і вставлю пісню

0:03:39.521,0:03:43.419
"Маленький кролик ФуФу", така[br]прекрасна пісня.

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

0:03:47.868,0:03:50.315
Як інопланетяни знатимуть, [br]коли зупинятись?

0:03:50.418,0:03:51.660
Чому браузер не відображає

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

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

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

0:03:59.318,0:04:01.647
Якщо ми хочемо, щоб браузер [br]відобразив переходи рядків,

0:04:01.647,0:04:05.022
ми маємо це зрозуміло сказати,[br]використавши інший тег,

0:04:05.022,0:04:08.176
тег [br], який означає розрив.

0:04:08.398,0:04:12.513
Ми пройдемось по тексту[br]і додамо тег [br] після кожного рядка.

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

0:04:15.440,0:04:18.890
А ви помітили дещо веселе [br]в тезі [br]?

0:04:19.221,0:04:20.851
Тут немає кінцевого тега.

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

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

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

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

0:04:29.062,0:04:30.361
Тут він і є.

0:04:30.456,0:04:32.704
Інопланетяни вивчать основну [br]інформацію про кроликів,

0:04:32.704,0:04:35.883
а ви вже вивчили основи HTML.

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

0:04:37.158,0:04:39.915
побавтеся з цими тегами [br]і спробуйте щось змінити.

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

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