Kihid Soovides osa andmeid paigutada muust lehekülje ehitusest sõltumatult, võib need kirjutada eraldi kihile. Nõnda võib paigutada teksti kohale, kuhu seda muidu küllalt raske liigutada on. Samuti annab sedasi lehe peal osa andmeid peita või näidata just siis, kui see parajasti tundub vajalik olema. Kihid aitavad üle mitmestki kohast, kus muidu kipuvad HTMLi vahendid kitsaks jääma, kuid lehtede koostamisel peab pidevalt arvestama, et vanemad või tekstipõhised seilurid ei saa kihtidega hakkama ning nende tarvis tuleb teave esitada nii, et kasutaja ka sealtkaudu oma tarkuse kätte saaks. Üks võimalus mitmetes seilurites töötav kiht luua on luua div-plokk, kuhu style-atribuudi sisse kirjutada kihi asukoht lehel. kui position oleks absolute asemel relative, siis ei arvestataks asukohta mitte lehe vasakult ülevalt nurgast vaid suhtelisena sellest kohast, kus div-plokk muidu asuks. Absoluutsete koordinaatidega on aga enamasti kergem hakkama saada. DIV-i kiht

DIV-i abil loodud kiht

Kuku
Menüü Küllalt levinud on kihtide kasutamine sobival hetkel nähtavaks muutuva menüü tarvis. Selleks võib kihi algul rahulikult valmis teha ning ainult selleks ajaks nähtavale tuua, kui kasutaja sellest midagi valima peab. Kihtide peitmine ning näitamine käib brauseriti erinevalt. Siin näites eeldatakse kihtidega tegelemiseks Javascript1.2-te ning seiluritest Netscape Navigatorit või Microsofti Internet Explorerit. Tõeväärtusmuutuja kasIE näitab, kas tegemist on Internet Exporeriga, muul juhul eeldatakse (tegelikult liialdatud eeldusega), et tegemist on Netscape Navigatoriga. window.navigator.userAgent annab välja sõne, mis tutvustab brauseri tüüpi ja versiooni. Juhul kui tekstist leitakse alamsõne MSIE, arvatakse, et tegemist on Internet Exploreriga. IE puhul asub enamik dokumendi kaudu kättesaadavaid objekte massiivis document.all, nii ka siin loodud kiht; Netscape puhul pääseb kihtidele ligi massiivi document.layers kaudu. Mõlemas massiivis võib elemendi poole ka nime abil pöörduda. Kihile sai nimi pandud div-ploki parameetri id abil. Nii menüü näitamiseks kui peitmiseks on loodud eraldi alamprogramm. Menüü avatakse käsu "Ava menüü" piirkonda sisenemisel või sellele vajutamisel. Sulgeda saab menüü vajutades tema alumisele reale "Menüü kinni". Elementide paigutamine tabelisse on hea lihtne võimalus nende üksteise alla ritta seadmiseks. DIV-i kiht

Väljahüppav menüü

Ava menüü

Koos hiirega liikuv kiht Et kihi asukohta saab lehe lahtiolekuajal määrata, see teeb kihtidest küllalt väljendusrikka vahendi nii kasutajakeskkonna kujundamiseks kui andmete esitamiseks. Samade vahenditega on loodud aga ka lehed, kus abiinfonupp või reklaamiviide pidevalt kõige nähtavamasse kohta silma alla ilmub ning lausa kutsub ennast vajutama. Netscape all võib kihile asukoha määramiseks otse muutjatele left ning top väärtused omistada ning kiht liigub etteantud kohta. IE puhul on samalaadseteks kohtadeks style.left ning style.top. Kui eelnevalt hiire sündmustega seotut meelde tuletada, siis IE puhul võis hiire asukohta teada saada objektist event väljadelt x ja y. Netscape puhul antakse hiire koordinaadid document.onmousemove'le reageerima määratud funktsiooni esimeseks parameetriks ning x ja y koordinaatidele vastavad selle objekti väljad pageX ning pageY. All näites liigub kihi vasak ülemine nurk koos hiirega. Programm iseenesest on lihtne: iga hiire liikumise teate peale antakse kihile korraldus samasse kohta liikuda. DIV-i kiht

Koos hiirega liikuv kiht

Neti
TPU
Hiire järgi lohisev kiht Nii reklaamide kui abiinfo puhul võib pidevalt koos hiirega liikuv kiht tüütuks muutuda ning häirib teksti lugemist, juhul, kui kasutaja soovib hiirega rida ajada. Samuti ei õnnestu hiirega kihil oleva viite peale vajutada, sest proovides hiirega kihi keskele jõuda, lükkab programm ette kihi vasaku serva ning ilusast viite avamisest ei tule midagi välja. Kui aga kiht liigub hiire taga mõningase viivitusega, sellisel juhul ei jää ta pidevalt vaatevälja ette ning ka kihi peal olevaid viiteid on tabada võimalik, sest kihi asukoha muutus algab alles mõni aeg pärast hiire liigutust. Järgnevas näites jäetakse meelde 20 hiire vahepealset asukohta ning alles nende elementide täitumisel hakkatakse algusest elemente kustutama, kihti esimese elemendi kohale nihutama ning ülejäänud elemente massiivis ühe koha võrra alguse poole tõstma. DIV-i kiht

Hiire järgi liikuv kiht

Lehe servadest tagasi põrkav kiht Nii nagu võib kihti hiire järgi liikuma panna, samuti saab kihile ka muul moel öelda, millal ta kus peab asuma. Nii kaunistamise, tähelepanu äratamise kui mõnel juhul ka lehe materjali illustreerimise eesmärgil saab kihte liigutades kasutajale soovitud sõnumit edasi anda. Kui tahta, et mõni lehe piirkond jääks enam tähelepanu alla, siis võib panna ringiliikuvad väikesed kihid sinna poole koonduma. Soovides füüsikateemalisel lehel tutvustada keha liikumise trajektoori, saab panna kihi soovitud rada pidi liikuma. Kuna arvutiekraanil koosneb liikumine lihtsalt üksteisele järgnevatest paigal seisvatest piltidest, siis arvutades eelnevalt või liikumise ajal välja, kus kiht väikese viivituse järel peab asuma, ongi võimalik kasutaja silma ette manada selline liikumine, mida lehe looja tarvilikuks peab. Kui on tegemist pidevalt korduva samal rajal liikumisega, siis on mõistlik algul liikumise punktid välja arvutada ning edaspidi iga järgmise sammu juures lihtsalt massiivist vaadata, kus kiht peaks asuma. Kui aga vana teed ei korrata või on tee pikk ning välja arvutamine lihtne, siis võib iga sammu juures asukoha meelde jäetud parameetrite järgi uuesti leida ning kihi sinna koha peale paigutada. Nii on tehtud ka järgnevas näites, kus kiht liigub sirgjoones ning dokumendi servani jõudes põrkab sellest servast tagasi. Muutujad kiirusx ning kiirusy näitavad vastava telje suunas tehtava sammu pikkust iga järjekordse sammu ajal. Kuna teljed on risti, siis servast põrkamisel muutub servaga ristunud telje suunas liikumise kiirus vastupidiseks, servaga paralleelese telje suunas liikumise kiirus aga ei muutu. Füüsikatundides räägitakse, et kui keha osaleb korraga mitmes liikumises, siis üks teineteist ei sega. Siin on õpitud tarkus otseselt näha: võib vaadata nagu oleks tegemist kahe täiesti sõltumatu liikumisega. Üks ülalt alla ning teine vasakult paremale. Kui kiht põrkab vastu akna vasakut serva, siis horisontaalse liikumise suund muutub vastupidiseks, vertikaalne liikumine jätkub aga samasuguse hooga nagu ennist. Kiiruse telgedesuunalised komponendid võetakse algul juhuslikud, et igal lehe uuel avamisel hakkaks kiht liikuma isemoodi. var kiirus=10; kiirusx=2*kiirus*Math.random()-kiirus saab kiirusx omale väärtuse vahemikust -10 kuni +10, muutuja kiirus näitab arvutatava x-telje suunalise kiiruse absoluutväärtuse maksimaalset suurust. 2*kiirus*Math.random() annab tulemuse 0-20 (ehk nullist kahekordse kiiruseni kuna kiirus on siin 10 ning Math.random() väljastab väärtuse 0-1) ning sealt kiirus (praegu 10) maha lahutades tulebki võimalik kiirusx'i väärtus kiiruse ning -kiiruse vahele. Serva lähedale jõudmisel keeraktakse vastava telje suunalise kiiruse märk selliseks, et järgmise sammuga hakkab kiht taas servast eemalduma. Nõnda saab panna põrkamisel kihi akna suurust arvestama. DIV-i kiht

Akna sees põrkav kiht

Liikumise piirkond muutub akna suuruse muutumisel.
Neti
TPU
Kerimisel paigale jääv kiht Kihil paiknev abiteave soovitakse mõnikord kasutaja silma alla jätta ka juhul, kui viimane oma lehte kerib. Üheks võimaluseks on sisukorra ning abi tarvis teha eraldi raam ning keritav tekst jätta teise. Kui aga ei soovita selleks ekraanilt eraldi tükki röövida, siis aitab kiht. Netscape puhul window.pageXOffset ning IE puhul document.body.scrollTop näitavad, kui palju on lehte algse asendiga võrreldes allapoole keritud. Kui selle järgi ka kihti vastavalt allapoole sättida, siis paistabki ekraanil välja, nagu kiht paikneks kerimisel samas kohas. DIV-i kiht

Kerimisel paigale jääv kiht

Neti
TPU
Kerimisel paika nihkuv kiht Eelmises näites kerimise korral kiht kas püsib ilusti koha peal või joonistusprobleemide korral hakkab veidi hüppama ja vilkuma. Veidi sujuvama väljanägemise saab anda, lastes kihti algul koos lehega kerida ning siis tasapisi taas aknal oma kohale "sõita". Siin näites liigutakse iga sammuga soovitud punktile poole lähemale. Nii toimub liikumine algul kiiresti (et kerimise käigus kiht silma alt väga kaugele ei kaoks), hiljem aga liigub abiteabekiht rahulikult aeglustades omale eraldatud koha poole kuni lõpuks seiskub. DIV-i kiht

Kiht nihkub akna keskele

Neti
TPU
Küpsised Javaskripti abil on võimalik hoida kasutaja masinas küpsiseid ehk sõnesid, millel on nimi ja kehtivusaeg. Neid kasutatakse näiteks elektronkaubamajas kasutaja ostukorvis olevate asjade meelespidamisel, kuid nende abil saab teha ka näiteks ühe masina külastuskordade loenduri nagu siin. Kui masinast vastavanimelist küpsist ei leita, siis öeldakse, et ta on masinas esimest korda. Vastasel juhul loetakse küpsise väärtusest külastuse järjekorranumber ning järgmise korra tarvis suurendatakse seda ühe võrra. Küpsise salvestab korraldus, kus muutujale document.cookie omistatakse sõne, mis sisaldab eneses nii küpsise nime, väärtuse kui andmed, kaua seda oleks mõistlik masinas talletada. Küpsisele antav väärtus võib välja näha kylastusteArv=23; expires=Sun, 09 Jul 2000 17:01:44 GMT ning omistuskäsk oli document.cookie=kypsiseNimi+"="+sisu+hoiuajasone; Küpsiseid tuleb kätte saamisel lugeda pikast sõnest, mis võib välja näha näiteks kylastusteArv=11; Tervitus=Hei; algus=a Otsitud küpsise leiab sealt nime ning sellele järgneva võrdusmärgi abil. Kohalik loendur Tere vaataja!
Stiililehed HTML-i sisse oli kujundamise tarvis sisse ehitatud mituteist käsklust, kuid nendest tundus ikka väheks jääma. Et uute käskluste lisamine keelt keerukamaks ei muudaks ning et õnnestuks siiski kuidagi lehe sisulist osa ning kujundust lahus hoida, selleks loodi stiililehed. Olemasolevatele elementidele saab omadusi juurde anda või muuta. All näites luuakse elemendi P (paragraph) alla kolm klassi: pealkiri, luuletus ning autor. Soovides allpool määrata, et kujundus tuleb vastava klassi järgi seada, tuleb ploki alustamisel lihtsalt sisse kirjutada, millise klassi vormingut soovitakse lõigule külge panna.

teatab, et määrangud tuleb võtta klassist p.autor, kus kirjelduses oli määratud taandreaks 0.5 cm. Allpool on toodud valikulised näited stiililehtede käsklustest, millega saavad hakkama nii Netscape Navigator kui Internet Explorer. W3C on välja töötanud hulga rohkem käsklusi ning tasapisi võib loota, et seilurid neid üha enam toetama hakkavad. text-align määrab teksti vasakule, keskele, paremale või rööpjoondatult (justify). HTML 4.0 kirjelduses soovitatakse teksti joondamisel kasutatada stiililehte, mitte vastavaid HTMLi käske. Värvi saab punasest, rohelisest ja sinisest kokku segada nii kuueteistkümnendsüsteemis (# ja igale värvile 2 sümbolit) kui kümnendsüsteemi arvudena 0-255. Ploki serva jäetavat tühja ruumi saab määrata sõnaga margin algavate käsklustega. Nagu inglise keelest tuleb, nii tähistab left vasakut, top ülemist, right paremat ning bottom alumist äärt. Kasutatavaid mõõtühikuid on hulga. Sentimeetrid - cm, millimeetrid - mm, tollid - in, punktid (1/72 tolli) - pt, pica'd (12 punkti) pc, pikslid - px, fondi määratud kõrgus - em, x-tähe kõrgus - ex. Seilurid püüavad tekste etteantud suuruses ja värvides näidata, kuid mõnel tuleb see välja paremini, mõnel halvemini. CSS-kujundus

Kodulaul

Mis on kodu, kus on kodu, kus on kodu koht?
Kodu lõhn on eriline, kodu värv ja maik. Kodu on nii imeline tavaline paik.

Juhan Viiding

Mitmest lehest koosneva ühesuguse kujundusega veebisaidi puhul on mõistlik kirjutada css-käsud eraldi faili ning need siis sobivast kohast igal korral sisse lugeda. Niimoodi pääseb igakordsest lisatippimisest või kopeerimisest, vea korral on kergem ühes kohas parandada ning kui soovitakse saidile uus kujundus anda, siis piisab vaid ühes kohas muudatuste sisseviimisest. Välise stiililehe sisselugemiseks tuleb päises anda käsk kujul , kus href-atribuudis määratakse fail, kust stiilileht sisse lugeda. Stiililehefail on tavaline tekstifail, kus üksteise järgi on kirja pandud elementidele või klassidele vastavad stiilid nii nagu ülal näiteski märgendite vahel. Stiili võib määrata ka otse elemendi algusmärgi juures, sinna tuleb lisada atribuut style.
Sellise määrangu prioriteet on kõrgeim (muudab varasemad samale elemendile kehtinud määrangud ümber). Järgneb lehe päises kirjeldatu ning kõige madalama prioriteediga on välisest failist sisseloetud stiilikirjeldus. Andmete edastamine aadressireal Nii nagu võib otsingumootorisse saata andmeid saadava lehe sisu määramiseks, nii ka õnnestub ühelt staatiliselt veebilehelt teisele andmeid edastada. Nõnda ei pea kõiki tarvilikke omadusi ühe lehe sisse kirjutama ega kopeerima, vaid võib mitmed arvutamise ja kujundamisega seotud seigad jätta selleks otstarbeks eraldi tehtud lehtede hooleks. Selline teenusepakkumise süsteem on küll enam levinud serveriga seotud rakenduste puhul, kuid sarnaselt võivad ka veebilehed üksteisele oma võimalusi välja pakkuda. Kui alamprogrammid aitavad ühel lehel käske tegevusteks grupeerida ning objektid üksikuid alamoskusi tervikuks kokku liita, siis sarnaselt objektile võib terviklikku probleemi lahendust pakkuda ka vastavaks otstarbeks koostatud veebileht, millele antavate parameetrite järgi väljastatakse sobiv tulemus. Veebilehele saab andmeid saata aadressireal failinimele järgneva küsimärgi järel. Kui soovida näiteks saata failile tervitaja.html tervitamiseks nimi Juku, siis tuleks väljakutsel aadressiks kirjutada tervitaja.html?Juku . Saadetud "Juku" saab leht kätte, küsides muutuja window.location.search väärtust. Et kõrvaltvaatajal ning testimisel oleks selgem, milliste andmetega tegu ning et saaks saadetavaid väärtusi üksteisest eristada, selleks on kokku lepitud standard, kus eri andmed eraldatakse ampersandiga (&), igal parameetril on nimi ja väärtus, mis eraldatakse tühikuga. Kõik andmed peale madalakoodiliste tähtede ning mõningate sümbolite saadetakse kolmetäheliseks kodeeritud kujul, kus esimeseks sümboliks on % ning järgmised 2 tähistavad kuueteistkümnendsüsteemis sümboli koodi. Nii et kui soovin, et lehelt tervitataks viieteistkümneaastast Jüri, siis tuleks andmed saata kujul tervitaja.html?nimi=J%FCri&vanus=15 . Lisaks eeltoodule on juba varasemast ajast sellisel saatmisel asendatud tühikud plussmärkidega. Kuna plussid kodeeritakse erisümbolitena ning tühikud on plussidena, siis on neid siiski võimalik üksteisest eristada. Alljärgnev leht soovib oma parameetriteks korgus'e ja laius'e ning joonistab ekraanile vastava suurusega ristküliku (taustavärviga tabeli). var rida=window.location.search; küsib sõnena lehele saadetud andmed. Kui saadud tekst algas küsimärgiga (oli kaasa haaratud faili nime ning andmeid eraldav sümbol), siis võetakse see eest ära ehk jäetakse allest osa, mis on küsimärgist taga pool. if(rida.charAt(0)=="?")rida=rida.substring(1); Andmete kätte saamiseks võib saadud sõnet ka rahumeeli niisama analüüsima hakata, kuid allpool on püütud veidi mitmekülgsem näide koostada, kus peaks kerge olema mitmesuguseid andmeid eraldada. var parameetrid=rida.split("&"); jagab rea &-de kohalt juppideks ning iga lõigu paigutab väljastava massiivi üheks elemendiks. Nii saab pärastpoole iga saadetud parameetrit kergesti eraldi uurida. var pluss=/\+/g; loob regulaaravaldise, millega plusmärgid tühikutega asendamise eesmärgil sõnest ära tunda. Langjoon plussi ees on vajalik, kuna muul juhul loetaks seda erisümbolina. Täht g tähistab global'it, ehk tulevase asenduse korral tuleks ära vahetada kõik plussmärgid. Järgnev alamprogramm peaks väljastama etteantud parameetri nimele vastava väärtuse. Lapatakse läbi kogu massiiv. Kui leitakse element mis vastab küsitule, siis väljastatakse selle väärtus. replace asendab plussid tühikutega ning unescape tõlgib kolmekohalise koodiga antud sümbolid ühebaidilisteks. Sobiva parameetri puudumisel jõutakse tsüklist välja ning returniga tagastatakse tühisõne märgiks et vastava parameetri väärtust ei leitud. Joonistaja Loodud lehe teenust võib otse paluda, kirjutades viiteks näiteks file:/c%7C/user/jaagup/0104/k1/html/joonistaja.html?laius=23&korgus=43 , aadressirea parameetritena aga saadetakse ka vormi elementide sarnasel standardkujul nagu ennist kirjeldatud. Vormi kaudu on kasutajalt kergem andmeid kätte saada. Piisab vaid paigutada ekraanile tekstiväljad ja submit-nupp ning sellele vajutamisel saadetaksegi andmed formi action-atribuudis määratud sihtkohta. Joonistusandmed

Ristküliku joonistamine

Laius:
Kõrgus:
10