Základy HTML/XHTML

Info: obsah těchto stránek byl vytvořen v roce 2018, takže některé informace již jsou zastaralé, i když všeobecné základy jsou stále platné

Oddělovače, úprava obrázku na internet, obrázky a multimedia

Vodorovné oddělovače

Slouží k vizuálnímu oddělní jednotlivých částí dokumentu. Např. oddělení záhlaví a zápatí od vlastního obsahu.

Tag HR

Prohlížeč vloží vodorovný oddělovač na šířku stránky. Dojde k zalomení textu a nastavení zarovnávání textu se změní na základní (vlevo).

blok textu <hr> blok textu * tag se všemi použitelnými atributy <hr align="left" size="5" width="75%" noshade class="" style=""> * umístění čáry vzhledem ke stránce align="left" - vlevo align="right" - vpravo align="center" - doprostřed (implicitní) * výška čáry size="2" - výška 2 pixely (implicitně) size="5" - výška 5 pixelů * šířka stránky width="100%" - šířka čáry přes celou šířku okna (implicitně) (šířka se automaticky měcí s měnící se šířkou okna) width="75%" - šířka čáry je 75% šířky okna (šířka se automaticky měcí s měnící se šířkou okna) width="600" - šířka čáry je přesně 600 pixelů a nemění se se změnou šířky okna * přepínač zobrazení čáry noshade - pokud je použit čára je plochá (dvourozměrná) - implicitně je čára prostorová (trojrozměrná) * další atributy class - třída stylu style - přímo vložený styl color - jen IE, nastavení barvy čáry id - označení, použitelné jako odkaz ve skriptech title - popis oddílu událostní atributy typu on...

Vkládání obrázku do dokumentu

Obrázky zvyšují informační hodnotu dokumentu, zlepšují orientaci v dokumentu nebo usnadňují procházení dokumentu. Zvyšují také jeho přítažlivost pro čtenáře. Na opak, zvětšují přenášený objem dat a tím zpomalují načítání stránky prohlížečem.

Obrazové formáty

Standart jazyka nepředepisuje žádný "oficiální" formát, ale prohlížeče podporují jem některé - GIF, JPEG a PNG. Pro použití jiných formátů se musí použít speciální pomocná aplikace.

Formát GIF

GIF (Graphics Interchange Format) není závyslý na platformě, používá bezztrátovou kompresy a novější verze umožňuje transparentní (průhledné) pozadí, prokládané uložení a animaci.

Používá kódování, kde mapuje 8bitové hodnoty pixelů do tabulky barev. Takto dostaneme max. počet 256 barev na jeden obrázek. Tím, že se obrázek barevně zjednoduší, dojde k lepší kompresy, ale tím i ke zhoršení kvality obrazu. Proto formát GIF není vhodný pro fotorealistcké obrázky. Je vhodný na obrázky různých ikon, náčrtů nebo obrázků s textem.

Formát JPEG

Skupina JPEG (Join Photographic Experts Group) je standardizační organizace, která vyvinula formát pro kódování obrázků, známý pod zkratkou JPEG.

JPEG je nezávyslý na platformě, podporuje desetiticíce barev. Má speciální algoritmy pro komprimaci, které vedou k větším poměrům datové komprese. (Např. obrázek GIF o velikosti 200 KB se zmenší po převodu do JPEG na 30 KB). Vysoké kompresy je obětována určitá ztráta dat a tím i snížená kvalita obrázku. Díky nastavení komprese, je možné stupeň "ztrát" nastavit a tím dosáhnout toho, že většina lidí rozdíly nepostřehne.

JPEG je dobrý pro ukládání fotografií. Nehodí se pro obrázky s většímy jednobarevnými plochamy. Po kompresy zůstanou na těchto plochách stopy (mapy).

Formát PNG

Tento formát doporučuje používat konsorcium W3C. PNG (Portable Network Graphics) vznikl jako alternativa a reakce na problém s vlastnickými právy (UNISYS) k formátu GIF. Má obdobné vlastnosti, ale lepší komprimovatelnost, obrázky TRueColor a až 48bitovou hloubkou, obrázky s odstíny šedi s až 16bitovou hloubkou, rychlejší zobrazení prvního náhledu než GIF atd. Nevýhodou zatím je, že neumí animace.

Je vhodný pro použití obdobně jako GIF.

Jak urychlit stahování obrázků

v jednoduchosti je krása
optimalizujte velikost obrázků, nepoužívejte zbytečně velké obrázky (přes celou obrazovku ve 24bitových barvách), nenechávejte v obrázcích zbytečné prázné plochy, "kudrlinkové" okraje apod,
obrázky používejte opakovaně
důležité pro ikony a animace. Prohlížeč si ukládá komponenty stránky do cache a tyto data si může znova načíst, bez nutnosti spojení. Animace dělejte tak, že se mění jen část snímku a nepřekresluje se celé pozadí.
rozsáhlé dokumenty rozdělte
jedno pravidlo říká, že by se celý dokument i se všemi komponentami (obrázky a pod.) měl vejít do 50 kilobajtů, aby na něj uživatelé nemusely dlouho čekat. Proto větší dokument rozdělte na několik menších, propojených pomocí hypertextových odkazů.
velké obrázky izolujte
pokud potřebujete umístit velký obrázek (přes celou obrazovku ve 24bitových barvách), umístěte jej do samostatné stránky a na tuto stránku udělejte je odkaz s náhledem (menší rozměr téhož obrázku)
zadávejte rozměry obrázku
zadáním rozměrů obrázku do tagu IMG ušetříte některé operace prohlížeči a tím zrychlíte zobrazení. Pokud není rozměr zadán, prohlížeč obrázek stáhne, spočítá jeho rozměry a pak jej teprve zobrazí.

Tag IMG

Slouží k vložení obrázku a odkazu na něj.

blok textu <img> blok textu * tag se všemi použitelnými atributy <img src="obrazek.gif" align="left" border="0" alt="popis obrázku" height="50" width="100" hspace="10" vspace="10" class="" style=""> * umístění obrázku vzhledem k textu align="left" - vlevo (text obtéká) align="right" - vpravo (text obtéká) align="top" - navrchol (vertikální zarovnání) align="middle" - střed (vertikální zarovnání) align="bottom" - k patě (vertikální zarovnání) * okraj border="2" - okraj o šířce 2 pixlů (implicitně) * výška a šířka obrázku height="50" - výška obrázku 50 pixlů width="100" - šířka obrázku 100 pixlů * mezera mezi textem a obrázkem hspace="2" - horizontální mezera o šířce 2 pixlů (implicitní) vspace="2" - vertikální mezera o šířce 2 pixlů (implicitní) * alternatívní text, který se zobrazí pokud se neobrazí obrázek alt="text" - text max. 1024 znaků longdesc="text" - URL adresa dokumentu s popisem obrázku * obrázková mapa map - definuje obrázkovou mapu ismap - zpracování na straně serveru usemap - zpracování u klienta (v prohlížeči) <map name="jmeno_mapy"> <area shape="rect" coords="10,8,142,170" href="aaa.html"> <area shape="circle" coords="123,234,11" href="bbb.html"> <area shape="poly" coords="233,279,233,271,272,252,345,252,345,270,328,279" href="ccc.html"> </map> <img src="obr-mapa.jpg" border="0" width="800" height="370" alt="obr s mapou" hspace="10" vspace="10" usemap="#jmeno_mapy"> * další atributy class - třída stylu style - přímo vložený styl id - označení, použitelné jako odkaz ve skriptech title - popis událostní atributy typu on...

Barvy dokumentu a obrázky pozadí

Barva dokumentu v tagu BODY

<body bgcolor="#FFFFFF"> - s definicí barvy pozadí - #FFFFFF = bílá <body bgcolor="#FFFFFF" text="#000000"> - s definicí barvy pozadí - #FFFFFF = bílá a barvou písma - #000000 = černá <body background="obr_pozadi.gif"> - s definicí obrázku jako pozadí pozn.: pokud bude v obrázku, nějaká průhledná barva, bude vidět barva pozadí

Problémy s obrázky na pozadí

zvýšení doby načítání, dokument se nezobrazí do té doby, než se načte pozadí
obrázek pozadí zabírá místo v cache prohlížeče a tím může omezit uložení jiných obrázků
barvy obráku nemusí být na obrazovce uživatele k dispozici, tím dojde k jejich deneraci a může dojít i zhoršení čitelnosti textu
obrázek na pozadí musí prohlížeč vždy zobrazit, takže rolování dokumentu může být pomalejší
na obrazovce může být text čitelný, ale při tisku ne
některá písma mohou být na jiném počítači a prohlížeči špatně čitelná

Problémy s pozadím, textem a barvami odkazů

barva pozadí která se líbí vám, se nemusí líbit uživateli (může být pro něj příšerná)
někteří používají světlí text na tmavém pozadí, jiní (většina) tmavý text na světlém pozadí, proč to tedy nenechat na uživateli
někteří uživatelé mohou být částečně nebo úplně barvoslepý a tím se stane text pro ně nečitelný, nejhorší je kombinace zelá brva s červenou barvou pro odkazy
při použití zářivých barev nemusí být tyto k dispozici na monitoru uživatele, dojde k jejich nahrazení a může nastat případ, že barva textu i pozadí bude totožná (totéž platí u odkazu)
změnou barevného schéma u odkazů, trvá uživateli chvíli než si na ně zvykne a musí exporimentovat
pokud chcete užít barvy pozadí, textu apod. poraďte se s nějakým grafikem na správné kombinaci

Ostatní multimediální obsah

Web je otevřený a přístupný různým typům obsahu. Na jiný obsah se odkazujeme pomocí tagu <A>. Vybraný objekt prezentuje prohlížeč sám nebo pomocí plug-inů (zásuvných modulů) nebo nějaké externí aplikace.

Obrázky k příkladům