Krok 3 - zpracování grafického návrhu do HTML

5 kroků k novému webu

  1. Krok 1 - sestavení zadání, návrh struktury webu
  2. Krok 2 - vytvoření grafického návrhu
  3. Krok 3 - zpracování grafického návrhu do HTML
  4. Krok 4 - tvorba a ladění stránek
  5. Krok 5 - umístění stránek na internet

Schválený grafický návrh je nutno „oživit” do podoby funkční webové stránky, zapsané v jazyce HTML. To zní jednoduše, někdy to ale bývá tak trošku hlavolam.

Na konci této fáze budeme mít připravené „šablony”, připravené k následnému naplnění obsahem.

Neposlušné prohlížeče

Jednou z věcí, které je třeba při kódování stránky vyřešit, je vyladění vznikajících stránek tak, aby se správně zobrazovaly ve všech nejpoužívanějších prohlížečích webových stránek.

Prohlížeč je program, ve kterém si stránky otevíráte ke čtení. Nejrozšířenějším prohlížečem internetových stránek je v současné době Internet Explorer ve verzi 8.0 a 9.0, výjimečně i 6.0 nebo častěji 7.0. Nejspíš jste se však již setkali i s něterými jinými prohlížeči, které v poslední době získávají na popularitě, jako je například Google Chrome, Firefox či Opera.

V některých případech se bohužel může stát, že tu samou stránku zobrazí prohlížeče odlišným způsobem. Zvláště vyhlášená je v tomto směru rodinka různých verzí Internet Explorerů, šibalů, kteří dokáží vždy překvapit nějakým nečekaným kouskem a verze od verze své záludnosti mění, aby se webdesignéři nezačali náhodou nudit.

Pro zvídavé :-)

Vytvoření stránky podle grafického návrhu je činnost velmi zajímavá tím, že každý návrh je jiný a tak téměř vždy narazíte na nějaký zajímavý problém. V zásadě ale vždy probíhá tak, že se grafický návrh rozřeže na kousíčky a ty se pak spolu s texty použijí k vytvoření funkční stránky, zapsané pomocí značek jazyka HTML.

Kromě stránky samotné se zároveň vytváří i takzvaný stylopis, ve kterém je napsáno například to, jak mají být informace na stránce uspořádány, jaké obrázky mají mít na pozadí, jak mají být obarvené a zarovnané nadpisy, odstavce a všechny další prvky stránek – zkrátka úplně vše, co se týká vzhledu stránky.

Celé se to dá udělat mnoha způsoby – s nadsázkou se dá říci, že mnoha nepěknými a o něco méně správnými. Nepoměr je dán tím, že zbytečností a nesmyslů se dá do HTML kódu stránky umístit habaděj, ale správné řešení je co nejstručnější a zároveň se správným využitím HTML značek (tomu se odborně říká „sémantika”, pokud to někde uslyšíte), což má kupříkladu snadno představitelnou výhodu v rychlém načítání a také vyhledávačům se takové stránky líbí.

Není HTML jako HTML

Jazyk HTML, ve kterém se stránky píší, má stanoveny určité normy, kterým by měla stránka odpovídat. Něco je dovolené a něco zase zakázané.

Když někdo použije starší normu, nemusí to být vůbec nic špatného. I ve starší normě se dá psát kvalitní HTML kód a naopak - použití novější normy nemusí být zárukou, že kód bude dobrý, dokonce i když splňuje její formální požadavky.

Někdy se setkávám s tím, že autoři – zvláště ti méně zkušení - použijí nejnovější normu, hrdě se pochlubí, že jejich dílko ji splňuje, ale když se HTML příslušné stránky podíváte maličko na zoubek, tak zjistíte, že „sémantiku nechali doma” a použití – byť povolených značek – je naprosto zcestné.

Hokus pokus simsalabim

Zjistila jsem, že mnohé uživatele občas baví kontrolovat práci webdesignérů. Pokud mezi ně patříte, zkuste si zadat adresu stránky, která vás zajímá, do okénka „Address” na stránce http://validator.w3.org/. Zde je k dispozici tzv. validátor, který umí ověřit, nakolik kód stránky odpovídá použité normě. Web, na kterém je validátor umístěn, patří organizaci World Wide Web Consortium, která tyto normy tvoří.

Po zadání adresy stránky zmáčkněte „Check” a čekejte, co se bude dít. Může to chvíli trvat, ale pak na vás vyskočí buď červené okénko s nápisem „This page is not Valid” a nahoře na stránce najdete i počet chyb, nebo okénko zelené s nápisem „This Page Is Valid” a k tomu vždy název příslušné normy.

S hodnocením buďte ale velmi opatrní (!) – někdy může mít i jinak výborný kód několik málo nepodstatných chybiček a naopak – ani kód podle validátoru bezchybný, nemusí být zárukou skutečné kvality. Také u větších webů, jejichž obsah je upravován a doplňován pomocí redakčního systému, nelze stoprocentně zaručit čistotu kódu, který do něj uživatelé vkládají.

Nicméně pečlivý webdesignér by měl web předávat mimo jiné i zkontrolovaný validátorem a bez chyb.

Zpět - Krok 2
« vytvoření grafického návrhu

Dále - Krok 4
tvorba a ladění stránek »



Nejnovější reference