Atvirųjų standartų vartotojo vadovas/Svetainės atitikimo atviriesiems standartams testavimas ir taisymas

Šis skyrius yra skirtas interneto svetainių kūrėjams bei savivaldybių informacinių sistemų padalinių darbuotojams, atsakingiems už Interneto svetaines. Šios dalies tikslas – suteikti informacijos, kaip sukurti ir palaikyti standartus atitinkančią interneto svetainę. Šioje dalyje daroma prielaida, kad skaitytojas yra susipažinęs su HTML ir CSS pagrindais.

Bendros sąvokos

HTML (HyperText Markup Language) – hiperteksto dokumentų aprašymo kalba. HTML yra vienas iš svarbiausių žiniatinklio atvirųjų standartų.

XHTML (The Extensible HyperText Markup Language) tai HTML kalbos variantas, pagrįstas atitikimu XML kalbos reikalavimams. XHTML dokumentus galima apdoroti daugybe egzistuojančių įrankių, skirtų darbui su duomenimis XML formatu. Iš XHTML pašalintos nereikalingos HTML dalys, įdiegtas papildomas funkcionalumas (tobulesnis formų veikimas). XML (Extensible Markup Language) – išplečiama dokumentų aprašymo kalba. XML – tai formatas, leidžiantis struktūrizuotu tekstiniu pavidalu aprašyti duomenis.

CSS (Cascading Style Sheets) – pakopinių stilių schemos. CSS leidžia tiksliai aprašyti HTML dokumentų išvaizdą bei išdėstymą.

Svetainė, tinklapis – vienai temai skirti, turintys bendrą temą HTML dokumentai.

WWW (World Wide Web) – žiniatinklis, hiperteksto dokumentų sistema internete.

W3C (World Wide Web Consortium) – tarptautinė organizacija, kurianti WWW standartus.

HTML standartų istorija

Nuo HTML specifikacijų kūrimo pradžios buvo išleisti šie HTML kalbos standartai:

• HTML 2.0 (http://www.ietf.org/rfc/rfc1866.txt) — (RFC 1866) 1995-09-22
• HTML 3.2 (http://www.w3.org/TR/REC-html32) — 1997-01-14
• HTML 4.0 (http://www.w3.org/TR/REC-html40-971218/) — 1997-12-18
• HTML 4.01 (http://www.w3.org/TR/html401) — 1999-12-24

HTML 1.0 neturi oficialios specifikacijos. Kuomet jis buvo sukurtas, buvo keletas neformalių HTML standartų. 1993 m. buvo pradėtas vieno bendro standarto kūrimas. Sukurta kalba buvo pavadinta HTML 2.0, norint atskirti ją nuo neoficialių „standartų“.

HTML 3.0 buvo pasiūlytas kaip standartas 1995 m. kovą įkurtos W3C organizacijos. HTML 3.0 siūlė daugybę naujovių, pavyzdžiui, lentelės, automatiškai apgaubiantis objektus tekstas, sudėtingų matematinių objektų atvaizdavimas. Tačiau HTML 3.0 buvo per sudėtingas, jo nepalaikė to meto naršyklės. HTML 3.1 niekada nebuvo oficialiai pasiūlytas kaip standartas. Standartu tapo kompromisinis HTML 3.2, atsisakęs daug naujovių ir apėmęs daugelį naršyklėms „Netscape“ ir „Mosaic“ specifinių elementų. HTML 3.0 siūlytas matematinių simbolių palaikymas buvo integruotas atskirame standarte MathML (http://www.w3.org/Math/).

Į HTML 4.0 taip pat buvo įtraukta naršyklėms specifinių elementų, tačiau buvo nutarta išgryninti HTML kaip standartą ir dauguma šių elementų tapo nerekomenduojamais.

Šiandien situacija yra tokia, daugiau HTML standarto versijų nebus kuriama, nes šiuo metu yra tobulinama XHTML kalba, kuri yra paremta XML formatu.

Keturi HTML elementų tipai

HTML dokumentus sudarantys elementai gali būti išskirti į šias grupes:

1.Struktūriniai elementai. Nusako teksto paskirtį. Pavyzdžiui antraštė (angl. heading)

  <h1>Sveiki</h1>

2.Prezentaciniai elementai. Nusako teksto išvaizdą, neatsižvelgiant į teksto paskirtį. Pavyzdžiui, pusjuodis tekstas (angl. bold), žymimas taip: tekstas. Dabar siūloma prezentacinių elementų atsisakyti ir naudoti CSS.

3.Nuorodos. Aprašo nuorodas į kitą dokumentą. Pavyzdžiui, žymė

  <a href=“http://www.w3c.org“>W3C</a>

sukurs tekstą „W3C“, kurį spragtelėjus naršyklė bus nukreipiama į www.w3c.org tinklalapį.

4.Specialieji elementai. Aprašo įvairius objektus, pavyzdžiui, mygtukus bei sąrašus.

Stilius ir turinys

Dabartinės HTML versijos siūlo atsisakyti prezentacinių elementų naudojimo. HTML dokumente turėtų būti žymima tik struktūra, o išvaizda nurodoma naudojant CSS. HTML 4.01 Strict ir XHTML specifikacijose panaikintos <font>, <b>, <i> žymės.

Visą prezentacija palikus CSS, o HTML naudojant tik struktūrai aprašyti, svetainė atitiks standartus be papildomų pastangų, nes nebus naudojama neleistinų žymių bei atributų.

Pagrindinės svetainės kūrimo taisyklės

HTML pagrindai

HTML dokumentą sudaro tekstas, suskirstytas žymėmis. Žymės (angl. tag), kitaip vadinamos elementais, išskiriamos simboliais „<“ ir „>“. Žymės nurodo jomis išskirto teksto paskirtį dokumento struktūroje. HTML dokumentą sudaro dokumento tipas, antraštė ir turinys, o dokumento struktūros pavyzdį matote 1 paveikslėlyje:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Dokumento pavadinimas</title>
<meta http-equiv="Content-Type" 
      content="text/html; charset=windows-1257">
</head>

<body>
</body>
</html>

Dokumento tipas. Pirmoji žymė pavyzdyje 1 nurodo HTML dokumento tipą. Dokumento tipas nurodo, kokias dokumento apdorojimo taisykles turėtų naudoti naršyklė. Dokumento tipo praleidimas – labai dažna klaida. Jei jūsų HTML dokumente jo trūksta – įrašykite jį. Jei naudojate XHTML dokumento tipą, šis sakinys atrodys taip:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">.

Galiojančių dokumentų tipų sąrašą galite rasti adresu http://www.w3.org/QA/2002/04/valid-dtd-list.html. Kiekvienas HTML dokumentas prasideda žyme <html> ir baigiasi žyme</html>.

Antraštė. Antraštėje tarp žymių <head></head> nurodomas dokumento pavadinimas, koduotė, CSS stilius, aprašymas, raktiniai žodžiai paieškos sistemoms, JavaScript scenarijai (rekomenduojame jų vengti arba naudoti tik paprastiems dalykams).

HTML specifikacija reikalauja nurodyti dokumento pavadinimą. Jis turi tiksliai nusakyti turinį, bet nebūti per ilgas. Dokumento pavadinimas rašomas taip: <title>Dokumento pavadinimas</title>. Šis pavadinimas bus matomas naršyklės lango antraštėje.

Antra labai dažnai pasitaikanti klaida – nenurodyta dokumento koduotė. Koduotę nurodyti būtina! Koduotė parodo, kokios kalbos simbolius mes naudosime ir kokiu būdu jie užkoduoti. Lietuvių kalbai naudojame Windows-1257 arba ISO-8859-13 koduotę. Jei norime viename dokumente naudoti kelių kalbų simbolius, naudojame universalią UTF-8 koduotę.

Turinys. Tarp <body></body> žymių rašomas dokumento turinys.

Dažnai pasitaikančios HTML klaidos

- Viena dažniausiai pasitaikančių klaidų – nenurodytas dokumento tipas. Jei jūsų HTML dokumente jo trūksta – įrašykite jį. Jei naudojate XHTML dokumento tipą, šis sakinys atrodys taip: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">. Galiojančių dokumentų tipų sąrašą galite rasti adresu http://www.w3.org/QA/2002/04/valid-dtd-list.html.

- Kita gana dažna klaida – nenurodyta koduotė. Koduotę nurodyti būtina! Koduotė parodo, kokios kalbos simbolius mes naudosime ir kokiu būdu jie užkoduoti.

- <img> žymėje praleistas alt=”” atributas. Šiuolaikinio dizaino puslapiuose dažnai sunku apsieiti be paveikslėlių, tačiau kai kurios naršyklės yra tekstinės, todėl jų atvaizduoti negali. Dėl šios priežasties W3C standartai reikalauja alt=”” atributo, kuriame įrašomas tekstas, rodomas vietoje paveikslėlio; jei paveikslėlis nesvarbus, alt=”” atributą galime palikti tuščią.

- Lentelėse naudojamas atributas height=””, nors W3C standartuose toks lentelių atributas neaprašytas. Kaip alternatyvą galima naudoti CSS height: ; atributą.

- HTML kalboje & yra specialusis simbolis, naudojamas kitiems simboliams užrašyti naudojant jų simbolinius pavadinimus arba kodus. Pavyzdžiui, vienguba kabutė gali būti užrašyta kaip ", o raidė „A“ gali būti užrašoma kaip A. Labai dažnai pasitaiko programuotojų klaida, kai PHP ar kituose scenarijuose generuojamos nuorodos, kuriose naudojamas nepakeistas “&” simbolis. Jis turėtų būti keičiamas simbolių seka &.

- Naudojant XHTML neretai pamirštama uždaryti pavienes žymes; teisinga paveiksliuko žymė turėtų atrodyti taip: <img src=”” width=”” height=”” alt=”” />.

- „Macromedia Flash“ sugeneruotas HTML kodas neatitinka W3C standartų, todėl naudodami „Flash“ savo tinklapyje gausite daugybę klaidų. Siūlome atsisakyti Flash arba jį naudoti tik jei sugebate sutvarkyti „Flash“ sugeneruotą kodą. Apie tai daugiau informacijos rasite adresu http://www.alistapart.com/articles/flashsatay/.

Svetainių testavimo atitikimo standartams procedūros

HTML atitikimą standartams galima patikrinti laisvai prieinamu HTML tikrintuvu, kurio adresas internete yra http://validator.w3.org/. Taip pat turėtumėte patikrinti ir CSS taisyklingumą (jei naudojate CSS). Tai galite atlikti šiuo adresu: http://jigsaw.w3.org/css-validator/.

Toliau pažingsniui atliksime tikrinimo procedūrą.

1 žingsnis. Pasileidę naršyklę adreso laike įvedame http://validator.w3.org/. Tikrinimo aplinkoje turime du pasirinkimus: tikrinti svetainę nurodytu adresu (Validate by URL) arba tikrinti HTML dokumentą, esantį Jūsų kompiuteryje (Validate by File Upload). Kaip pavyzdį patikrinsime Alytaus savivaldybės svetainę.

2 žingsnis. Pateikiama informacija apie tikrintą dokumentą. Antraštėje nurodytas dokumento tipas, koduotė, kiek yra neatitikimo specifikacijoms klaidų.

3 žingsnis. Žemiau matome išvardintas visas klaidas. Nurodoma, kurioje eilutėje rasta klaida ir šalia kiekvienos klaidos pateikiamas trumpas jos paaiškinimas.

CSS tikrinimas analogiškas, todėl jo neaprašinėsime. Tiesiog pirmame tikrinimo žingsnyje naršyklėje įveskite adresą http://jigsaw.w3.org/css-validator/. Paminėsime tik tai, jog CSS tikrinime yra papildoma funkcija, leidžianti tikrinti CSS kodą tiesiogiai įrašant jį į formą (Validate by direct input).

Sukurtos svetainės taisymas atitikimui standartams užtikrinti

Pagal aukščiau aprašytą pavyzdį atliekame tikrinimą (šį kartą tikrinsime savo dokumentą, t.y. naudosime Validate by File Upload). Spragtelime „Browse“, išsirenkame savo dokumentą, tada spaudžiame „Check“.

Toliau viskas vyksta pagal aukščiau esantį aprašymą. W3C tikrinimo paslauga trumpai paaiškins kiekvieną klaidą bei parodys eilutės, kurioje ji yra, numerį. Taip galėsite atsidarę svetainę savo mėgiamoje teksto rengyklėje nesunkiai surasti bei ištaisyti klaidas.

Geriausias patarimas svetainės kūrimo metu – kiekvieną kartą pridėjus ar pakeitus elementą tikrinti puslapį http://validator.w3.org/. Taip taupysite savo laiką bei sukurta svetainė be papildomų rūpesčių atitiks standartus.

Šiame skyriuje aprašyti metodai netinka taisyti serverio dinamiškai generuojamiems puslapiams, sukurtiems PHP, SSI, ASP, JSP ar panašiomis priemonėmis. Tokie puslapiai nesaugomi serveryje tuo pavidalu, kuriuo pateikiami naudotojams, tačiau kaskart sukonstruojami įterpiant puslapio turinio elementus į HTML dokumento šabloną. Norint pasiekti tokių generuotų dokumentų atitikimą standartams, reikia redaguoti šabloną bei užtikrinti, kad jame talpinamos dalys taip pat atitinka HTML specifikacijas. Deja, negalime pateikti konkrečių instrukcijų, kaip tai daroma, nes taisymo būdas labai priklauso nuo serveryje naudojamos programinės įrangos. Visgi visi šiame vadove pateikti principai pritaikomi ir tokioms svetainėms.

Tinklalapio redagavimas programa „Nvu“

Jei savo svetainei kurti ieškote grafinio įrankio ir nenorite rašyti HTML kodo, rekomenduojame HTML rengyklę „Nvu“ (http://www.nvu.com). Jos generuojamas kodas atitinka HTML specifikacijas, taigi nereikia taisyti kodo rankiniu būdu. Jei jūsų serveris palaiko WebDAV ar FTP protokolus, savo svetainę galėsite redaguoti tiesiogiai, atsisiųsdami iš jos dokumentus, pataisydami ir publikuodami.

„Nvu“ leidžia kurti dokumentus tiek grafiniame režime (WYSIWIG), tiek redaguojant HTML kodą. Jos bendras vaizdas parodytas 7 pav. Kairėje lango pusėje matote svetainių tvarkyklę, kurioje galite pasirinkti tinklalapį ar projektą, o dešinėje pusėje yra redaguojamo dokumento langas. Pasirenkant lango apačioje esančias korteles galima pasirinkti vieną iš dokumento vaizdų: įprasto redagavimo, redagavimo rodant žymes (pavaizduotas 7 pav.), HTML kodo redagavimo bei tinklalapio peržiūros.

Jei naudojate paprastas HTML bylas bei jūsų serveris palaiko WebDAV protokolą, „Nvu“ programa galite įsikelti savo tinklalapį, pateikti jį HTML tikrintuvui ir išsaugoti rezultatą savo svetainėje. Norėdami tai padaryti, išsirinkite File→Open Web Location... meniu punktą ir įrašykite taisomo tinklalapio adresą. Tada pasirinkite Tools→Validate HTML. Dokumentas bus pateiktas HTML tikrintuvui. Gavę tikrinimo rezultatus atsiverskite HTML kodo kortelę (Source), suraskite klaidingas eilutes ir jas pataisykite. Tikrinimo rezultatus matysite atskirame lange, taigi galėsite pataisyti surastas klaidas.

Pataisytą puslapį galite išsiųsti į serverį pasirinkę File→Publish meniu punktą. Programa jūsų paprašys įvesti savo naudotojo vardą ir slaptažodį rašymo prieigai serveryje. Publikavę puslapį galite jį vėl pateikti HTML tikrintuvui, kad įsitikintumėte, jog visos klaidos pataisytos.

Tinklalapio redagavimas programa „Mozilla Composer“

„Mozilla Composer“ lange pasirinkite meniu punktą View→HTML Source, suraskite netinkamai sugeneruotą eilutę ir pagal pateiktą klaidos diagnozę ištaisykite. Norėdami matyti įprastą grafinį dokumento vaizdą, pasirinkite View→Normal Edit Mode. Kuriant svetaines šia HTML rengykle rankinių kodo pakeitimų nereikės daryti, nes jos generuojamas HTML kodas atitinka standartus.

Tinklalapio redagavimas programa „FrontPage“

„Microsoft FrontPage“ programoje pasirinkite View→HTML meniu punktą. Atsidariusiame lange suraskite netinkamą eilutę ir ją pataisykite.

Šiuo įrankiu naudotis nerekomenduojame, nes jo generuojamas HTML kodas neatitinka standartų.

Tinklalapio redagavimas naudojantis bet kokiu teksto redaktoriumi

Tinklalapius galima taisyti bei kurti nenaudojant specialios programinės įrangos. Tam užtenka ir paprasto teksto redaktoriaus, pvz., „Notepad“. Čia jau nebematysite HTML dokumento redagavimui įprasto vaizdo, bus matomos tik HTML žymės. Pagal parodytą klaidos pranešimą suraskite atitinkamą vietą ir ją pataisykite. Labiau patyrusiems svetainių kūrėjams, dirbantiems „MS Windows“ operacinėje sistemoje, siūlome pabandyti standartus atitinkantį HTML redaktorių „HTML Kit“. Jį galite rasti adresu: http://www.chami.com/html-kit/.