Vitajte v prvej časti mojej HTML školy, určenej špeciálne pre môjho brata. Dnes sa dostaneme k prvému HTML cvičeniu, ale ešte pred tým spômeniem nejaké tipy, ktoré sa budú hodiť nielen k cvičeniu, ale ku kódovaniu webov všeobecne.
Otestuj to všade
Pri tvorbe webu je veľmi dôležité, aby web stránka vyzerala všade takmer rovnako. Síce teraz sa zameriame len na počítače (mobily, tablety… riešiť nebudeme), ale aj to je už celkom pekná škála rôznych možností. Napríklad rôzne OS (Windows, Mac OS, GNU/Linux…), ale hlavne rôzne prehliadače. Vo všetkých cvičeniach sa budeme snažiť o jedno. Aby web vyzeral rovnako v IE, Firefoxe, Google Chrome a Opere. Rovno poviem, že najväčší problém bude IE, keďže je to zastaralý a bugový bordel. Web budeme testovať v rôznych verziách IE, čiže odporúčam, aby ste si naištalovali IETester (len pre Windows), vďaka ktorému budete môcť otestovať web na rôznych verziách IE. My sa zameriame na IE7, IE8 a poprípade IE9.
CSS – zresetuj to!
Keďže vytváraný web budeme testovať v rôznych browseroch, tak je dobré aby ste vedeli, že každý browser má iné prednastavené hodnoty. Napríklad čo sa týka rôznych vzdialeností jednotlivých elementov, takisto aj veľkosti písma a nastavení fontov, ale asi aj farby odkazov… Preto je dobré ako prvé všetky tieto hodnoty nastaviť manuálne všade rovnako, aby sa nesôr nevyskytol nejaký problém, že vo Chrome bude web vyzerať ok, ale v IE bude úplne rozhádzaný.
A na toto nebudeme vymýšlať niečo čo je vymyslené, ale môžeme na to použiť jednu z nasledujúcich možností:
reset.css – overená klasika, dokonca s novou aktualizáciou pre HTML5. Použil som to už veľ krát a nikdy som nemal problém.
normalize.css – pravdupovediac, toto je pre mňa novinka a ešte som to nikde nepoužil. Ale čo som sa dočítal, tak hlavný rozdiel medzi reset.css a týmto je, že v reset.css sú všetky vzdialenosti nastavené na nulu, všetky veľkosti písma sú rovnaké… kdežto pri normalize.css už máme prednastavené formátovanie odkazov, odstavcov… veľkosť písma pre nadpisy, farbu odkazov a všetko možné.
To čo použijete nechám na Vás. Pri reset.css si všetko potrebné budete potrebovať nastaviť sami. Pri normalize.css už toho budete mať dosť, prednastaveného, ale aj tak sa pravdepodobne nesôr nevyhnete nejakým zmenám.
A ešte aby som nezabudol. Je jedno čo si vyberiete, ale daný štýl použite vo web stránke ako prvý. To znamená, že buď si skopírujte CSS kód pred Váš vlastný CSS kód, alebo jednoducho vložte daný css súbor do <head> sekcie ako prvý. To ako vkladať do stránky CSS ste sa už samozrejme naučili tu.
Lorem ipsum
Používajte lorem ipsum. Je to text, ktorý sa kedysi dávno používal v tlačiarenstve na otestovanie zarovnania… (niesom typograf, neviem ako tie veci pomenovať ;). Avšak hodí sa nám aj teraz o 500 rokov neskôr na otestovanie rozloženia web stránky. Na prvý pohľad to vyzerá ako prirodzený text, čo sa o náhodných úderoch do klávesnice nedá povedať.
Prvé zadanie
A konečne sme sa dostali k prvému zadaniu. Vytvorte web stránku presne podľa grafického zadania.
Súbory na stiahnutie:
Tipy (nielen) k zadaniu
- Vždy robte pixel perfect dizajn. To znamená, že pri vytvorenej HTML stránke budú všetky obrázky, vzdialenosti… zobrazené na pixel presne podľa zadania
- Ak Vám nie je niečo jasné, tak si vždy vyžiadajte dodefinovanie zadania. Nie je nič horšie ako robiť niečo podľa seba a zistíte, že nakonieco to chcel klient ináč. Je to strata času.
- Najprv si spravte HTML kód a potom k nemu pridávajte CSS.
- Robte naraz len jednu vec a plne sa na ňu sústredte. Ak Vás pri tom niečo napadne, tak si to zapíšte a pokračujte v tom čo ste robili. Multitasking Vás pripravý o čas.
- Horizontálne centrovanie textu: text-align: center;
- Horizontálne centrovanie celého bloku (<div>): margin-left: auto; margin-right: auto;
- Keď potrebujete niečo od seba vertikálne oddeliť. Napríklad v našom prípade jednotlivé časti stránky (hlavička, obsah, pätička), alebo odstavce textu, tak si definujte spodný odstup vrchného elementu (margin-bottom: 20px;). Ak by ste pre jeden element používaly odstup z vrchu, pre ďalší zo spodu… tak za chvíľu z toho budete mať pekný bordel.
- CSS Box Model
Deadline (pre brata ;): V stredu chcem vidieť prvú funkčnú verziu webu. Ak niečo nie je jasné, ozvi sa.
Pridaj komentár