1
00:00:00,411 --> 00:00:01,835
Vítejte na mé webové stránce.

2
00:00:01,835 --> 00:00:04,059
Vím, není zatím příliš zajímavá.

3
00:00:04,059 --> 00:00:07,477
Je úplně prázdná, ale takhle 
začíná každá webová stránka,

4
00:00:07,477 --> 00:00:10,166
a já vám ukážu, jak takovou
stránku vytvořit rychle.

5
00:00:10,275 --> 00:00:11,681
Nejprve mi dejte chvilku,

6
00:00:11,681 --> 00:00:14,860
abych vám představila základní
strukturu prázdné stránky.

7
00:00:15,389 --> 00:00:16,944
Každá webová stránka začíná s

8
00:00:16,944 --> 00:00:20,384
touto srandovní věcí 
zvanou DOCTYPE na začátku.

9
00:00:20,562 --> 00:00:21,961
Tou jen říkáme prohlížeči,

10
00:00:21,961 --> 00:00:24,603
že tato webová stránka je
psaná v moderním HTML,

11
00:00:24,603 --> 00:00:27,530
a ne v té staré a podivné verzi HTML.

12
00:00:27,931 --> 00:00:31,026
Následuje první tag naší stránky.

13
00:00:31,026 --> 00:00:34,582
HTML je značkovací jazyk,
takže se všechno týká tagů.

14
00:00:34,635 --> 00:00:36,399
Tag je jedna z věcí,

15
00:00:36,399 --> 00:00:38,314
které začínají se špičatou závorkou,

16
00:00:38,314 --> 00:00:40,684
a končí s jinou špičatou závorkou.

17
00:00:40,745 --> 00:00:42,346
V matematice je možná znáte

18
00:00:42,346 --> 00:00:45,383
jako symboly méně než
nebo více než.

19
00:00:46,474 --> 00:00:48,356
První tag každé stránky je vždycky

20
00:00:48,356 --> 00:00:51,343
tento tag HTML přímo pod DOCTYPE.

21
00:00:51,343 --> 00:00:53,871
Tomuhle říkáme začínající tag HTML,

22
00:00:53,871 --> 00:00:57,055
a pak úplně na konci je
uzavírací tag HTML,

23
00:00:57,055 --> 00:00:59,729
který vypadá uplně stejně
kromě tohoto lomítka,

24
00:00:59,729 --> 00:01:01,747
které je velmi důležité.

25
00:01:01,889 --> 00:01:05,147
Dovnitř HTML musíme
dávat všechny ostatní tagy,

26
00:01:05,147 --> 00:01:07,354
které chceme na stránce mít.

27
00:01:07,376 --> 00:01:11,051
Proto je uzavírací tag HTML
až úplně na konci.

28
00:01:11,119 --> 00:01:13,351
Velká část HTML tagů
je takto "párová",

29
00:01:13,351 --> 00:01:15,099
ale ne všechny.

30
00:01:15,571 --> 00:01:19,176
Pod HTML je vždy
tag head,

31
00:01:19,187 --> 00:01:22,146
který obsahuje tagy pomáhající 
prohlížeči zobrazit stránku,

32
00:01:22,146 --> 00:01:25,162
ale zároveň neobsahuje nic,
co může uživatel vidět.

33
00:01:25,435 --> 00:01:27,885
Tento meta tag dává prohlížeči

34
00:01:27,885 --> 00:01:30,017
více informací o zobrazení stránky.

35
00:01:30,034 --> 00:01:31,885
Například, pokud používáte
běžné znaky,

36
00:01:31,885 --> 00:01:33,281
například písmena abecedy,

37
00:01:33,281 --> 00:01:34,747
a ne žádné těžší znaky,

38
00:01:34,747 --> 00:01:36,628
které jsou v arabském jazyce,

39
00:01:36,628 --> 00:01:39,618
pak byste měli použít znakovou sadu utf-8.

40
00:01:40,100 --> 00:01:41,578
Dál tady máme tag title.

41
00:01:41,578 --> 00:01:45,009
který prohlížeč používá
k určení názvu stránky.

42
00:01:45,212 --> 00:01:47,623
Název se ukazuje na kartě
nahoře v prohlížeči,

43
00:01:47,623 --> 00:01:50,039
a taky v záložkách nebo ve výsledcích vyhledávání.

44
00:01:50,161 --> 00:01:53,430
Tady na Khan Academy se titulek
ukazuje nad naší webovou stránkou.

45
00:01:53,687 --> 00:01:55,544
Zkusíme ho změnit.

46
00:01:55,695 --> 00:01:59,348
Celá stránka bude o králících.

47
00:01:59,348 --> 00:02:01,914
Takže název bude "Vše o králících"

48
00:02:01,914 --> 00:02:04,923
a můžete vidět, jak se název nahoře mění.

49
00:02:05,539 --> 00:02:08,149
Super, tyhle detaily bychom měli.

50
00:02:08,149 --> 00:02:11,946
Takže ukončíme tag head
a přesuneme se k tagu,

51
00:02:11,946 --> 00:02:14,809
který je centrem dění,
k tagu body.

52
00:02:15,033 --> 00:02:17,805
Momentálně je pěkně nudný,
jenom začíná a končí.

53
00:02:18,081 --> 00:02:19,521
Co bych tam měla přidat?

54
00:02:19,521 --> 00:02:21,921
Protože dělám webovou stránku o králících,

55
00:02:21,921 --> 00:02:23,155
měla bych to asi uvést

56
00:02:23,155 --> 00:02:25,455
ve velkém nadpisu na začátku.

57
00:02:25,559 --> 00:02:28,656
K přidání nadpisu používáme tag H1.

58
00:02:29,574 --> 00:02:33,154
Všechno o králících, super.

59
00:02:33,154 --> 00:02:34,772
Pro nadpisy existuje šest tagů:

60
00:02:34,772 --> 00:02:38,441
H1, H2, H3, H4, H5 a H6.

61
00:02:38,461 --> 00:02:41,153
H1 tag je pro ty nejdůležitější
nadpisy na stránce.

62
00:02:41,153 --> 00:02:43,358
a H6 je nejméně důležitý.

63
00:02:43,491 --> 00:02:45,682
Teď přidám více nadpisů pro každou sekci.

64
00:02:45,696 --> 00:02:49,035
Použiji H2, protože jsou pro trošku

65
00:02:49,035 --> 00:02:51,197
méně důležité sekce.

66
00:02:51,957 --> 00:02:55,469
Ještě písničky, super.

67
00:02:56,214 --> 00:02:58,240
Teď pojďme přidat opravdový obsah.

68
00:02:58,402 --> 00:03:00,435
Moje cílová skupina pro tuto stránku

69
00:03:00,435 --> 00:03:03,934
jsou mimozemšťani, kteří nikdy neviděli
králíky.

70
00:03:03,934 --> 00:03:06,943
Takže jim musíme dát
hodně dobrý popis králíků.

71
00:03:07,100 --> 00:03:10,174
Myslím, že bychom jim mělli
napsat celý odstavec plný informací.

72
00:03:10,396 --> 00:03:12,856
Jak můžeme vytvořit odstavec v HTML?

73
00:03:13,391 --> 00:03:16,049
Samozřejmě s tagem P.

74
00:03:16,470 --> 00:03:20,736
Přidáme tag P, a potom do něj

75
00:03:20,736 --> 00:03:22,633
vložím nějaké informace,

76
00:03:22,633 --> 00:03:25,568
ať mě nemusíte sledovat,
jak to celé píšu.

77
00:03:25,856 --> 00:03:27,116
Krása.

78
00:03:27,699 --> 00:03:30,901
Teď mimozemšťani potřebují píseň,
kterou budou králíky zdravit,

79
00:03:30,912 --> 00:03:33,170
takže jim dám můj
nejoblíbenější text.

80
00:03:33,170 --> 00:03:38,170
Znovu, použiji pro to tento tag P,
a vložím dovnitř text písně

81
00:03:39,521 --> 00:03:43,419
"Malý králíček Foofoo",
taková skvělá písnička.

82
00:03:43,572 --> 00:03:47,672
Ale jejej, vše se ukazuje v jednom řádku.

83
00:03:47,868 --> 00:03:50,315
Jak budou mimozemšťani
vědět, kdy přestat?

84
00:03:50,418 --> 00:03:51,660
Proč prohlížeč nezobrazil

85
00:03:51,660 --> 00:03:54,092
zalomení v řádcích, 
které jsem sem vložila?

86
00:03:54,350 --> 00:03:57,052
No, popravdě, prohlížeč
většinou ignoruje zalomení

87
00:03:57,052 --> 00:03:59,139
a mezery ve vašem HTML.

88
00:03:59,318 --> 00:04:01,647
Pokud chcete, aby se text
zobrazil na nový řádek,

89
00:04:01,647 --> 00:04:05,022
musíme to důrazně říct,
vložením jiného tagu,

90
00:04:05,022 --> 00:04:08,176
tagu BR, který znamená nový řádek.

91
00:04:08,398 --> 00:04:12,513
Musíme to projít a
přidat BR na konci každého řádku.

92
00:04:12,777 --> 00:04:14,885
Teď to vypadá jako text písničky.

93
00:04:15,440 --> 00:04:18,890
Všimli jste si něčeho zábavného na BR?

94
00:04:19,221 --> 00:04:20,851
Není zde uzavírací tag.

95
00:04:20,966 --> 00:04:21,938
Když se nad tím zamyslíme,

96
00:04:21,938 --> 00:04:23,492
nový řádek nemá žádný obsah,

97
00:04:23,492 --> 00:04:25,861
takže pak není co ukončovat.

98
00:04:26,006 --> 00:04:28,496
Proto potřebujeme jen začínající tag.

99
00:04:29,062 --> 00:04:30,361
Tady je.

100
00:04:30,456 --> 00:04:32,704
Mimozemšťani se budou učit
základy o králících,

101
00:04:32,704 --> 00:04:35,883
a vy jste se naučili základy o HTML.

102
00:04:36,044 --> 00:04:37,158
Jakmile domluvím,

103
00:04:37,158 --> 00:04:39,915
můžete si s tímto hrát a různě to měnit.

104
00:04:39,976 --> 00:04:43,658
A až budete připraveni, pokračujte
na vaši první HTML výzvu.