1
00:00:00,271 --> 00:00:02,800
Celou dobu jsme mluvili o králících.

2
00:00:02,800 --> 00:00:05,575
Popisovali jsme je odstavci a seznamy,

3
00:00:05,575 --> 00:00:09,228
a přitom by stačilo dát 
na naší stránku obrázek

4
00:00:09,228 --> 00:00:11,801
a ukázat, jak králík vypadá.

5
00:00:11,801 --> 00:00:16,149
Abychom vložili do stránky obrázek,
používáme tag ,

6
00:00:16,149 --> 00:00:19,466
což je podle anglického image (obrázek).

7
00:00:19,466 --> 00:00:22,700
Pokud ale napíšeme jen
, nic neuvidíme.

8
00:00:22,700 --> 00:00:23,966
Proč?

9
00:00:23,966 --> 00:00:27,511
Neřekli jsme prohlížeči,
jaký nám má ukázat obrázek.

10
00:00:27,511 --> 00:00:29,284
Na internetu jsou miliony obrázků

11
00:00:29,284 --> 00:00:31,469
a určitě nechceme vybrat nějaký náhodný,

12
00:00:31,469 --> 00:00:33,930
protože by to mohlo být něco,
co se nám nebude líbit,

13
00:00:34,699 --> 00:00:37,766
a nebo by to mohl být obrázek
něčeho jiného, než chceme.

14
00:00:37,766 --> 00:00:40,925
Musíme tam napsat URL našeho obrázku.

15
00:00:40,939 --> 00:00:43,073
URL je to, co se zobrazuje nahoře

16
00:00:43,073 --> 00:00:44,770
v prohlížeči v adresním řádku,

17
00:00:44,770 --> 00:00:46,874
URL je totiž adresa.

18
00:00:46,874 --> 00:00:50,085
Pomocí ní můžeme najít
na webu cokoliv,

19
00:00:50,085 --> 00:00:52,413
a znamená to, že můžeme
vložit pouze obrázek,

20
00:00:52,413 --> 00:00:54,552
který již někde na internetu je.

21
00:00:54,552 --> 00:00:57,602
Nemůžeme jen tak vkládat obrázky,
které jsou u nás na počítači.

22
00:00:58,233 --> 00:01:00,772
Existuje mnoho způsobů jak najít
obrázky na internetu,

23
00:01:00,772 --> 00:01:03,137
ale teď Vám to zjednoduším

24
00:01:03,137 --> 00:01:06,037
pomocí kolekce, ze které 
si obrázky můžete vybrat.

25
00:01:06,246 --> 00:01:07,967
Aby se kolekce zobrazila,

26
00:01:07,967 --> 00:01:10,735
musíme našemu tagu přidat atribut.

27
00:01:10,735 --> 00:01:14,250
Atributy obsahují další informace o tagu

28
00:01:14,250 --> 00:01:16,837
a toto je první atribut,
se kterým se setkáváme.

29
00:01:18,204 --> 00:01:19,714
Abychom prohlížeči řekli URL,

30
00:01:19,714 --> 00:01:22,544
přidáme atribute "source" (zdroj).

31
00:01:22,544 --> 00:01:26,286
Přidáme mezeru, za ní napíšeme "src".

32
00:01:26,697 --> 00:01:30,866
"src" znamená "source" (zdroj),
ale je velmi důležité,

33
00:01:30,866 --> 00:01:32,733
abyste napsali přesně "src",

34
00:01:32,733 --> 00:01:35,333
protože prohlížeč by to jinak nepochopil.

35
00:01:35,733 --> 00:01:38,700
Nyní přidáme rovnítko,
abychom prohlížeči řekli,

36
00:01:38,700 --> 00:01:41,400
jakou hodnotu tento atribut má.

37
00:01:41,400 --> 00:01:46,785
A teď přidám uvozovky 
a editor je automaticky dokončí,

38
00:01:46,785 --> 00:01:50,830
aby hodnota byla celá v uvozovkách.

39
00:01:52,000 --> 00:01:55,819
Obvykle bychom zde začali psát URL

40
00:01:55,819 --> 00:01:57,298
ale tady na Khan Academy

41
00:01:57,298 --> 00:01:59,925
teď vyskočí kolekce obrázků.

42
00:01:59,925 --> 00:02:04,095
Pouze si vybereme obrázek,
a já chci obrázek králíka,

43
00:02:04,095 --> 00:02:05,727
takže jdu do sekce zvířata,

44
00:02:05,727 --> 00:02:09,281
vyberu nějakého roztomilého králíka
a kliknu na OK.

45
00:02:10,521 --> 00:02:12,887
Vidíte, že se v uvozovkách zobrazila URL,

46
00:02:12,887 --> 00:02:15,799
která začíná http?

47
00:02:16,320 --> 00:02:17,349
Díky tomu víme,

48
00:02:17,349 --> 00:02:19,620
že ukazuje na nějaký obrázek na internetu.

49
00:02:19,620 --> 00:02:22,186
A teď už máme na stránce
králíčka!

50
00:02:23,319 --> 00:02:26,208
Ale. Co kdyby se rozbil server,
kde je ten obrázek uložený

51
00:02:26,208 --> 00:02:27,698
a prohlížeč by obrázek nenašel?

52
00:02:27,698 --> 00:02:30,823
Jak by se návštěvníci dozvěděli,
co bylo na mém skvělém obrázku?

53
00:02:30,823 --> 00:02:32,892
Nic neuvidí a do konce života

54
00:02:32,892 --> 00:02:35,091
budou přemýšlet, co tu asi mohlo být.

55
00:02:36,321 --> 00:02:39,425
Proto mají obrázky další atribut, "alt",

56
00:02:39,425 --> 00:02:41,267
kterým prohlížeči řekneme,

57
00:02:41,267 --> 00:02:43,686
jaký je k obrázku alternativní text.

58
00:02:43,686 --> 00:02:46,532
Přidáme ho tak, že za poslední uvozovky

59
00:02:46,532 --> 00:02:49,140
napíšeme mezeru

60
00:02:49,140 --> 00:02:53,306
a za ní alt="".

61
00:02:54,512 --> 00:02:57,113
Do uvozovek pak napíšeme text,

62
00:02:57,113 --> 00:02:59,743
kterým popíšeme, co bylo na obrázku,

63
00:02:59,743 --> 00:03:03,783
například "králík s plandavýma
ušima ve stodole".

64
00:03:04,783 --> 00:03:09,697
To také pomůže lidem, kteří 
na stránku přijdou, ale nevidí - nevidomým.

65
00:03:09,697 --> 00:03:11,668
Mohou použít aplikaci na čtení,

66
00:03:11,668 --> 00:03:13,885
která jim webovou stránku přečte,

67
00:03:13,885 --> 00:03:15,876
a popíše každý tag, který uvidí.

68
00:03:15,876 --> 00:03:18,758
Když uvidí tag pro obrázek,
přečte tento alternativní text,

69
00:03:18,758 --> 00:03:21,151
protože nevidomí lidé obrázky nevidí.

70
00:03:22,292 --> 00:03:24,686
Proto byste nikdy neměli 
na alt zapomenout,

71
00:03:24,686 --> 00:03:27,924
aby Vaši stránku mohl používat celý svět.

72
00:03:28,908 --> 00:03:31,077
Ale zpět k obrázku, který tu máme.

73
00:03:31,077 --> 00:03:32,854
Je trochu velký.

74
00:03:32,854 --> 00:03:34,245
Změníme jeho velikost.

75
00:03:34,245 --> 00:03:36,376
Můžeme to udělat pomocí atributů

76
00:03:36,376 --> 00:03:38,437
width (šířka) nebo height (výška).

77
00:03:38,827 --> 00:03:42,757
Řekněme, že šířka je 100 (width="100").

78
00:03:43,397 --> 00:03:46,850
Nyní bude obrázek široký 100 pixelů.

79
00:03:47,411 --> 00:03:49,085
Teď je zase moc malý.

80
00:03:49,085 --> 00:03:51,801
Posuneme kurzor na číslo velikosti

81
00:03:51,801 --> 00:03:53,396
a scrolováním obrázek zvětšíme.

82
00:03:54,817 --> 00:03:56,536
No, to vypadá mnohem lépe.

83
00:03:56,536 --> 00:03:58,357
Zkusme přidat výšku.

84
00:03:58,357 --> 00:04:01,010
Řekněme 50. (height="50").

85
00:04:01,010 --> 00:04:02,788
Hups!

86
00:04:02,788 --> 00:04:05,515
Rozplácla jsem svého králíčka,
chudák!

87
00:04:05,515 --> 00:04:07,438
Vidíte, proto je lepší vždy

88
00:04:07,438 --> 00:04:10,768
uvést pouze šířku nebo výšku
ale ne obojí najednou,

89
00:04:10,768 --> 00:04:13,127
protože můžete zadat špatný poměr stran

90
00:04:13,127 --> 00:04:14,464
a rozplácnout své králíčky.

91
00:04:14,464 --> 00:04:18,433
Takže radši nechme prohlížeč

92
00:04:18,433 --> 00:04:20,300
dopočítat správný poměr stran.

93
00:04:20,300 --> 00:04:21,910
Raději smažu výšku.

94
00:04:23,138 --> 00:04:25,124
Teď, když umíte přidávat obrázky,

95
00:04:25,124 --> 00:04:28,505
můžete přemýšlet, jak využít všechny
tagy, které znáte,

96
00:04:28,505 --> 00:04:33,487
seznamy, obrázky, odstavce
o 10 nejbláznivějších zvířatech.

97
00:04:33,487 --> 00:04:36,032
Ale nedávejte na vaší stránku
příliš mnoho obrázků,

98
00:04:36,032 --> 00:04:38,171
protože každý návštěvník

99
00:04:38,171 --> 00:04:40,335
je bude muset všechny načíst.

100
00:04:40,335 --> 00:04:44,166
Ale i tak si s tím
užijete spoustu zábavy.