XHTML/CSS/JavaScript je magické zaklínadlo dnešního webdesignu. Jestliže se kolem webdesignu chvíli motáte, už jste na něj asi narazili. Naopak, pokud ještě nevíte, o co jde, právě jste na začátku článku, který by vám mohl poskytnout základní přehled.
Zejména XHTML je často bráno jako symbol „nového“ přístupu k webdesignu. Je to pro mnoho začátečníků zavádějící. Než se pustíme do samotných technologií, pojďme si tedy z předchozích dílů připomenout, že dnešní webdesign není jen XHTML. Moderní webdesignér totiž:
- vychází z technologií, dodržuje jejich specifikace a doporučení standardizačních organizací
- při návrhu webu ovšem používá prostředky – myslí na přístupnost, vyhledávače, informační architekturu, použitelnost
- technologie a prostředky mu ale jen slouží k tomu, aby web co nejvíce plnil svůj účel, a především se zaměřuje na uživatele webu
XHTML
Značkovací jazyk pro popis struktury obsahu hypertextového dokumentu. Jeho prostředky rozlišujeme význam jednotlivých prvků dokumentu. XHTML není nic složitého – vlastně jen přiřazujete textu jeho význam (například nadpis první úrovně, odstavec, seznam) stejně jako v jakémkoliv textovém editoru.
XHTML v jednoduchém příkladu:
Pro nadpis první úrovně například slouží značka <h1>. V XHTML jsou značky párové, proto také musíme označit, kde nadpis první úrovně končí -- </h1>. Je to úplně jednoduché:
<h1>Technologie současného webdesignu</h1>
XHTML (eXtensible HyperText Markup Language) se vyvinul z jazyka HTML. Stejně jako HTML je definován standardem, který stanovuje mezinárodní organizace W3C. Výrobci prohlížečů k základnímu HTML přidali mnoho různě užitečných rozšíření, nicméně standardní množina by měla fungovat všude a za všech okolností.
Poznámka: Dodržování standardů ještě stále bohužel nepatří mezi běžnou praxi. Až se budete učit XHTML, čiňte tak podle standardů. Když si na XHTML budete někoho najímat, vyžadujte, aby standardy dodržoval. Například proto, že hypertextovým dokumentem, který se jimi řídí, uděláte první krok k dobré přístupnosti a nalezitelnosti ve vyhledavačích.
Odkazy:
CSS
CSS (Cascading Style Sheets) nebo také kaskádové styly slouží pro popis vzhledu hypertextového dokumentu. Asi tak, jako když ve Wordu měníte formát stylu pro nadpis. Změníte barvu, font, jeho velikost nebo jej necháte vypsat kurzívou.
Vzhled celého webu tak můžete ovládat tím, že ke všem dokumentům připojíte jediný CSS soubor.
CSS v našem příkladu:
Chceme vypsat nadpis první úrovně červenou barvou, jinak ponecháme jeho vzhled tak, jak je přednastavený v prohlížeči:
h1 {
color: red;
}
Poznámka: Nezapomeňte, že k popisu vzhledu XHTML dokumentu slouží právě CSS. Předchůdci technologie XHTML umožňovali popis vzhledu speciálními značkami a vlastnostmi značek. Dnešní prohlížeče jsou zpětně kompatibilní, a proto podporují i tyto lotroviny. Jste-li webdesignéři, vyhněte se jim obloukem.
Odkazy:
JavaScript, další klientské skriptovací jazyky a DOM
Už víme, jak označkovat obsah dokumentu. Víme také, že dokumentu můžeme předepsat i vzhled. Klientské skriptovací jazyky ovlivňují chování prvků dokumentu a dodávají dokumentu interaktivitu. Nejčastěji se používají pro ošetřování formulářů – validaci formulářových políček, označení vadného vstupu atd.
DOM (Document Object Model) umožňuje klientským skriptovacím jazykům přístup ke konkrétním prvkům dokumentu.
Jaké jsou další skriptovací jazyky?
VBScript, JScript (oba prosazuje Microsoft), ECMA Script (doporučený standard, který sjednocuje rozdíly mezi JavaScriptem a JScriptem).
Proč klientské?
Neprovádějí se na straně serveru, pro změnu stavu na stránce tedy není nutné nové natažení dokumentu ze serveru.
Proč skriptovací?
Jsou to zjednodušené “dospělé” programovací jazyky – JavaScript vychází z C/Javy, VBScript zase z VisualBasicu.
Odkazy:
V jakém pořadí se technologie učit?
Ve stejném, jak je uvádí tento článek:
- XHTML – To byste měli jako webdesignéři mít v malíčku. Pokud provozujete vlastní web, tak byste měli znát alespoň základní značky. Pokud vám XHTML píše někdo jiný, vlastně nepotřebujete ani to, ale znát základy se vždy vyplatí.
- CSS – Až se budete rozhodovat, zda se o CSS více učit nebo ne, položte si otázku: Chci se webdesignu věnovat profesionálně? Odpověď na ni je stejná jako na otázku, zda se na tuto technologii vrhnout. Platíte-li webdesignéry, váš web bude o krok dál, budete-li po nich vyžadovat kombinaci XHTML/CSS.
- JavaScript – Stejně jako u CSS spíše pro profesionály. V tomto případě neuškodí dřívější znalost jiného programovacího jazyka.
V dalším článku se podíváme na nástroje pro webdesignéry a webmastery. Kromě jiného i na editory, které vám při psaní XHTML, CSS a skriptů pomohou.