Kuidas teha veebilehte

Üldjoontes on veebileht lihtsalt üks tekstifail, milles olev tekst on markeeritud spetsiaalsete märgenditega kujul <märgend> ... </märgend>, ning veebilehe valmistamiseks pole tarvis keerukamat tarkvara Notepadi laadsest tekstiredaktorist.

See, millist konkreetset programmi kasutada veebilehtede tegemiseks, on suuresti isikliku eelistuse küsimus - märksa olulisemad tarkvarast on aga teadmised, mida lehe koostamisel kasutada.

HTML

HTML (HyperText Markup Language - hüperteksti ülestähendamise keel) on keel, millest veebi tegemise juures ei üle ega ümber, sest just selles keeles pannaksegi veebilehed kirja. Muidugi on olemas ka hulganisti programme, millega saab lehekülgi koostada ka see, kes HTML-ist kuulnudki pole. Oluline on aga meeles pidada, et oma tõelise potensiaalini sirutavad sellised programmid vaid nende kasutajate kätes, kes mõistavad HTML-i ka käsitsi kirjutada.

Pealegi on HTML niivõrd lihtne keel, et seda oleks lausa patt õppimata jätta, ning õppematerjali HTML-i kohta leidub lausa hunnikute viisi:

Eesti keeles

(Suur osa eestikeelsetest HTML-i õpetustest on kahjuks kaunikesti aegunud, mistõttu on mitmed lingid, mis ehk muidu peaksid selles nimekirjas olema, välja jäetud.)

• HTML-i raamat Vikiraamatukogus on samamoodi nagu HV viki vabalt igaühe poolt täiendatav
• HTML keele lühijuhend sobib hästi kiireks sissejuhatuseks (pea meeles, et lõpetad lugemise, kui kohtad peatükki "NETSCAPE-LAIENDUSED")

Inglise keeles

• W3Schools'i HTML-i õpetus ja *XHTML-i õpetus
• HTML Dog pakub õpetusi nii päris algajatele kui ka edasijõudnutele
• HTML 4.01 spetsifikatsioon
• HTML algajatele ja ka edasijõudnutele

CSS

CSS on soovituslik keel veebilehtede kujundamiseks. Kui sinu veebilehed näevad välja robustsed ja kõledad, siis on just CSS-i puudutus arvatavasti see, mida vajad. CSS-i tasuks hakata õppima niipea, kui oled hakkama saanud oma esimeste HTML-i katsetustega. Kuigi, ka HTML-is on vahendeid lehekülje kujundamiseks, pakub CSS hulga rohkem võimalusi ning lisaks pääsed määratult väiksema hulga klaviatuuriklõbistamisega, sest muutes vaid ühtainust rida CSS-failis saad korraga ümber kujundada sadu või isegi tuhandeid veebilehti.

Eesti keeles

• CSS-i raamat Vikiraamatukogus on samamoodi nagu HV viki vabalt igaühe poolt täiendatav

Inglise keeles

• W3Schools'i CSS-i õpetus
• HTML Dog pakub õpetusi nii päris algajatele kui ka edasijõudnutele
• Listutorial, Floatutorial, Selectutorial - suurepärased õpetused CSS-iga listide kujundamiseks, ning float-idest ja selektoritest arusaamiseks.
• CSS-Discuss wiki - põhjalik CSS-i wiki
• CSS 2.1 spetsifikatsioon

JavaScript ja DOM

JavaScriptiga on nõnda, et 90% lehekülgedest, kes seda kasutavad, tegelikult seda ei vaja, ning 90% nendest lehtedest, kes seda vajavad, kasutavad seda valesti. Ehkki JavaScripti massiliselt väärkasutatakse, ei tähenda see sugugi seda, et tegemist olekski kehva tehnoloogiaga. JavaScript on lihtsalt väga võimas tööriist, ning oskamatu meistrimees võib sellega oma lehekülje kergesti ära rikkuda.

Document Object Model ehk DOM kujutab endast liidest, mille kaudu programmeerija pääseb ligi HTML (või XML) dokumendi struktuurile. DOM võimaldab skriptil otsida välja vajalikud elemendid ning neid siis muuta ja neile uusi alamelemente lisada.

JavaScript on programmeerimiskeel, milles kirjutatud programme saab veebilehte külastavas brauseris jooksutada. JavaScript omakorda pääseb läbi DOM-i ligi HTML-ile. (Alates 1999. aastast vastab JavaScript ECMA-262 ehk ECMAScripti standardile.)

Eesti keeles

• Jaagup Kippari JavaScripti tutvustav lehekülg pakub hulganisti näiteid, ehkki mitte kõik neist ei pruugi olla nn soovituslikud praktikad.

Inglise keeles

• JavaScripti osa Mozilla Developer Center'is
• Unobtrusive JavaScript õpetab kasutama JavaScripti ja DOM-i nõnda, et hundid oleks söönud ja lambad terved
• DOM Level 1 spetsifikatsioon
• ECMAScripti spetsifikatsioon

Serveripoolne skriptimine

Kui sa soovid, et sinu veebilehte külastav kodanik saaks teha midagi, millest ka peale tema leheküljelt lahkumist jälg maha jääks (näiteks võimalus leheküljele kommentaare jätta), siis pead kasutama mõne serveripoolse tehnoloogia abi.

Eestis on levinuim ja kõige kergemini kätte saadav (ka tasuta) PHP. Levinuimatest vahenditest võib veel nimetada järgmisi: Perl, Zope, J2EE, Ruby on rails, Microsoft ASP.NET, Macromedia Coldfusion.

Tüüpiliselt kuulub dünaamilise lehekülje juurde ka andmebaas. Loetlegem järgmisi: MySQL, PostrgeSQL, Microsoft SQL Server.

Eesti keeles

• php.ee
• PHP Center
• Jaagup Kippari leht Pythoni ja Zope-i kohta
• Sealtsamast ka Jaagupi õpetus Perli kohta

Inglise keeles

• PHP ametlik kodulehekülg sealt leiab ka manuaali
• PHP in a Nutshell on O'Reilly poolt kirjastatud raamat, mida aga saab läbi veebi täiesti tasuta lugeda
• PHP kodeerimise standard
• PHP Security Guide
• Zope.org - Pythoni põhine veebiserveritarkvara
• MySQL-i manuaal
• perl.com-i dokumentatsiooni leht sisaldab palju-palju kasulikku infot Perli kohta. Kui standardsest funktsionaalsusest puudu jääb, saab alati pöörduda CPAN-i poole.

Veebitegemisest üldiselt

Küllaltki palju kasulikku nõu kõige kohta, mis seondub veebitegemisega, saab järjekordsest tasuta kättesaadavast raamatust, millel nimeks Web Style Guide.

Palju sisukaid artikleid leiab veebistandarditele orienteeritud ajakirjast A List Apart.

Käideldavus ja kasutatavus

Kaks kohta, mida kindlasti tuleks külastada on Vincent Flanders'i Web Pages That Suck ning Jakob Nielseni Alertbox.

Eesti kodanikuna ei maksaks ära unustada, et on olemas Soovitused Eesti riigiasutuste avalike veebilehtede koostamiseks ning Infotehnoloogia reeglid eesti keele ja kultuuri keskkonnas.

Ära ei tasu unustada ka Jurandi kodukat.

Kuna käsikaudu võib lehekülgede käideldavuse hindamine vaevarikkaks tegevuseks osutuda, siis on olemas hulganisti vahendeid, mis sind aitavad:

• Cynthia Says kontrollib lehkülje vastavust WCAG ja Section 508 nõuetele.
• Watchfire WebXACT testib lehekülgi väga mitmetest aspektidest lähtuvalt
• W3C Semantic data extractor proovib leheküljelt välja lugeda võimalikult palju semantilist infot
• Värvipimedust teesklev veebilehe filter, et sa oskaksid aimata, kuidas võivad värvipimedad su lehte näha
• Firefoxi laiendus Fangs võimaldab sul aga ette kujutada, milline "näeb" veeb välja pimedate jaoks

Validaatorid

Eksimine on inimlik ning seetõttu tuleb kasuks, kui kontrollida oma lehekülje koodi validaatoritega:

• W3C HTML-i validaator
• WDG HTML-i validaator (võimalus valideerida kogu lehekülg, kui lehtede arv jääb alla saja)
• W3C CSS-i validaator
• RSS ja Atom uudisvoogide validaator
• JSLint kontrollib JavaScripti koodi võimalike vigade suhtes.

Ning mitte üksnes koodi:

• Eesti keele speller

Varia

• Lipsum generator - kui sul mõlgub meeles Lorem ipsum dolor...
• Typetester - võimalus kõrvutada ekraanil erinevaid fonte ja valida oma veebilehe jaoks seeläbi sobivaim.