„Dinaminiai internetinių puslapių konstravimo principai“

– vaizduojamą turinį gaubiantis elementas

Kuriant statinį internetinį puslapį naudojantį HTML kalba pravartu žinoti ir kitus žymėjimo elementus, kurie dažniausiai skirstomi į:

• Struktūrinius. Šie apibrėžia teksto paskirtį,

Žymėjimo elementai

Naršyklei nurodo, kad tai yra antro lygio antraštė. (gali būti nurodama ir kitų lygių).

• Prezentacinius. Šie nurodo, kaip rodyti tekstą.

paryškintas
Atvaizduos žodį paryškintai.

• Hipertekstinius. Sukuria nuorodas tarp dokumentų ar jų dalių.

Žemiau pateikiamas minimalaus internetinio puslapio pavyzdys parašytas standartine HTML kalba.

Pirmas darbas

Rašomas referatas

Daugelis HTML gairių yra porinės, t. y. susideda iš dviejų dalių, nurodančių gairių gaaliojimo sritį. Pavyzdžiui, gairės ir naršyklei nurodo, kad visas tarp jų esantis tekstas yra dokumento turinys. Gairės ir nurodo, kad visas turinys, esantis tarp jų, yra informacija apie patį dokumentą. Gairė su pasvyruoju brūkšniu / – tai uždarančioji, gairė, po kurios baigiasi pirmosios jos porininkės galiojimas.

HTML gaires galima rašyti tiek viršutiniu, tiek apatiniu registru. Pavyzdžiui, nėra skirtumo, ar gairės rašomos štai taip: . , ar taip: . . Abi šios gairės bus traktuojamos vienodai. Dar vienas labai svarbus dalykas tas, kaad HTML tekste yra ignoruojami papildomi tarpai, tabuliacijos simboliai ir perkėlimas į naują eilutę. Šios taisyklės išimtis – kai vartojamos specialios

ir

gairės.

Daugelis profesionalių WWW dizainerių iki šiol rašo HTML kodą ir vartoja tekstinius redaktorius, kadangi dažnai tik tooks puslapių kūrimo būdas leidžia iki galo išreikšti savo kaip kūrėjo mintį. Daugeliui jų nebeužteko HTML kodo teikiamų galimybių, tad buvo pradėtos kurti dinaminiai principai, bei platesnės kalbos, kuriomis buvo pradėti kurti dinaminiai internetiniai puslapiai.

XML

Siekiant įvesti griežtesnę internete naudojamų priemonių kontrolę ir išspręsti įvairias problemas, internato standartus rengiantis W3C (World Wide Web Consortium) komitetas parengė naują internete pateikiamų duomenų aprašymo kalbą XML (Extensible Markup Language). Šioje kalboje, kuri, kaip ir HTML, sukurta SGML (Standard General Markup Language) standarto pagrindu, numatyta, kokiomis priemonėmis turi būti aprašytos visos internetu persiunčiamos arba interneto programų apdorojamos duomenų struktūros. Tai siaurai specializuota kalba, kurioje pateikti tiktai duomenų struktūrų aprašymo principai ir šiam tikslui naudojamos priemonės, tačiau nėra jokių duomenų apdorojimą arba interpretavimą aprašančių priemonių. Konkretiems duuomenų tvarkymo poreikiams šios kalbos pagrindu kuriamos įvairios jos realizacijos, kuriose apibrėžiami XML kalbos struktūrų interpretavimo būdai.

XML duomenų struktūros, kaip ir HTML kalboje, sudaromos iš konteinerių, kurie gali gaubti vienas kitą. Tačiau šie konteineriai nėra apibrėžti, jų pavadinimai ir interpretavimas apibrėžiami taikomosiose realizacijose. Kaip šie elementai bus interpretuojami ir kokie veiksmai su jais bus atliekami, turi numatyti speciali XML realizacija.

XML kodo pavyzdys

JonasJonaitis

AndriusKalesnikas

XHTML

XHTML – EXtensible HyperText Markup Language – praplėsta hypertexto sužymėjimo kalba, kurios tikslas yra visiškai paakeisti HTML. Pats XHTML yra labai panašus į HTML 4.01, bet XHTML standartai yra griežtesni, o kodas – švaresnis. Dar 2000-aisiais metais ši kalba buvo oficialiai rekomenduota W3C kaip tinkamas standartas.

Kadangi HTML sintaksė nėra tokia griežta, internete atsirado labai daug puslapių, kurių kodas buvo netvarkingas, nepalaikantis jokių standartų, tačiau su populiariausiomis naršyklėmis matomi. Netvarkingo HTML teisingai neapdoroja paprastesnes programos (pvz. mobilaus telefone esanti naršyklė). Kad išvengti viso šito ir buvo pereita prie HTML griežtesnės standartizacijos – XHTML.

Papildomi reikalavimai, kurių reikia laikytis aprašant tinklalapius XHTML kalba, yra tokie:

• Dokumento struktūra turi būti aprašoma pagal tipinę schemą, nepraleidžiant nei vieno jos elemento;

• Dokumento elementai gali gaubti vienas kitą, tačiau negali persidengti;

• Visų dokumento elementų ir jų parametrų vardai turi būti rašomi mažosiomis raidėmis;

• Visi konteineriai turi būti su pabaigos gairėmis, o atviros gairės turi būti papildomos terminatoriaus simboliu /;

• Parametrų reikšmes būtina rašyti kabutėse.

Dinaminis HTML

Dinaminio HTML technologija, apjungia savyje HTML, stilių sąrašus ir skriptus, bei leidžianti internetiniams puslapiams keistis ir realizuojanti animaciją. Be to, kai puslapis buvo užkrautas iš serverio, nebereikalingas ryšys su serveriu – viskas vyksta vartotojo kompiuteryje. Dinaminiuose HTML vartotojui spaudžiant klavišus, važinėjant su pele ar spaudžiant jos klavišus, keičiasi puslapio teksto dydis, spalva, padėtis ir t.t. Galima animacija, puuslapio elementai gali judėti aplinkui, atskiri elementai gali dingti ir vėl pasimatyti.

DHTML privalumai ir savybės :

 DHTML leidžia elgtis su visu Web puslapiu, kaip programuojamu objektu. Tai leidžia Web puslapiams geriau reaguoti į įvedamus duomenis ir komandas, pateikiamas vartotojo.

 Papildomos multimedijos panaudojimo, maketų kūrimo galimybės. Pranešimo laukų judėjimas, šrifto spalvos keitimas, specialūs filtrai (pvz. šešėlių kūrimas) ir daugelis kitų priemonių leidžia sukurti interaktyvesnius dokumentus.

 Serverio apkrovimo sumažinimas. Žiūrint vartotojui DHTML visi duomenys iš pat pradžių paimami iš serverio ir perkeliami į vartotojo kompiuterį. Po to darbas vyksta tik pastarojo kompiuteryje. Taip mažiau apkraunamas ir tinklas, ir serveris.

 Interaktyvumo lygio padidėjimas. Dinaminio Web puslapio turinys gali būti pakeistas priklausomai nuo vartotojo veiksmų (pvz. vartotojas su pele gali tampyti atskirus objektus, matomus ekrane).

 Manipuliacija dokumento pavadinimu. Siekiant supaprastinti darbą su dokumentais galima išvesti į ekraną dokumento antraštę, kai tik tai yra būtina. Be to tai galima padaryti bet kur ir bet kada.

 Duomenų bazių palaikymas. Leidžia pateikti duomenis puslapyje be pakartotino kreipimosi į serverį, kad Šis prileistų prie informacijos.

 Duomenų išvedimo (patalpinimo) supaprastėjimas. Duomenys gali būti išvedami iš karto, kai jie yra gaunami. Anksčiau reikėdavo gauti visus duomenis, ir tik po to juos buvo galima išvesti į ekraną.

 Sąrašų stilių pagerinimas. Čia galima patalpinti papildomos informacijos, kuri leidžia sutrumpinti puslapio foormatavimo atributų aprašymą.

 Teksto efektai. Vartotojui gali būti leidžiama keisti teksto, kurį tuo metu skaito, šrifto dydį. Kad vartotojas aplankytų tam tikra po nuoroda esantį puslapį, galima pele užvažiavus ant nuorodos padidinti tekstą toje vietoje, padidinti garsą ir t.t.

 Kelių platformų palaikymas. Palaiko Windows, Macintosh, UNIX ir kt.

Dinaminiame HTML galimas ne tik paprastas Web puslapio elementų atributų keitimas, bet ir galima transformuoti patį tekstą. Visi taisymai vykdomi realiame laike.

Nors dinaminiai HTML suteikia gerokai daugiau galimybių, tačiau yra vienas labai didelis minusas. Nėra visiškai bendro standarto. Ką supranta viena naršyklė, visiškai nesupranta kita naršyklė. Todėl tokius puslapius potencialiai gali žiūrėti gerokai mažiau vartotojų. Vartotojas, norėdamas žiūrėti puslapius, turi turėti kelias naršykles įvairiems puslapiams.

Dinaminių puslapių kūrimas

Čia pateikiamas DHTML pavyzdys, kai pelės žymeklį patalpinus ant pirmos teksto eilutės, dingsta antra eilutė. Jeigu pele nuvažiuojame į kitą vietą, tai dingusi eilutė vėl pasimato. Šiuo pavyzdžiu yra iliustruojamas pagrindiniai DHTML veikimo principai.

Šis puslapis turi dvi elementų grupes : pirma eilutė ir antra eilutė. Kiekviena grupė aprašyta, naudojant dažniausiai naudojamą DHTML deskriptorių DIV :

[style] [<įvykiai>] [id] tekstas arba kiti elementai

Čia prie STYLE nusirodo teksto spalva, šriftas, teksto dydis, kursoriaus išvaizda, teksto pabraukimas, ar matomas ir kt. Jo sintaksė:

STYLE=“savybė1:reišmė1;savybė2:reišmė2;.;savybėN:reišmėN;“

(STYLE rašyti nebūtina)

<ĮVYKIAI> yra tokie kaip pelės klavišo p

aspaudimas, dvigubas paspaudimas, klavišo paspaudimas, judesys pele ir kt. Čia rašoma, prie kokio įvykio, kokią funkciją atlikti (JavaScript’as).

Sintaksė:

Įvykio_pavadinimas=“funkcijos_pavadinimas([funkcijos parametrai]);“

(Įvykių rašyti nebūtina)

ID yra tos elementų grupės identifikatorius (vardas), pagal kurį su atliekami veiksmai (elementų paslėpimas, teksto šrifto keitimas ir kt.)

Galimybė sukurti animacinius personažus, reaguojančius į vartotojo įvedamą informaciją, daro puslapius patrauklesnius, vaizdingesnius bei informatyvesnius. Personažai gali judėti plokštumoje, su specialiomis priemonėmis net trimatėje erdvėje. Personažo judėjimą galima susieti su muzikinio fono stiprėjimu (silpnėjimu).

Dažniausiai DHTML naudojama kurti žaismingi bei akiai patrauklius iinternetinio puslapio elementus.

DHTML ir JavaScript pavyzdys

Pavyzdys 1

Kad pamatytumėte kas atsitiks, užvažiuokite ant šios eilutės, o po to nuvažiuokite Tekstas dings

JavaScript kalba

Internetinių puslapių kūrimui vartojant vien tik standartinę HTML kalbą tinklalapiai yra statiniai – vartotojas negali turėti įtakos informacijos išdėstymui tinklalapyje. Norint sukurti tikrai interaktyvų tinklalapį, reikalinga dar viena kalba, kuri būtų vartojama naršyklės kontekste, tai skripto kalba.

Programavimo kalba JavaScript naudoja įvairius tekstinės ir grafinės informacijos vaizdavimo būdus, leidžia į tinklalapį įterpti įvairius objektus, leidžia dizaineriams kurti daugiau sąveikos su vvartotoju galimybių puslapyje, neužkraunant serveriui atsakomybės už veiksmus.

Ši kalba skirta interaktyviems tinklalapiams kurti ir turi priemonių naršyklei valdyti. JavaScript kalba turi palyginti mažai galimybių darbui su failais ar grafikai valdyti. Programos, sukurtos skripto kalba, negali veikti savarankiškai, jos vykdomos ttik naršyklės, suprantančios šią kalbą, kontekste. Programos, sukurtos JavaScript kalba, dar vadinamos skriptais, arba scenarijais, ir įtraukiamos į Web tinklalapį, kuriame atpažįstamos ir vykdomos kartu su likusiu HTML kodu.

Naudodami skripto programas galime išgauti įvairius efektus, kuriuos riboja tik programavimo kalbos galimybės ir naršyklės elementai. Dažniausiai skripto kalbos vartojamos:

 įvairiems dialogo langams bei pranešimams naršyklės informacinėje eilutėje vaizduoti;

 dinamiškam tinklalapio turiniui kurti, kai tinklalapis skaitomas ar jau perskaitytas;

 tinklalapio turiniui keisti;

 forms elementuose vartotojo įrašytos informacijos teisingumui patikrinti;

 navigacijai po kitus puslapius;

 įterptiems Java-apletams ir ActiveX elementams valdyti;

 žaismingiems elementams kurti (skraidančios snaigės ar panašiai)

Pagrindiniai JavaScript elementai

Programa, sukurta JavaScript kalba, yra nuosekliai išdėstyta HTML dokumente. Jai įterpti naudojamas blokas (1 pavyzdys).

HTML dokumento tekstas ir JavaScript funkcijos iškvietimas