Domů

CSE HTML Validator Standard 12

CSE HTML Validator Standard 12

CSE HTML Validator Standard 12 | Foto: CHIP

Chyby syntaxe, mrtvé linky, špatná pozice u vyhledávačů, překlepy v kódu – tomu všemu může být zabráněno ještě před vypuštěním vašeho webu na internet.

  • PLNÁ VERZE Uveřejněno v časopisu Chip 04/15 a v jeho digitální verzi, která umožňuje on-line distribuci softwaru – stažené programy je možné využít i u počítače bez DVD mechaniky.

box Program CSE HTML Validator pravděpodobně nebude zajímat nikoho, kdo nespravuje nebo neprogramuje weby. Je to jednoúčelový nástroj, který se hodí pro kontrolu webové stránky před jejím zveřejněním. Učesáním HTML kódu můžete nejen odstranit viditelné chyby, které budou vašim návštěvníkům znepříjemňovat život, ale také můžete zvýšit jeho „srozumitelnost“ pro internetové vyhledávače a tím si zajistit více návštěvníků vzhledem k lepšímu postavení ve vyhledávačích.

Na Chip DVD je připravený program CSE HTML Validator Standard Edition 12, který slouží k validaci webových stránek. Aktuální verze 15 umí navíc především pracovat s mobilním prostředím, nabízí kontrolu syntaxe JSON a manifestem cashe u HTML5. Standardní verze současné verze se prodává za přibližně 1400 Kč, program je také dostupný ve vyšších verzích Pro a Enterprise. Vyšší verze nabízí především tzv. Batch Wizzard, který usnadňuje práci s více soubory, a delší dobu trvání licence.

  • Jazyk: anglicky
  • OS: Win XP/Vista/7/8 (32/64 bit)
  • Registrace online
obr-01

Prostředí: Hlavní okno obklopené ikonami na horní a levé straně. Dole je pak okno zpráv.


Nejprve je třeba otevřít HTML dokument. Klikněte na »File | Open…«. Vyberte dokument a klikněte na »OK«. Je dobré začít od vyhledávání chyb (varování zatím vynecháme), abychom se mohli předně zaměřit na největší problémy. V menu vyberte »Validate | Errors only«. Dole se objeví tzv. okno chyb, kde uvidíte podrobně popsané problémy, které byly nalezeny v HTML dokumentu. Všimněte si také červeného zabarvení problémové části kódu v hlavním okně programu. Pokud kliknete ve spodní části na jakoukoliv chybovou hlášku, budete přesměrováni do textu kódu, kde ji můžete hned opravit. Jakmile budete s opravami hotoví, můžete stisknutím F6 validovat HTML dokument znovu a kochat se tím, jak vám chyby ubývají.

obr-02

Line: V této záložce se zobrazí hláška týkající se chyb na aktuálním řádku, kde máte kurzor.

Kontrola přístupnosti

Přístupnost webu (anglicky Accessibility) je ve stručnosti o splnění několika základních pravidel, které umožňují komukoliv jednoduchým způsobem získat z webu informace.

1) Přístupný web je plně použitelný i bez obrázků. Jde zde například o použití atributu ALT, dávajícímu obrázku popisek, který se zobrazí i s vypnutými obrázky. Pro hendikepované uživatele, kterým předčítá obsah webu čtečka, je tento atribut také velmi důležitý bez ALTu jim totiž k obrázkům nic neřekne.
2) Web je použitelný i s vypnutými styly. Uživatel by neměl být ochuzen o žádnou informaci v případě, že má styly vypnuté. Je zde důležitá logická struktura obsahu a kódu.
3) Web je přístupný i s vypnutým JavaScriptem a Flashem. Jakákoliv flashová stránka by měla mít i svoji HTML alternativu.

V záložce »Options« klikněte na »Validator Engine Options« a pak ještě jednou na »Options«. Dále zaškrtněte v záložce Accessibility zaškrtněte checkbox »Enable accessibility« checking a klikněte na »Save Now«. Poté se přepněte do záložky Section 508 a zaškrtněte »Enable US Section«, v záložce WCAG Check zaškrtněte první checkbox. Nyní se bude při validaci i přístupnost. Stiskněte tedy F6 pro opětovné spuštění validace a opravte případné chyby.

obr-03

Links: Kontrolu mrtvých odkazů můžete provést v záložce Links.

Obsáhlejší kontrola

Je čas pustit ke slovu kompletní kontrolu stránky. Vyberte tedy ze záložky Validate možnost »Full«. Po chvíli se objeví o poznání větší seznam problémů a zpráv. V záložce »Line« v dolní části obrazovky se zobrazí pouze zprávy týkající se aktuálního řádku, na kterém máte kurzor. Pokud kliknete na záložku »Grouped«, objeví se zprávy seskupené podle kategorií. Záložka »Accessibility« skrývá přístupnost, kterou už máme zkontrolovanou. Ve »Styles« se dozvíte formální zprávy a doporučení týkající se třeba barev. Záložka »Links« zase skrývá ověřování URL odkazů.

Nástroje pro zpřehlednění

HTML validátor nabízí několik užitečných nástrojů. Nejprve si vyzkoušíme pro zpřehlednění kódu převedení všech HTML značek (tagů) a všech atributů do velkých písmen. Klikněte na »Tools | Quick Uppercase Tags«. Zpětného procesu lze docílit funkcí »Tools Quick Lowercase Tags«.

Pokud si přejete přidat uvozovky k hodnotám atributů, i na to má tento validátor odpověď. V záložce »Tools« stačí vybrat »Quick Quote Attribute Values« a je hotovo. Poslední nástroj, o kterém se zmíníme, je tzv. extraktor textu. Jednouchým kliknutím můžete odstranit veškeré HTML tagy včetně jejich atributů a ze stránky vám tak zbude pouze text. To se hodí v případě, že vám v HTML dokumentu záleží skutečně jen na tom textu. Klikněte na »Tools«, následně vyberte »Quick Remove Tags/Extract Text«.

obr-04

Accessibility: Zde najdete tipy na zlepšení přístupnosti pro vaše návštěvníky.

Vytváření stránek

HTML validátor není jen o kontrole stránek, může velmi dobře posloužit také při jejich samotném psaní. Má totiž celkem slušnou databázi tagů a díky klávesovým zkratkám se k těm nejpoužívanějším můžete dostat hodně rychle. Kupříkladu CTRL+. (tečka) ukončí párový tag, který dosud nebyl ukončen. F4 zase zopakuje vložení naposledy použitého tagu. Veškeré tagy včetně zkratek, které vám mohou urychlit práci, najdete v záložce Tags.

CSE HTML Validátor nedokáže odstranit všechny chyby dokumentu na 100 %, nicméně umí detekovat spoustu chyb v syntaxi typu překlep, neukončený tag, chyby v atributech a jejich hodnotách, chybějící uvozovky atd. Rozhodně je lepší udělat alespoň nějakou kontrolu syntaxe než to hodit za hlavu úplně.