HTML Aadressil http://www.ut.ee/~ajaeger/sisu.html asub Tartu Ülikooli HTML konspekt. Sealt saab sissejuhatava materjali. Juurde mõnede näidetega kokkuvõte. HTML formaadis saab teksti sisse lisada teksti vormimiseks juhtkäske. Erinevalt mitmetest teistest vormindamisstandarditest (näiteks Wordi dokument) kasutatakse HTMLis vaid tekstisümboleid. Selles formaadis teksti luua ning kontrollida saab iga tekstiredaktoriga. HTML lehe "blankett" näeb välja järgmine: PEALKIRI Tekst ise ... (ja kogu muu kraam, mida lehekülje peal soovitakse näha, nt. loetelud, rakendid ja tabelid) Nagu näha, on juhtkäsud märkide < ja > vahel. Näiteks tähistab pealkirja algust ning pealkirja lõppu. Rasvase kirja alguseks on , lõpuks , kursiivi puhul vastavalt ja . Tabeli algust tähistab , rea algust ning lahtri algust

, näiteks:

Juhan	5
Juku	4

annab tulemuseks tabeli mille esimeses veerus on nimed Juhan ja Juku ning teises numbrid 5 ja 4. Reavahetust märgib
ning lõiguvahetust (veidi suurem vahe)

. Joone üle lehe tõmbab

. Nummerdatud loetelu (Ordered List)

Juhan
Juku
Sass

Nummerdamata loetelu (Unordered List)

Porgand
Kapsas
Kaalikas

Pilt lehel näeb välja

s.t. SRC väli näitab, kus URL-i peal näidatav pilt asub. Juhul kui pilt asub HTML-tekstiga samas kataloogis, piisab vaid failinime kirjutamisest. Lisaks SRC-väljale saab HEIGHT ja WIDTH väljadega määrata pildi kõrgust ja laiust. Viite tegemisel tuleb märkida viite sihtkoht ning teksti osa, millele vajutades viide avatakse. Näiteks nii saab teha viite Tallinna Pedagoogikaülikooli avalehele. Sõna "avalehele" on selle tulemusena brauseris teisevärviline (harilikult sinine). Kui soovida viidata failile samas kataloogis, tuleb viite href-kohale panna vaid failinimi. Soovi korral saab viidata ka sama teksti sees teisele kohale, seda kasutatakse enamasti pikkade tekstide puhul. HTML-lehe võimalusi on enamgi. Lehele saab komponentidena panna Java rakendeid, video, muusika. Saab avada eraldi aknaid ning määrata nendes toimuvat. Lähemat infot saab aadressilt http://developer.netscape.com ning ka igalt muult huvitavalt veebilehelt. Kui mõne lehe puhul tekib küsimus, kuidas ta tehtud on, siis HTML-kujul lehte saab vaadata brauseri view source valiku abil. Javaskript HTML lehe kasutajaga suhtlemisvõimeliseks muutmiseks saab kasutada javaskripti. Tema abil saab kasutaja poolt tekstiväljadesse ja mujale sisestatud andmeid töödelda, reageerida hiire liigutustele ja vahetada pilte. Javaskript võimaldab ka olemasolevate andmete põhjal uusi lehekülgi kokku panna. Kuna tegemist on intepreteeritava keelega (s.t. brauser loeb ja täidab tekstina kirjutatud korraldusi), siis toimib javaskript suhteliselt aeglaselt. Samas kuna javaskripti programmid on enamasti lühikesed ning nad kasutavad juba varem valmistatud ning optimeeritud tervikkäsklusi, siis intepretaatori töökiirus programmi kulgu oluliselt ei mõjuta. Javaskripti programmilõigud kirjutatakse HTML teksti vahele. Samuti saab programmilõike tööle panna sündmuste toimumisel (näiteks lehekülje avanemine, hiirevajutus nupul, hiire sisenemine pildi piirkonda jne. ). Liitmisülesannete loomine Näitena lehekülg, mis enese loomisel kirjutab sinna kakskümmend liitmisülesannet liidetavate väärtustega kuni kümneni. Nagu java, nii ka javaskripti puhul loob käsk Math.random() juhusliku arvu 0 ja 1 vahel. Korrutades selle kümnega ning ümardades täisosaks saabki juhusliku arvu nulli ja kümne vahel. Kahe arvu vahele tuleb plussmärk, tehte lõppu võrdusmärk ning
tähistab reavahetust ja \n HTMLi koodis järgmisele reale minekut. Alamprogramm Alamprogrammid saab päises eraldi välja tuua ning sellisel juhul saab neid lehe seest eraldi välja kutsuda. Liitmine Vormid ja väljad Dokumenti väljade (tekstivälja, tekstiala, märkeruudu, nupu, valiku) paigutamiseks tuleb dokumendi sisse luua (vähemalt üks) vorm. . Vormi sisse saab elemente paigutada nagu siin näidatud: loob tekstivälja, muude sinna sisse pandavate parameetritega saame tema omadusi määrata. Vormi elementidega sündmuste toimumisel saab sinna külge siduda programmilõike. Siin näites arvutatakse nupule vajutamisel kahe esimese tekstiväljas paikneva arvu summa ning paigutatakse see väärtus kolmandasse tekstivälja. eval on javaskripti tänuväärt funktsioon. Siin ta muudab väljale kirjutatud teksti arvuks, kuid ta oskab kokku arvutada igasuguseid avaldisi. Juhul kui me teda siin ei kasutaks, liidaks javaskripti intepretaator kokku tekstiväljades paiknevad tähed ning näiteks 3+2 tulemuseks oleks 32. Liitmine Nagu eespool mainitud saab alamprogramme kirjeldada dokumendi päises. Nüüd kui soovin et ükskõik kumma tekstivälja sisu muutmisel arvutatakse summa uuesti, piisab mul vaid käskida tekstivälja sisu muutmisel välja kutsuda arvutamise alamprogramm. Sündmusi, mille puhul on võimalik midagi käima panna, on päris palju. onChange käivitatakse, kuid valiku või tekstivälja sisu on muudetud (mõnikord oodatakse käivitamisel ka fookuse kadumist sellelt elemendilt). onClick kävivitub nupule või viitele vajutamisel. onFocus fookuse saabumisel, onKeyDown, onKeyPress, onKeyUp klahvi vastava sündmuse puhul, onLoad ja onUnload dokumendi laadimisel ja sealt lahkumisel, onMove või onResize akna liigutamisel, onMouseOver ja onMouseOut viite piirkonda sisenemisel või sealt lahkumisel. Liitmine Aknad Javaskript võimaldab aknaid avada ja sulgeda ning nende sisu määrata. Näikteks skriptis käsklus window.open(http://www.neti.ee); avab vastava lehekülje eraldi aknas. Kui meetodisse panna kolm parameetrit, siis esimene tähendab faili/URLi asukohta, kust leheküljele andmed võetakse, teine annab leheküljele nime, et talle saaks nime kaudu osutada ning kolmandasse sõnesse saab rodus üksteise järgi kirjutada parameetrid, mida akna loomisel arvestatakse. Loodud aknasse saab ka programmil lasta kirjutada. Selleks on vaja akna loomisel muutujasse kinni püüda osuti aknale, et tema abil saaks hiljem akna dokumendi kirjutada. Nii java kui javaskripti korral on funktsiooni poolt väljastatava muutuja kasutamine vabatahtlik, kasutamata jätmist ei loeta veaks. Javaskriptis ei pea muutujaid deklareerima, kuid näiteks kehtivuspiirkonna määratlemiseks võib seda var käsuga teha. Muutuja tüüpi ei saa määrata, seda teeb intepretaator automaatselt. Korrutustabeli loomine

Korrutustabeli loomise lehekülg

Pildid Ka tekstis olevaid pilte saab javaskripti abil vahetada. Lehekülje loomisel luuakse seal paiknevatest piltidest massiiv, nii et document.images[0] tähistab esimest pilti, document.images[1] teist jne. Klassil Image on mitu atribuuti. Mõnda neist (nagu kõrgus ja laius) saab vaid lugeda, kuid parameetrit src, mis sisaldab pildi URLi, saab vajadusel muuta. Niimoodi pilte vahetades saab luua illusiooni liikumisest, samuti, nagu järgnevas näites näha, võib vahetada pilti siis, kui temale hiirega peale minna. Hiire liikumisele on võimeline reageerima viide , kui hiir satub viitele, näidatakse pilti failist pilt2.gif, hiire väljumisel failist pilt1.gif. Pildi juurde on border=0 kirjutatud seepärast, et et pildi ümber sinist ranti ei tekiks. Kuna tegemist on viite alla kuuluva teksti osaga, siis tekiks tema ümber muidu joon, et oleks näha, et sinna vajutades kuhugi jõuda saab. Kuna siin näiteks ei soovi ma hiirega viitele vajutamisele lehekülge vahetada, siis on viiteks pandud selle sama faili aadress ehk Pilt1.html. Pildi muutmine

Pilte saab ka automaatselt vahetuma panna. Järgnevas dokumendis on kaks pilti ning funktsioon vaheta vahetab nad omavahel. Muutuja olek näitab kumba pidi pildid on ning igal korral muudetakse selle muutuja väärtus. Käsklus window.setTimeout("vaheta()", 500); ütleb, et 500 millisekundi pärast kutsutakse välja meetod vaheta(). Siin juhul tähendab see, et sama funktsioon palub objektil window ennast uuesti poole sekundi pärast välja kutsuda ning tulemuseks on, et meetod kutsub end pidevalt välja ning iga poole sekundi tagant vahetatakse pildid. Pildi muutmine

Tervitus!

Raamid Brauseri akna saab jaotada raamideks ning iga raami sisse panna eraldi dokumendi. Selleks tuleb lehe osas märkida, et leht on jaotatud raamideks ning öelda, millisest failist millise raami sisu tuleb võtta. tähendab et leht on jaotatud kaheks veeruks (cols ehk columns), esimene raam võtab 40% ning teine 60% brauseri laiusest. Kui tahta ekraan ridadena osadeks jagada, tuleks cols asemele kirjutada rows. Pildiraam Lehele saab panna ka enam kui kaks raami. Kui tahta lihtsalt kolm raami kõrvuti panna, siis piisab, kui kirjutada ning allpoole kõigi kolme raami URLid. Keerukama kujunduse vajadusel saab aga hakata loodud raame omakorda raamideks jaotama, s.t, et ühe sees on veel omakorda teine . Järgnevas näites jagatakse aken kõigepealt kaheks reaks - ülemise suuruseks 70 ning alumise suuruseks 30%. Siis tehakse ülemine omakorda kaheks veeruks, esimesele laiuseks 40% ning teisele 60. Pildiraam Kui raamidele nimed anda, siis saab teksti sees määrata, millise raami tekst viite vajutamise tulemusena vahetub. Sisukorraga aken Kui dokumendi päiseosas öelda, millisesse aknasse või raami on viited suunatud (siin näites ), siis saab näiteks sisukorrast peatükke teisele lehele välja kutsuda ilma, et sisukord sellest ise paigast läheks. Päises olev base target määrab sihtkoha kogu lehe viidetele, soovi korral saab aga iga viite puhul eraldi määrata, kuhu see suunatud on.

Sisukord

Andmete säilitamine raamis HTML lehe juurde kuuluvate javaskripti muutujate väärtused lähevad lehe vahetamisel kaduma. Kui soovida ühe lehe peal andmed sisestada ning neid teise lehe peal kasutada, tuleks andmeid hoida mõne paigalpüsiva lehe muutujas. Siin näites kuulub pealehe juurde muutuja "nimi". Pealeht on jagatud horisontaalselt kaheks raamiks, millest esimene võtab enese alla kogu lehe pinna. Raamis olev leht pääseb pealehe muutujate juurde, kasutades eesliidet top. Esimesel avataval lehel (Raam4a) on tekstiväli ja nupp. Nupule vajutamisel salvestatakse tekstivälja kirjutatu pealehe muutujasse nimi rea onClick="top.nimi=document.forms[0].elements[0].value" abil. Järgneval lehele kirjutatakse tervitus, kasutades pealehe muutujat. document.writeln("Tere, "+top.nimi+"!"); Nimehoidja Lisaks andmetele saab kasutada ka teistes lehtedes kirjeldatud funktsioone. Piisab vaid osutist vastavale lehele. Nii on võimalik küsida andmed varem ning kasutada neid alles mitme leheküljevahetuse pärast. Näiteks saab näiteks testiprogrammis küsida algul kasutaja nime ning alles pärast vastustele õigesti vastamist võib programm välja kirjutada tõendi, kus õppuri nimi peal on. Samuti saab testi esitamisel kasutada vastuste küsimiseks sama alamprogrammi, kuid andmeid loetakse iga peatüki juures eri lehelt. Teiste lehtede poole pöördumisel tähistab top peaakent. Raami või akna suhtes otsene ülem leht on parent. Akna sees olevad raamid kuuluvad massiivi frames, kui raamil on omakorda alamraame, siis on ka temal massiiv frames, mille kaudu on võimalik vastava raami poole pöörduda. Javaskripti abil on võimalik määrata ka lehekülje URL-I (s.t. vahetada lehekülje sisu), samuti avada ja sulgeda aknaid. Rakend ja javaskript Javaskript saab kasutada rakendi public-piiritlejaga meetodeid ning muutujaid. Javaskripti abil on võimalik ühest rakendist teise andmeid üle kanda. Sarnaselt nagu on pildid massiivis images[] on lehel olevad rakendid massiivis applets[] ning nende poole saab pöörduda nagu selle massiivi elementide poole. Ka saab rakendi kaudu javaskripti võimalusi kasutada, kuid see on veidi keerulisem. import java.applet.Applet; import java.awt.*; public class Apl1 extends Applet{ TextField tf=new TextField(10); public void init(){ add(tf); } public String annaTekst(){ return tf.getText(); } public void paneTekst(String tekst){ tf.setText(tekst); } }