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
Првo ипак, дајте ми минут

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,530
а не у старом, незграпном
и чудном 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
тај HTML таг тачно испод 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 тага,
увек се налази HEAD таг.

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
онда вам треба мета charset једнако utf-8.

40
00:01:40,100 --> 00:01:41,578
Затим је ту овај TITLE таг,

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
Овде на Кхан Академији, наслов се приказује
изнад наше веб странице.

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
тако да завршавамо HEAD таг
и прелазимо на таг

51
00:02:11,946 --> 00:02:14,809
где ће се све дешавати, BODY таг.

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
Да додамо наслов, користимо H1 таг.

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-u.

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
BR тага, који представља прелом (енг: break).

91
00:04:08,398 --> 00:04:12,513
Добро, проћи ћу кроз ово
и додаћу BR-ове после сваке линије.

92
00:04:12,777 --> 00:04:14,885
Сада личи на лирике.

93
00:04:15,440 --> 00:04:18,890
Да ли сте приметили
нешто забавно око BR?

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-a.

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,658
Па када будете спремни,
продужите на ваш први HTML изазов.