Technologie současného webdesignu

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.

Diskuze (53) Další článek: Nová verze ovladačů pro grafické karty ATI

Témata článku: Software, Technika, Programování, HTML Editor, Vzhled, Zjednodušený příklad, Technolog, Stejný prvek, Doporučené pořadí, Dnešní prohlížeč, Dnešní standard, První krok


Určitě si přečtěte

Hledá se způsob, jak uložit elektřinu. Možná pomohou obří gravitační baterie

Hledá se způsob, jak uložit elektřinu. Možná pomohou obří gravitační baterie

** Jak uložit elektřinu z fotovoltaiky a větrných turbín ** Pomohou třeba staré autobaterie, nebo setrvačníky ** A pak tu jsou bizarní gravitační akumulátory velikosti mrakodrapu

Jakub Čížek | 250

Nejlepší příslušenství k počítači. Tipy na osvědčené klávesnice, tiskárny, routery…

Nejlepší příslušenství k počítači. Tipy na osvědčené klávesnice, tiskárny, routery…

** Tipy na klávesnice, myši, routery, tiskárny, sluchátka a další věci k počítačům ** Poradíme, s jakými produkty neuděláte chybu ** Vybíráme jak příslušenství na běžnou práci, tak na hraní her

David Polesný | 20

Hesla jsou zlo. Hackeři napáchali tolik škody právě proto, že vůbec existují

Hesla jsou zlo. Hackeři napáchali tolik škody právě proto, že vůbec existují

** Nikdo si je nepamatuje ** Žádné není zcela bezpečné ** Nejlepší by bylo je prostě zrušit

Jakub Čížek | 64

10 mýtů a polopravd o bateriích, kterým možná ještě věříte

10 mýtů a polopravd o bateriích, kterým možná ještě věříte

** Kolem baterií a akumulátorů koluje řada mýtů, nepravd a polopravd ** Dnes vám devět z nich zkusíme vyvrátit na základě faktů ** Většina z nich totiž neplatí pro moderní lithiové baterie

Karel Kilián, David Polesný | 99

Co je TikTok: Svérázná sociální síť chytla mladé uživatele, už jich má už 1,5 miliardy

Co je TikTok: Svérázná sociální síť chytla mladé uživatele, už jich má už 1,5 miliardy

** Sociální síť TikTok získala stamiliony uživatelů a stále roste ** Jaký obsah na ní najdete a co můžete v jejím rámci čekat? ** Je to zábava pro mladé, nebo platforma pro úchyláky?

Karel Kilián | 34


Aktuální číslo časopisu Computer

Megatest: 20 powerbank s USB-C

Test: mobily do 3 500 Kč

Radíme s výběrem routeru

Tipy na nejlepší vánoční dárky