HTML a kaskádové styly

HTML nejsou jediné soubory, které souvisí s webem. Zde je přehled těch nejběžnějších ostatních.

Kaskádové styly (soubory CSS)

Definují vzhled stránky.

Možná jste si v kapitole Jak na WWW všimli, že HTML stránka je sama o sobě dosti graficky chudá (viz příklad ještě jednou). Každý prohlížeč přiřadí každému prvku HTML stránky jeho výchozí vzhled. Kaskádové styly dokáží tento vzhled změnit dle přání autora stránky. Viz kapitola CSS.

Grafické soubory (soubory JPG, GIF, PNG, SVG)

Obrázky na internetu můžete najít v několika formátech:

• JPEG (též JPG): rastrový obrázek (bitmapa), která je pro snížení velikosti komprimována. Použitá komprese je ztrátová (neboli, původní nekomprimovaný obrázek nelze z komprimovaného obnovit bez ztráty informace). Vtip je v tom, že lidské oko nedokáže rozlišit malé změny v barvě, a tak se místo několika blízkých barev uloží do souboru jen jejich "průměr". Tento formát je ideální pro fotografie, naopak vůbec se nehodí pro grafické prvky.
• GIF: též rastrový komprimovaný formát, jehož komprimace je bezztrátová. Funguje na principu, že velké plochy jedné barvy se ukládají v souboru jen jednou (místo, abyste sdělili ke každému pixelu jeho barvu, sdělujete, že tuto barvu mají uvedené pixely stejnou.) Vhodný pro grafické prvky stránky (tlačítka, pozadí, ikony). Dnes se od jeho používání ustupuje ve prospěch formátu PNG.
• PNG: moderní grafický formát kombinující výhody obou předchozích, navíc přidává některé vlastnosti navíc (např. průhlednost, přechody, alfa kanály, apod.). Komprimace může být ztrátová i bezztrátová. Na fotografie se asi nebude používat nikdy (JPEG je i zde lepší, zejména z hlediska velikosti souborů), ale jinde se dosti významně prosazuje. Zejména Internet Explorer (až do verze 6) však některé pokročilé vlastnosti tohoto formátu nedokáží využít a stránky zobrazují chybně.
• SVG: vektorový formát založený na XML. Vektorový obrázek je definován pomocí geometrických tvarů (křivek a ploch), nikoliv pomocí vlastností pixelů, a tedy neztrácí kvalitu při zvětšování či zmenšování. Na web se vlastně tak hodí více než rastrové formáty GIF či PNG. Jeho nízké rozšíření je však způsobeno tím, že jeho implementace v nejrozšířenějším prohlížeči (Internet Exploreru) i v dalších je přinejmenším zatím problematická.
• ICO: ikonka webu, která se zobrazuje před adresou. Aby fungovala v Internet Exploreru, musí se jmenovat favicon.ico, být umístěna v kořeni webu (což zde na EF nejde, protože tam nemáte přístup), a stránka umístěna v oblíbených položkách. Pro ostatní prohlížeče ji stačí propojit s webem pomocí následujícího meta elementu:

  <link rel="Shortcut icon" href="favicon.ico" type="image/x-icon" /" 

  Ikonka má mít velikost 16x16 pixelů, jiné velikosti postrádají smysl. (Případně multiformát ICO, tj. soubor obsahující dvě verze ikony, jedna ve velikosti 16x16 bodů a v 16 barvách a druhá ve velikosti 32x32 bodů v 256 barvách.)

Jiné grafické formáty se na webu používají spíše výjimečně a například takový formát BMP (bitmapa Windows) se na web nehodí vůbec.

Úkol: najděte nebo vytvořte ikonku a obrázky různých formátů a vyzkoušejte jejich zobrazování různými prohlížeči.

Soubory skriptů

Skripty jsou regulérní programové kódy, které dokáží z obyčejného prohlížeče vyrobit téměř plnohodnotnou aplikaci, reagující na různé vstupy uživatele a generující konkrétní výstupy podle jeho požadavků (říká se tomu též dynamické HTML). Pro používání skriptů by měl člověk ovládat základy programování.

• JavaScript (JS) je skript vykonávaný na straně klienta, tj. v prohlížeči. Používá se pro leccos (e-shopy, elektronické bankovnictví, ...), je však závislý na konkrétním prohlížeči a nefunguje všude, navíc existuje několik jeho nekompatibilních verzí. Skripty mají za úkol měnit již zobrazenou HTML stránku podle požadavků, které skript obdrží.
• PHP je skriptovací jazyk, který se (narozdíl od JavaScriptu) vykonává na serveru, tj. není závislý na konkrétním prostředí prohlížeče. Používá se leckde, např. na zpravodajských portálech a blozích. Výstupem skriptu bývá zpravidla HTML stránka, ale nemusí tomu tak být vždy.
• ASP je přímý konkurent PHP a liší se jen v technických možnostech, princip je stejný.

Objekty

• Flash animace (SWF): populární způsob vytváření multimediálních prezentací na webu. Flashové animace například využívá populární server YouTube pro přehrávání videa.
• Java applety: jsou malé aplikace uvnitř webové stránky. Dříve byly poměrně populární, dnes jsou již na ústupu.
• Zvuky a videa: podporují je jen některé prohlížeče, zpravidla každý jinak a podpora jednotlivých multimediálních formátů se liší. Čím dál, tím více se pro tyto prvky používají flashové animace.