HTML Images (Video Version)

Celou dobu jsme mluvili o králících.

Popisovali jsme je odstavci a seznamy,

a přitom by stačilo dát
na naší stránku obrázek

a ukázat, jak králík vypadá.

Abychom vložili do stránky obrázek,
používáme tag ,

což je podle anglického image (obrázek).

Pokud ale napíšeme jen
, nic neuvidíme.

Proč?

Neřekli jsme prohlížeči,
jaký nám má ukázat obrázek.

Na internetu jsou miliony obrázků

a určitě nechceme vybrat nějaký náhodný,

protože by to mohlo být něco,
co se nám nebude líbit,

a nebo by to mohl být obrázek
něčeho jiného, než chceme.

Musíme tam napsat URL našeho obrázku.

URL je to, co se zobrazuje nahoře

v prohlížeči v adresním řádku,

URL je totiž adresa.

Pomocí ní můžeme najít
na webu cokoliv,

a znamená to, že můžeme
vložit pouze obrázek,

který již někde na internetu je.

Nemůžeme jen tak vkládat obrázky,
které jsou u nás na počítači.

Existuje mnoho způsobů jak najít
obrázky na internetu,

ale teď Vám to zjednoduším

pomocí kolekce, ze které
si obrázky můžete vybrat.

Aby se kolekce zobrazila,

musíme našemu tagu přidat atribut.

Atributy obsahují další informace o tagu

a toto je první atribut,
se kterým se setkáváme.

Abychom prohlížeči řekli URL,

přidáme atribute "source" (zdroj).

Přidáme mezeru, za ní napíšeme "src".

"src" znamená "source" (zdroj),
ale je velmi důležité,

abyste napsali přesně "src",

protože prohlížeč by to jinak nepochopil.

Nyní přidáme rovnítko,
abychom prohlížeči řekli,

jakou hodnotu tento atribut má.

A teď přidám uvozovky
a editor je automaticky dokončí,

aby hodnota byla celá v uvozovkách.

Obvykle bychom zde začali psát URL

ale tady na Khan Academy

teď vyskočí kolekce obrázků.

Pouze si vybereme obrázek,
a já chci obrázek králíka,

takže jdu do sekce zvířata,

vyberu nějakého roztomilého králíka
a kliknu na OK.

Vidíte, že se v uvozovkách zobrazila URL,

která začíná http?

Díky tomu víme,

že ukazuje na nějaký obrázek na internetu.

A teď už máme na stránce
králíčka!

Ale. Co kdyby se rozbil server,
kde je ten obrázek uložený

a prohlížeč by obrázek nenašel?

Jak by se návštěvníci dozvěděli,
co bylo na mém skvělém obrázku?

Nic neuvidí a do konce života

budou přemýšlet, co tu asi mohlo být.

Proto mají obrázky další atribut, "alt",

kterým prohlížeči řekneme,

jaký je k obrázku alternativní text.

Přidáme ho tak, že za poslední uvozovky

napíšeme mezeru

a za ní alt="".

Do uvozovek pak napíšeme text,

kterým popíšeme, co bylo na obrázku,

například "králík s plandavýma
ušima ve stodole".

To také pomůže lidem, kteří
na stránku přijdou, ale nevidí - nevidomým.

Mohou použít aplikaci na čtení,

která jim webovou stránku přečte,

a popíše každý tag, který uvidí.

Když uvidí tag pro obrázek,
přečte tento alternativní text,

protože nevidomí lidé obrázky nevidí.

Proto byste nikdy neměli
na alt zapomenout,

aby Vaši stránku mohl používat celý svět.

Ale zpět k obrázku, který tu máme.

Je trochu velký.

Změníme jeho velikost.

Můžeme to udělat pomocí atributů

width (šířka) nebo height (výška).

Řekněme, že šířka je 100 (width="100").

Nyní bude obrázek široký 100 pixelů.

Teď je zase moc malý.

Posuneme kurzor na číslo velikosti

a scrolováním obrázek zvětšíme.

No, to vypadá mnohem lépe.

Zkusme přidat výšku.

Řekněme 50. (height="50").

Hups!

Rozplácla jsem svého králíčka,
chudák!

Vidíte, proto je lepší vždy

uvést pouze šířku nebo výšku
ale ne obojí najednou,

protože můžete zadat špatný poměr stran

a rozplácnout své králíčky.

Takže radši nechme prohlížeč

dopočítat správný poměr stran.

Raději smažu výšku.

Teď, když umíte přidávat obrázky,

můžete přemýšlet, jak využít všechny
tagy, které znáte,

seznamy, obrázky, odstavce
o 10 nejbláznivějších zvířatech.

Ale nedávejte na vaší stránku
příliš mnoho obrázků,

protože každý návštěvník

je bude muset všechny načíst.

Ale i tak si s tím
užijete spoustu zábavy.