aj vy mate ten pocit, ze zle weby okolo nas sa stale mnozia a mnozia? pokusim sa trochu poodhalit, preco je tomu tak, poukazat na to v com robia vyvojari najcastejsie chyby a poradit ako sa ich vystrihat.

tak, ako sluzba www aj jej nosne technologie, hlavne nam pojde o jazyk HTML, presli od svojho vzniku burlivym vyvojom. menili sa moznosti siete, menili sa potreby a tuzby pouzivatelov, a aby im vyhovel, menil sa jazyk HTML. W3C uvadzalo a stale uvadza nove a nove verzie a tvorcovia prehliadacov sa snazia drzat s tymto burlivym tempom krok.

poziadavky a tuzby uzivatelov siete rastli zrejme este rychlejsie ako reakcie W3C, a tak niektore prehliadace, v snahe vyhoviet uzivatelom (v konkurencnom boji o "najlepsi" browser), doplnali odporucania W3C o svoje vlastne prvky a technologie.

vysledok vsetci pozname - heterogenny svet prehliadacov, technologii a ich uzivetelov, ktoreho mame moznost byt ucastni.

mnohi ludia sa snazili vniest do tohto zmatku trochu poriadku zavadzanim pravidiel, pisanim rad, priruciek a celych knih o umeni web designu a o tom, ako sa co patri robit a co sa robit nepatri. bohuzial, aj tieto nazory sa mnohokrat roznia. co potom chudaci tvorcovia, snaziaci sa v tom vsetkom vyznat...

a tak sa casto stava, ze tvorcovia napisu stranku, pozru si ju v niekolkych najpouzivanejsich prehliadacoch (dnes uz zial mnohokrat iba v jednom), a ked vidia stranku dobre, podla svojich predstav, su spokojni.

najpouzivanejsi prehliadac MS IExplorer zasa dokaze chybny HTML subor pomerne dobre zrekonstruovat, a tak mnohe chyby zostanu neodhalene.

vysledkom pochopitelne je, ze mnoho takto vytvorenych stranok sa v alternativnych prehliadacoch vobec neda citat. ak naviac tvorca stavi na niektore nestandardne technologie, ako je napr. implementacia DOM (document object model) v IE a pomocou tychto technologii vytvori zakladne navigacne prvky (rozne dynamicke menu, objekty s dynamickym obsahom, client-side kontrola a odosielanie formularov scriptovacim jazykom, ...), nemusia byt tieto dolezite casti v niektorych prehliadacoch vobec funkcne, ci viditelne. uzivatel vidi casto inym prehliadacom iba zlomok z celeho webu. :(( sem mozno radit aj nevhodne pouzitie javovskych appletov, pripadne flash (na tvorbu navigacnych prvkov stranky). tieto technologie treba pouzivat uvazlivo a vzdy k nim poskytnut alternativne navigacne prvky (textove odkazy, alebo celu verziu webu pre alternativne prehliadace). ide nam predsa o dostupnost nasho webu kazdemu uzivatelovi, alebo nie?

tvorca takychto stranok dalej nuti pouzivatelov, ktori maju skutocny zaujem pozriet si tieto stranky, pouzit nim podporovany prehliadac, v mnohych pripadoch znovu - len IE. kedze je tento prehliadac viazany na platformu MS Windows, Apple MacOS, takymito strankami tvorcovia podporuju tieto platformy a znevyhodnuju ostatne, napomahaju firme microsoft udrziavat si monopolne postavenie na trhu. :(

takyto web bol este v nedavnej minulosti vopred odsudeny na to, aby ho uzivatelia zavrhli. v casoch zdravsej konkurencie prehliadacov jednoducho taketo stranky nemohli byt 'prvou triedou'. firmy dbali na to, aby bol ich web pozeratelny cimkolvek. zda sa vsak, ze toto uz dnes neplati. :-...

svoj web moze kazdy spristupnit uzivatelom vsetkych prehliadacov a platforiem velmi jednoducho. napise stranku tak, aby sa dala pozriet kazdym prehliadacom.

prvy krok k tomuto je platne HTML (pripadne StyleSheet), teda spravna syntax, podla odporucani W3C. dovod je prozaicky, ked napisete dokument spravne, kazdy dobry prehliadac, ktory podporuje vasu verziu pouzitej technologie (HTML, StyleSheet, ...), zobrazi vas dokument spravne. t.j. vas dokument by mal byt zobrazeny spravne aj novymi prehliadacmi, ktore v buducnosti vzniknu, ako aj novsimi verziami existujucich prehliadacov.

W3C za tymto ucelom prevadzkuje sluzbu validation service. klucove su hlavne dva produkty: html validator a css validator. pomocou nich moze kazdy lahko overit spravnost svojho kodu. dalsi uzitocny nastroj je html tidy, automaticky opravuje chyby, formatuje zdrojaky, atd.

sucasnym trendom je sprisnovanie syntaktickych obmedzeni. napr. zatial co HTML 4.01 povoluje koncove tagy niektorych elemntov vynechat ( P, LI, TD, ...), modernejsie XHTML 1.0 pozaduje aby boli v dokumente vsetky tagy korektne uzatvorene. W3C sa takto snazi znizovat komplexnost prehliadacov, urychlit ich vyvoj a ulahcit migraciu webu na rozlicne nove platformy (telefony, PDA, televizne prijimace, mikrovlnky, chladnicky, :) ...) moderny web by sa mal takychto trendov drzat, bez ohladu na to, ci je pouzita technologia benevolentna, alebo nie.

predtym, ako zacneme stranky vytvrat, musime sa rozhodnut, ake technologie na ich tvorbu pouzijeme. je potrebne vybrat take prostriedky, ktore su podporovane kazdym pouzivanym prehliadacom v jeho poslednej verzii. autor by nemal od uzivatelov ziadat, aby si koli jeho stranke nainstalovali iny prehliadac. moze od nich ziadat aby si prehliadac "upgradli" na novsiu verziu. dalsimi kriteriami su napr. cielova skupina uzivatelov, obsah pripravovaneho webu, ... pozor! pokial ide o verejne stranky, cielovou skupinou su vsetci uzivatelia internetu. osobne by som odporucal vybrat si XHTML 1.0, tento jazyk skutocne ma buducnost. ak chceme stranky spristupnit aj uzivatelom starsich prehliadacov, odporucam HTML 4.01. dalej odporucam pouzit StyleSheet. na jeho tvorbu sa dnes najlepsie hodi CSS, s trochou opatrnosti mozno dokonca pouzit level 2.

pisat web od zaciatku korektne je lahke. staci si zapametat par jednoduchych pravidiel, jeden by ich na prstoch ztaral. malinko tazsie je, ked sa rozhodneme "dat doporiadku" nekorektny web. aj ked aj tu castokrat staci malo zmien a pripravovany dokument je spravny. jedna sa prevazne o dokumenty, ktore su v podstate spravne, ale sem tam chyba povinny parameter, alebo uvodzovky...

na co sa najcastejsie zabuda, je uviest na zaciatku suboru document type declaration, teda informaciu o pouzitej verzii HTML a specifikovat pouzite kodovanie (znakovu sadu).

<!-- priklad 1                                          -->
<!-- doctype HTML 4.01, encoding: utf-8                 -->
<!-- ak nespecifikujete typ dokumentu (pripadne         -->
<!-- kodovanie), validator vyhlasi:
Warning: No Character Encoding detected! To assure correct
validation, processing, and display, it is important that
the character encoding is properly labeled.
Fatal Error:  no document type declaration

<!-- spravne by sa mal dokument zacinat napr. takto:    -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
  <TITLE>Title</TITLE>
  <META HTTP-EQUIV="Content-Type" 
        CONTENT="text/html; charset=utf-8"
  >  
</HEAD> 
<BODY>
  <-- ... telo dokumentu ... -->
</BODY>
</HTML>

HTML 4.0 zavadza pre element SCRIPT povinne atribut type. naproti tomu atribut language je oznaceny ako deprecated (naozaj len tazko hladat slovensky vyraz) a nemal by sa pouzivat. kedze zvyk je zelezna kosela, mnoho autorov tento fakt veselo ignoruje :( . taketo pocinanie ale nemozno tolerovat, pretoze z deprecated atributov (ktorych podpora u prehliadacov je dana specifikaciou) sa mozu v buducnosti stat obsolete atributy (ktorych podpora u prehliadacov nie je nijako zarucena).

<!-- priklad 2                                          -->
<!-- doctype: HTML 4.x Transitional                     -->
<!-- chybna syntax:                                     -->
<SCRIPT LANGUAGE="javascript" SRC="/main.js"></SCRIPT>
        
<!-- html validator vyhlasi:                            -->
Error: required attribute "TYPE" not specified
 
<!-- spravna syntax:                                    -->
<SCRIPT TYPE="text/javascript" SRC="/main.js"></SCRIPT>

rovnako od verzie HTML 4.0 musime povinne pomocou attributu ALT priradit kazdemu obrazku (element IMG) alternativny text. tento bud strucne popisuje, co na obrazku je alebo, ak ma obrazok navigacnu funkciu, mal by text opisat tuto funkciu (t.j. kam smeruje odkaz, ...). tato textova informacia sa potom zobrazuje namiesto obrazku, kym sa obrazok nestiahne, alebo ak ma uzivatel cisto textovy prehliadac, pripadne vypnute obrazky.

<!-- prikad 3                                           -->
<!-- doctype HTML 4.x Transitional                      -->
<!-- chybna syntax:                                     -->
<IMG SRC="lion.jpg">

<!-- html validator vyhlasi:                            -->
Error: required atribute "ALT" not specified

<!-- spravna syntax:                                    -->
<IMG SRC="lion.jpg" ALT="the king of animals">

hodnoty niektorych atributov (napr. ID, HTTP-EQUIV) musia byt v celom dokumente navzajom rozne, musia zacinat pismenom ([A-Za-z]), za ktorym mozu nasledovat pismena, cislice ([0-9]), a znaky "-", "_", ":" a ".", a su case-sensitive.

<!-- priklad 4                                          -->
<!-- doctype HTML 4.x Transitional                      -->
<!-- chybna syntax:                                     -->
<DIV ID="1">

<!-- html validator vyhlasi                             -->
Error: value of attribute "ID" must start with a letter,
not "1"

<!-- spravna syntax: (napriklad)                        -->
<DIV ID="d1">        

autori velmi casto zabudaju uzatvarat parove tagy:

<!-- priklad 5                                          -->
<!-- doctype HTML 4.x Transitional                      -->
<!-- ak sme napr. vytvorili tabulku, ale zabudli sme    -->
<!-- koncovy tag </TABLE> vipis validatora bude vyzerat --> 
<!-- zhruba takto:                                      -->
Line 244, column 5:
</DIV>
Error: "TABLE" not finished but containing element ended

Line 244, column 5:
</DIV>
Error: end tag for "TABLE" omitted; possible causes include
a missing end tag, improper nesting of elements, or use of
an element where it is not allowed

Line 233, column 0:
<TABLE CELLPADDING="0" CELLSPACING="0" WIDTH="100%">
Error: start tag was here

niektore (pomerne casto pouzivane) atributy elementu BODY nenajdeme v specifikacii HTML 4.0, HTML 3.2, ci v specifikacii HTML 2.0. okrem toho, od verzie HTML 4.0 su niektore atributy elementu BODY, ako aj niektore elementy (napr. FONT, BASEFONT), deprecated. ich funkciu plne preberaju (a v mnohom rozsiruju) styly.

<!-- priklad 6                                          -->
<!-- doctype HTML 4.x Transitional                      -->
<!-- chybna syntax:                                     -->
<BODY LEFTMARGIN="0" TOPMARGIN="0" MARGINHEIGHT="0">
        
<!-- html validator vyhlasi:                            -->
Error: there is no attribute "LEFTMARGIN" for this element
(in this HTML version)

<!-- spravna syntax:                                    -->
<BODY>

v HTML musi byt hodnota atributu v uvodzovkach, ak obsahuje ine znaky ako pismena, cisla, pomlcky ("-") a bodky ("."). v XHTML su uvodzovky povinne vzdy.

<!-- priklad 7                                          -->
<!-- doctype HTML 4.x Transitional                      -->
<!-- chybna sytax:                                      -->
<A HREF=#rabbit>bugs bunny</A>
        
<!-- html validator vyhlasi:                            -->
Error: an attribute value must be quoted if it contains
any other character than letters (A-Za-z), digits, hyphens
and periods, quote in doubt
        
<!-- sprava sytax:                                      -->
<A HREF="#rabbit">bugs bunny</A>

ano, XHTML je case-sensitive. nazvy elementov a atributov pozostavaju z malych pismeniek ([a-z]).

<!-- priklad 8                                          -->
<!-- doctype XHTML 1.0 Transitional                     -->
<!-- chyba syntax:                                      -->
<DIV CLASS="encapsulator">

<!-- validator vyhlasi:                                 -->
Error: element "DIV" is not defined in this HTML version

<!-- sprava sytax:                                      -->
<div class="encapsulator">

teraz nasleduje niekolko ukazok vaznejsich priestupkov (nech lahkost napravy je mierou vaznosti). uz som pisal (priklad 4), ze hodnoty atributov ID musia byt v celom dokumente navzajom rozne. IE umoznuje scriptovacim jazykom sikovne v cykle pristupovat k elementom s rovnakym ID. k viacerim elementom s roznym ID sa pristupuje v cykle horsie (neda sa to tak elegantne zapisat :)). a kedze lenivost je matka pokroku...

pri vnarani elementov sa treba drzat jednoducheho pravidla: inline element nemoze obsahovat block-level elemnent. v XHTML naviac nie je povolene prekryvanie (overlapping) elementov.

<!-- priklad 9                                          -->
<!-- doctype HTML 4.x Transitional                      -->
<!-- chybna syntax:                                     -->
<SPAN CLASS="address">address:
    <DIV CLASS="text-field">
        name: Lenon, John<BR>
        street: 7, Abbey Road<BR>
        city: Liverpool
    </DIV>
</SPAN>
        
<!-- chybovy vypis validatora:                          -->
Error: element "DIV" not allowed here; possible cause is
an in-line element containing block-level element

<!-- mozna naprava:                                     -->
<DIV CLASS="address">address:<BR>
    <SPAN CLASS="text-field">
        name: Lenon, John<BR>
        street: 7, Abbey Road<BR>
        city: Liverpool
    </SPAN>
</DIV>

IE tiez dovoluje vyvojarom pouzit vlastne (nove) elementy, atributy, (pripadne rozsirit konecny obor hodnot niektorych atributov o vlastne hodnoty) a vdychnut im "zivot" pomocou scriptov a stylov. takto vlastne IE umoznuje vyvojarom rozsirovat HTML mimo specifikacie o vlastne prvky. teoreticky sice je mozne vytvorit a pouzit vlastne DTD (document type definition), ale to sa vo vseobecnosti neodporuca. je to tak trochu znasilnovanie, je to dost drina a na podobne ucely sluzi (okrem ineho) XML. takze, bud pisat naozaj HTML 4.01, alebo pouzit XHTML a vyuzivat jeho rozsiritelnost a modularnost. ani tu vsak opatrnosti nikdy nie je dost. mali by sme vzdy zvazit, ci je rozsirenie potrebne, ci napr. neexistuje nejake uz definovane a pouzivane rozsirenie (alebo XML aplikacia), ktore by sa dalo pouzit. vyvoj okolo XML je totiz nesmierne rychly a burlivy. vznikaju nove a nove aplikacie ( MathML, SVG, SMIL, XForms, ...) a technologie (Namespaces, XPath, XML Schema, ...). mohlo by sa nam stat, ze vymyslime "koleso", alebo by sme sa mohli dostat do problemov s kompatibilitou.

<!-- priklad 10                                         -->
<!-- doctype HTML 4.x Transitional                      -->
<!-- chybna syntax:                                     -->
<IMG ID="img01"
     ALIGN="absmiddle" 
     SRC="leo34.jpg"
     MYNAME="lion" 
     MYCOMMENT="king of aminmals"
>

<!-- chybovy vypis validatora:                          -->
Line 13, column 21:
     ALIGN="absmiddle"
Error: value of attribute "ALIGN" cannot be "ABSMIDDLE";
must be one of "TOP", "MIDDLE", "BOTTOM", "LEFT", "RIGHT"

Line 15, column 12:
     MYNAME="lion"
Error: there is no attribute "MYNAME" for this element
(in this HTML version)

Line 16, column 15:
     MYCOMMENT="king of aminmals"
Error: there is no attribute "MYCOMMENT" for this element
(in this HTML version)

Line 17, column 0:
>
Error: required attribute "ALT" not specified

<!-- ak naozaj chceme mat nejakym sposobom zviazane     -->
<!-- nejake retazce s urcitym elementom na stranke,     -->
<!-- mozno to korektne urobit napr. takto:              -->
<IMG ID="img01"
     SRC="leo34.jpg"
     ALT="picture of the lion"
>
<SPAN ID="img01-name" CLASS="hidden">lion</SPAN>
<SPAN ID="img01-comment" CLASS="hidden">king of animals</SPAN>
<!-- pricom pomocou stylov mozno triedu hidden naozaj   -->
<!-- zneviditelnit (CSS: "display: none",               -->
<!-- "visibility: hidden")                              -->

ked si pozriete stranky televizie markiza v IE, budu sa vam mozno zdat efektne a prepracovane. ale skusali ste sa na ne pozriet niecim inym? ja som skusal. koniec koncov IE, ked zrovna nemusim, nepouzivam. kto by si chcel alternativnym prehliadacom precitat niektory clanok, ma smolu. a to som vyskusal operu, mozillu aj konqueror. stranky su totiz vyrazne "site" na IE. v casti, kde sa zobrazuju clanky, sa v inych prehliadacoch zabrazuje zaroven (cez ne) nejaky iny text, takze clanok sa vobec neda precitat.

stranky firmy microsoft su (necakane) vyrazne optimalizovane pre IE. mnohe navigacne prvky, ktore sa v IE dynamicky zobrazuju, nie su v inych prehliadacoch vobec viditelne. najhlavnejsie navigacne prvky nastastie viditelne su. pozitivom oproti strankam markizy je, ze dynamicky obsah sa nemiesa so samotnymi informaciami na stranke, tie sa teda daju precitat.

prikladom nevhodneho (client side) pouzitia javy je web ceskej firmy vertical sport. ak nemate java runtime environment nainstalovane, uvidite iba titulnu stranku. kedze autor neposkytol nahradne textove odkazy (namiesto appletov), nemozno sa k dalsim dokumentom vobec "doklikat". pouzitie appletov na vytvorenie odkazov reagujucich na udalost onMouseOver je pritom uplne neopodstatnene, pretoze mozno pouzit napr. CSS, alebo script. stava sa, ze sa autori pomocou appletov pokusaju vytvarat falosnu iluziu profesionality (pripadne bezpecia) - vid. prielom #17.

web firmy topsoft ma zasa intro vytvorene vo flashi, ktore presmeruje (onClick) prehliadac na hlavnu stranku. chyba tu textovy odkaz (skip, no flash, ...), ktory by umoznoval aj uzivatelom, ktori nemaju flash player nainstalovany, prezriet si samotny firemny web (postaveny na standardnych technologiach, s ktorymi si vacsina browsrov v pohode poradi).

nasledujuce weby mozu ist predchadzajucim skor prikladom. vsetky sa snazia publikovane informacie sprostredkovat rovnako vsetkym uzivatelom najroznejsich platforiem. kazdopadne, ani jeden z nich nema validne HTML ¹.

osobitne by som chcel upozornit na slovensky web poistovne generali, ktory osahuje dynamicke navigacne menu funkcne v IE, v konquerori, v mozille, v netscape aj v opere (ine som neskusal) :)). tak sa to ma robit (!) ...

nasleduje zoznam stranok organizacii a spolocnosti, ktore by podla mna mali ist, pokial ide o reprezentacny web, prikladom. aj ked su to vsetko perfektne weby a naozaj vidiet snahu o pristupnost a univerzalnost, ani jeden z nich nie je skutocne validny: netscape, newsforge, blackhole, linux.com, linux.sk, google, NASA, University of California, Berkeley, Stanford University, Harvard University, Univerzita Komenskeho, Slovenska Technicka Univerzita, Technicka Univerzita v Kosiciach, Univerzita Karlova, Ceske Vysoke Uceni Technicke

nasledujuce stranky vsetky validuju ¹. prve tri z nich zaroven tvoria "zoznam odporucanej literatury". fakt velmi poucne ...

World Wide Web Consortium ma prirodzene stranky podla svojich odporucani. da sa tu najst vela uzitocnych materialov. odporucam pravidelne sledovat.

Viewable with Any Browser je velmi poucna kampan o tom, ako a preco pisat weby tak, aby vyzerali v kazdom prehliadaci rovnako. obsahuje velmi dobru prirucku pre vyvojarov.

~cac6982 - demonstracia na temu "preco ano, CSS". vrele odporucam vsetkym, co sa nehanbia aj nadalej tuto technologiu prehliadat. (mozno vidiet to istu stranku v 19 roznych grafickych prevedeniach, zmena je len v CSS)

aj dalsie stranky su prikladom toho, ze dobry web sa da napisat korektne. kto neveri nech tam bezi. prial by som si aby som nabuduce nemusel taketo stranky hladat googlom :(

Opera Sofrware, the K desktop environment, The Apache Software Foundation, Messachussets Institute of Technology, University of Cambridge, University of Oxford, The University of Western Australia, LyX, XEmacs, idontsmoke.co.uk

dufam, ze moja evangelizacia nebola marna :). sam som uzivatelom prehliadaca opera. problemy, o ktorych som pisal, casto pocitujem. dufam, ze casom sa situacia zlepsi a web budeme moct prehliadat aj takymi exotickymi prehliadacmi, ako je napr. vznikajuci X-Smiles.

¹) tento clanok reflektuje stav zaciatkom marca 2002.