Jak udělat dobrý web (za použití HTML a CSS)

Zdroj: SOOM.cz [ISSN 1804-7270]
Autor: XRAsa
Datum: 9.8.2006
Hodnocení/Hlasovalo: 1.75/4

Jak udělat web a ne paskvil.

Úvod:

Tento článek není pro úplné začátečníky je to spíše pro lidi, kteří už něco znají, ale ještě neví jak to všechno správně použít.

Základ:

Takže než začneme cokoliv dělat je potřeba mít nějaký dobrý textový editor, ve kterém můžeme psát kód. Já osobně používám PSPad, protože se mi zdá nejlepší. Pokud děláte stránky v poznámkovém bloku tak nikdy nesmíte zapomenout na doctype a meta tagy (hlavně informaci o kódování). Často opomíjenou věcí je taky tag title, který by rozhodně neměl na jakékoliv stránce chybět. V hlavičce, by také měl být tag link, který bude odkazovat na váš externí CSS soubor.

Čeho se vyvarovat:

Při tvorbě webu se rozhodně vyvarujte tagů jako: <center> <b> <i> atp., protože v dnešní době existuje věc, které se říká CSS a proto všechny tyto věci nahraďte definováním CSS vlastností.

Co by nemělo chybět na dobrém webu:

To, že uděláte validní web neznamená, že je dobrý. Na dobrém webu musí být jisté tagy, aby se stránka zobrazila i lidem se starými prohlížeči, které ještě neznají CSS a také lidem, kteří jsou sluchově postižení a musí používat hlasovou čtečku. Webu, který tyto tagy obsahuje se říká sémantický. Mezi tyto tagy patří: <p> který definuje odstavec, <ul> definuje seznam (většinou navigační menu), nadpisy <h1 – hx>. Tohle je pár těch nejdůležitějších pokud je na svých stránkách máte, můžete říct, že vaše stránka je sémantická.

Navigace:

Při tvorbě navigace, využijte seznamů, o kterých píšu výše. Při tvorbě navigačního menu se vyvarujte použití tlačítek za pomocí obrázků, protože v případě, že bude mít uživatel vyplé obrázky tak vaše navigační menu neuvidí a nebude mít možnost jakéhokoliv pohybu na vašem webu. Pokud chcete mít z nějakého důvodu obrázková tlačítka tak jen za použití CSS vlastností pozadí daného tlačítka kde vložíte odkaz na váš obrázek. Když děláte navigační menu je vhodné udělat nějaký hover efekt, ale nepřehánějte to moc.

Layout:

Velmi mě udivuje, že v dnešní době stále mnoho lidí dělá tabulkové layouty. Tabulkový layout v dnešní době je ta největší prasárna ze všech. Tabulky totiž neslouží na dělání layoutu, ale jsou na tabulkové data (nečekaně). Proto když děláte pro své stránky layout tak jen za pomocí CSS. CSS dávejte vždy do externího souboru!!!!!!!! Při tvorbě layoutu pamatujte na pravidlo čím méně obrázků tím lépe (myslete na ty co je mají vyplé).

Optimalizace:

Když máte web splňující všechny tyto podmínky máte vyhráno? Ne nemáte. Bohužel na světě je celkem dost prohlížečů a ne všechny zobrazují všechno stejně. Především s tím má problémy IE. Proto než vpustíte do světa váš web zkontrolujte ho ve všech prohlížečích jestli všude vypadá stejně. Pokud ne projeďte jak CSS tak stránku samotnou validátorem. Pokud najde validátor chybu tak jí opravte. Pokud problém přetrvává musíte zkoušet a zkoušet co by mohlo být špatně. Pokud nic nepomáhá použijte CSS Hack.

CSS hack:

CSS hack je takový „podvod“ díky kterému můžeme dát každému prohlížeči zvlášť informaci o tom jak se má daná věc zobrazit. Nejčastěji se používají IE hacky pro prohlížeč Internet Explorer, který má nejčastěji potíže. Toto řešení však použijte až jako poslední možnost!

No to je asi vše. Pokud jsem však na něco zapomněl omlouvám se. Pokud máte nějaké otázky tak se ptejte.