Hlavní navigace

Kontrolovat, kontrolovat a kontrolovat...

Michal Krause

... takto by se dalo parafrázovat rčení jednoho známého myslitele, o jehož těle se momentálně dohaduje půl Ruska. V mojí úpravě se však toto úsloví přesně hodí na práci webdesignéra. Kontrolovat je třeba HTML kód a rovněž také platnost odkazů. Dnes se mrkneme na to, jak si poradit s chybami v HTML, pakliže je tvoříme na nějaké platformě umožňující běh Perlu.

Weblint

Weblint je HTML validátor, tedy takový kontrolor, který se snaží odhalit syntaktické i sémantické chyby v HTML kódu. Vlastně dělá to, co třeba kompilátor (resp. preprocesor) céčkového nebo jiného zdrojového kódu. HTML se (bohužel?) nekompiluje a tak na rozdíl od céčka mohou být vypuštěny do světa pěkné zrůdnosti (tedy v céčku samozřejmě také, ale rozhodně v menší míře). A právě weblint je tady proto, abyste se mohli vyhnout chybám, které snadno do kódu naseká člověk a ještě snáze leckterý WYSIWYG editor.

Weblint vznikl vlastně už v roce 1994 a celkem slibně se vyvíjel. O jeho oblíbenosti svědčí i to, že byl zahrnut do online validátoru W3 konsorcia. Ovšem už s HTML 3.2 nebyly výsledky jeho snažení úplně optimální a s nástupem verze 4.0 se stal prakticky nepoužitelným. Jeho vývoj ustal v září roku 1997. Naštěstí pro nás se ovšem nedávno probral z letargie a opět se rozjíždí. Aktuální verze 1.9.3 (nebo-li 2.0pre) podporuje HTML 4.0 a je zajímavé, že jádro weblintu je realizováno pomocí perlového modulu, takže může být integrováno do jiných aplikací (s distribucí získáte verzi pro příkazovou řádku a CGI verzi).
Do budoucna se počítá s některými zajímavými vylepšeními, jako například kontrola nefunkčních odkazů, kontrola kaskádových stylů a hlavně (na což se těším nejvíce) kontrola, zda požadované tagy odpovídají definici DOCTYPE.

A teď již přistupme k testu, který jsem pro weblint připravil. Udělal jsem testovací stránku, do níž jsem napěchoval následující oblíbené chyby:

  • Chybí tag DOCTYPE
  • Stránka není uzavřena do tagu HTML
  • Definice BODY určuje barvu pozadí, nenastavuje však barvu textu a odkazů (pozn.: toto není přímo chyba, ale může to způsobit nečitelnost stránky, neboť barva textu se tak obvykle převezme z výchozího nastavení prohlížeče)
  • Tag TABLE obsahuje nesmyslný parametr VALIGN
  • První řádek tabulky je definován s nesmyslným parametrem BGCOLOR, který navíc nemá hodnotu uzavřenou do uvozovek, ačkoliv obsahuje speciální znaky
  • Buňka s obsahem B2 nemá hodnotu parametru BGCOLOR uzavřenou do uvozovek, přestože obsahuje speciální znaky
  • Tagy TD a TR v prvním řádku nejsou ukončeny (pozn.: ani být nemusí, je to tak trochu chyták)
  • V textu se vyskytují speciální znaky & a "
  • V textu je entita neukončená středníkem
  • Tag H1 je ukončen tagem H2
  • V textu jsou překříženy tagy B a FONT (B..FONT../B…/FONT)
  • Další tag B není ukončen
  • Obrázek bez definice ALTu

A co na to weblint?

line 1: <HEAD> must immediately follow <HTML>
line 1: outer tags should be <HTML> .. </HTML>.
line 5: should set all or none of BGCOLOR, TEXT, LINK, ALINK, VLINK attributes on BODY element
line 19: unknown attribute „VALIGN“ for element <TABLE>.
line 21: value for attribute BGCOLOR (#00A000) of element TR should be quoted (i.e. BGCOLOR=„#00A000“)
line 25: value for attribute BGCOLOR (#FF0000) of element TD should be quoted (i.e. BGCOLOR=„#FF0000“)
line 33: malformed heading – open tag is <H1>, but closing is </H2>
line 34: </B> on line 34 seems to overlap <FONT>, opened on line 34.
line 37: the ALT attribute is required for the <IMG> element.
line 37: IMG does not have ALT text defined.
line 38: no closing </B> seen for <B> on line 35.

První chybu (absence DOCTYPE) weblint ignoruje, naopak na chybějící tag HTML a přebývající parametr VALIGN upozorňuje. Správně poukazuje na neuzavření hodnoty parametru BGCOLOR do uvozovek, ovšem ignoruje, že u tagu TR tento parametr neexistuje. Nenechal se nachytat neuzavřeným TD a TR, ale neupozornil na použití speciálních znaků v textu ani neuzavřenou entitu. Výborně informuje o kombinaci tagů H1 a /H2, hned je zřejmé, v čem je problém, což platí i na informaci o překřížení tagů. Na chybějící ALT u obrázku upozorňuje hned dvakrát (asi mu to připadá důležité :) a neopomenul ani neuzavřený tag B.
Mile mě překvapilo i to, že weblint obsahuje kontrolu na chybu v nastavení barev v BODY (BGCOLOR bez TEXT, LINK, …).

Pokud navíc použijeme parametr pedantic, je weblint ještě důkladnější, ale to už obvykle není nutné. Je ovšem užitečné, že v pedantic režimu weblint upozorňuje například na to, že přidání parametrů WIDTH a HEIGHT tagu IMG může zrychlit zobrazení stránky v prohlížeči.

Weblint nezapomíná ani na možnost automatizované kontroly. V režimu tzv. „terse messages“ je jeho výstup snadno zpracovatelný například ve skriptech apod. Například chybějící ALT je vyjádřen takto:

./index.html:38:img-alt

Weblint je podle mě skvělý nástroj a i když má ještě v detekci chyb určité mezery, ty nejobvyklejší odhaluje s jistotou a informuje o nich velice přehledně, čímž u mě výrazně stoupl v ceně. Doporučuji jej používat – ušetříte si tak často ruční hledání toho, „proč to zase nefunguje jak má“.

V dohledné době se k tomuto tématu ještě vrátíme, tentokrát se ovšem budeme prát s hledáním nefunkčních odkazů…

Našli jste v článku chybu?

22. 7. 1999 12:46

Hynek Med (neregistrovaný)

Dost dobry je taky http://www.websitegarage.com/.

Lupa.cz: Kdo pochopí vtip, může jít do ČT vyvíjet weby

Kdo pochopí vtip, může jít do ČT vyvíjet weby

Vitalia.cz: 9 největších mýtů o mase

9 největších mýtů o mase

Vitalia.cz: Jsou čajové sáčky toxické?

Jsou čajové sáčky toxické?

DigiZone.cz: „Black Friday 2016“: závěrečné zhodnocení

„Black Friday 2016“: závěrečné zhodnocení

Podnikatel.cz: Přehledná titulka, průvodci, responzivita

Přehledná titulka, průvodci, responzivita

Lupa.cz: Insolvenční řízení kvůli cookies? Vítejte v ČR

Insolvenční řízení kvůli cookies? Vítejte v ČR

Podnikatel.cz: Udávání a účtenková loterie, hloupá komedie

Udávání a účtenková loterie, hloupá komedie

Měšec.cz: Zdravotní a sociální pojištění 2017: Připlatíte

Zdravotní a sociální pojištění 2017: Připlatíte

DigiZone.cz: Recenze Westworld: zavraždit a...

Recenze Westworld: zavraždit a...

Vitalia.cz: Mondelez stahuje rizikovou čokoládu Milka

Mondelez stahuje rizikovou čokoládu Milka

Podnikatel.cz: K EET. Štamgast už peníze na stole nenechá

K EET. Štamgast už peníze na stole nenechá

Měšec.cz: U levneELEKTRO.cz už reklamaci nevyřídíte

U levneELEKTRO.cz už reklamaci nevyřídíte

Vitalia.cz: Paštiky plné masa ho zatím neuživí

Paštiky plné masa ho zatím neuživí

Vitalia.cz: Jmenuje se Janina a žije bez cukru

Jmenuje se Janina a žije bez cukru

120na80.cz: Co všechno ovlivňuje ženskou plodnost?

Co všechno ovlivňuje ženskou plodnost?

120na80.cz: Pánové, pečujte o svoje přirození a prostatu

Pánové, pečujte o svoje přirození a prostatu

Podnikatel.cz: Podnikatelům dorazí varování od BSA

Podnikatelům dorazí varování od BSA

Vitalia.cz: I církev dnes vyrábí potraviny

I církev dnes vyrábí potraviny

120na80.cz: Na ucho teplý, nebo studený obklad?

Na ucho teplý, nebo studený obklad?

Podnikatel.cz: Chaos u EET pokračuje. Jsou tu další návrhy

Chaos u EET pokračuje. Jsou tu další návrhy