Internet ja veebivahendid (HTML,CSS,DHTML) Kursuse konspekt. Autor Jüri PUHANG

Transcription

1 Internet ja veebivahendid (HTML,CSS,DHTML) Kursuse konspekt Autor Jüri PUHANG T a l l i n n

2 - 2 -

3 Sisukord: SISSEJUHATUS PEATÜKK - INTERNET INTERNETI ÜLDMÕISTED JA ARENGULUGU INTERNETI AADRESSID IP AADRESSIDE KLASSID INTERNETI TEENUSED Elektronpost Virtuaalterminaal ehk Telnet Failitransport ehk FTP Võrguleheküljed ehk PEATÜKK - WWW JA HTML AJALUGU JA KUJUNEMINE WWW TEHNILINE KÜLG HTML-I ÜLDPÕHIMÕTTED HTML-DOKUMENDI STRUKTUUR TEKSTI KASUTAMINE Teksti formaatimine Pealkirjad Täpitähed ja muud sümbolid Teksti rõhutamine Nimekirjad ja loetelud Parameetrite kasutamine märgendites HÜPERTEKST Kaugviited Lähiviited Siseviited Viited teksti sees Elektronpostiviited PILTIDE KASUTAMINE Lihtgraafika Graafilised viited Suurte piltide kasutamine Animatsioonide kasutamine Dokumentide kasutamine TABELID

4 2.9. PANEELID Paneelidega leht Paneelide sisu LEHEKÜLJE KUJUNDAMINE Head tavad WWW lehtedel PEATÜKK - CSS ÜLDISELOOMUSTUS CSS-I KIRJELDUS HTML-FAILIS CSS-I KIRJELDUS ERALDI CSS FAILINA CSS-I PARAMEETRID CSS - KASUTAMISE NÄIDE PEATÜKK - VORMID TEKSTIKASTID RIPPLOENDID VALIKUVORMID NUPUD JA KONTROLLRUUDUD ANDMETE EDASTAMINE PEATÜKK - DÜNAAMILINE WWW UUEMAD ARENGUD DÜNAAMILINE HTML Teksti värvivahetus ja pildi asendus Objektide identifitseerimine SKRIPTPROGRAMMID DHTML-IS Skript-programmide paiknevuse näited Skriptide kasutamise näited Kui Brauser ei interpreteeri skripte Scriptede otsimine Internet ist Scriptede käivitamine KOKKUVÕTE

5 Internet ja veebivahendid Sissejuhatus Käesoleval ajal on peaaegu kõik arvutid ühendud arvutivõrku. Arvutivõrke liigitatakse: 1) kohalikeks võrkudeks LAN ( Local Area Network ) ja 2) laivõrkudeks WAN ( Wide Area Network ) Kohalik füüsiline võrk on tavaliselt keerupaari Ethernet-i võrk, kuid kasutusel on ka koaksiaalkaabelvõrk, USB-võrk, Talken Ring või jadaliidesvõrk. Viimasel juhul on arvutid omavahel ühenduses läbi COM-portide. Laivõrk WAN on tervet maailma haarav andmesidevõrk ja Internet kasutab seda oma ühenduste loomiseks. Sageli kasutatakse laivõrkude kohta lühendit WWW (World Wide Web - ülemaailmne (ämbliku)võrk ) mis on kitsam ja ebamäärasem mõiste kui Interneti. WWW-d kasutatakse pigem WWW-lehekülgede mõistes. Selle kursuse konspektis on käsitletud: 1) Interneti üldmõisteid ja IP-aadresse. 2) Interneti teenuseid 3) WWW-lehekülgede tegemist 4) HTML keele struktuuri (Hypertext Markup Language ) 5) Dünaamilist HTML-i ( DHTML - Dynamic HTML ) 6) HTML-i astmelist struktuuri CSS- ( Cascade Style Sheet ) 7) Info sisestamist WWW lehekülgedelt (Form - vormid) 8) Skriptprogrammide kasutamine DHTML lehtedel - 5 -

6 1. peatükk - INTERNET 1.1. Interneti üldmõisted ja arengulugu Internet on lai mõiste ja tähendab tegelikult võrkude võrku, kus väga erineva suuruse ja struktuuriga, üle maailma laiali olevaid arvutikooslused on kindlate reeglite ja vahendite abil üksteisega ühendatud. See võimaldab info liikumist ühest osavõrgust teise. Erinevalt väikestest arvutivõrkudest puudub Internetil tervikuna range struktuur ja kindel keskus. Internet is puudub juhtarvuti ja kontrolliv keskarvuti. Kuigi on olemas võimsad serverarvutid, mille teenuseid teised väiksemad arvutid saavad kasutada, ei juhi ükski neist kogu süsteemi. Selline struktuuriline hajusus on pärit Interneti algaegadest, mil tollane Interneti eelkäija ARPANet oli rangelt sõjaline sidesüsteem, ja pidi suutma jätkata oma tööd peale mitmete olulise komponendi väljalangemist. Internet kasutab ühenduste loomiseks WAN võrku, kuid sama WAN võrku kasutavad ka teised ül msed andmesidevõrgud (Näiteks lennunduse või panganduse andmesidevörgud ). Kõik need ül msed võrgud reeglina üürivad sidekanaleid telekommunikatsioonifirmadelt. Internet-i on ühendatud väga erineva võimsusega ning väga erinevat tüüpi arvuteid alates PC või Macintoshi tüüpi sülearvutist ja lõpetades toasuuruste serveritega, kus ühtses süsteemis töötavad tuhanded arvutid. Ühiseks nimetajaks Internet il on andmesideprotokoll TCP/IP, mis tagab arvutitevahelise suhtlemise kindlate reeglite järgi. See määrab kindlaks, mil viisil ja millises järjestuses infot edastatakse. Interneti liinides jookseb n.ö. puhas info, mis ei sõltu konkreetsest arvutitüübist. Edastatav info jagatakse pakettideks ja interneti reeglite järgi lisatakse paketile saatja ja saaja asukohta puudutavad andmed. Peale infopakettide liigub internetis hulgaliselt teenusinformatsiooni. Teenusinfo peab tagama infoedastuse kontrolli nii info õigsuse, kui ka kättetoimetamise üle. Nii võib toimuda häireteta side väga erinevat tüüpi arvutite vahel, kuna Internetis nad räägivad samas keeles. Internetiga on ühendatud KLIENDID ja klientidele osutavad teenuseid SERVER id läbi marsruuterite ja sideliinide. Klient võib olla ühendatud otse serveriga või marsruuteriga. Klient edastab oma võrguseadmele pakette, mis vastavad TCP/IP reeglistikule. See pakett võib olla päring, vastus või teenusinfo

7 SERVER SERVER ROUTE (Marsruuter KLIENT ROUTE (Marsruuter) KLIENT Joonis 1.1 Interneti üldine struktuurskeem 1.2. Interneti aadressid Internetis on igal arvutil oma unikaalne aadress, mille abil teda eristatakse teistest arvutitest. Aadressid on kirjutatud: a) numbrilisel kujul või b) tähekombinatsioonidena. On kasutusel kaks numbrilise aadressi süsteemi. IPv4 ja IPv6. Praegu kasutatav numbriliste aadresside süsteem on IPv4 ja aadress koosneb neljast kuni kolmekohalisest omavahel punktidega eraldatud numbrist ehk oktetist. Numbriliste aadresside süsteem IPv6 on juurutamisel ja aadress koosneb kaheksast 16- bitisest rühmast (seega IPv6 on 128-bitine) *) Näiteks Tallinna Polütehnikumi aegunud **) kodulehekülg on arvutis, mille aadress on ja see on unikaalne. Arvuti asuv TPT-s, Pärnu mnt 57. See tähendab, et ükski arvuti maailmas ei tohi omada seda aadressi. Sellist aadressi nimetatakse ka IP-numbriks ( IP Internet protocol ). Iga punktidevaheline number on vahemikus 0 kuni 255. Seega 256 erinevat numbrit. See tähendab et punktidevaheline arv on 8-bitine bait = 255 Teisisõnu Internet-i IPv4 aadressid on 32 bitilised kahendsüsteemi arvud, mis numbrilisel kujul kirjutatakse üles baitidena (punktidega eraldatud kümnendarvudena) alustades kõige tähenduslikumast (vanemast) baidist. *) IPv6 aadress kuueteistkümnendsüsteemis kahebaidiliste gruppidena. Näiteks: 2001:EFAD:1AFE:83:0:0:28FF:FF. **)Ametlik TPT koduleht on renditud pinnal IP aadressil ( ja selle serveris on TPT aadressiks tpt.clients.web24.ee. Firma W-All IS Estonia, kontor asub Masina 11 (varem oli tegevjuhiks Valentin Ivanov Laki ) - 7 -

8 Näitena: on kuueteistkümnendsüsteemis 0x C1 28 A0 01 Numbrilisele aadressile võib vastata sõnadest või tähekombinatsioonidest koosnev nimeline aadress. Tavaliselt mõeldaksegi Interneti aadressi all just sellist aadressi kuju. Näiteks: Täheline aadress sisaldab endas arvuti nime (WWW-server ), alamvõrgu või asutuse nime (tpt - Tallinna Polütehnikum), laiema võrguosa tunnus ( edu - Education) ja riigi tunnust (ee - Eesti). Seega saame tavalise aadressiga võrreldava aadressi: WWW-server, Tallinna Polütehnikum, Haridusministeerium, Eesti Viimane aadressi osa nimetatakse domeeniks ja kasutusel on kaks süsteemi: cctld ( country code Top Level Domain ) mis on kahetäheline riigi tähis ja gtld ( generic Top Level Domain ) mis on kolme- või enamatäheline. Mõnede lähemate riikide gtld-d:.ee - Eesti.fi - Soome (Finland).se - Rootsi(Sweden).de- Saksamaa(Deuchland).ru - Venemaa(Рассия).lv - Läti (Latvija) Kolmetäheline ülemaailmse domeeni tunnus tähendab (nn.vanad gtld-d):..edu - ( Education ) haridusasutus, tüüpiliselt ülikool.com - ( Commercial ) kommertsasutus, firma.gov - ( Goverment ) riigi- või valitsusasutus, haldusüksus.org - ( Organisation ) mittetulundusühing, organisatsioon.net - ( Network ) Internet.mil - ( Military ) sõjalised objektid. Uued ülemaailmsed domeenid ( New gtld ).aero - (Air-transport industry) õhutransport, lennundus.biz - ( Businesses ) äritegevus mis maksab $52 2 aastas.coop - ( Cooperatives ) koperatiivid ja ühistud.info - ( Information ) teabesaidid.museum - ( Museums ) muuseumid.name - ( Names ) isikunimede jaoks maksab $9.95 aastas.pro - ( Accountants, Lawyers, and Physicians).shop -..XXX.-..sport -.club -.family -.inc -.law.travel -.med.tech -.mp3-8 -

9 Ameerika Ühendriikide arvutitel ei kasutata nimes riigi tummust, kuna esimesed Internetti ühendatud arvutid olid USA-s ja tookord puudus selleks vajadus. (riigidoomen.us siiski eksisteerib). Ka Suurbritannia aadressides esineb tüübitunnus, kuid seal on ta eelviimasel kohal enne kiigi tähist.uk IP aadresside klassid Igale arvutile peab olema kinnitatud kogu võrgu ulatuses unikaalne IP-aadress. Peale arvutite on võrkudes veel võrguseadmed ja neil on samuti vaja IP-aadressi. Võrguseadmeteks on marsruuterid ( Router ) nimeserverid ja muud seadmed. Arvuteid, võrguseadmeid ja servereid nimetatakse ühise nimetusega Host. Ühel hostil võib olla omistatud ka mitu IP aadress - näiteks marsruuteritel on igas võrgus eri aadress. Samuti on teatud olukordi, kus ühel arvutil võib olla kasulik omada samas võrgus mitut aadressi (näiteks mitmele firmale WWW serveri teenust pakkuv arvuti). Igale numbrilisele IP-aadressile on vastavusse seatud ka nimeline aadress. IP-võrgus on spetsiaalsed nimeserverid DNS ( Domain Name Server ) mis leiavad nimedele vastavaid numbrilisi aadresse. Kogu võrk jaotatakse parema administreerimise huvides alamvõrkudeks ja alamvõrke on viis klassi: Klass A; B; C; D; E Kogu IP-aadressruumi haldab ja jagab organisatsioon IANA ( Internet Assigned Numbers Authority ). IP numbriline aadress koosneb tegelikult kahest loogilisest osast: a) võrguaadressist, milleks on numbrilise aadressi esimesed oktetid ja b) võrgusisesest aadressist, milleks on aadressi ülejäänud osa. Viimane osa ongi hostiaadress võrgu sees.

10 IP aadressi klassi määrab 32-bitilise numbrilise aadressi neli vanemat (vasakpoolset) bitte. Klass 4-bitti Aadresside vahemik Kommentaar A Võrgu määrab esimene bait. Kokku on 127 A-klassi võrku ja igas võrgus võib olla kuni 1,6 miljonit hosti. B Võrgu määravad kaks esimest baiti. Kokku on B-klassi võrku ja igas võrgus on hosti. Arvutus ( )x256=16384 C Võrgu määravad kolm esimest baiti. Kokku on 2 miljonit C-klassi võrku ja iga võrgus võib olla 254 hosti. D E eraldatud multicast aadressitele reserveeritud tuleviku laiendusteks Enamus A klassi võrke on ülemaailmsetele firmadele eraldatud. Klass D on eraldatud multicast tarbeks - see on IP protokolli laiendus, mis võimaldab korraga adresseerita rohkem kui üht arvutit. Seda nimetati ka multiplexed broadcast aadressideks. Neid aadresse kasutatakse IPTV edastamiseks. Näiteks: Elion saadab aadressile ETV programmi DigiTV klientidele läbi ADSL modemi. Hosti aadressi osas aadresside okteti väärtused 0 ja 255 ( 16-süst 00 ja FF ) pole lubatud. Nullise väärtusega hostiosa aadress vastab jooksva asukoha võrgule ja ühtedest koosnev hostiaadress on leviaadress. Leviaadress vastab kõigile hostidele antud alamvõrgus. Tavaliselt kasutatakse võrgu suurimat lubatud aadressi välisühenduseks ( Broadcast Address ) Näiteks C-klassi võrgu aadress kõikide hostide aadress. Selline klassidesse jagamine on aadressruumi otstarbeka kasutamise seisukohalt halb, kuna A klassi võrk, milles on kuni hosti on liiga suur. Selline suur võrku praktikas raskesti realiseeritav ja administreeritav. Samas on A klassi võrke ainult 127 tükki. Seetõttu on hiljem lisatud võimalus jagada võrgud omakorda alamvõrkudeks. Selleks, et näidata, milline osa aadressist on võrgu ja alamvõrgu osa ning milline võrgusisene aadress, on toodud sisse mõiste võrgumask (netmask)

11 Võrgumastiks on IP aadressi kujul esitatud 32 bitine kahendarv, mille vanemad järgud on ühed. Seega kõik need bitid, mis vastavas IP aadressis võrgu ja alamvõrgu osale on ühed ning võrgusisest aadressi näitavad bitid nullid. Võrgumaski mõistet kasutatakse tänapäeval ühtsuse huvides ka alamvõrkudeks mittejagatud võrkude juures. Näite 1: Kui C-klassi alamvõrgus on 125 hosti on võrgumask ( 16-süst FF FF FF 80 = ) Näide 2: Kui C-klassi alamvõrgus on 61 hosti on võrgumask ( =192 ) Näide 3: Kui C-klassi alamvõrgus on 29 hosti on Kuna Internet on tegelikult võrkude võrk, siis selline jaotus kehtib kõige välimise ülemaailmse võrgu kohta. Sisevõrgus võib olla oma aadressid. Peaasi, et oleks tagatus sisemiste ja väliste aadresside lahutamine. Üldlevinud kokkuleppe kohaselt on igas aadressi klassis mõned aadressid kasutamata neid saab kasutada sisevõrgu aadressidena. Sellisel võrgul võib olla ainult üks välisvõrgu aadress ja välisvõrku pääseb läbi luusi, mis konverteerib sisevõrgu aadressid ümber. Need sisevõrgu jaoks jäätud aadressid on: Klass Aadresside vahemik Võrkude arv A võrk kuni 1,6 miljonit hosti. B võrku hosti. 4 C võrku 254 hosti Interneti teenused Internet pakub oma võrku ühendatud klientidele teenuseid. Teenuseid osutavad serverarvutid. Seega on tegemist Klient Server süsteemiga. Klient pöördub serveri poole universaalse kirjega URL (Uninform resource Locator) mis koosneb järgmistest olulisematest osadest Teenus:// Server :Port/Fail # Märgend Näiteks: Levinumad teenused, mis serverid pakuvad on järgmised: Elektronpost Telnet Virtuaalne terminaal HTTP Hüperteksti lehekülgede lugemine (HyperText Transport Protokol) FTP Failide transport (File Transfer Protocol)

12 Elektronpost Elektronpost oli esimene Interneti rakendus (teenus) mis on teadete saatmine. See on lihtne ja efektiivne teadete saatmise meetod, mis võimaldab saata teateid ja kirju sadu kordi kiiremini kui tavaline postiteenus. Elektronpost kasutab side pidamiseks arvutiaadresse (näiteks tpt.edu.ee), millele lisatakse ette veel konkreetse inimese nimi. Inimesel, kellel on serveris oma postkast, on oma postkastile ligipääs läbi parooli. Selleks peab serveris olema käivitatud postitusprogramm ja kasutajal ehk konkreetsel inimesil individuaalne konto ja parool ( Account ). Ligipääsemiseks logib kasutaja serverisse ja loeb oma kirju. Kirjad võib üle kanda ( tõmmata ) oma personaalsesse arvutisse, kui kliendil on endal kirjade tõmbamiseks ja lugemiseks oma programm. Näiteks: Kui TPT postiserveris on registreeritud Jaani-nimeline kasutaja on tema elektronposti aadress: jaan@tpt.edu.ee Aadressides kasutatakse tavaliselt ainult väiketähti ja ühesõnalisi nimesid. Juhul, kui on kindlasti vaja kajastada aadressis kogu nime, kasutatakse ka suurtähti ja eraldajana punkti: Jaan.Jalakas@mail.ee Nimedes võib kasutada ainult ladina tähti ja numbreid. Tühikut, täpitähti (äöõü) ja teisi lisamärgiga tähti(š,ž,ļ) ei tohi kasutada. Paljud internetis teenuste pakkujad lubavad tasuta oma serveritesse luua postkaste. Posti lugemiseks ja vastuvõtmiseks pakuvad teenusepakkujad veebipõhist postitusprogrammi ja kirjade hoidmiseks kettaruumi. Kliendi arvutis on elektronposti saatmiseks ja vastuvõtmiseks palju erinevaid tarkvarapakette, mille võimalused on erinevad. Levinumad programmid on MS Outlook Express, MS Outlook, Pegasus,. Linux-i programmid mail, elm ja pine võimaldavad samuti postitamist Enim-vajatavad tegevused on kirjade lugemine ja saatmine, vastamine (Reply) ja edasisaatmine (Forward). Elektronkirja alguses on nn. päis, kus on andmed kirja saatja ja saaja kohta. Vahel leiab sealt ka infot saatnud süsteemi ja sidekanalite kohta Virtuaalterminaal ehk Telnet. Personaalarvutid on mõeldud ühele kasutajale. Suuremaid serverarvuteid võib samaaegselt kasutada mitu kasutajat. Igal kasutajal on oma töökoht kuvari ja klaviatuuriga,

13 mis on ühendatud serveriga COM pordi kaudu. Mitme kasutajaga OP-süsteemid nagu UNIX on selliseks tööks loodud. TÖÖARVUTI ( Mitmekasutaja OS-iga ) TÖÖARVUTI Kohalikud töökohad Kodune töökoht Joonis 2 Telnet läbi Interneti ühenduste TELNETI KLIENDID Kaasajal terminaale ei kasutata, kuid serverarvutite multikasutus on säilinud. Terminaalideks kasutatakse tavaliselt PC arvuteid. Telnet võimaldab võtta Interneti kaudu ühendust eemal asuva arvutiga, muutudes nagu üheks selle arvuti töökohaks. Seega saab Telneti abil kasutada põhimõtteliselt kõiki neid võimalusi, mida pakub see arvuti ja on lubanud selle arvuti administraator. Kaugest arvutist on võimalik käivitada ka programme. Mingisse arvutisse Telnetiga ühenduse võtmine eeldab reeglina kasutajaõiguste olemasolu selles arvutis. Registreeritud kasutajale on antud oma nimi e. kasutajakonto (login) ning parool e. salasõna (password). Telneti ühenduse käivitamise konkreetne käik sõltub kasutatavast tarkvarast. Tavaliselt käivitatakse kliendi arvutis terminali imiteeriv programm. Levinuim programm Windows-i keskkonnas on HyperTerminal mida on võimalik häälestada sisselogimiseks eemalolevasse arvutisse. Põhimõtteliselt saab Telneti alustada ka Interneti lehitsejast (browser). Selleks sisestatakse aadressiks: telnet:// Kasutaja:Parool@server :Port Näiteks:telnet://a1:ababab@phax.tpt.edu.ee NB! Kui on kasutuses standardsed pordid, ei ole vaja porti lisada Failitransport ehk FTP. FTP (File Transfer Protocol) on arvutiteenus, mis võimaldab failide (s.h. tekstid, programmid, pildid, video jpm) transporti Internetti ühendatud arvutite vahel. Internetti on ühendatud palju suurarvuteid, kus on suured, vabaks kasutamiseks mõeldud tarkvaraarhiivid. Need sisaldavaid miljoneid ühikuid mittekommertsiaalset tarkvara,

14 mille kopeerimine on lubatud igaühele (seega suuri rakenduspakette sealt otsida ei tasu, küll aga muud huvitavat). FTP ühenduse loomine on mõneti sarnane Telnetiga - ka siin küsitakse kasutaja nime ja parooli. Mainitud vaba tarkvara arhiivid aga avanevad kasutajanime anonymous abil, parooli kohale on soovitav sisestada iseenda elektronposti-aadress (andmaks süsteemi hooldajale paremat ülevaadet külastajate kohta). FTP-d võib kasutada Telnet-i all, kuid lihtsam on kasutada failide transportimiseks spetsiaalprogramme. Levinumad programmid Windows-i keskkonnas on : WS_FTP Pro Window mis on vabavara ja aadressil ja FAR manager mis on kasutatav tasuta ja saab aadressilt Nende programmide abil saab arvutisse, kus töötab FTP server sisse logida kas anonüümselt ( anonymous ) või oma kasutajanime ja parooliga. Enamus FTP servereid paikneb UNIX-i või Linux-i OP-süsteemiga arvutites, siis FTP kliendiprogramm genereerib Linux-i või UNIX-i jaoks käske ja analüüsib vastuseid. Failitransportimise võib käivitada samuti Interneti lehitseja aknast. Selleks sisestatakse aadressiks: ftp:// Kasutaja:Parool@server :Port/fail Näiteks:ftp://a1:ababab@phax.tpt.edu.ee/jann.avi Olenevalt lehitseja (browseri) variandist käivitatakse FTP programm (või on FTP vahendid brauserisse sisse ehitatud) ja salvestatakse fail ajutisse kausta. Peale seda avatakse fail, kui vastavalt faili laiendile on selleks otstarbeks programm olemas Võrguleheküljed ehk WWW WWW (World Wide Web) on Interneti esimene tõeliselt massidesse jõudnud teenus. WWW dokument ehk kodulehekülg kujutab endast tekstilehekülge, mis sisaldab viiteid ehk linke teistele lehekülgedele nii selles arvutis kui ka kaugemal. Mõiste kodulehekülg tekkis siis, kui peaaegu iga ettevõte ja organisatsioon tegi endale WWWlehekülge. Tavaliselt on leheküljel ka palju graafilist materjali, mida saab samuti kasutada viidete jaoks. WWW-lehekülje aadressiks URL (Uniform Resource Locator) (vaata 1.4. interneti teenused) Peale arvuti aadressi on URL-is määratud ka dokumendi (lehekülje) asukoht selle arvuti kataloogides. Aadressi ette lisatakse teenuse tunnus, milleks on Selleks sisestatakse aadressiks: /kataloog/fail.html Näiteks:

15 Kui aadressis dokumendi nimi ära jätta, otsitakse aadressis määratud kataloogist dokumenti index.htm, index.html või welcome.html., nii nagu serveris on määratud. Kui selliseid ei ole, antakse veateade (Not Found). WWW-lehekülgede lugemiseks peab klient kasutama WWW-lugemisprogrammi ehk lehitsejat ( Browser ). Levinumad brauserid on MS Internet Explorer ja Netscape Navigator. Levinud on ka vabavaraline WWW- lugemisprogrammides Mozilla Firefox. WWW täpsemat olemust vaatleme järgmises peatükis

16 2. peatükk - WWW ja HTML 2.1. Ajalugu ja kujunemine WWW sai oma alguse Šveitsist, kus aastal hakati Euroopa Tuumafüüsika Laboris (CERN) ühendama erinevaid teadusdokumente hüpertekstiks - tekstiks, kus mingi võtmesõna kaudu sai pöörduda teiste sellega seotud dokumentide poole. Sellega hakati siduma teisigi dokumente ja tekkis ülemaailme, akadeemilisele sfäärile suunatud infomaterjalide võrk. Termin hüpertekst tähendab sellist teksti arvutis, kus tekstis olevaid termineid saab lahti dešifreerida. Tõeline WWW-plahvatus aga tekkis aastal, kui Interneti hüpertekst toodi väikearvutitele Windows-keskkonda. Varajane WWW sisaldas ainult teksti, nüüd aga lisandusid dokumentidele pildid ja fotod. Töö toimus mugavas graafilises keskkonnas. Esimene spetsiaalne Windowsi WWW-brauser Mosaic saavutas suure populaarsuse, selle ületas aga veelgi tugevamalt praegune standardprogramm - Netscape Navigator. PC-arvutite suurim tarkvaratootja Microsoft ei osanud Interneti tähtsust õigeaegselt hinnata ja jäi alguses Interneti arengus maha. Suurte investeeringute ja kulutuste tulemusena töötati välja turuliidrile Netscape ile vastukaaluks Internet Explorer, mis praeguseks on jõudnud levilt Navigatori-ist ette. Kahe suure turuliidri vaheline vaidlus jõudis USA kohtutesse. Viimaste aastate jooksul on Internet muutunud märgatavalt kommertslikumaks - enamik endast lugupidavatest firmadest on hankinud endale WWW-lehekülje, reklaami levitatakse nii passiivselt WWW-s kui aktiivselt i kaudu, on hakanud ka ilmnema teistes meedialiikides juba varem esinenud probleemid (tarbija valimatu pommitamine kõikvõimaliku reklaamiga jne) WWW tehniline külg WWW-serverid on tüüpiliselt UNIX või Linux-süsteemi arvuti. Microsoft töötas serveri Windows NT eesmärgiga kasutada seda nii failserverina, kui ka WWWserverina, kuid ei ole suutnud UNIX-it välja tõrjuda. Serverid kasutavad lehekülgede saatmiseks ja vastuvõtmist erilist süsteemi ehk protokolli HTTP ( Hypertext Transfer Protocol ). Lehekülg paigutatakse eraldi kataloogi (nimega public_html, html.docs vms), mille lugemisõigused on kõigil, kes pöörduvad serveri poole

17 WWW-fail (laiendiga kas.html või.htm) on tegelikult puhas ASCII-tekstifail, s.t. koosneb täielikult inimesele arusaadavatest sümbolitest. Leheküljefail kas luuakse otse serveris (näiteks Telneti abil) või kirjutatakse valmis kliendi arvutis ning viiakse FTP abil serverisse. Veebilehekülje koostamiseks võib kasutada tavalist tekstiredaktorit NotePad. Sellisel juhul peab täielikult tundma HTML keele kõiki peensusi. On palju abiprogramme, mis võimaldavad lehekülgi koostada graafilises keskkonnas, kuid HTML keele tundmata on võimatu häid WWW lehti teha. Graafilised veebilehtede koostamise enamlevinud programmid on: 1) MicroSoft FontPage 2) NetsCape Composer, mis on integreeritud Netscape i brauseriga Netscape Communicator ühiseks paketiks 3) Adobe DreamWeaver, mis on tasuline programm Paljud tekstiredaktorid on suutelised konverteerima dokumendi HTML formaati. MicroSoft Word-il on see võimalus olemas. Seda võimalust kasutatakse harva, sest sellisel dokumendil on palju liigset ja väga paljusid HTML-keele võimalusi ei saa kasutada HTML-i üldpõhimõtted WWW-lehekülgede tegemiseks kasutatakse erilist sümbolite süsteemi ehk keelt - HTML-i (Hypertext Markup Language - hüperteksti märkimiskeel ). HTML ei ole programmeerimiskeel vaid on WWW-lehekülje tegemine keel, mille abil Brausetr genereerib kliendi arvutis graafilise lehe. WWW-lehtede täiendamiseks saab kasutada ka programmeerimist, kui selle järele on tõsisem vajadus. Programm lisatakse HTML-i lehele ja käivitub peale lehekülje allalaadimist kliendi arvutis. Levinumad programmeerimiskeeled on JavaScript ja VBS ( Visual Basic Script ). Ka ilma skriptideta ainult HTML-iga saab luua väga ilusaid ja informatiivseid lehekülgi. HTML-lehekülg koosneb tekstist ja märgenditest (tag), mille abil määratakse lehe eri osade väljanägemine ja ülesanded. NB! Mõnes eestikeelses raamatus nimetatakse neid siltideks. Märgendeid kirjutatakse < > - märkide vahele ja kasutatakse näiteks nii: Siin on üks <B> Eriti tähtis </B> asi. Eriti tähtis on paksus kirjas. Märgendid on nagu sulud matemaatikavalemites, mis määravad tehete täitmise järjekorra. Paljud märgendid, mis määravad mingi lõigu kujunduse (poolpaks kiri, kaldkiri jms), esinevad paarikaupa - vastava lõigu alguses ja lõpus. Osa märgendeid ei vaja lõpumärgendit nagu näiteks <BR> break - uus rida. Sageli ei ole ka paarismärgenditel lõpumärgend kohustuslik, kuid mõnede lõpumär

18 gendite puudumine viib Brauseri segadusse ja parem on alati lõpumärgendeid kasutada. Lõpumärgend erineb algusmärgendist kaldkriipsu poolest märgendi alguses. Üldjuhul võib märgendites kasutada nii suuri kui väikseid tähti ja isegi läbisegi. Selguse huvides on kasulik säilitada ühtset stiili. Algusmärgendid võivad sisaldada ka parameetreid (ehk argumente), mis täpsustavad selle märgendi tähendust Näiteks: <META NAME= Keyword CONTENT= Kool > on märgend milles on kaks parameetril. NAME millele on antud väärtus Keyword ja CONTENT millele on antud väärtus Kool 2.4. HTML-dokumendi struktuur HTML-dokumendil on mõned kohustuslikud märgendid, mis määravad dokumendi piirid ja põhilise jaotuse. Esmalt tuleb määrata HTML-i algus ja lõpp ehk dokumendi piirid: <HTML> dokumendi tekst </HTML> Kõige laiemalt jaguneb HTML-dokument päiseks < HEAD > ja kehaks ehk põhiosaks < BODY >. Päis on mõeldud dokumenti iseloomustava info jaoks. Seal on ka <TITLE>märgendite vahele dokumendi tiitel, mis ilmub brauser i lugemisakna ülaserva. Seega on dokumendi üldine ülesehitus järgmine: <HTML> <HEAD> <TITLE> Minu esimene lehekülg </TITLE> </HEAD> <BODY> Lehekülje põhiosa </BODY> </HTML> Märgendite paigutus on vaba, kuid selguse mõttes on kasulik panna iga märgend eraldi reale ja kasutada nihutamist, et paremini leida lõpumärgendeid. Tavaliselt kirjutatakse märgendid suurtähtedega, kuid sundust selleks ei ole

19 2.5. Teksti kasutamine WWW-lehekülje põhilise osa moodustab tekst, mida saab erinevate vahenditega esile tõsta. HTML võimaldab kasutada kõiki peamisi tekstitöötlustehnikaid Teksti formaatimine Tavalist, ilma mingite lisailustusteta teksti võib HTML-leheküljele kirjutada ilma mingeid märgendeid lisamata. Tuleb aga silmas pidada, et Browser id ei arvestata sisestamisel Enter-klahviga tehtud reavahetusi. See on selleks, et kindlustada teksti paindlik kujundamine Browser i aknas. Lugemisakna suurendamisel või vähendamisel paigutub aknas olev tekst vastavalt akna uutele mõõtudele automaatselt ringi. Kui soovime tekstis kasutada kindlaksmääratud reavahetust, tuleb see panna paika <BR> - märgendiga (sõna break - murdekoht, katkestus). Näiteks: See on pikk lause mis paistab Browser-i suures aknas ühe pika reana kuni siiani, <br> see tekst aga on uuel real. HTML-is võib kasutada teksti vormindamiseks lõike. Uus lõik algab uuest reast. <P> (paragraph). on paarismärgend (lõigu alguses ja lõpus), kuid sageli jäetakse </P> lõigu lõppu panemata. Korrektne on aga siiski kasutada märgendit nii lõigu alguses kui lõpus. <P> erineb <BR> - ist suurema reavahe poolest märgendi ees. Lõigu algusmärgendis saab lisada parameetreid, mis iseloomustavad seda lõiku. Näiteks lõigu joondamiseks on parameeter ALIGN ja lõiku saab joondada kas vasakul, keskel või paremal (vastavalt LEFT, CENTER, RIGHT). <P ALIGN=CENTER> Kui teksti soovitakse esitada fikseeritud kujul - näiteks luuletus või laulutekst, siis kasutatakse <PRE> - märgendipaari (preformatted - valmiskujundatud), mille vahel olev tekst näidatakse täpselt selliselt, nagu ta on sisestatud. Näiteks: <PRE> Tulin linnast lumesadu tööd ei leidnud kusagilt </PRE> Enamasti näitavad WWW-brauserid <PRE>-teksti teistsuguses kirjastiilis kui tavalist teksti - levinuim on Courier-stiil

20 Pealkirjad Pealkirjamärgendeid on kuus, mis on eri suuruse ja stiiliga ja kehtivad siis, kui veebilehel ei ole stiililehega (style sheets) teisiti määratud. Pealkirja üldkuju on selline: <Hn>Pealkiri </Hn> n tähistab siin numbrit ühest kuueni - <H1> on suurim ja <H6> väikseim pealkiri. Pealkirjad paigutatakse automaatselt omaette reale ja reavahetuse sümboleid ei pea kasutama. <H1>-märgendeid kasutatakse ainult suurte lehekülgede avapealkirjas. Alapealkirjadele on sobivaimaks formaadiks <H3> või <H4>. Näiteks nii: <HTML> <HEAD><TITLE> Tallinna Kaubamaja </TITLE> </HEAD> <BODY< <H1>TALLINNA KAUBAMAJA</H1> <H2>Tere tulemast!</h2> <P> Meeldivaid oste meie kaubamajast </P> <H4>Kosmeerika</H4> <P> (tekst)</p> <H4>Naisteriided</H4> <P> (tekst)</p> <H4>Meesteriided</H4> <P> (tekst)</p> </BODY> </HTML> Täpitähed ja muud sümbolid Uuemad brauserid (Navigator ja Explorer) saavad küll aru näiteks Windowsis kirjutatud ja täpitähti sisaldavast leheküljest, kuid mõnes muus süsteemis brauseriga (näiteks UNIX) lehitsedes võib tekkida probleeme ja täpitähtede asemele tekivad valed konksud või valed tähed. Samuti tekib segadus, kui tekst sisaldab sõnu eri keeltes. Sel juhul tuleb kasutada erisümboleid täpitähtede kirjutamiseks ja asendada täpitähed

21 neid esindavate koodidega Seda tehakse kahel moel: 1) Sümbol &, numbritähis #, vastava tähemärgi kood (näit. 64 semikoolon 2) Sümbol &, alusmärk (näiteks a ), efektikood (näiteks uml ), semikoolon Teise meetodi korral saadakse märk mingist standardsest tähest, millele lisatakse mingi täiendav osa (täpid, kriips vms). Eesti tähtede puhul vajatakse: täppe (uml - tuleneb saksa Umlaut ist, kuna saksa keel on ilmselt maailma tuntuim keel, kus kasutatakse täpitähti), ja lainelist joont ehk tildet (tilde) Need lisamärgid sobivad nii suurtele, kui ka väikestele tähtedele. Seega kirjutatakse neid nii: Efektikoodiga Tähemärgi koodiga ää - ää äädieresis või umlaut öö - öö öödieresis või umlaut üü - üü üüdieresis või umlaut õõ - õõõõ tilde šš - šššš caron Internet Explorer-il on võimalik kasutada eelnevat kodeerimist -Encoding, ja seal on valida Baltic ja Cyrillic, või metaparameetrit *) lehe alguses. Kui teksti loetakse Internet Exploreriga ja on ühes keeles võib erisümbolitest loobuda. Mitmekeelse teksti korral on erisümbolid vajalikud Teksti rõhutamine. Teksti erinevaid rõhutusi poolpaksu kirja, kaldkirja, allajoonimist jms - saab HTML-is teha kahel viisil. Esiteks nn. füüsilised märgendid - <B> (bold - rasvane kiri), <I> (italic - kaldkiri), <U> (underline - allajoonimine) jne, mis määravad väljastuse välise kuju. Teiseks, kasutada loogilist märgendamist, mis annab paindlikuma esiletoomise. Iga brauser saab kasutada omaenda rõhutusmehhanisme. Kui kasutatav brauser ei suuda näidata kaldkirja, saab selle asemel kasutada mõna muud rõhutusviisi. Enamasti pruugitakse järgmisi märgendeid: <STRONG> - tugev rõhutus (strong emphasis), harilikult poolpaks kiri <EM> - rõhutus(emphasis), tavaliselt kaldkiri või poolpaks kaldkiri *) Metaparameetriga määratakse kooditabel ja eesti keele tarbeks sobib <meta http-equiv="content-type" content="text/html; charset=utf-8"> või <meta http-equiv="content-type" content="text/html; charset=windows-1257">

22 <DFN> - definitsioon, tavaliselt poolpaks kaldkiri <CITE> - tsitaat, tavaliselt kaldkiri <CODE> - programmitekst, tavaliselt sansskript Tekst võib olla ka pool rida ülespoole või allapoole ehk indeksitena. Märgend <SUP> (superscript) on ülemine indeks ja märgend <SUB> (subscript) on alumine indeks. Teksti läbikriipsutamiseks kasutatakse märgendit <STRIKE>. NB! Kõik selles alajaotuses toodud märgendid on paarismärgendid, mis paigutatakse vastava tekstilõigu algusesse ja lõppu. Kui soovitakse veebilehtede vaatamisel neid stiile muuta, siis tuleb ise teha stiilide leht (Style Sheet) see määratakse brauseri jaoks nii: Internet Explorer Tools Internet Options General Accessibility User Style Sheet Nimekirjad ja loetelud. HTML võimaldab teha järjestamata ja järjestatud loetelusid. Järjestamata loetelu luuakse <UL>-märgendiga (unordered list), loetelu iga element tähistatakse <LI>-märgendiga (list item). Näiteks: <UL> <LI>Kapsad <LI>Kaalikad <LI>Porgandid </UL> Kapsad Kaalikad Porgandid Paneme tähele, et <UL> on paaris- ja <LI> on üksikmärgend. <UL>-märgendit võib lisada parameetri, mis määrab milline märk tuleb elemendi ette. Näiteks: <UL TYPE=SQUARE> (loetelu elemente tähistavad ruudukesed). Järjestatud loetelu (<OL> - ordered list) on samalaadne, kuid loetelu ette tuleb number. Kui parameeter puudub nummerdatakse elemendid järjekorras araabia numbritega. Võimalikud teised parameetrid on järgmised: A - suured ladina tähed a - väikesed ladina tähed I - suured rooma numbrid i - väikesed rooma numbrid 1 - araabia numbrid Näiteks: <OL TYPE=I> - suurte rooma numbritega loetelu

23 Loetelu mingile elemendile saab panna järjekorranumbri ka üldisest numeratsioonist sõltumatult - selleks peab elementi määravasse <LI>- märgendisse lisama VALUE. Näiteks:: <OL TYPE = a> <LI VALUE=j> </OL> Parameetrite kasutamine märgendites. Algusmärgendid võivad sisaldada parameetreid. Eraldajaks märgendi võtmesõna ja parameetrite vahel ning parameetrite vahel on tühik. Parameetrile omistatakse arvuline või tekstiline väärtus. Väärtuseks võib olla ka võtmesõna. Tekstikonstandid asetatakse ühekordsetasse ( ülakomad ) või kahekordsetesse jutumärkidesse. Numbrilise konstandi võib ka olla ülakomade või jutumärkide vahel. Näiteks: <P ALIGN=CENTER> <INPUT TYPE=BUTTON ID= STOPP_NUPP SIZE=8> Siin TYPE, ID ja SIZE on parameetrite nimed BUTTON on võtmesõna, STOPP_NUPP on tekstikonstant ja 8 on arv. Erinevaid parameetreid ja võtmesõnu on kümneid. Parim viis hankida infot võtmesõnade kohta on MicroSofti MSDN. Leht aadressil Sealt kasutada otsimist HTML või DHTML ja valida HTML Elements 2.6. Hüpertekst Veebileht, mis sisaldab teksti on analoogne tekstitöötlusprogrammi abil loodud dokumendiga. See sisaldab teksti ja selle kujundamist vastavalt oma vajadustele. Lisaks tavalisele tekstile on veebilehel viited teistele lehekülgedele mis teeb lehed eriti informatiivseteks. Viidata võib dokumendi sees, oma arvutis või ükskõik millises arvutis olevale dokumendile. Viidete lisamise eelduseks on asjaolu, et me teame nende taga peituvate dokumentide sisu ja see on mingisuguseks täienduseks meie lehel olevale infole. Viidetega ei tohi aga minna liiale, sest ainult viidetest ja paarist sõnast koosnev lehekülg on üpris mõttetu. Ei ole mõtet viidata lehtedele, mida kõik niikuinii teavad. Eriti kui see on otsimismootor, mille kaudu saab tõesti kõike leida. Näiteks

24 Kaugviited Kaugviite all mõtleme viidet mõnda teise Interneti-arvutisse. Sellise viite üldkuju on järgmine: <A HREF= soovitud URL > Viite tekst </A> URL (Uniform Resource Locator) Täpsemalt vt. peatükki 1.4. Näide: <A HREF= Tallinna Polütehnikumi koolimaja </A> viitab TPT moolimaja pildile, mis on arvutis phax. Kaugviite URL koosneb seega WWW-dokumendi tunnusest ( arvuti aadressist (phax.tpt.edu.ee) ja kataloogidest, mida mööda dokumendini jõuda (/~a2/puhang) ja faili nimest (/maja.jpg) millele viidatakse. Kui seda lehte Brauseriga lugeda, on seal allakriipsutatud tekst Tallinna Polütehnikumi koolimaja ja sellel klikkides avaneb pilt, millel on foto. Tavaliselt on serverarvutiks Linux-arvuti ja tuleb arvestada selle süsteemi katakogipuu omapära. Tavaliselt on Linux-il igal kasutajal võimalik luua oma kataloogi alla kindlaksmääratud nimega alamkataloog, kuhu paigutada oma WWWleheküljed. Selle alamkataloogi nimeks on tavaliselt public_html. Väljastpoolt seda kataloogi asetsevad leheküljefailid ei ole lugejale kättesaadavad. WWW-kataloogi enda nime aga URL-i ei lisata. Näitena toodud kasutajakataloogis /~a1/puhang/ on WWW-dokument tegelikult alamkataloogis /home/public_html. Kui URL lõpeb katalooginimega ja kaldkriipsuga, eeldatakse, et html -kataloog sisaldab dokumenti nimega index.html või index.htm. Kui URL lõpeb failinimega, otsitakse seda faili. Sellise nimega dokumendi puudumisel antakse veateate (404 File Not Found) Lähiviited Lähiviite all mõtleme viidet samas arvutis asetsevale dokumendile. Lähiviidete (ja ka kaugviidete) õigeks kasutamiseks peame teadma kataloogide struktuuri ja failide asukohta sihtkohaks olevas arvutis. WWW-serverites on alati puukujuline kataloogistik - s.t. on olemas peakataloog, millest hargnevad alamkataloogid, nendest omakorda nende alamkataloogid jne

25 Joonisel on toodud tüüpilise Interneti-arvuti kolme kasutaja kodukataloogid ja nendes asuvad WWW-dokumendid. Näiteks: Kui kasutajad Jüri, Mall ja Jaan hakkavad endale kodulehti tegema, loovad nad esimeseks leheks automaatselt tuvastatava lehekülje index.html. Jaan on loonud oma kataloogi kaks lehekülge - index.html (avalehekülg) ja teine.html ning piltide jaoks eraldi kataloogi pildid Kui Jaan soovib nüüd viidata oma ühelt lehelt teisele, lisab ta näiteks index.html-ile sellise viite: <A HREF= teine.html > Minu teine lehekülg </A> ja HTML lehele ilmub allajoonitud tekst Minu teine lehekülg Kuna leheküljed asuvad ühes ja samas kataloogis, piisab URL-iks vaid faili nimest. Kui Mall tahab lisada oma lehele viite Jaani koduleheküljele, kirjutab ta sellise viite: <A HREF=../jaan/ > Jaani kodulehekülg </A> Kuna URLi ei lisata WWW-kataloogi nime (public_html) ja antud juhul ka mitte soovitava faili nime (otsitav on index.html), siis piisab vaid katalooginimest (jaan). Selleni jõudmiseks tuleb aga teha kataloogipuus samm tagasi (kataloogi users) ja siis alles astuda Jaani kataloogi. *) Tagasisammu märgitakse kahe punktiga (..). Täpselt samasuguse tulemuse aga annaks ka kogu Jaani kataloogile eelneva kataloogistiku lisamine URL-i - seega saaks ka nii: <A HREF= /users/jaan/ > Jaani kodulehekülg </A> Siin tähistab esimene kaldkriips peakataloogi Siseviited Siseviide on dokumendi piires viitamine ehk kiire üleminek sama dokumendi piires. Siseviited on heaks abiliseks pikkade ja keerulise sisuga dokumentide lugemisel (teadusartiklid, referaadis jms.). Pikema dokumendi puhul on heaks tooniks lisada dokumendi algusesse sisukord kust on viited ehk hüpatakse huvipakkuvatele lõikudele. Siseviite määramiseks tuleb ära märkida nii viide ise kui ka märgend dokumendis, kuhu viidatakse ehk hüpatakse. Tekstile antakse märgendi A parameetriga NAME nimi. Sellele nimele hüppamiseks on märgendis A HREF parameeter, mis algab # sümboliga. Näiteks esimese peatüki pealkirjale antakse nimi p1 nii: <p> <A NAME="p1"></A>1. Esimene peatükk. Sissejuhatus </p> *) See on võimalik, kui.. (liikumine juurkataloogi poole on lubatud. Tavaliselt seda ei saa teha ja viites on vaja kasutada

26 Näiteks: Malle teadustöö avaldatakse Internetis failina uurimus.html. Töö algusesse lisatakse peatükkide sisukorra. Teadustöö iga peatüki ette kirjutatakse pealkiri ja omistatakse sellele nimi ehk märgend. Dokumendi algusesse aga tuleks teha sisukord, mis võiks olla näiteks selline: <A HREF= #p1 > 1. Esimene peatükk. Sissejuhatus </A> <BR> <A HREF= #p2 > 2. Teine peatükk. Uurimus </A> <BR> <A HREF= #p3 > 3. Kolmas peatükk Tulemused </A> <BR> Siseviide on seega viide nimega märgitud kohale samas dokumendis. Nime ette käib sümbol # (nn. trellid). Üksteisele järgnevad viited on eraldatud reavahetusmärgenditega. Siin võiks kasutada ka loetelusid, mis muudab sisukorra näitlikumaks. Kui nüüd keegi teine, näiteks Jaan, kellel on samas arvutis oma uurimistöö, sooviks oma lehelt viidata Malle teadustöö teisele peatükile, peaks tema viide nägema välja nii: <A HREF= /users/mall/uurimus.html#p2 > Malle uurimus </A> Siin tuleb arvestada, et UNIX ja Linux eristavad failinimedes suuri ja väikeseid tähti, mida Window s ei tee. Kui Windows is järgiproovitud leht peale serverisse üleslaadimist ei tööta, on arvatavasti viga failinimedes Viited teksti sees Viidete paigutamine teksti sisse on laialt levinud praktika. Näiteks nii: Mina elan Tallinnas ja olen selline. Selleks tuleb kirjutada Mina elan <A HREF= #aadress >Tallinnas </A> ja olen <A HREF="pildid/foto.jpg">Selline </A> Siin Tallinnal klõpsates suunatakse sama dokumendi märgendile aadress, kuid sõnal selline klõpsates avaneb pilt. Parem oleks viited jätta eraldi ridadesse Kui tahad minust rohkem teada, siis vaata siit edasi: Minu aadress Minu foto Elektronpostiviited Elektronposti viitega saab saata kirja lehe autorile. See on analoogiline tavalise viitega, kuid teisele lehele viimise asemel käivitub lugeja arvutis Brauseriga määratud

27 E-postitusprogramm(Outlook, Netscape Mail, Pegasus, Pine vms.). Selle meetodi kasutamine eeldab meie lugejailt E-postiprogrammi olemasolu ja brauseri vastavat häälestust. Parem on teadete edastamiseks kasutada sisestusvorme, kus lugeja täidab küsimuse lahtrid ja saadab vastuse ära. E-postiviide lisatakse leheküljele nii: <A HREF= >Saada Mallele kiri. Minu E-aadress on Seega asendatakse E-postiviites hüpertekstilehekülje tunnus ( postitunnusega (mailto://) ning URL adressaadi E-postiaadressiga. Otstarbekas oleks kirjutada E-aadress lisaks viitele endale ka viite teksti, kui lugeja soovib seda endale üles kirjutada või lugeja brauseris ei käivitu E-postitusprogramm automaatselt Piltide kasutamine WWW-lehekülge on kõik graafilised. Oskuslikult valitud ja paigutatud pildimaterjal annab lehele palju juurde. Samas aga meenutagem kaht asja. Esiteks: Ka tekstilehed on kasutatavad ja esimesed WWW-leheküljed olid ilma graafikata. Teiseks: On veel kasutajaid, kes ei saa graafilist infot lugeda. Põhjus võib olla tehniline: ( nõrgem arvuti, tekstikuvar, aeglane modemiühendus, tekstibrauser) või mingi isiklik puue (nägemispuue, kuulmine ). Seda arvestades ei tohiks piltide ja muu graafilise materjaliga liiale minna. Tervenisti graafiliste lehekülgede lugejaid kummitavad järgmised probleemid, millest tihtipeale autoril aimu pole: lehekülje laadimine lugeja arvutisse on mõttetult aeglane. pilt võib olla nii suur, et ei mahugi lehele ära. eriti ebameeldiv on suure pildi paigutamine avalehele. eriti ebamugav on lugeda teksti lehelt, kus midagi vilgub. ebamugav on lugeda teksti kireva taustaga lehelt ebamugav on tume lehekülg (mustal taustal punane tekst) Kui on mingil põhjusel loodud kirev lehekülg, peaks looma ka alternatiivse lehekülje, kus on ainult tekst (s.h. põhilehekülje tähtsamate piltide sõnalisi kirjeldusi) või minimaalselt graafikat Lihtgraafika Pilt salvestatakse eraldi failina ja kohta, kuhu WWW-lehele peab tulema pilt, antakse selle faili nimi sellisel kujul: <IMG SRC= pildifaili nimi ALT= Kirjeldus > SRC määrab pildi, mida kuvatakse ja ALT teksti, kui pilti ei ole võimalik näidata

28 ALT-osa ei ole tegelikult kohustuslik, kuid on soovitav. See on ainsaks võimaluseks neile lugejaile, kes graafikat ei näe ja näevad selle asemel ALT-osaga antud kirjeldust. Seega oleks väga heaks tooniks hakata kohe algusest peale kõiki graafilisi komponente ALT-osaga varustama. Näiteks selliselt: <IMG SRC= foto.gif ALT= Foto Mina oma koeraga > WWW-s lehtedel kasutatakse tavaliselt kahes formaadis graafilisi faile -.gif - Graphics Interchange Format (GIF).jpg,.jpeg - Joint Photographic Experts Group (JPEG) GIF on veidi kvaliteetsem ja võimaldav salvestada animatsiooni. JPEG-d on parem kasutada suurte piltide ja fotode korral. Peale nende on veel kasutatavad järgmised piltide formaadid:.bmp - Windows Bitmap (BMP);.emf - Windows Enhanced Metafile (EMF).png - Portable Network Graphics (PNG).wmf - Windows Metafile (WMF).xbm - X Bitmap (XBM) ja järgmiste videoklippide formaadid..avi - Audio-Visual Interleaved (AVI).mov - Apple QuickTime Movie (MOV).mpg,.mpeg - Motion Picture Experts Group (MPEG) WWW-lehekülgede tegemisel on soovitav pildid ja muu graafikamaterjal koondada eraldi kausta, et pildid ja nende nimed ei segaks lehtede täiendamist ja parandamist. Näiteks nii: <IMG SRC= graafika/fotod/mall.jpg ALT= Malle pilt > Nagu viidete puhul, saab ka graafika korral kasutada nii lähi- kui kaugviiteid. Kui aga Mall tahab oma lehele panna Tallinna Polütehnikumi pilti, peab ta Esiteks: Kopeerima Tallinna Polütehnikumi arvutist phax maja pildi "maja.jpg" oma arvutisse piltide juurde ja kasutama seda kui tavalist pilti. või Teiseks: Kasutama kaugviidet tehnikumi kodulehele ja kirjutama oma lehele. <IMG src=" ALT = TPT Maja Pärnu maanteel > Kaugviiteid tasub kasutada vaid juhul, kui arvuti ei asu väga kaugel (vastasel juhul võib pildi lugemine võtta mõttetult palju aega) või pildi omanik ei luba pilti kopeerida. Viimasel juhul on oht, et Teie lehe lugemisel on kauge arvuti kättesaamatu

29 Graafilised viited Viite teksti asemel saab kasutada graafilisi viiteid. Selleks tuleb lihtsalt kombineerida graafika- ja viitemärgendid. Näiteks juba Mallel oleks TPT õppeserveris oma koduleht, siis: <A HREF= >Malle lehekülg</a> Malle pildile viitamine aga käis nii: <IMG SRC= ALT= Malle pilt > Nüüd paneme need kaks kokku: <A HREF= > <IMG SRC= ALT= Malle pilt > Malle kodulehekülg </A> Tulemuseks on viide tekstiga Malle kodulehekülg, mille ees on samuti viitena toimiv Malle foto Suurte piltide kasutamine. Suured pildid muudavad lehekülgede lugemise aeglaseks ja seepärast on soovitav panna pildid eraldi lehtedele ja viidata pildile nii: <A HREF= pildifaili nimi >Siin on suur pilt minu sünnipäevapeost (555 kb)</a> On soovitav märkida pildi suurus, et lehe lugeja saaks otsustada, kas tasub seda pilti vaadata. Peale pildi vaatamist peab kasutaja, kes valib viite ja vaatab pilti, kasutama tagasiminemiseks brauseri Back-valikut. Soovitav on pildile lisada viide tagasi alglehele. Seega on esilehel viide: <A HREF= fotoleht.html >Siin on suur pilt minu sünnipäevapeost(555 kb)<a> ja pildilehel fotoleht.html pildi all viide tagasi (oletagem, et algleht on index.html): <A HREF= index.html > Tagasi esilehele </A> Veel parem ja soliidsem variant on, kui kasutatakse suurest pildist vähendatud koopiad, mis nõuab graafika töötlemise oskusi. See väike pilt pannakse graafilise viitena esilehele: <A HREF= fotoleht.html > <IMG SRC= v_foto.gif ALT= Foto > Suur pilt minu sünnipäevapeost(555 kb)</a>

30 Animatsioonide kasutamine Animatsioone saab WWW-lehele paigutada ennekõike animeeritud GIF-failina. Tema märgendid ei erine tavalise graafika faili omadest. Teised animatsiooniliigid ja videoklipid eeldavad brauserile lisatud vastavat tarkvara (plugin) olemasolu. On võimalik lisada.avi (AVI) ;.mov (MOV) ja.mpg ehk.mpeg (MPEG) faile. Viimasel ajal on laialdaselt kasutatavad Flash-is tehtus lisandid. Nende kasutamisel installeeritalse brauserile Adobe lehelt Flash Player, kui Flash-i on õigesti kasutatud. Suurtest videoklippidest ja kirevatest piltidest tuleks loobuda, kuna see muudab lehe liiga kirevaks ja aeglaseks Dokumentide kasutamine. Internet i Brause id on mõeldud HTML keeles tehtud WWW-lehtede lugemiseks, kuid suudavad avada ja lugeda teistes formaatides faile. Selleks kasutatakse OLE (Object Link and Embeding) tehnoloogiat, kus brauseri aknas käivitatakse teine programm. Näiteks.PDF formaadis faile avab nii Internet Explorer, kui ka Netscape ja selleks käivitub Acrobat Reader, kui see on varem arvutisse installeeritud. Word i dokumendi laiendiga.doc lugemisel käivitub Internet Exploreri aknas Word., kuid Netscate seda ei tee. Linuxi brausertega Microsofti dokumentide avamisel on veel suuremaid probleeme Tabelid Tabeleid kasutatakse WWW-lehtedel suhteliselt palju ka sellistel lehtedel, kus näiliselt tabelit ei ole. Näiteks on lehe vasakul linkide menüü. See võib olla eraldi raamis (frame) või tabel (table) Tabel luuakse HTML-is nii: <TABLE> <TR> (rea algus) <TD> Lahter </TD>(lahter)... </TR>> (rea lõpp) <TR> (uus rida)... </TR> </TABLE>

31 Seega sisestatakse tabeli väärtused ridupidi. Algul esimene rida, siis teine jne. Reas võib olla sama arv lahtreid või iga rida võib sisaldada eri arv lahtreid. Tabeli esimene rida võib olla ka päiseks, mis on poolpaksus kirjas. Näiteks tabel õpilaste pikkuse ja kaalu kohta (kõrval on toodud ka tulemus): <TABLE BORDER=1> <TR> <TH>Nimi</TH> <TH>Pikkus</TH> <TH>Kaal </TH> </TR> <TR> <TD>Ants</TD> <TD>185</TD> Nimi Pikkusus Kaal <TD>88</TD> </TR> Ants <TR> Kalle <TD>Kalle</TD> <TD>194</TD> <TD>94</TD> </TR> <TR> Mikk <TD>Mikk</TD> <TD>177</TD> <TD>78</TD> </TR> </TABLE> Tabelimärgendeid kasutatakse ka kujunduslikkuse pärast ja see lubab lehekülgi liigendada ja paigutada pilte soovitud kohtadesse. Tabelite defineerimisel võib kasutada märgendisiseseid parameetreid, mis määravad tabeli lahtrite laiused(wedth), kõrguse(hight), raamistuse(border), taustapildi(background), taustavärvi(bgcolor), joondamise(align), kirja šrifti(font) ja muud omadused. Näiteks: <TABLE WIDTH="90" BORDER="4" BACKGROUND="kala.gif" > <TR > <TH > Esimene </TH> <TH > Teine </TH> <TH > Kolmas </TH> </TR> <TR> <TD > 123 </TD> <TD > 456 </TD>

32 </TR> <TR HIGHT="100"> <TD ALIGN="CENTER" > 123 </TD> <TD ALIGN="CENTER" > 456 </TD> <TD ALIGN="CENTER" BGCOLOR= #0000ff > <FONT FACE="Arial Black" SIZE="5" COLOR="#FFFF00"> 789</font> </TD> </TR> </TABLE> Täieliku info tabelites kasutatavate parameetrite kohta võib leida Microsofti kodulehelt op/author/dhtml/reference/objects/table.asp Seal nimetatakse parameetreid Attributes/Properties 2.9. Paneelid Tabelid ja paneelid võimaldavad liigendada veebilehte. Paneelid (raamid) ehk freimide (ingl. k. frame) kasutamine lubab luua süsteemi leht lehes, mis on mitmest osast koosnevaid lehekülgi. Erinevates akendes ehk paneelidel on erinevad sõltumatud HTML leheküljed. Oskusliku kujunduse korral annab paneelide kasutamine märkimisväärset efekti, kuid ei tasu sellega liialdada. Tuleb meeles pidada, et paneelid ei ole paljudele lugejatele tehniliselt kättesaadav. Kui kasutada paneele, on vajalik lisainfo ka neile, kes paneele ei näe. Paneelitehnika võimaldab seda, et määrata, kas Brauser tunnistab paneele. Kui Brauser ei toeta paneelitehnikat, näitab ta lehekülje seda osa, mis on mõeldud ilma paneelitehnikata Brauserile. Samuti peab arvestama, ei kõigil kasutajatel ei ole nii hea kuvar, nagu teil ja mõni paneel jääb nägemata või liiga väikeseks. See aga tähendab, et paneelide kasutamisel tuleb teha topelttööd HTML lehtede koostamisel Paneelidega leht Paneelidega lehekülg koosneb tegelikult peafailist ehk sõrestikust, mis kujundab lehekülje üldilme ning erinevatest lehekülgedest (tegelikult lehekülje osadest), mida näidatakse eri paneelidele ehk peafailiga loodud akendes. Laialt levinud on selline kujundusviisi:

33 Viited teistele lehtedele sisukord pealkiri Kuhu tuleb loetav tekst ja muu info. pohileht Sellise kujunduse korral koosneb lehekülg sõrestikufailist, mis määrab tegelikult lehekülje aadressi. Sõrestikfailis määratakse, milliseid leheti näidatakse igal paneelil. Näites on kolm eraldi lehte (lehekülje osa) : pealkiri, sisukord ja pohileht. Pealkirja otstarve on hoida lehekülje pealkiri kogu aeg kasutajal silme ees. Pealkiri ei tohi haarata liiga suurt osa aknast. Peaks ka arvestama, et 640 pikseli laiusega kuvaril oleks oluline osa pealkirjast nähtav. Pealkirjafail tuleb teha nii, et ei tekiks kerimisribasid. Sisukorrapaneel annab hea ülevaate erinevatest lehekülgedest loetavas WWWsüsteemis ja võimaldab kerge vaevaga ühelt leheküljelt teisele liikuda. Sinna paigutatakse harilikult tekstiviited (harvemini graafilised viited) teistele sama süsteemi lehekülgedele. Sisukorrafail tuleb teha nii, et alla ei tekiks kerimisriba. Sisukorra laius ei tohiks olla üle 200 pikseli (800 pikseli laiusel kuvaril 1/4 ekraanist). Põhipaneel on mõeldud info lugemiseks. Kui paneelideta süsteemis tuuakse dokument nähtavale kogu lugemisakna suurusena, siis paneelidega süsteemis paigutatakse ta põhipaneelile. Keerulisemates süsteemides võib põhipaneele olla ka mitu. Liiga keeruline paneelide süsteem pärsib ülevaatlikust. Täiesti lubamatu on kui põhipaneelile avatakse lehekülg, mis koosneb omakorda paneelidest. Vaatame ühe keskmise suurusega raamisüsteemi sõrestikfaili: <HTML> <HEAD> <TITLE>Raamidega lehekülg</title> </HEAD> <FRAMESET rows="50,*" framespacing="2"> <FRAME NAME="pealkiri" SRC="pealkiri.html" scrolling="no" scrolbars="no"> <FRAMESET cols=20%,80% framespacing="2"> <FRAME SRC="sisukord.html" NAME="sisukord">

34 <FRAME SRC="pohileht.html" NAME="pohileht" scrolling="auto"> <noframes> <H1> Vabandust...</H1> <P>See leht on tehtud HTML 3.2 raamitehnoloogia abil, mida Teie brauser ei tunnista. Teil on võimalus<br> <A HREF= >a) tõmmata endale uus Netscape,</A><br> <A HREF= >b)tõmmata uus Explorer</A> või<br> <A HREF= raamita.html >c) vaadata selle lehe raamideta varianti.</a><br> </noframes> </FRAMESET> </FRAMESET> </HTML> Siin märgend <FRAMESET> määrab esimese rea (pealkirja) kõrguse (50 pikselit) ja ülejäänud osa teise rea jaoks (*). Paneelidel on vahed (framespacing="2")ja raamjooned. Kui vahesid ja raamjooni ei soovita on parameetriteks framespacing="0" border=0 frameborder=0. Märgend <FRAME> annab sellele paneelile nime (NAME="pealkiri") ja määrab sisu või õigemini, mis fail sellele paneelile tuleb. Pealkirjas on kerimisriba tekkimine samuti keelatud. Alumise paneeli sisse on moodustatud kaks veergu, ja jaotatud nii, et sisukorrale on 20% kogu akna laiusest (cols=20%,80%). Kaks järgmist märgendit <FRAME> määravad paneelide sisu. Põhipaneeli nimi (NAME="pohileht") on väga vajalik, sest sisukorra failis olevad viited määravad just selle nime järgi koha, kuhu fail loetakse. Märgend <NOFRAME> annab infot neile lugejatele, kelle Brauser paneelidega tööd ei toeta. Hea toon nõuab ka kasutatakse märgendit <NOFRAMES>, kuigi see ei ole kohustuslik keele seisukohalt. Kindlasti peab jälgima, et NOFRAME on paneelimärgendite sees. See tähendab et </FRAMESET> lõpetab paneelid. Märgendeid BODY ei ole, kuna sisu määrab fail, mis loetakse paneelile

35 Paneelide sisu Paneelide sisuks on HTML lehed, mis tuleb luua eraldi. Loome faili pealkiri.html: <HTML> <HEAD> <TITLE>Paneelid</TITLE> </HEAD> <BODY bgcolor= #C0C0C0 > <h1 align="center"> PEALKIRI </h1> </BODY> <HTML> Loome sisukorra - sisukord.html: <HTML> <HEAD> <TITLE>Sisukord</TITLE> </HEAD> <BODY> <h3>sisukord</h3> <p><a href="pohileht.html" target="pohileht"> Algus </a> </p> <p><a href="teine.html" target="pohileht"> Edasi </a> </p> </BODY> </HTML> Märgendis <TITLE> teksti vaja ei ole, kuna Brauseri akna ülaserva pealkiri määrati sõrestikufailiga. Siin sõnale Algus klikkides loetakse põhipaneeli fail pohileht.html (mis oli seal ka kohe peale avamist). TARGET osa viidetes määrab paneeli nime (pohileht), kuhu selle viitega määratud dokumenti tuleb lugeda. Veel tuleks teha põhiraami kuvatavad leheküljed. Tuleb arvesse võtta et lugemisruum on väiksema laiusega (osa ekraani võtab enda alla sisukorraveerg) ja ei tohi kasutada väga suuremõõtmelisi elemente (suured tabelid ja fotod vms). Tekstiga probleeme ei ole, sest tekst jaotatakse automaatselt ridadesse, kui just ei ole kasutatud märgendit <PRE>

36 2.10.Lehekülje kujundamine WWW-kujundusest on tänaseks saanud omaette tõsine töövaldkond, kus töötavad kõrvuti arvutispetsialistid, kunstnikud ja disainerid. Kõik WWW-s avaldatud dokumendid, pildid, fotod jms. on tehnilisest küljest igale kasutajale kättesaadavad ja neid saab soovi korral enda arvutisse kopeerida. Siiski on ka WWW-leheküljed kellegi töö tulemus ja selle loata omistamine on intellektuaalse omandi vargus. Erilist autorikaitset WWW-lehtedel küll ei ole, kuid kehtivad mõningad ausa mängu reeglid: Ei tohi kopeerida kellegi tervikut WWW-lehte koos kujundusega ja avaldada see enda lehena.( vahetades vaid nime ja teksti ) Internetis leviv WWW-graafika on üldiselt vabalt kasutatav, kuid selle kopeerimine kohtadest, kus see on ühemõtteliselt kuulutatud eraomandiks, on samuti üleastumine ja plagieerimine. Kujundamisel tuleks arvestada: Halvim lehekülg on sisutühi, mõttetu lehekülg ja ilus disain ei ole eesmärk omaette. Pole mõtet teha lehekülgi stiilis: mina oskan!. Lihtne on ilus. Väga meeldiva lehekülje võib koostada ka minimaalsete vahenditega. Parim näide oli kunagi mis on lihtne ja ilus, kuid nüüd on seal liialt reklaami ja Macromedia Flash-i variandis reklaam häirib eha taha kaduda. On muidugi hea, kui autor tunneb kõiki HTML-i võimalusi, sest see annab tema käsutusse palju mitmekesisemad töövahendid. Arvestage, et kõigil ei ole nii hea monitor kui teil. Vähemalt avaleht peaks arvestama ekraanilaiusega 800*600 punkti. Kasutage väheseid kirja šrifte (fonte). Sobivaimad on Verdana, Arial ja Helvetica NB! Time New Roman ei ole kõige levinum font. Kirjutage vigadeta teksti. Kui ei oska, tuleb lasta kellelgi ära parandada. Kasuta keelt, mida oskad. Ärge eputage oma viletsa inglise keelega. Kui tõesti on vaja ingliskeelset teksti, tuleb see keeleinimesel üle kontrollida. Hoiduge kasutamast viitena sõnapaari vajuta siia (või selle analooge) - viidetena tuleks kasutada lehekülje teemast tulenevaid tähtsamaid märksõnu. Ärge pange lehekülge üles ainult selleks, et öelda siin on veel töö pooleli (Under construction jms). Ei ole soovitav teha brauseri-keskseid lehekülgi, mis eeldavad kasutajal mingi kindla riist- või tarkvara olemasolu (Best viewed with...). Kui on mingi keerulisem asi, mis kõigile ei ole kättesaadav, hoolitsege lisainfo eest

37 Lisage lehekülgede lõppu tagasiviide, kuigi Brauseritel on Back-nupp. Kui lugeja on sattunud aadressi kaudu otse mõnele alamlehele (mitte pealeheküljele), siis ei saa ta pealeheküljele, ilma et sisestaks uue aadressi. Ärge liialdage animatsioonidega. Väga halb on lugeda, kui kõikjal midagi vilgub ja midagi kuskile ilmub. Ärge pange lehe algusesse suuri pilte ja fotosid, eriti reklaame. See teeb allalaadimise aeglaseks ja tüütab lugejat. Kui fotosid on vaja pange need eraldi lehtedele, et lugeja saaks otsustada, kas tasub neid alla laadida. Aidake lugejal oma WWW-süsteemis orienteeruda: - pange algusse sisukord, - kasutage mõõduka pikkusega ja ühtse kujundusega lehekülgi, Ärge kasuta ebasobivaid värvikombinatsioone Näiteks mustal taustal punane kiri Head tavad WWW lehtedel WWW-s kehtivad kõik Interneti üldised eetikareeglid ja etiketinõuded Need oleksid: ärge tehke seda, mida ei taha, et teile tehtaks. Sõimamine ning ropendamine mõjub WWW-s täpselt sama räigena kui mistahes muul kujul. Kuigi WWW-lehtedel tehakse järjest rohkem reklaami, on see mõnindal juhtul ületanud hea maitse piiri. Eriti häirib rämpspost ja soovimatult avanevad leheküljed. Seega läbimõtlemata ja ebaprofessionaalselt koostatud WWW-reklaam mõjub soovitule risti vastupidiselt. Liga palju on WWW-s lehti, millel tegelikult puudub igasugune mõte ja ÄRGE LISAGE VEEL ÜHTE!! Korista internet oma rämpsust, mida te prooviks sinna oled jätnud. Sa ju koristad oma tuba?!

38 3. peatükk - CSS CSS (Cascade Style Sheet) on astmeline stiilileht, mille abil saab teksti kujundamisel kasutada peaaegu kõiki šrifte ja kirja suuruseid. CSS lihtsustab oluliselt veebilehe tegemise tööd ja vähendab lehe allalaadimise aega. CSS-i kirjeldatakse eraldi failis või veebilehel endal Üldiseloomustus. Standard HTML-is saab kasutada erinevaid pealkirju H1 kuni H6 ja lisaks võib igale tekstile määrata mingi šrift. Teksti kujundamiseks on kolm varianti: 1. Märgendi <FONT> kasutamisega. Seda tehakse nii: <FONT SIZE=7 FACE= Time New Roman >Tekst </FONT> 2. Parameetri <STYLE> kasutamisega. Igale HTML elemendi algusmärgendis saab omistada parameetriga STYLE stiil selle elemendi jaoks. Parameeter STYLE annab rohkem võimalusi teksti kujundamiseks, kui seda võimaldab märgend FONT. Stiili kasutamise üldkuju on < märgend style= stiili kirjeldus >...</märgend> Näiteks: Kui järgnev tekstilõik on šriftiga Arial suurusega 20 ja sõrendatult on: <P style=' font-size:20pt; font-family:"arial"; letter-spacing:10pt'> SÕRE TEKST </P> Märgendid kus võib parameetrit STYLE kasutada on näiteks: A, ADDRESS, B, BODY, CENTER, DIV, SPAN, TABLE, TBODY, TD, TH, TR, jne.. 3. Astmeline stiilileht (CSS). Keeruline tekst, kus igale lõigule on algusmärgendis oma stiil määratud läheb liiga pikaks ja seepärast on otstarbekas kasutama astmelist stiile, millega algul määratakse kõik selles dokumendis kasutatud stiilid ja hiljem kasutatakse neid

39 Kui kasutada astmelist stiile CSS siis saab muuta olemasolevaid märgenditega määratud teksti stiile (Näiteks: Kõige suurem pealkiri H1- olgu suurte tähtedega), või teha ise uusi sobivaid stiile omistades neile nimed. Neid stiile saab hiljem HLML-is samal lehel kasutada. CSS-iga kirjeldatud stiili paigutamiseks on kolm võimalust: 1) Teksti raamiva märgendi parameetris STYLE 2) CSS kirjutatakse HTML-faili sees 3) Kirjeldused kirjutatakse eraldi CSS-failis, mis liidetakse HTML-failiga 3.2. CSS-i kirjeldus HTML-failis CSS definitsioonid kirjutatakse igasse HTML faili eraldi. Kirjeldus paigutatakse päisesse märgendite <HEAD>... </HEAD> vahele. Seda tehakse järgmiselt: <HEAD> <!-- <STYLE TYPE= text/css > elemendi sisu </STYLE> -->... Päise ülejäänud osa </HEAD> NB! Märgendid <!-- ja --> on kommentaarimärgendid ja on mõeldud selgitava teksti jaoks. Tekst, mis on kommentaarimärgendite vahel, ei ole Brauseri ekraanil nähtav ega mõjuta muul moel browseri tööd. Siiski peab teadma, te Brauser analüüsib ka seda teksti ja märgendite <!-- --> vahel võib olla CSS või skriptis kirjutatud programm (JavaScript või VBScript). Stiili kirjeldamine sarnaneb HTML keele konstruktsioonidele, kuid on järgmised erinevused: Parameetrile väärtuse omistamisel kasutatakse = asemel koolonit : Parameetrid eraldatakse tühiku asemel semikoolonitega ; Parameetrid kirjutatakse loogeliste sulgude { ja } vahele Näiteks: Kui soovime pealkirja H1 teha kogu dokumendi ulatuses veel suuremaks. H1{ font-family:verdana; font-weight:bold; font-size:500% } ja lehel kasutame nii:

40 <H1>HÄSTI SUUR PEALKIRI</H1> Kui soovitakse ise luua uusi stiile, tuleb meie valitud stiili nimele ette kirjutada. (punkt). Kohta, kus seda stiili läheb vaja viidatakse sellele. Viitamisel kasutatakse parameetrit CLASS, millele omistatakse meie stiili nimi. NB! Kirja šrifti (font) valimisel peab arvestama, et valitud šrift oleks kliendi arvutis olemas. Seepärast ei tasu valida mingisuguseid erilisi šrifte, sest Brauser asendab need tavalistega, kui õiget ei leia. Näiteks: <HTML> <HEAD> <TITLE>MINU STIIL</TITLE> <STYLE type="text/css">.minustiil { font-family: garamond; font-weight: bold; font-size: 48.0pt } </STYLE> </HEAD> <BODY> <P class="minustiil">minu STIIL </P> </BODY> </HTML> 3.3. CSS-i kirjeldus eraldi CSS failina Kui soovitakse kord kirjeldatud stiile kasutada kõikidel lehtedel, peab CSS definitsioonid kirjutama eraldi faili. Selle faile laiendiks on.css. Lisaks <STYLE> märgenditele peab tingimata kasutama veel kommentaari märgendeid <!-- ja -->. Iga HTML faili päises on link sellele failile <LINK REL=STYLESHEET HREF= failinimi.css TYPE= text/css > Näiteks Fail Stiil.css <STYLE type="text/css"> <!--.STL

41 { font-family: Monotype Corsiva; font-weight: bold; font-size: 150.0pt; border: 5 solid #00FFFF; padding: 4 } --> </STYLE> HTML fail on selline: <HTML> <HEAD> <TITLE>CSS</TITLE> <LINK REL=stylesheet HREF="stiil.css" TYPE="text/css"> </HEAD> <BODY> <DIV CLASS="STL"> STIIL</DIV> </BODY> </HTML> 3.4. CSS-i parameetrid. CSS-ides saab kasutada umbes 120 erinevat parameetrit. Neid võib leida lehelt : http.//msdn2.microsoft.com/ en-us/library/default.asp Sealt otsida CSS ja lugeda artiklit CSS Atributes Seal on: o Font and text properties Näiteks tähtedevahelist vaher saab suurendada või vähendada parameetriga letter-spacing ja seal on selline kirjeldus: { letter-spacing : sspacing }

42 kus sspacing on komaga arv ( see tähendab punktiga ) ja mõõtühikuks võib olla cm, mm, in, pt, pc, või px kuid ka suhteline suurus (em or ex) *) Mõningad CSS-i parameetrid: o background - Tabelile, paneelile ja teistele objektidele saab lisada taustapildi.: { background : deepskybluetowhite_768.jpg } o border - Tabelit või teisi objekte võib ümbritseda erilese äärejoonega. { border: "0.2cm GROOVE ORANGE" } o :first-letter Rea esimese tähe suurendamiseks. :first-letter { font-size: 200%;} Selle kasutamiseks on järgmine näide: <STYLE> P.SuurEsitaht:first-letter { font-size: 200% } </STYLE> ja HTML põhiosas on määratlus <P CLASS= SuurEsitaht > Siin on S hästi suur </P> Näide pseudoklassi kasutamisega: <HTML> <HEAD><TITLE> Suur Esitäht </TITLE> <STYLE type="text/css"> <!-- p.m:first-letter {font-size:300%; font-family:algerian } --> </STYLE> </HEAD> *) CSS Length Unit Table, (mis kehtib ka teistele numbrilistele mõõtühikutele) on järgmine: Suhtelised ühikud em elemendi kõrgus, ex suhteline tähe kõrgus eelnevaga võrreldes, px pixel it % - protsenti eelneva tähe kõrgusest. Absoluutsed ühikud in (inch) tolli (1 toll = 25,4 mm), cm sentimeeter, mm millimeeter, pt (point) punkti (1 pt = 1/72 tolli), pc (picas) (1 pica = 12 punkti = 1/6 tolli = 4,2 mm)

43 <body> <P class="m"> Siin on S hästi suur </h1> </body> </HTML> 3.5. CSS - kasutamise näide. Näiteks on kaks erivärvilist kirja pealikuti. <HTML> <HEAD> <TITLE>3D text</title> <STYLE type= text/css > BODY {font-family: Algerian; font-size: 50pt; font-weight: bold;}.z1 { color: silver; margin-top: 100px; margin-left: 70px;}.z2 { color: navy; margin-top: -80px; margin-left: 68px;} </STYLE> </HEAD> <BODY> <DIV class= z1 >See on HÕBEDANE </DIV> <DIV class= z2 >See on SININE </DIV> </BODY> </HTML> Sellel näitel on sõnad See on pealikuti

44 4. peatükk - Vormid Vorme kasutatakse sellistel WWW-lehtehel, kus nõutakse info sisestamist. Sisestatud info edastatakse kliendiprogrammi poolt serveris töötavale rakendusele, mis seda infot analüüsib ja töötleb või kliendi arvutis olevale programmile (funktsioonile). Serveris peab olema kas: 1. CGI (Common Gateway Interface) mis on standardiks Linux-i ja UNIX i serverarvutitele suhtlemiseks rakendustega. Sellised programmid asuvad tavaliselt kataloogis /cgi-bin/ või on laiendiga.cgi. 2. ASP ( Active Server Page ) mis töötab kõige paremini firma Microsoft WWW-serverite puhul. Need programmid on laiendiga.asp ja töötlevad vormidelt saadud infot. 3. PHP ( Hypertext Preprocessor ) mis genereerib PHP keeles kirjutatud skriptide ja My SQL abil andmebaasides olevast infost HTML lehe ja saadab selle kliendile. Kui brauser pöördub vormidesse valitud infoga serveri poole (päringuks on URL milles on hosti aadress + rakendus + andmed), siis serveris käivitub päringus nõutud rakendus (programm). Rakendus analüüsib saadetud andmeid ja moodustab (genereerib) serveris olevate andmete (andmebaasi) alusel HTML-keelse lehe ja saadab selle kliendile. Klient näeb andmeid sõbralikul kujul. Vorme võib kasutada ka selleks, et sisestatud infot töödelda ja analüüsida kliendi arvutis. Selleks peab kasutama skriptkeeles kirjutatud programme (funktsioone). Peale info sisestamist pöördutakse nende funktsioonide poole sisestatud informatsiooniga. Oluline erinevus nende kahe kasutamisviisi vahel on see, et Esimesel juhul toimub töötlus serveris (kaugel). Teisel juhul töödeldakse oma arvutis (kohapeal kodus ). Vorm moodustakse märgendiga <FORM> ja selle parameetrid määravad, kuhu selles vormis sisestatud info saadetakse. Samuti omistatakse vormile nimi, kuna ühel WWW-lehel võib olla mitu vormi. Vormi sees on tekstikastid, ripploendid, valikuvormid, nupud ja muud aktiivsed elemendid, millesse info sisestamise, valimise ja nuppudele klikkimise teel saadakse edasiseks info töötlemiseks serverile või oma funktsioonile Tekstikastid Tekstikaste kasutatakse WWW-lehelt teksti sisestamiseks ja sisestatud teksti edastamiseks serverile või funktsioonile. Tekstikasti loomiseks kasutatakse märgendit

45 <INPUT> ja WWW-lehele paigutatakse vastavale kohale sisestusväli. Märgendi parameetrid määravad sisestusvälja tüübi, suuruse ja annavad sellele väljale nime. Näiteks: <FORM NAME= tellimus > SISESTADA<BR> <INPUT TYPE = TEXT NAME= nimi SIZE= 10 > </FORM> See väli on teksti sisestamiseks TYPE = TEXT ja sellesse lahtrisse saab sisestada 10 tähte SIZE= 10. Tegelikult sellesse lahtrisse sisestatud tekst edasi ei lähe, kuna vormile on antud ainult nimi, kuid puudub parameeter ja tegevus, mis määrab info edastamise Ripploendid Ripploendit kasutatakse, kui sisestatakse teksti, kuid ei soovita tekstilist infot tippida, vaid valitakse loetelust. Ripploendi loomiseks kasutatakse märgendeid <SELECT> ja <OPTION> koos parameetritega NAME; VALUE ja SIZE. Näiteks: <FORM NAME= F1 > Valida menüüst<br> <SELECT NAME= toit SIZE=1> <OPTION VALUE= sea > Seapraad <OPTION VALUE= paja > Pajapraad <OPTION VALUE= karb > Karbonaad <OPTION VALUE= snit > Šnitsel </FORM> 4.3. Valikuvormid. Kui soovime kerimisribaga loendit on vaja märgendis <SELEKT> SIZE i suurendada Nupud ja kontrollruudud Nuppe (RADIO valikunupp) ja kontrollruute (CHECKBOX) kasutatakse valikute märkimiseks. Kui nupuga saab teha ühe valiku, siis kontrollruuduga saab määrata korraga mitu valikut. Näiteks valikunupp: Tehke oma valik:<bp> Seapraad <input type="radio"

46 name="praad" value="v1" checked><br> Pajaraad <input type="radio" name="praad" value="v2"><br> Karbonaad <input type="radio" name="praad" value="v3"> Näiteks kontrollruut: Tehke oma valik ( Üks või enam) Seapraad <input type="checkbox" name="c1" value="on"><br> Pajaraad <input type="checkbox" name="c2" value="on"><br> Karbonaad <input type="checkbox" name="c3" value="on"> 4.5. Andmete edastamine Serverarvutites töötavate rakenduste poole pöördutakse samamoodi, nagu WWWlehtede lugemiseks, kuid aadressile lisatakse andmed kujul nimi=väärtus. Esimene sümbol andmetes on küsimärk (?) ja andmed eraldatakse ampersand-iga (&). Näiteks: Kui soovime, et neti.ee otsiks oma andmebaasist kodulehti, kus on sõna TPT, võib tippida Brauseri aadresslahtrisse: ja neti.ee CGI rakendus otsing genereerib meile oma andmebaasi alusel HTMLkeelse lehekülje. Nimi query on andmete nimi ja tpt küsimuse (query) väärtus. Kui soovime, et neti.ee saadaks päringu edasi google-le, siis tipime aadressiks ja neti.ee teeb sellest: Selle asemel et tippida aadressilahtrisse keerulisi andmeid, võib HTML-i FORM neid ise genereerida. Tekstikast, loendid ja nupud valmistavas ette serverisse saadetud andmed, kuid ei aktiviseeri saatmist. Kui valikud on kõik tehtud, kinnitatakse valitut vajutades SUBMIT nupule. Sellel nupul on tavaliselt tekst, mis väljendab andmete saatmist (näiteks OK, OTSI, TELLI, Saada ). Märgendi FORM parameeter ACTION määrab serveri, kuhu andmed saadetakse

47 Andmete saatmisel on kaks meetodit GET ja POST, mis määratakse märgendi FORM parameetriga METHOD (kujul METHOD= get või METHOD= post, kus vakimisi on METHOD= get ). Näiteks neti.ee poole võib pöörduda selliselt lehelt: <html> <head><title> Saada NET-ile </title> </head> <body> <FORM action=" Näide, kuidas neti.ee poole pöörduda <BP> Mida otsida <input name="query" size="20" > <input type="submit" value="saada otsing NETI-le"> </FORM></body></html> Näiteks läbi neti.ee pöördume teiste otsimismootorite poole selliselt lehelt: ( <html> <head><title> Saada läbi NETI </title> </head> <body> <FORM action=" > <p align="center"> <font size="4">näide, kuidas läbi neti.ee poole pöörduda <br> GOOGLE, YAHOO või LYCOS-e poole<br> Mida otsida</font> <input name="query" size="20" > <br> <input type="radio" name="src value="google" checked > <input type="radio" name="src" value="yahoo"> <input type="radio" name="src" value="lycos"><br> <b>google YAHOO LYCOS </b></font></p> <center><input type="submit" value="saada otsing NETI-le" style="font-family: Times New Roman; font- </FORM> size: 14pt"> </center> </body> </html>

48 5. peatükk - Dünaamiline WWW 5.1. WWW uuemad arengud. WWW oli algselt mõeldud staatilise linkide süsteemina kus lingid viitasid seda dokumenti täiendavatele dokumentidele. Paljud HTML-lehed on ka selliseks jäänud. Kui sellisel staatilisel lehel soovitakse midagi muuta, peab seda tegema käsitsi HTML-keeles ja saatma seejärel muudetud kujul leht uuesti serverisse. Server on sellisel juhul ainult veebilehtede levitaja ja kliendiprogramm nende lehtede lugeja.. Dünaamiline lehekülg ( Dynamic HTML ) võimaldab teha veebilehekülgi, mis reageerivad sündmustele. Sündmuseks võib olla hiire liigutamine leheküljel, info sisestamine vormidesse ja palju teisi sündmusi ( Näiteks: lehe avamine, nihutamine jne). Dünaamiline võib olla ka lehe sisu, kus server otsimise asemel genereerib vastuse. Selle mudeli korral küsib klientprogramm WWW-serverist konkreetset rakendust, mitte HTML-lehte. Server käivitab rakenduse, mis genereerib kliendilt saadud info alusel HTML-keelse lehe, mille server saadab klientprogrammile. Käivitatud rakendus võib näiteks küsida kliendilt andmeid, neid töödelda ja otsida andmebaasidest kliendile soovitavaid andmeid. Andmete esitamiseks genereerib rakendus HTML-keelse lehe, mis saadetakse kliendiprogrammile. Rakendus võib ka lihtsalt väljastada mingeid ajas muutuvaid andmeid (näiteks ilmateadet või kellaaega). Selliste rakenduste miinuseks on see, et neid on raske teha. (See tähendab programmeerija poolt koostada.) Kui HTML leht sai valmis teha kliendiarvutis ja saata valmiskujul serverisse ( kodus teha valmis ja ära saata), siis dünaamiliste rakendustel lõplikku varianti ei olegi. Silumine ja korrigeerimine käib koos serveriga. Programmeerija teeb kodus oma süsteemi rakenduse mingis programmeerimise keeles (Näiteks PHP) ja saadab selle serverisse. Serveris töötab selle keele interpretaator või kompilaator. Seejärel saadab programmeerija serverisse päringu ja vaatab kuidas tema kirjutatud rakendus vastab. Serveris töötavateks programmideks ja rakendusteks on : 1. CGI ( Common Gateway Interface ), mis edastab kliendi info serveris töötavale rakendusele. 2. ASP ( Active Server Page ), mis interpreteerib.asp laiendiga failis olevaid skripte ja genereerib kliendile HTML lehe ( mis skripte ei sisalda) 3. PHP ( Hypertext Preprotcessor ), mis.php laiendiga failides olevaid PHP keeles kirjutatud programme ( skripte ) ja mille tulemuseks võib samuti olla HTML leht. 4. MySQL ( Structured Query Language ) on PHP-ga integreeritud päringute keel, mis loob ühenduse andmebaasidega

49 5.2. Dünaamiline HTML Dünaamilise HTML-i all mõeldakse sellist HTML lehte mis reageerib sündmustele. Dünaamilistel lehtedel on kõik HTML märgendite (tag) vahel olevad tekstid ja viited vaadeldavad objektidena, millel on omadused (properties) ja nende objektidega juhtuvas sündmused (events). Näiteks: Objekt TEKST on omaduselt musta värvi ja tema väärtus on TEKST. Kui aga juhtub sündmus, et hiir läheb sellele objektile omistatakse sellele objektile uueks omaduseks punast värvi tekst. Sündmuseks võib olla hiire liigutamine, hiireklikid ja klaviatuuril tippimine, kuid ka lehekülje avamine, sulgemine ja muud seesugused sündmused. Kui on vaja mingi objekti omadusi muuta, peab omistama selle objekti omadusele uue väärtuse. Kõik objektid on eristatud omavahel nimede ja identifikaatiritega. Peale Internet Browser-i poolt avatud HTML lehel olevate objektide, on objektidena kättesaadavad ka teiste rakendusprogrammide objektid. Objektide puustruktuuri teades on võimalik nendega opereerida. Objekti identifikaator kirjutatakse punktidega eraldatud sõnadega. Näiteks document.all.form.minu_pandud_nimi Teksti värvivahetus ja pildi asendus Kõige lihtsam on muuta selle objekti omadusi, millel sündmus leiab aset. Siis ei ole objektile vaja nime anda ja nime asemel kasutatakse sõna this. Näiteks: Kui soovime muuta pealkirja teksti värvi, peale hiire viimist sellele tekstile, tuleb teha nii: <H1 onmouseover= this.style.color = red ; > TEKST</H1> Siis parameeter onmouseover on sündmus ( event ), kui viime hiirekursori tekstile, ja muudab sellesama objekti ( this ), millel see sündmus toimub, stiili ( style ) ja ainult stiili värvi (color). onmouseover= this.style.color = red ; NB! Siin tuleb tingimata kasutada erinevaid tekstieraldajaid nii jutumärke, kui ka ülakomasid. Sama loogika DHTML-i kirjutamisel kehtib, kui muudame pilti ennast, peale hiire viimist sellele pildile, või teeme hiireklõpsu. See näeb välja nii: <IMG src= algul.gif onclick= this.src = uus.gif ; >

50 Siin klikkimine pildil on sündmuse onclick ja see muutub pilt, mis on vaadeldav kui selle objekti omadusena. Seega omadusele SRC antakse uus väärtus, milleks on uus pilt (this.src = uus.gif ). Näide teksti suurendamiseks: <HTML> <HEAD><TITLE>Teksti SUURENDAMINE</TITLE> </HEAD> <BODY> Siin on must tekst. <SPAN style='color:blue' onmouseover = 'this.style.fontsize = "50pt";'> SEE TEKST LÄHEB SUUREKS, KUI HIIR LIIGUB SELLELE</SPAM> Veel teksti </BODY> </HTML> Objektide identifitseerimine Kui objektil toimuv sündmus peab muutma teise objekti omadusi, ei saa kasutada määratlust this. Siis on vaja objektid idenifitseerida ja selleks kasutatakse parameetrit ID. Näiteks identifitseerime pealkirja kui pea <H2 ID= pea > Pealkiri </H2> ja tekst, mis muudab selle pealkirja värvi on selline. <SPAN onclick= document.all.pea.style.coler= red ; > Siia klikkides muutub pealkiri punaseks </SPAN> Näide, kus ühele tekstile klikkides muutub teise teksti värv. Lisaks muutub teine tekst ise suureks. <HTML> <HEAD><TITLE>Teksti SUURENDAMINE</TITLE> </HEAD> <BODY bgcolor=#90e0e0> <H2 ID='pea'> PEALKIRI </H2> Siin on sinine tekst <SPAN ID='tekst' style='color:blue' onclick = 'this.style.fontsize = "50pt";'> SEE TEKST LÄHEB SUUREKS; KUI KLIKKIDA </SPAN>

51 <SPAN> onclick='document.all.pea.style.color="red";'> Siia klikkides muutub pealkiri punaseks </SPAN> </BODY> </HTML> 5.3. Skriptprogrammid DHTML-is. Programmid võivad olla kompileeritavad või interpreteeritavad. Kui kasutatakse kompileerimist, siis peale programmeerimise keeles kirjutatud programmi valmimist see kompileeritakse ( tõlgitakse protsessorile kahendsüsteemis masinkoodis käskudeks) ja käivitatakse. Skript-programme ei tõlgita masinkoodi, vaid neid interpreteeritakse ( mängitakse läbi ) interpretaatori poolt. Interneti brauserid suudavad interpreteerida scriptprogramme ja seejuures erinevates programmeerimise keeles kirjutatud skriptprogramme. Skript-programm lisatakse HTML-lehele ja see laetakse kliendi arvutisse koos HTML lehega. Skript-keeles kirjutatud programm koosneb lausetest ja brauser täidab peale allalaadimist neid lauseid. Skriptprogrammiga on võimalik teha lehekülg interaktiivseks ja dünaaliliseks. Sündmuse korral pöördutakse meie poolt kirjutatud programmi poole ja programm sooritab oluliselt keerulisemaid tegevuse, kui lihtne pildi või värvivahetus. Skriptkeeles kirjutatud programm sarnaneb CSS-iga, kuid seda täidetakse mingi sündmuse korral. Skriptis kirjutatud programmi võib lisada HTML lehele kolmel erineval moel: 1) HTML-keele algusmärgendisse 2) HTML-faili sees märgendite <SCRIPT> vahel 3) Eraldi failina, millele viidatakse HTML lehelt. Programmide kirjutamiseks on palju võimalusi, kuid kuna seda programmi interpreteerib Brauser, peab arvestama, millist programmeerimiskeelt brauser toetab. Keeruliseks muudab asja ka see, et keeled arenevad ja samale programmeerimise keelele lisandub Brauseri uue redaktsiooni korral üha uusi võimalusi (kuid mida vana redaktsiooniga Brauser ei interpreteeri). Kui skriptis kirjutatud programm kasutab operatsioonisüsteemi objekte (või Op-süsteemi alla töötavate rakenduste objekte), on asi veel keerulisem, sest siis see programm töötab ainult selle OP-süsteemi all töötava Brauseriga

52 Sellest lähtuvalt oleks korrektne, kui kirjutada iga Brauseri ja OP-süsteemi jaoks eraldi programmid. Keele ja Brauseri poolest on sellised võimalused ette nähtud. Kõikide selliste võimaluste arvestamine muudab dünaamiliste HTML lehekülgede valmistamise väga aeganõudvaks ja kulukaks. Peale selle, oleks vaja ka seda keerulist lehte testida erinevate OP-süsteemide ja Brauseritega. Microsoft Internet Explorer interpreteerib JavaScript-i, VBS-i (Visual Basic Script ) ja XML-i (Extensible Markup Language) Skript-programmide paiknevuse näited Siin on mõned näited, kuidas kasutada erinevatesse kohtadesse paigutatud skriptikeelseid programme. 1) HTML-keele algusmärgendisse. <H1 onmouseover= language:'javascript'; this.style.color = red ; > TEKST</H1> Siin this.style.color = red on JavaScript keeles omistamislause (operaator), mis on paigutatud HTML keele pealkirja algusmärgendisse. Semikoolen (;) lõpetab lause, millele võib järgneda veel teisi lauseid, mis samuti täidetakse sündmuse onmouseover korral. Lause language:'javascript'; võib puududa, kui seda lehte loetakse ainult MS Internet Explorer iga. Pikka programmi paigutamine algusmärgendisse ei õnnestu, sest nendes lausetes on tekstide eraldamiseks võimalik kasutada ainult ülakomasid ( või jutumärke, kui programm ise on ülakomade vahel). 2) HTML-faili sees märgendite <SCRIPT> vahel Scriptkeeles programmi laused asetatakse märgendite <SKRIPT> vahele. JavaScript-is kirjutatakse programmid tavaliselt funktsioonidena. <SCRIPT LANGUAGE= JavaScript > <!-- function NIMI(argument,argument) { programmi_laused; return } --> </SCRIPT>

53 Skriptkeeles funktsiooni käivitamiseks peab HTML-i põhiosas olema sündmus, mis pöördub selle funktsiooni poole. Sündmuseks võib olla ka lehe avamine. VBS-is kirjutatakse programmid alamprogrammidena (Subroutine). SCRIPT LANGUAGE="VBScript"> <!-- Sub NIMI_Sündmus Programmi_laused End Sub --> </SCRIPT> Alamprogrammi käivitamise sündmus on märgitud alamprogrammi nime järel. Programmi laused, mis on väljaspool funktsioone või alamprogramme, täidetakse tingimusteta (alati) peale HTMI- lehe allalaadimist. Näiteks: <TITLE>Teretus</TITLE> <BODY> <SCRIPT> alert("t E R E"); </SCRIPT> </BODY> </HTML> Kuigi näites ei ole kasutatud kommentari märgendeid ja LANGUAGE= JavaScript parameetrit on neid soovitav kasutada teiste Brauserite tarbeks. 3) Eraldi failina, millele viidatakse HTML lehelt. Kui skript-programmid on pikad ja keerulised, on mõistlik teha programmist eraldi fail ja HTML-lehelt, kus seda kasutatakse osutada sellele failile. Seda tehakse nii: Skripti algusmärgendis antakse parameetriga SCR faili asukoht ja soovitavalt faili tüüp, mis on TEXT/JAVASCRIPT. <HTML> <TITLE>Teretus</TITLE> <HEAD> <SCRIPT language=javascript src="tere.js"

54 type=text/javascript> </SCRIPT> </HEAD> <BODY> </BODY> </HTML> Skripti laused on eraldi failina ilma igasuguste HTML-i märgenditete. Näites on selles failis nimega tere.js ainult üks lause. alert("t E R E"); Faili laiendiks on soovitav kasutada laiendit.js, kuid see ei ole kohustuslik. Tavaliselt käivituvad skript-programmid mingite sündmuste korral ja selleks on vaja kirjutada neid alamprogrammide või funktsioonidena ning neid vajadusel täita Skriptide kasutamise näited Näide, kus JavaSkpiptis programm on algusmärgendis ja mis peale nupule vajutamist väljastab ekraanile teate. Teade väljastatakse Windows-i süsteemse funktsiooniga alert. Kuna IE võtab vaikimisi keeleks JavaSkript, ei ole programmeerimiskeelt vaja märkida. (NB! Teiste Brauserite korral see nii ei ole) <HTML> <HEAD> <TITLE>Nupuvajutus</TITLE> </HEAD> <BODY> <CENTER> <FORM> <INPUT type = "button" VALUE = "Kui vajutad TERETAN!" OnClick="language:'JavaScript'; alert('tere')"> </FORM> </CENTER> </BODY> </HTML>

55 Sama näide, kus JavaSkiptis programm on HTML-i päises. <HTML> <HEAD> <TITLE>Nupuvajutus</TITLE> < SCRIPT LANGUAGE="JavaScript"> function nupp() { alert("tere!") return } </SCRIPT> </HEAD> <BODY> <CENTER> <FORM> <INPUT type = "button" VALUE = "Kui vajutad TERETAN!" OnClick="nupp()"> </FORM> </CENTER> </HTML> </BODY> Sama näide, kus VBSkiptis alamprogramm on HTML-i päises. <HTML> <HEAD> <TITLE>Nupuvajutus VBS</TITLE> <SCRIPT LANGUAGE="VBScript"> <!-- Option Explicit Sub Nupp_OnClick ") Dim MyForm Set MyForm=Document.F1 MsgBox (" ON VAJUTATUD End Sub --> </SCRIPT> </HEAD>