Tvorba webu pro pokročilejší
Tento článek, který píšu jako referát do školy a zároveň ho chci použít na svých stránkách, chci zaměřit na mírně pokročilejší záležitosti ohledně tvorby webových stránek pomocí HTML nebo XHTML a CSS. Podobných článků už napsalo spoustu lepších odborníků než jsem já a také lépe, ale myslím, že zase tak neužitečný nebude. Minimálně právě jako referát do školy.
Nechci ale popisovat, jak celý kód funguje a jaké atributy, značky a další věci můžeme použít. Tento článek má být určen pro čtenáře, kteří s tím už nějakou zkušenost mají, ale chtěli by se dozvědět, jak by asi měli postupovat při tvorbě webu, aby se v této záležitosti posunuli o další krůček vpřed.
Postup při tvorbě webu
Nyní se pokusím popsat postup tvorby webu. Při tom se budu snažit upozornit na chyby, které dělají nejen začátečníci a také na věci, které by se měli dodržovat.
Oddělení obsahu od vzhledu
Nejdřív bych chtěl zmínit myšlenku oddělení obsahu webu od jeho vzhledu. Nabízí se otázka, proč to tak dělat. Je zde několik výhod. Předně můžeme jednoduše změnit design, aniž bychom zasahovali do obsahu webu. Tak se může i práce rozdělit mezi několik lidí. Někdo, kdo ví o čem webu bude a ví jak ho správně strukturovat, který nadpis má vyšší prioritu, co je zkratka, definice atd., ten napíše HTML nebo XHTML kód včetně jeho obsahu. A grafik zase napíše CSS kód. Toto ale není jediná výhoda oddělení obsahu od vzhledu.
Když navíc ještě máme CSS kód v samostatném souboru, který pak připojujeme ke všem HTML stránkám, značně se tím urychlí procházení celého webu, protože vzhled se načte jen na začátku.
Pokud bychom k určení toho jak má web vypadat použili zastaralých způsobů, tedy bychom jak na vzhled tak na obsah webu použili pouze HTML kód, museli bychom sáhnout např. ke značkám <font> nebo <center> a atributům border="", color="" a mnohým dalším, které jsou v podstatě dobré jenom na definici vzhledu. Tím by se značně zvětšil výsledný kód. Vezměme si situaci, kdy na webu máme třeba 50 oblastí, kde chceme nadefinovat řadu vlastností vzhledu. Každé tyto vlastnosti musíme definovat pro každou oblast. S použitím CSS se tyto oblasti označí třeba třídou a vlastnosti se pro tuto třídu definují pouze jednou. Pokud chceme třeba pro odstavce <p> nastavit nějaký typ písma, barvu a velikost, nemusíme to dělat pro každý odstavec, ale pouze všem značkám <p> nastavíme v CSS stejné vlastnosti typu, barvy a velikosti písma.
Další záležitosti týkající se oddělení obsahu od vzhledu zmíním v části článku, kde se budu zabývat sémantikou webu.
Sémantika
Teď, když víme, že máme všechny informace týkající se vhledu webu psát jenom CSS kódem, a to nejlépe v samostatném souboru, můžeme pokračovat dále.
Nejdříve ze všeho zapomeňme na celý vzhled webu. Soustřeďme se pouze na informace, které tam budeme dávat a na jejich strukturu. Každá informace je určitého typu a pro tyto typy informací jsou v HTML nějaké značky (neboli tagy). Jsou zde značky pro nadpisy, odstavce, seznamy, tabulky, obrázky, zkratky, citace, indexy, programové kódy a mnohé další. (Jestli chcete vědět jaké všechny tagy máme k dispozici a kdy je použít, podívejte se na tyto stránky.)
Ještě než začnete svoje informace (texty) rozdělovat a "naplňovat" do HTML značek, tak byste také měli prozatím zapomenout na značky <div> a <span>, protože tyto značky nedefinují, jaký typ informaci se v nich nachází. Jsou to značky neutrální a jejich uplatnění popíšu později. Poslední věc, kterou se zatím nemusíte zabývat, jsou atributy class="" a id="" (pokud je tedy nebudete používat k jinému účelu než ve spojitosti s CSS). Může se stát, že narazíte na nějaké informace, které prostě nebudete schopni zařadit do žádné značky. Pak je opravdu asi jedinou možností sáhnout k <div>u nebo <span>u, ale pamatujte, že jedna z nejhorších věcí je, když dáte do <div>u takový text, který by se hodil do některé jiné značky. Například, když napíšete toto: <div class="nadpis">Nadpis</div>.
Nejlepší kontrola toho, jestli jste všechny texty umístili do správných značek je ta, že od stránky odpojíte styly. Přitom musí být pořád jasné, jaký text co znamená. A tím se vracím k oddělení obsahu od vzhledu. Výhoda je, že prohlížeč použije svoje výchozí styly. Ty jsou jednoduché a jasně určují, že třeba nadpis <h1> má větší font než nějaké podnadpisy. Pokud chce uživatel z nějakého důvodu vypnout styly, stačí mu jenom odpojit CSS soubor, což umí většina moderních prohlížečů. Na starších počítačích se může projevit i rychlost vykreslování. Při správném sémantickém vytvoření stránek musí být i se základními styly jasné, co je jaká část webu zač. To je dobré i pro rozpoznávání u fulltextových vyhledávačů nebo u softwaru, který stránku čte. Protože by přečtení CSS stylů a jejich popsání bylo dost složité až nemožné, přečte se pouze, v jaké značce se určitý text nachází a z toho se pozná, jestli je to nadpis, odstavec, seznam nebo něco jiného.
Tabulkový layout
Značka <table> a všechny ostatní značky s touto spojené by se měli používat pouze pro data, která mají tabulkový charakter. To znamená, že jsou uspořádána do sloupců a řádků, a takto mezi sebou nějak logicky souvisí. Jedna z nejčastějších chyb je ta, když se tabulka používá k uspořádání a rozmístění jednotlivých částí webu. Vytvoří se například tabulka, kde se do levé buňky umístí menu a do pravé obsah webu. Toto je ještě ten nejlepší případ. Používají se mnohem složitější kombinace. To samozřejmě není dobré. Algoritmy pro vykreslení takto komplikovaných tabulek jsou o hodně složitější než při vykreslení jednoduché CSS konstrukce. Navíc, pokud se pokusíme vyrobit další, radikálně jiný, vzhled webu, založený na stejném HTML souboru, není to možné. Základní vzhled nám určuje tabulka, tedy kód, který má mít informativní charakter. A to takový, jak jsou jednotlivé informace v tabulkách mezi sebou provázány.
Příznivci tabulkového layoutu namítají, že v CSS nelze vytvořit to co s tabulkami. Mají pravdu, ale jenom částečně. V CSS je stále problém například u svislého zarovnání, ale na druhou stranu lze s CSS vytvořit to, co pomocí tabulek nejde. Hlavní problém je ale v něčem jiném.
Designéři, kteří používají tabulkový layout navrhují celý web špatně už od začátku. Je to tím, že jsou zvyklí na to, že třeba menu musí být stejně vysoké jako obsah stránky a pokud je něco vyšší, tak se tomu druhá část automaticky přizpůsobí. Pokud navrhneme stránku pomocí tabulky, kde do jedné buňky dáme menu a do druhé obsah, je takovéto chování automatické. Designéři, kteří přecházejí z tabulek na CSS se snaží toto chování napodobit i s CSS. To je ale problém. Menu, jakožto třeba seznam <ul> nijak nesouvisí s obsahem stránky. Proto se ani nemůže přizpůsobit její výšce a naopak. Máme tady tedy věc, která v CSS nejde udělat. Problém je ale v tom, proč by se menu mělo obsahu vůbec přizpůsobit. Nikdo nám to nepřikazuje a když bude menu vysoké podle toho, co obsahuje, bude to pořád vypadat pěkně. Jde o to, že z dob, kdy se tabulkový layout běžně používal, jsme zvyklí na to, že takhle stránky vypadali a snažíme se o to, aby tak vypadali i s CSS. Musíme ale začít při návrhu uvažovat odlišně.
Uspořádání HTML kódu
Teď když máme vytvořenou HTML nebo XHTML stránku, která je správně sémanticky napsaná, jsou v ní použity značky, které mají sémantický význam, tedy určují typ svého obsahu, můžeme pokračovat dále ke stylům. Chtěl bych ale ještě upozornit na malou věc. Stránky můžou být čteny i něčím jiným, než obyčejnými prohlížeči, které zobrazují i styly. Již jsem to zmínil - jedná se o fulltextové vyhledávače, čtečky atd. Pro toto je dobré, aby byl obsah stránky uspořádáván od nejdůležitějších informací, po ty méně důležité. Nejdříve tedy hlavní nadpis <h1> (ten by měl být na jedné stránce pouze jednou). Potom hlavní obsah (odstavce <p>, podnadpisy <h2> a další). Dále menu (<ul>, <ol>) a nakonec nějaké dodatkové informace. Jak to bude vypadat nakonec po připojení stylů můžeme upravit právě pomocí stylů. V HTML kódu bude menu úplně dole, ale pomocí CSS ho můžeme vizuálně posunout třeba zase úplně nahoru.
Styly
Nyní můžeme konečně vytvořit vzhled stránky. Napíšeme CSS soubor a až teď, podle potřeby, můžeme opatřit značky v souboru třídami (class="") a jedinečnými identifikátory (id=""). Tato "IDčka" musí být pro každý prvek unikátní. Pamatujme, že ale vše, co je v HTML souboru musí popisovat charakter informaci a ne vzhled. Nemůžeme tedy použít class="vlevo". Pokud bychom takovou třídu například použili pro menu a v CSS souboru pak této třídě nastavili pozici vlevo, nemuselo by to platit i pro jiný design. Bylo by hodně nevhodné, kdybychom u jiného stylu nastavovali třídě "vlevo" zarovnání doprava.
Dále můžeme podle potřeby vzhledu obalit naše sémantické značky a texty do nesémantických značek <div> a <span>. Značky jsou to neutrální a proto po odpojení stylu nebudou patrné. Při použití jiného vzhledu se třeba ani všechny nevyužijí, ale to nevadí, protože, jak už jsem řekl, jsou neutrální.
Standardy a validátor
Mezi tvůrci webů je jistě znám validátor organizace W3C. Ten vám zkontroluje, jestli jste stránku napsali správně. Mnozí si myslí, že pokud jeho stránky projdou tímto validátorem, tak jsou 100% v pořádku. Není to ale pravda. Hlavní věc, kterou validátor neumí zkontrolovat, je sémantika. Ta je velmi důležitá a musíme si ji hlídat sami.
Organizace W3C se zabývá vytvářením určitých standardů, které by měli tvorbu webu sjednotit. Nabízí jich několik. Máme tu několik verzí pro HTML a XHTML, některé jsou striktní jiné přechodové, ve kterých je tolerováno víc starších věcí. To, jakého jsou naše weby standardu určuje DTD (Document Type Definition). Něco jako odkaz na určitou definici se umísťuje na začátek dokumentu. Podle toho validátor zjistí, jak má stránku vůbec kontrolovat. Aby ale byla stránka 100% validní, musí vyhovovat standardu, který popisuje organizace W3C. Jenomže vše, co je v něm napsáno nejde pomocí DTD popsat. Tady je zásadní problém. Validátor se totiž řídí kódem DTD a tedy nemůže odhalit všechny chyby. Pokud vaše stránky validátorem neprojdou, můžete si být jisti, že je něco špatně. Pokud ale projdou, tak si tak jisti nebuďte. Každopádně vám validátor najde místa, kde jste třeba neukončili tag nebo vložili značku do nějaké, kde být nemůže.
Více se zmíním o standardech při porovnávání XHTML a HTML, což bude následovat dále.
Rozdíly mezi HTML a XHTML
Mnozí to ani neví, ale podle standardu W3C lze dělat s HTML (teď myslím opravdu HTML, ne XHTML) takové věci, že by snad ani nemohli být validní a přesto jsou správně. Například nemusíme uvádět značky <html> ani <head> ani <body>. Jsou nepovinné. Ani DTD nemusí být uvedeno.
Navíc se HTML může psát takovým způsobem, kdy si určité značky prohlížeč sám domyslí. Jedná se třeba o to, že neukončíte tag <li> u seznamů. Pokud se narazí na další <li>, tak je to chápáno jako konec předchozího a zároveň začátek nového <li>. Dále se nemusí ani ukončovat <p>. Konec nastane při použití značky, která se do <p> umístit nemůže. Jsou to všechny blokové značky, protože <p> muže obsahovat jenom řádkové a samozřejmě text. Sám je tag <p> ale blokový, takže se ukončí, podobně jako u <li>, použitím dalšího tagu <p>.
Narozdíl od toho, co popíšu teď, by se dalo o předchozím neuzavírání značek říct, že jsou docela známou záležitostí. Méně známé jsou ale zkrácené zápisy HTML. Nejlepší bude příklad: <značka/obsah značky/. Myslím že je to pochopitelné, podobně jako další zápis: <značka>obsah značky</>. Podobných věcí je v HTML více. (Jestli se chcete přesvědčit o tom, že jsou takovéto zápisy opravdu validní, tak se podívejte na blog Lukáše Havrlanta a prověřte ho validátorem.)
Vše co jsem teď popsal samozřejmě v XHTML nejde. Vysvětlím proč. Jestli znáte, a já teď budu předpokládat že znáte, jazyk XML, tak víte, že má pár jednoduchých a striktních pravidel. Každá značka musí být ukončena. Nelze mezi sebou značky křížit, pro prázdnou značku (<br></br>) máme zkrácený zápis, který z ní udělá nepárovou (<br/>) a tak dále. No a protože jazyk HTML hodně připomínal jazyk XML, rozhodlo se, že se udělá verze HTML, založená na syntaxi XML, která se jmenuje XHTML. Tímto se pomalu ale jistě dostáváme k rozdílům mezi XHTML a HTML.
Další rozdíl spočívá v tom, že je jazyk XML citlivý na velikost písmen. A protože jsou v DTD pro XHTML všechny značky definovány malými písmeny, musíme je i v kódu naší stránky psát malými písmeny.
U rozdílu v zápisu atributů se také vychází z pravidel XML. Hodnoty atributů musí být v uvozovkách, což u HTML není nutné. Dále si nemůže dovolit podobný zápis: <tag atribut>. Musí se zapsat takto: <tag atribut="atribut">. Pokud použijeme v atributu nějakou hodnotu, kterou si nevymýšlíme (jako např. u class=""), ale je pevně dána (align="center"), musí být malými písmeny.
Určitě jste už někdy v XHTML viděli: <![CDATA[...obsah...]]>. Pokud například v tagu <script> chceme použít znaky &, < nebo >, musí se tento obsah uzavřít právě do zmíněného "CDATA".
Problém u XHTML (vlastně u MSIE)
Nakonec musím zmínit jednu nepříjemnost, která dělá XHTML v dnešní době prakticky nepoužitelným. Pokud totiž chceme, aby nám náš XHTML kód prohlížeč vykreslil opravdu jako XHTML a ne jako HTML, včetně kontroly kódu, jak to dělá při zobrazování XML, musíme použít MIME typ pro XHML a to je application/xhtml+xml. Jenomže zatím nejpoužívanější prohlížeč MS Internet Explorer tento typ vůbec nezná, takže jediná možnost je použít text/html, stejně jako u HTML stránky a spokojit se s tím, že bude prohlížečem interpretována jako HTML. Tady je pak na místě otázka, proč to vůbec jako XHTML psát. Odpověď není, že je to pro to, že by bylo XHTML novější. XHTML je jenom taková odkloněná větev od HTML. HTML se pořád dělají další, moderní verze. Jediná možná odpověď je ta, že pak můžeme naše XHTML stránky používat v některých případech i jako XML kód. Software, který nějakým způsobem umí pracovat s XML, by naše stránky mohl bez problému přečíst a dále zpracovat.
Ještě něco na úplný konec
Nejsem na tyto záležitosti, které jsem právě popisoval, nějaký největší odborník. Jak už jsem psal na začátku, nejenom v České republice je hodně odborníků, kteří tomu rozumí mnohem víc než já a napsali o těchto věcech víc a také lépe. Jeden z nich je Lukáš Havrlant, jehož blog "A tak dále" bych zde chtěl uvést jako zdroj informací, ze kterého jsem občas při psaní čerpal.