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.