pzeleny@kurzygrafiky.cz        Tel.: 724 810 701

Košík je prázdný

Obrázky a video v HTML

Nedílnou částí webových stránek jsou obrázky a další multimediální prvky. V následujícím textu se dozvíte základní informace o práci s obrázky v jazyce HTML.

Vložení obrázku

Obrázky jsou další možností, jak web může sdělovat informace uživatelům. Obrázky jsou také nedílnou součásti designu. Doplnění textu vysvětlujícím obrázkem je jeden z hlavních bodů, jak můžete udělat článek pro návštěvníky zajímavý. Následující kapitola vás naučí, jak vložit obrázek do stránky, zarovnat ho nebo nastavit vlastnosti pomocí stylů.

Ke vložení obrázku do stránky používejte nepárový tag <img> a jeho vlastnost src, která obsahuje cestu k obrázku na serveru:

<img src="/obrazek.jpg">

V uvedeném příkladě je obrázek uložený ve stejné složce jako HTML soubor. Umístění všech HTML stránek a obrázků ve stejném adresáři je značně nepřehledné. Doporučuji pro obrázky vytvořit samostatný podadresář.

<img src="/obrazky/obrazek.jpg">

V této ukázce se obrazek.jpg nachází v podsložce „obrazky“, která je umístěná stejně jako soubor HTML, ze kterého na obrázek odkazujete.

 

Dalším ze způsobů, jak vložit cestu k obrázku, je použití absolutní adresy.

<img src="http://kurzygrafiky.cz/logo.jpg">

Obrázek „logo.jpg“ se nachází v kořenovém adresáři webu kurzygrafiky.cz.

 

V prvních dvou případech se jedná o relativní zadání cesty, tedy závisle na umístění HTML souboru. Pokud soubor HTML přesunete, obrázky se nebudou zobrazovat. Třetí příklad ukazuje, že se použitý obrázek nachází na našem serveru a odkazujeme přímo na URL adresu obrázku. Třetího způsob můžete využít pro odkaz na obrázek, který je kdekoliv na internetu. Nebezpečí ale hrozí, pokud majitel stránek obrázek odstraní. V tom případě se přestane zobrazovat na všech propojených webech.

 


 

Vlastnosti obrázku

src = “cesta/nazev_obrazku.jpg“ – umístění obrázku relativně ke stránce

border = “5“ – rámeček obrázku, definován v pixelech

width = “900“ – šířka (v pixelech)

height= “50“ – výška (v pixelech)

 


 

Alternativní text

Dalším parametrem obrázku je ALT,  neboli alternativní text. Tento textový popis se zobrazí v případě, že se obrázek nenačte, nebo nemůže být zobrazen (např. vypnuté obrázky v prohlížeči). Tento popis využívají roboti pro vyhledávání a indexování obrázků. Z těchto důvodů je použití parametru ALT povinné u každého obrázku. Pokud se jedná o prvek designu, kde je alternativní text zbytečný, ale zároveň chcete mít validní kód, můžete vložit popisek s nulovou hodnotou ( alt=""). Alternativní text se také zobrazuje při najetí kursorem myši na obrázek. Bohužel ne vždy, závisí to na prohlížeči, který používáte. Pokud chcete mít jistotu, že se popis zobrazí, přidejte parametr TITLE (ten není povinný, ale např. Google chrome ho zobrazuje).

<img src="/screenshot016.jpg" alt="Google pro správce webu" title="Google pro správce"  />

 

Ukázka popisku obrázku ve fotogalerii:

web

 

Formáty obrázků

O formátech obrázků jste již četli v kapitole zabývající se grafikou a webdesignem. Při psaní HTML kódu je důležité příponu obrázku psát jako součást cesty. Bez uvedené přípony se obrázek nezobrazí. Protože prohlížeče rozlišují velká a malá písmena, dávejte pozor, zdali je přesný název obrázku picture.jpg, nebo picture.JPG.

Nikdy nepoužívejte obrázky ve formátu BMP. Pro web jsou nevhodné, protože nepoužívají žádnou kompresi a jsou zbytečně objemné.

Při nahrávání obrázků dbejte na správnou velikost. Zbytečně velké obrázky výrazně zpomalují načítání stránky.

 


 

Video

Vložení videa přímo do stránky není úplně jednoduché a obvykle vyžaduje použití Flash technologie. Na druhou stranu existuje velmi mnoho video serverů, s jejichž pomocí lze video vložit velmi snadno. Typickým příkladem je YouTube.com, nebo server Vimeo. Pokud nahrajete uživatelské video na některý z uvedených portálů, můžete zkopírovat automaticky generovaný kód, který vloží propojení na video přímo do vaší stránky.

 

Kód pro vložení videa vypadá obvykle takto:

 

<iframe width="420" height="345" src="http://www.youtube.com/embed/dlxEGv2JCHM" frameborder="0" allowfullscreen></iframe>

------ © 2015 KURZY GRAFIKY ------ Všechna práva vyhrazena. Kopírovat obsah bez souhlasu autora je zakázáno.

Icons made by Freepik from www.flaticon.com is licensed by
CC BY 3.0

Soubory cookie nám pomáhají poskytovat, chránit a zlepšovat naše služby. Pokud budete náš web používat i nadále, vyjádříte tím svůj souhlas s našimi zásadami týkajícími se souborů cookie.

 

OBCHODNÍ PODMÍNKY

KURZYGRAFIKY.CZ

Prokop Zelený, DiS.
Veronské nám. 331
Praha 10  10900

pzeleny@kurzygrafiky.cz
tel.: 724 810 701

Soubory cookie nám pomáhají poskytovat, chránit a zlepšovat naše služby. Pokud budete náš web používat i nadále, vyjádříte tím svůj souhlas s našimi zásadami týkajícími se souborů cookie. Informace o cookies ZDE.

  
EU Cookie Directive Module Information