1
00:00:00,411 --> 00:00:01,835
Ласкаво прошу на мою веб-сторінку!

2
00:00:01,835 --> 00:00:04,059
Я знаю, що вона має не дуже 
приголомшливий вигляд,

3
00:00:04,059 --> 00:00:07,477
адже вона повністю порожня. 
Але кожна сторінка так починається,

4
00:00:07,477 --> 00:00:10,166
і скоро я вам покажу, як зробити
її такою, якою вона має бути.

5
00:00:10,275 --> 00:00:11,681
Спершу дайте мені хвилинку,

6
00:00:11,681 --> 00:00:14,860
щоб познайомити вас із структурою
порожньої веб-сторінки.

7
00:00:15,389 --> 00:00:16,944
Кожна сторінка починається

8
00:00:16,944 --> 00:00:20,384
зі слова DOCTYPE у лівому 
верхньому кутку редактора.

9
00:00:20,562 --> 00:00:21,961
Це всього лише сигнал для браузера,

10
00:00:21,961 --> 00:00:24,603
що означає, що ця сторінка 
написана на сучасній версії HTML,

11
00:00:24,603 --> 00:00:27,823
а не на старій незрозумілій
HTML з помилками.

12
00:00:27,931 --> 00:00:31,026
Далі переходимо до найпершого
тега на сторінці.

13
00:00:31,026 --> 00:00:34,582
HTML – це мова гіпертекстової розмітки, тому
ми постійно матимемо справу з тегами.

14
00:00:34,635 --> 00:00:36,399
Тег – це одна з тих речей,

15
00:00:36,399 --> 00:00:38,314
що починається кутовою дужкою

16
00:00:38,314 --> 00:00:40,684
і закінчується іншою кутовою дужкою.

17
00:00:40,745 --> 00:00:42,346
Або якщо ви любите математику,
ви можете думати про них

18
00:00:42,346 --> 00:00:45,383
як про знаки більше/менше.

19
00:00:46,474 --> 00:00:48,356
Першим тегом кожної сторінки завжди

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

21
00:00:51,343 --> 00:00:53,871
Цей тег є початковим тегом HTML-коду,

22
00:00:53,871 --> 00:00:57,055
а внизу, в самому кінці,
є кінцевий тег HTML-коду.

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

24
00:00:59,729 --> 00:01:01,747
який є дуже важливим.

25
00:01:01,889 --> 00:01:05,147
Тег HTML має містити усі інші теги,

26
00:01:05,147 --> 00:01:07,354
які формують веб-сторінку.

27
00:01:07,376 --> 00:01:11,051
Тому ми використовуємо кінцевий тег HTML
лише вкінці.

28
00:01:11,119 --> 00:01:13,351
Багато тегів HTML є парними, як цей,

29
00:01:13,351 --> 00:01:15,099
але не всі.

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

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

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

33
00:01:25,435 --> 00:01:27,885
Тут є  тег (метатег),
який надає браузеру

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

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

36
00:01:31,885 --> 00:01:33,281
такі як в англійській мові

37
00:01:33,281 --> 00:01:34,747
чи символи з арабської мови,

38
00:01:34,747 --> 00:01:36,628
які не складно відобразити,

39
00:01:36,628 --> 00:01:39,618
тоді в тезі  вам слід
використати набір символів utf-8.

40
00:01:40,100 --> 00:01:41,578
Далі йде тег  (тег заголовка),

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

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

43
00:01:47,623 --> 00:01:50,039
в закладках та в результатах пошуку.

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

45
00:01:53,687 --> 00:01:55,544
Дозвольте я зміню заголовок.

46
00:01:55,695 --> 00:01:59,348
Я планую створити сторінку про кроликів.

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

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

49
00:02:05,539 --> 00:02:08,149
Чудово, ми закінчили з цими деталями,

50
00:02:08,149 --> 00:02:11,946
тому ми завершуємо роботу з головним
тегом і переходимо до наступного тега,

51
00:02:11,946 --> 00:02:14,809
в якому все відбувається. Переходимо до 
тега  (тег тіла сторінки).

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

53
00:02:18,081 --> 00:02:19,521
Що я маю додати?

54
00:02:19,521 --> 00:02:21,921
Що ж, я роблю сторінку про кроликів,

55
00:02:21,921 --> 00:02:23,155
тому я напевно маю про це написати 


56
00:02:23,155 --> 00:02:25,455
у великому заголовку зверху.

57
00:02:25,559 --> 00:02:28,656
Щоб додати заголовок,
ми використовуємо тег .

58
00:02:29,574 --> 00:02:33,154
"Все про кроликів", чудово.

59
00:02:33,154 --> 00:02:34,772
Загалом ми маємо шість тегів,

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

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

62
00:02:41,153 --> 00:02:43,358
а h6 – для найменш важливого.

63
00:02:43,491 --> 00:02:45,682
Давайте додамо декілька заголовків
для інших розділів.

64
00:02:45,696 --> 00:02:49,035
Я використаю h2, оскільки це є

65
00:02:49,035 --> 00:02:51,197
трішечки менш важливий розділ.

66
00:02:51,957 --> 00:02:55,469
І напишу в ньому "Пісні", добре.

67
00:02:56,214 --> 00:02:58,240
Тепер додамо трішки інформації.

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

69
00:03:00,435 --> 00:03:03,934
які ніколи не бачили кроликів.

70
00:03:03,934 --> 00:03:06,943
Тому тут мені краще написати 
детальний опис кроликів.

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

72
00:03:10,396 --> 00:03:12,856
Як я можу зробити абзац в HTML?

73
00:03:13,391 --> 00:03:16,049
Звичайно ж, за допомогою тега .

74
00:03:16,470 --> 00:03:20,736
Ми ставимо тут тег , 
і далі мені потрібно лише

75
00:03:20,736 --> 00:03:22,633
вставити інформацію,

76
00:03:22,633 --> 00:03:25,568
тому вам не потрібно буде дивитись,
як я це все друкую.

77
00:03:25,856 --> 00:03:27,116
Прекрасно.

78
00:03:27,699 --> 00:03:30,901
Тепер інопланетянам потрібна пісенька,
щоб привітати кроликів,

79
00:03:30,912 --> 00:03:33,170
тому я дам їм слова моєї улюбленої.

80
00:03:33,170 --> 00:03:38,170
Я знову використаю тег  
і вставлю пісню

81
00:03:39,521 --> 00:03:43,419
"Маленький кролик ФуФу", така
прекрасна пісня.

82
00:03:43,572 --> 00:03:47,672
Але...оу, вся пісня показана в одному рядку.

83
00:03:47,868 --> 00:03:50,315
Як інопланетяни знатимуть, 
коли зупинятись?

84
00:03:50,418 --> 00:03:51,660
Чому браузер не відображає

85
00:03:51,660 --> 00:03:54,092
поділ на рядки, який я зробила?

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

87
00:03:57,052 --> 00:03:59,139
і пробіли в HTML-коді.

88
00:03:59,318 --> 00:04:01,647
Якщо ми хочемо, щоб браузер 
відобразив переходи рядків,

89
00:04:01,647 --> 00:04:05,022
ми маємо це зрозуміло сказати,
використавши інший тег,

90
00:04:05,022 --> 00:04:08,176
тег 
, який означає розрив.

91
00:04:08,398 --> 00:04:12,513
Ми пройдемось по тексту
і додамо тег 
 після кожного рядка.

92
00:04:12,777 --> 00:04:14,885
Тепер це виглядає, як пісня.

93
00:04:15,440 --> 00:04:18,890
А ви помітили дещо веселе 
в тезі 
?

94
00:04:19,221 --> 00:04:20,851
Тут немає кінцевого тега.

95
00:04:20,966 --> 00:04:21,938
Якщо ви подумаєте про це,

96
00:04:21,938 --> 00:04:23,492
розрив рядка не містить ніякої інформації,

97
00:04:23,492 --> 00:04:25,861
тому й не має ніякого закінчення.

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

99
00:04:29,062 --> 00:04:30,361
Тут він і є.

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

101
00:04:32,704 --> 00:04:35,883
а ви вже вивчили основи HTML.

102
00:04:36,044 --> 00:04:37,158
Після того як я закінчу свою лекцію,

103
00:04:37,158 --> 00:04:39,915
побавтеся з цими тегами 
і спробуйте щось змінити.

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

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