Alguses oli HTML. HTML on keel, millega kirjeldatakse infot veebilehel (inglise keeles Hypertext Markup Language). See keel on väga lihtne, kui inglise keelest midagi mõigatakse, sest HTML on tegelikult üks kari ingliskeelseid sõnu või nendest sõnadest tuletatud tähekombinatsioone.
Igal sellisel sõnal või tähekombinatsioonil on ette määratud käitumine — ta on kas ploki- (block) või reaelement (inline). Plokielemendi käitumine on ülbe: ta algab ja lõpeb uuelt realt ja venib täpselt nii laiaks, kui element, mille sees ta on (kui ta ei ole millegi sees, on ta terve ekraani laiune), sundides enda naabrid uuele reale. Reaelement on aga selline vaikne, võtab täpselt nii palju ruumi, kui temal tarvis, ei suru enda naabreid uuele reale ega midagi.
Selle käitumise järgi enamik inimesi elemente lahterdabki — kui vaja, et midagi algaks ja lõpeks uuelt realt (näiteks pealkiri), siis kasutatakse plokielemente, muidu aga kasutatakse rea omi. Lihtne, kas pole?
Aga tegelikult ei ole asi üldse nii, vaid hoopis intelligentsem.
Semantiline HTML-lehe ülesehitus
Erinevalt inimestest, on igal HTML-elemendil elus eesmärk, nad ei eksisteeri niisama. See, et üks element on ülbe plokielement või leebe realement, ei oma tegelikult üldse tähtsust. Palju tähtsam on element, kui isiksus, sest ta tähistab midagi, mis on arvuti jaoks arusaadav. Nii näiteks teab programm, et p tähistab tavalist tekstilõiku ja h1 on kõige üldisem ja olulisem pealkiri. Kui programm leiab lehelt aga h2-e, ilma et ta eelnevalt oleks kohanud h1-te, on kuri karjas — ülesehitus ei ole enam loogiline ja segadus on majas. Inimesed aga vaatavad lehte ja ei näe midagi valesti…
Näide inimese ja programmi arusaamistest.
Inimene mõtleb:
Minu veebilehel peab olema pealkiri, siis lõik ja loetelu asjadest. Lõpus on veel üks lõik ja asi Ants.
Ning kirjutab koodi:
<p>
<strong>Pealkiri</strong><br />
<br />
Lõik<br />
Loetelu<br />
loetelu<br />
loetelu<br />
lõik
</p>
Aga mida näeb sellise koodi puhul programm:
Lehel on tekstilõik, mille hulka kuulub üks oluline fraas.
Möh? Just.
Aga leht näeb ju hea välja! Pealkiri on, lõigud on ja loetelugi istub enda kohas. Mis seal vahet, mida programm asjast arvab…
Jah, leht võib küll ekraanil hea välja näha, aga kõik inimesed, kes tahavad lehte lugeda ei vaata lehte sirvikus arvuti taga, kõigil ei seleta silmad hästi ja lehe koodi loevad inimestele lisaks veel paljud programmid, mis orienteeruvad ainult koodi järgi.
Kuidas peaks siis seda koodi kirjutama?
<h1>Pealkiri</h1>
<p>Lõik</p>
<ul>
<li>Loetelu</li>
<li>Loetelu</li>
<li>loetelu</li>
</ul>
<p>Lõik</p>
Nüüd saavad kõik koodist õigesti aru, sest HTML on semantiliselt korrektne ehk lehel olev info on loogiliselt kirjeldatud. Ja kui ma ütlen kõik, siis ma pean silmas lisaks sirvikule ja nägijatele inimestele ka inimesi, kes vajavad veebilehtede vaatamisel mõne programmi abi (näiteks ekraanilugeja), otsimootoreid, sest otsimootorid saavad siis aru lehe struktuurist ja tõstavad lehe tähtsust otsingu tulemustes (internetiturundajad, liigutage kõrvu) ja muid programme, mis peavad lugema HTML-koodi (RSS lugejad, veebirakendused jne). Lõppkokkuvõttes on kõik ikkagi inimeste hüvanguks, mitte veebikonsortsiumi rõõmuks ja enese harimiseks.
Eluline paralleel — kindlasti on enamik meist kasutanud Microsoft Wordi ja nutnud peatäisi, sest Word on nii loll, et ei tee automaatselt sisukorda. Hoolimata sellest, et meie teeme kõik õigesti — paneme pealkirja tähesuuruse suureks ja teeme teksti rasvaseks. Aga märgiks me ära, millise tekstilõigu puhul on tegemist pealkirjaga, poleks pisaraid kusagil. Millegi suuremaks või väiksemaks tegemine ei tee midagi pealkirjaks, see on puhas kujunduslik lüke. Ja millegi rasvaseks märkimine ütleb arvutile, et see koht vajab rõhutamist.
Ja lõppude lõpuks — HTML oli, on ja saab olema keel, mis kirjeldab informatsiooni, mitte lihtsalt ei kuva seda.
Kui ma nüüd hinge tõmbaks, siis kindlasti keegi tähtis tegelane keerutaks silmi ja ütleks, et on olukordi, kus ei saa kasutada pealkirja h1-e, sest see võtab liiga palju ruumi ja p on täitsa lollakas, sest lükkab tekstilõigud üksteisest eemale. Rääkimata loetelust, mis kasutab mingeid eriti nõmedaid mummusid.
Ja nii me jõuamegi kujunduse juurde.
HTML-lehe kujundus
Veebileht koosneb kolmest osast: infost, kujundus ja interkatiivsusest. Need kõik moodustavad terviku, kui nad ei tohiks omavahel kokku puutuda. Mõtelgem neist kui kolmest kihist, mis on üksteise peal.
Kui info struktureerimiseks on olemas HTML, siis info kujundamiseks on olemas CSS ehk keel, mis kirjeldab HTML-i elementide kujundust ja formaati.
CSS-ga saab ka kõige õnnetuma ja väetima reaelemendist teha plokielemendi, mis annab kõikidele alfaisastele silmad ette. Ja kõik need vahed, mummud ja praod — need saab kõik kaotada, juurde tekitada, laiemaks ajada, täpselt nii, nagu hing ihaldab ja fantaasia lubab. Selleks ei pea tegema midagi muud, kui lehele külge haakima CSS-dokumendi.
Miks ei tohi aga kujundust ja infot segamini ajada?
HTML-i ei salvestata külastaja arvutisse, et kiirendada lehe laadimist. Seega, kui kirjutada kujundus ja HTML segamini, laetakse ka kujundus igal külastuskorral uuesti. See tähendab, et leht on aeglasem/allalaadimine võtab rohkem aega, eriti kui arvestada seda, et alatihti on lehel kujunduse kirjeldust rohkem, kui sisu ise.
Kujunduse ja info kokkukirjutamisel saab surmahoobi lehe kättesaadavus — ekraanilugejad, pihuseadmed, printerid jne näevad samasugust lehte, mida kuvatakse ekraanil. Kuid ekraan, paber, pisike ekraan ja helisüntees (ekraanilugejad) on kõik erinevate näitajatega ja nende esitatavad nõuded dokumentidele erinevad. Näiteks ei mahu telefoni ekraanile ega A4 suuruses paberile 960 piksli laiune leht kuidagi mugavalt ära.
Lihtsam on muuta ühte-kahte kujundufaili, kui kümmet, sadat või tuhandet HTML-faili.
Ja lõppude lõpuks — HTML oli, on ja saab olema keel, mis kirjeldab informatsiooni, mitte ei kujunda seda.
Kolmas kiht ehk lehe interaktiivsus
See kiht asub kõige peal. Ja on kõige ebaolulisem. Vahel nimetatakse seda kelladeks ja viledeks aga enamik lavatagustest tegijatest teab, et peaaegu alati võib seda kutsuda JavaScriptiks. Muidugi ei ole see 100% tõene, sest vahel võib olla asja eest vastutav ka mingisugune muu keel-tehnoloogia (CSS), aga enamasti ei lähe asi ikkagi JavaScriptist kaugelt mööda.
Interaktiivus, nagu juba kord mainitud, on kellad ja viled ehk tilulilu ehk silmailu. Selle alla kuuluvad lingi värvivahetus, kui hiir linki kompab või loetelu aktiivse rea taustavärvi vahetus, et inimesel oleks kergem aru saada, kus ta täpselt loetelus asub, elementide hüplemised-karglemised. Võimalusi on oi-oi, kui palju! Lühidalt ja tugevalt üldistades on interaktiivsus lehe kujunduse manipuleerimine lehe lugeja abistamiseks. Kõik on niikaua aktsepteeritav ja kiidetav, kuni manipuleerimine piirdub vaid lehe kujundusega — JavaScript on võimas keel, mille jaoks ei ole probleem manipuleerida ka HTML-i ja infoga. Kuigi see on hoopis teine teema, kehtivad ka siin üleüldised reeglid — leht peab olema kättesaadav ja arusaadav kõigile.
Kokkuvõtteks
Miks seda nüüd vaja oli? Sest niikaua, kuniks brauserid lubavad vaadata veebilehe koodi, võib koodist näha, et need asjad ei ole veel kõigile päris teada. Loomulikult võib peituda vabanduse taha, et erinevad dokumenditüübid lubavad sisu ja kujundust segamini kirjutada ja kõige olulisem on ikkagi see, mis tekib arvuti ekraanile, aga vaatame siinkohal kella — aasta on 2010. See tähendab, et veeb on muutunud väga tähtsaks ja ei ole enam pelgalt lõbustusasutus oma ala fanaatikutele. See omakorda tähendab, et veeb peab olema kättesaadav paljudele, sõltuvalt nende seadmest ja füüsilisest ning ka psüühhilisest võimekusest.
Kuidas olla kindel, et leht on semantiliselt korrektne
Kui veebilehel keelata CSS, peaks olema visuaalselt aru saada, mis on mis ja mis on kus.
Kuidas olla kindel, et leht on semantiliselt korrektne ja kättesaadav kõigile
Kui veebilehel keelata CSS, peaks olema visuaalselt aru saada, mis on mis ja mis on kus.
Kui veebilehel keelata piltide näitamine, peaks olema aru saada, kus on pilt ja mis on pildil kujutatud.
Kui veebilehel keelata skriptide kasutamine, peaks kogu info olema nähtav ja loogiliselt asetsev.
Aamen!