Kurz HTML – fakta o obrázcích
Šestý díl kurzu o HTML, který přináší vše o obrázcích na www stránkách – jak a čím se obrázky definují, parametry, základní pravidla pro jejich používání apod.
Obrázky jsou v dnešní době takřka nepostradatelnou součástí webu. Používají se jako podklad pro www stránku, někde nahrazují klasické textové odkazy, vytváří se pomocí nich layout celého webu apod. Každý tvůrce www stránek proto musí umět pracovat s obrázky, znát možnosti, pokud nechce tvořit značně neatraktivní textové stránky.
Tag IMG
Pro vkládání obrázků, který musí být již předem vytvořen (soubor GIF, JPEG nebo PNG) do www stránky se používá jediný nepárový tag IMG. Jeho základní syntaxe je velmi jednoduchá:
<IMG SRC=“nazev_souboru“>
Pro umístnění samotného obrázku platí pravidla jako pro ostatní prvky webu – obrázek může být uveden přímo v daném adresáři s HTML stránkou, v takovém případě nemusíme uvádět cestu k němu, dále může být uveden v jiném adresáři – cestu k němu musíme pochopitelně uvést a dále může být na jiném webovém serveru. Příklady použití cest:
TIP: pokud chcete urychlit načítání www stránek, nevkládejte obrázky, které jsou umístněny na jiném webu než vašem – prohlížeč totiž musí tento server kontaktovat, čímž dochází ke zpoždění a může také nastat nepříjemná situace, že daný web, kde je umístněn obrázek, který požadujete zrovna neběží a obrázek by se vám tak ani nenačetl.
Parametry tagu IMG
Tag IMG má jako ostatní tagy spoustu doplňujících parametrů jako je například velikost obrázku, zarovnání, popisek apod.
Zarovnání – zarovnání obrázků vhledem k pozici textu se provádí parametrem ALIGN. Jeho hodnoty jsou uvedeny v tabulce:
Velikost obrázku – v tagu IMG můžete definovat velikost obrázku (tj. jeho výšku a jeho šířku v pixelech). Velikost obrázku definujeme následujícími parametry
Definice šířky a výšky obrázku není povinná, ale je silně doporučená – při načítání stránky se totiž obvykle objevuje první text a poté až samotné obrázky. Pokud definujete velikost obrázků, v textu stránky se objeví prázdné rámečky o rozměru definované velikosti, které značí, že zde bude vložen obrázek. Pokud tak nečiníte, stránka může být při načítání rozhozena a vše se spraví až poté, co se obrázek načte. Navíc, neuvedením velikosti obrázku v HTML stránce prodlužujete samotnou dobu načítání HTML stránky.
Co se týče poměrů šířky a výšky obrázku, vždy uvádějte v HTML skutečnou velikost obrázku, jinak bude obrázek pochopitelně deformován. HTML totiž umí obrázek zobrazit ve vámi požadovaných velikostech. Přizpůsobujte prostě velikost obrázku tomu, v jaké velikosti jej chcete použít a nikdy naopak!
Alternativní text – v tagu IMG můžete dále doplnit tag pro alternativní text. Jeho syntaxe je následující:
Alternativní text se zobrazuje v případě, že stránka obsahuje obrázky, které ještě nejsou načteny, dále v případě, že nad obrázkem podržíte kurzor myši a objeví se vám žlutý rámeček s tímto textem nebo v případě, že máte v prohlížeči vypnuto načítání obrázků nebo v případě, když se obrázek z libovolných důvodů nenačte. Alternativní popisky obrázku v každém případě používejte
Doporučuji u obrázku parametr BORDER pokaždé uvádět, i když žádné orámování nechcete – některé prohlížeče (např. NN) mají tendenci v případě neuvedení hodnoty BORDER vytvořit kolem obrázku neviditelné orámovaní o velikosti dvou pixelů! Barva orámování je obvykle černá, pokud je obrázek současně odkazem, obrázek je orámován modře.
Volný prostor u obrázků – poslední dva parametry, které se často používají slouží k určený volného prostoru okolo obrázků. Syntaxe těchto parametrů je následující:
Není možné definovat rozdílnou velikost prázdného prostoru na levé a pravé části obrázku, či rozdílnou velikost nad obrázkem a pod obrázkem. Tyto dva parametry nejsou povinné, většina prohlížečů dokáže obrázek od textu automaticky trošku odsadit.
Obrázky na www stránce jsou dnes neodmyslitelnou součástí webu. Definují se nepárovým tagem IMG. Povinné je uvádění velikosti obrázku a alternativní text, případně velikost orámování obrázku. Pokud má být obrázek obtékán textem, nezapomeňte definovat zarovnání obrázku parametrem ALIGN. Pokud definujete v IMG tagu velikost obrázku, dbejte na to, aby nastavené hodnoty odpovídaly skutečné velikost obrázku, pokud uvedete hodnoty jiné, obrázek bude na www stránce zkreslený. Pokud se vám zdá, že text je na obrázek příliš moc nalepen, použijte v IMG parametry VSPACE a HSPACE pro definici volného prostoru kolem obrázku. A nakonec – pamatujte, že stránky, které obsahují příliš mnoho obrázků (zvláště animovaných GIFů) nejenom, že nejsou hezké, ale také se dlouze načítají…
Mohlo by vás také zajímat
-
Nejlevnější VPS: To je nový Cloud Server Mini od ZonerCloud
4. června 2024 -
Jak se chránit před podvody na internetu – část 1
8. října 2024 -
Optimalizace a zlepšení výkonu kódu: tipy a triky
14. srpna 2023
Nejnovější
-
Jak rozšířit úložiště Macu za pětinovou cenu?
16. prosince 2024 -
Nové trendy v doménách pro osobní projekty – DIY, LIVING a LIFESTYLE
9. prosince 2024 -
Jak chránit webové stránky před Web/AI Scrapingem
27. listopadu 2024 -
Jaký monitor je nejlepší k novému Macu Mini?
25. listopadu 2024