Atliekame užduotis iš eilės. Rezultatus išsaugokit.

1. Lentelės – kartojimas. 2. Div struktūra skirta pažangesniems. 3. Dirbant su stilių lentele sudarykite atskirą failą (pavadinimu

style.css) ir pagrindiniame faile HEAD dalyje suriškite tokiu įrašu <link href="style.css" rel="stylesheet" type="text/css">

Papildomi failai yra priede

4

1 lentelė

1 variantas: trys eilutės – keturi stulpeliai 2 variantas: keturios eilutės - trys stulpeliai

(lentele_1u.html)

3.5.3. Prisiminkite, kaip apjungiamos lentelės celės (colspan, rowspan ....) Užsikraukite 4-jo priedo kodą ir jį peržiūrėkite (5 pav.).

B

c

5 pav. Iliustracija kodo (a), rodančio, kaip apjungiamos lentelės celės eilutėse (b) ir stulpeliuose (c)

a lentele_2.html

Pertvarkykite savo sudarytą lentelę taip, kaip parodyta 2 lentelės užduotyje.

Gautą rezultatą parodykite dėstytojui.

5

2 lentelė

1 variantas:

2 variantas:

lentele2_uf1.html

3.5.4. Atlikite paskutinę užduotį (3 lentelė) su sudaryta lentele: įterpkite nuorodą į savo grupės sąrašą ir universiteto logotipą (grupių sąrašai ir universiteto logotipai pateikti failuose EPKf.htm, KTf.htm ir VGTU.gif.)

3 lentelė

1 variantas:

2 variantas:

lentele2_uf1u.html

Gautą rezultatą parodykite dėstytojui.

Lentelės atvaizdą (screenshot) nusikopijuokite ataskaitai. Kodą įrašykite vardu lentele1.html.

3.6. Sudarykite naują puslapio struktūrą <div> žymių pagalba.

3.6.1. Prisiminkite žymės <div> sintaksę ir CSS (Cascading Style Sheets) taikymą HTML dokumento sudaryme. 3.6.2. Užsikraukite tokio puslapio struktūros kodo pavyzdį (4 priedas, div.html), įdėmiai peržiūrėkite ir paleiskite (6 pav.)

6

6 pav. Struktūrizuoto puslapio kodas ir jo rezultatas

3.6.3. Sudarykite savo struktūrą (žiūr. užduotį 4 lentelėje)

4 lentelė

1 variantas 2 variantas

(div_u1) (div_u2)

Rezultatą parodykite dėstytojui.

7 3.6.4. Į sudarytą struktūrą įterpkite universiteto logotipą ir nuorodą į savo grupės studentų sąrašą (užduotis 5 lentelėje)

5 lentelė

1 variantas 2 variantas

(div_u1f) (div_u2f)

Gautą rezultatą parodykite dėstytojui.

Struktūros atvaizdą (screenshot) nusikopijuokite ataskaitai. Kodą įrašykite vardu struktura1.html.

3.7. Langų taikymas HTML dokumento struktūroje. Prisiminkite žymes <iframe> ir <frameset> bei jų taikymo sintaksę. Sudarykite kodą, parodytą 7 pav. Panaudokite savo įvadinį išsaugotą kodą ir nuorodą į gautą savo grupės studentų sąrašą.

7 pav. Kodo langams pavyzdys (a) ir jo rezultatas (b)

langai.html

8

Patikrinkite, kaip užsikrauna nuoroda į sąrašą.

Gautą rezultatą parodykite dėstytojui.

Langų atvaizdą (screenshot) nusikopijuokite ataskaitai. Kodą įrašykite vardu langai1.html. 3.8. Užduotis namams. Prisiminkite žymių <frameset> taikymo ypatumus. Sudarykite savo nuožiūra struktūrą iš dviejų eilute pateiktų langų, įdėdami medžiagą, kaip ir 7 pav. pavyzdyje.

Žymių taikymo pavyzdys:

H H

<frameset cols="25%,75%"> H H H H

< frame src="langas_1. html "> H H H H

< frame src="langas_2. html "> H H

</ frameset >

U4. Ataskaitos turinysU. 4.1. Darbo tikslas. 4.2. Struktūra, sudaryta taikant lenteles (atvaizdas ir kodas). 4.3. Struktūra, sudaryta taikant <div> žymes ir CSS (atvaizdas ir kodas). 4.4. Struktūra, sudaryta taikant langus (frame) (atvaizdas ir kodas). 4.5. Išvados. Priedai – visi sudaryti veikiantys kodai

KONTROLINIAI KLAUSIMAI - peržiūrėkite priedus

9

0B1 Priedas. Pagrindiniai terminai ir jų apibrėžimai

1BHTML

HTML (Hyper text Markup Language „Hiperteksto žymėjimo kalba“) – tai kompiuterinė žymėjimo kalba, naudojama pateikti turinį internete. Kalbą standartizuoja HUW3 konsorciumasUH.

2BAJAX

AJAX arba Asinchroninis JavaScript ir XML programavimas – terminas, apibrėžiantis svetainių programavimo technologiją, naudojančią šias priemones maksimaliam interaktyvumui pasiekti:

HUHTMLUH (ar HUXHTMLUH) bei stilių lenteles (Cascading Style Sheets) informacijos vaizdavimui

Dokumento Objektinį Modelį (HUDOMUH) bei HUJavaScriptUH kalbą dinamiškam vaizdavimui beiinteraktyvumui

HUXMLUH, HUXSLTUH ir XML Http Request objektą asinchroniniam duomenų apsikeitimui suserveriu (AJAX tam galėtų naudoti ir kitas technologijas).

Kaip ir HUDHTMLUH ar HULAMPUH, AJAX nėra technologija, bet tik abstraktus terminas, apimantis keliųtechnologijų kombinaciją.

Puslapiai, sukurti naudojant AJAX technologija, reikalauja HnaršykliųH, palaikančių šias technologijas. Tokios naršyklės, pavyzdžiui, yra HUMozilla FirefoxUH, HUInternet ExplorerUH, HUOperaUH

HUKonqueror,

UH ir HUSafariUH.

3BXML

XML (HUangl.UH Extensible Markup Language) yra HUW3CUH rekomenduojama bendros paskirties duomenų struktūrų bei jų turinio HUaprašomoji kalbaUH. Pagrindinė XML kalbos paskirtis yra užtikrinti lengvesnį duomenų keitimąsi tarp skirtingo tipo sistemų, dažniausiai sujungtų HUinternetuUH.

HTML Versijos

HTML versija žymima skaičiumi, nurodant versiją ir subversiją, pavyzdžiui, HTML 3.2.

Paskutinė HUW3CUH rekomenduojama HTML versija 4.01. Po jos HTML pagrindu buvo plėtojamas HUXHTMLUH standartas, kuris dar labiau atskyrė struktūros logiką nuo vaizdavimo, bei remiasi ne HUSGMLUH, o HUXMLUH žymėjimo kalba.

2009 m. HUvasario 12UH d. HUWWW architektų tarybaUH patvirtino HTML 5 juodraštį. HTML 5 keičia irHTML 4, ir XHTML 1, bet išlieka suderinamas su jais. Naujasis standartas smulkiai ir iki galo tiksliai aprašo žymėjimo gaires, nepalikdamas vietos interpretacijai – naršyklės turės vienodai atvaizduoti tinklalapius, vienodai elgtis net ir su HTML rašto klaidomis.

CSS

Nors ankstesnėse HTML versijose buvo nemažai išvaizdą aprašančių elementų, bet rekomenduojama HTML kalba žymėti dokumento sandarą, o išvaizdą (teksto spalvas ir pan.) aprašyti atskirame HUCSSUH dokumente.

10 Toks dokumentas užima mažiau vietos ir greičiau pasirodo vartotojo HnaršyklėjeH (įvairių

puslapių išvaizdą aprašantis HUCSS dokumentasUH iš serverio atsisiunčiamas tik vienąkart);

Toks dokumentas lengviau bei kokybiškiau apdorojamas automatiškai, todėl tokius dokumentus geriau indeksuoja paieškos sistemos.

Naudojant HCSSH, lengviau keisti iškart visų puslapių išvaizdą;

4BXHTML

XHTML (eXtensible HyperText Markup Language – „išplečiama hiperteksto žymėjimo kalba“) yra žymėjimo kalba, kuri turi panašias į HHTMLH žymėjimo taisykles, tik jos sintaksė yra griežtesnė. HTML yra pagrįsta HUSGMLUH, taigi yra mažiau suvaržyta (galima praleisti kai kuriuos žymenis, pavyzdžiui, neužbaigti paragrafo), o tuo tarpu XHTML remiasi HUXMLUH, todėl XHTML dokumentas turi būti struktūriškai tvarkingas (Hangl.H well - formed).

XHTML buvo sukurtas HW3CH ir yra tapęs šio konsorciumo oficialia rekomendacija.

5BPHP

PHP – plačiai paplitusi HUdinaminėUH HUinterpretuojamaUH HUprogramavimo kalbaUH (en: HypertexPreprocessor), sukurta H1995H m. ir specialiai pritaikyta HinternetoH svetainių kūrimui.

t

PHP sintaksė panaši į daugelį HUstruktūrinių kalbųUH, ypač į HCH bei HUPerlUH.

PHP kalba yra Hatviro kodoH ir tai yra viena priežasčių, dėl ko kalba yra nors ir nesudėtinga, bet gana lanksti – veikia daugumoje operacinių sistemų, palaiko nemažai HUreliacinių duomenų baziųUH bei veikia su dauguma interneto HserveriųH – HUCGIUH, HUFastCGIUH, HUISAPIUH ir kitais protokolais.

6BJavaScript

JavaScript – objektiškai orientuota skriptų HUprogramavimo kalbaUH, besiremianti prototipų principu. Dažniausiai kalba naudojama internetinių puslapių interaktyvumo realizacijai, bet taip pat naudojama ir kaip galimybė skriptais manipuliuoti tam tikromis programomis. Kalba sukurta HBrendano EichoH HNetscapeH kompanijoje ir pavadinta Mocha, vėliau pervadinta į LiveScript, ir galiausiai tapo JavaScript. Vienas iš argumentų pervadinant kalbą buvo sintaksinis panašumas su HUJava kalbaUH. Paskutinė JavaScript versija – 1.8

Nors JavaScript ir Java kalbų pavadinimai panašūs, pačios kalbos nėra susijusios – abi kalbos perėmė HCH kalbos sintaksę, bet semantiškai jos labai skiriasi, taip pat visiškai nesuderinami yra jų objektiniai modeliai.

Po JavaScript kaip svetainių skriptų rašymo kalbos sėkmės, HMicrosoftH sukūrė suderinamą kalbą HUJScriptUH, kurios palaikymas įdiegtas jau HInternet ExplorerH naršyklės 3.0 versijoje, 1996 metųviduryje. Vėliau abi šios kalbos apjungtos į vieną ECMAScript standartą. Nors JavaScript ir JScript sintaksiškai ir semantiškai suderinamos, naršyklės palaiko skirtingus dokumento objektinius modelius (DOM), dėl to skriptas, veikiantis vienoje naršyklėje, nebūtinai veiks ir kitoje.

DOM DOM dinaminis objektinis modelis, taikomas objektų HUHTMLUH, HUXHTMLUH ir HUXMLUH dokumentuosesąveikai aprašyti. Innterfeisas su išore – per API (HUapplication programming interface

UH)

11 Document Object Model (DOM) is a HUcross-platformUH and HUlanguageUH-independent convention forrepresenting and interacting with HUobjects

UH in HUHTMLUH, HUXHTMLUH and HUXMLUH documents. Objects in

the DOM tree may be addressed and manipulated by using methods on the objects. The pubinterface of a DOM is specified in its HUapplication programming interface

lic UH (API).

7BPerl

Perl (pagal idėją tai ne santrumpa, o tiesiog pavadinimas, tačiau vėliau buvo pasiūlyti ir santrumpą atitinkantys pavadinimai, tokie kaip: Practical Extraction and Report Language ar Pathologically Eclectic Rubbish Lister) HUpirmąją versijąUH sukūrė ir H1987H Hgruodžio 18H dieną išleido HULarry WallUH. Škalba paveldėjo labai daug kitų programavimo kalbų HUsavybių

i UH.

Perl kalba buvo pradėta kurti tekstinių failų apdorojimui, lengvam reikalingos informacijos paėmimui ir vizualiam pateikimui, kaip įrankis, galintis pilniau ir patogiau atlikti HUshUH, HUawkUH, HUsedUH ikitų HUUNIX

r UH įrankių darbus. Vėliau išsivystė į pilnateisę bendros paskirties programavimo kalbą su

išvystytomis teksto ir masyvų apdorojimo galimybėmis. Kalba yra labai praktiška – lengva naudoti, efektyvi, kompaktiška. Perl perėmė daugelį savybių iš tokių Hprogramavimo kalbųH kaip HCH, HUsedUH, HUawkUH ir HUshUH. Sintaksė primena C kalbos sintaksę, tačiau nėra griežtai apibrėžta, (ypač – iki 4-oversijos).

sios

Perl kalba buvo parašyta didžioji dalis pirmųjų dinaminių interneto svetainių kodo, kai dinaminiam turiniui kurti populiariausia buvo HUCGIUH technologija. Vėliau šios pozicijos buvo užleistos labiau specializuotai HPHPH. Nors ir dabar net tokie puslapiai kaip lrytas.lt naudoja Perl.

Perl (Perlscript), panašiai kaip ir HJavascriptH, galima panaudoti HUskriptų rašymuiUH, kurie interpretuojami vartotojo naršyklėje.

Perl plačiai naudojama IT saugumo problemoms spręsti. Tai saugumo spragų išnaudojimo skriptams (eksploitams) rašyti.

8BPython

Python yra interpretuojama, interaktyvi Hprogramavimo kalbaH sukurta Guido van Rossumo H1990H metais. Pirmiausiai ji buvo scenarijų kalba AmoebaOS Hoperacinei sistemaiH. Python dažniausiai lyginama su HUTclUH, HUPerlUH, HUSchemeUH, HUJavaUH ir HURubyUH. Python kuriama kaip HUatviro kodoUH projektas.

Python yra daugiaparadigmė programavimo kalba – ji leidžia naudoti keletą programavimo stilių: objektinį, struktūrinį, funkcinį, aspektinį. Python naudoja dinaminį tipų tikrinimą.

9BRuby

Ruby – HUinterpretuojamaUH HUprogramavimo kalbaUH greitam ir lengvam objektiškai orientuotamHprogramavimuiH. Ruby ypač gerai tinka tekstiniams HfailamsH apdoroti. Tai paprasta, mobili ir lengvai plečiama kalba. Dažnai painiojama su Ruby On Rails programavimo terpe, kuri iš tikro pati naudoja Ruby.

10BWAMP

WAMP yra HakronimasH iš angl. žodžių: HUWindowsUH – HUApacheUH – HUMySQLUH ir vieno iš HUPHPUH, HUPythonUH ar HUPerlUH. WAMP naudojamas kalbant apie tipinę ir populiarią HkompiuterioH mišrią komplektaciją(komercinio ir Hatviro kodoH) Hprograminė įrangaH, skirta HinternetinioH HserverioH ir Hduomenų bazėsvaldymo funkcijoms atlikti.

– H

11BLAMP

12LAMP yra HakronimasH iš angl. žodžių: HULinuxUH, HUApacheUH, HUMySQLUH, HUPHPUH, naudojamas kalbant apie tipinę ir populiarią HUkompiuterioUH komplektaciją HUatviro kodoUH HUprogramine įrangaUH, skirta HUinternetinioUH HUserverioUH ir HUduomenų bazėsUH valdymo funkcijoms atlikti.

Šis rinkinys nėra tyčia sukurtas veikti kartu, tačiau tapo populiarus, nes apjungė universalias bei patikimas Hatviro kodoH programas.

HUMichael KunzeUH pirmąkart pavartojo akronimą LAMP savo straipsnyje vokiškame žurnale HUc'tUH H1998H

metais (12 nr., 230 p.). Straipsnyje rašė apie tai, kaip laisvų programų rinkinys gali būti gyvybinga ir gera alternatyva komerciniams paketams. Dėl IT pasaulio pomėgio akronimams LAMP greitai tapo marketinginiu terminu, populiarinančiu laisvųjų programų naudojimą.

12BXAMPP XAMPP - atviro kodo laisvai platinama web serverio platforma, sudaryta iš HUApache HTTP ServerUH, HUMySQLUH duomenų bazės ir interpretatorių skriptams, parašytų HUPHPUH ir HUPerlUH kalboms. Rinkinys papildytas failų ir elektroninio pašto serveriais.

13

13B2 Priedas. HTML dokumento tipinė struktūra

17BKiekvieno tinklapio tipinė struktūra sudaryta iš HEAD ir BODY dalių. Jos savo ruožtu talpinamos tarp HTML žymių. Priedo, kiekvienas dokumentas pradedamas nuoroda, kokiu HTML standartu remiantis sudaryta dokumentas. Pvz. <!DOCTYPE html> Arba dar išsamiau: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

18BAntraštės (HEAD) dalies pagrindinės žymės

19BTITLE

Skirtas dokumento pavadinimui, rodomui naršyklės pavadinimo juostoje.

Sintaksė:

<title>...</title>

20BBASE

Žymė nurodo kelią naudojamoms nuorodoms.

Sintaksė:

<base href="/~webdev/baseURL" target="WindowName

21BMETA

Skirta informacijai apie HTML dokumentą perduoti paieškos sistemoms ir naršyklėms.

Turi tris atributus: NAME, HTTP-EQUIV ir CONTENT.

NAME nurodo, kokia META žymė panaudota. HTTP-EQUIV aprašo, kokia informacija siunčiama naršyklei. CONTENT dalyje pateikiami visi duomenys.

Sintaksė: <meta name="name" http-equiv="FieldName" content="value" >

<META NAME="ROBOTS" CONTENT="ALL">

Robots - valdymas indeksacijos paieškos serveriams: ALL – indeksuoti viską, NONE – neindeksuoti. Nesant šio įrašo –indeksuojama viskas .

14< META HTTP-EQUIV meta http-equiv="expires" content="Tue, 22 Oct 2012 12:12:00 GMT" > Expires nurodo, kiek laiko užkrautas puslapis gali būti saugomas naršyklės “keše”. Reikšmė – 0 – perkrauti kiekvieną kartą. <META HTTP-EQUIV="Content-Language" CONTENT="lt"> Arba <meta http-equiv="Content-Type" content="text/html; charset=ISOiso-8859-4"> <META NAME="Description" CONTENT="Pateikiama puslapio aprašymas"> <META NAME="Keywords" CONTENT="Įrašomi raktiniai žodžiai "> <META NAME="Author" CONTENT="Autoriaus Vardas Pavardė etc. "> <META HTTP-EQUIV="Reply-to" CONTENT="Autoriaus E-mail"> <META NAME="Generator" CONTENT="Pavadinimas programos, su kuria kurtas dokumentas "> <META NAME="Creation_Date" CONTENT="metai/mėnuo/diena"> <META NAME="revisit-after" CONTENT="Įrašoma, po kiek dienų bus perindeksuotas puslapis."> < META NAME meta name ="Copyright" content="Kam priklauso autorystė"> Metaduomenys labai svarbūs publikuojant elektroninius leidinius. Lietuvoje elektroninėje leidyboje taikoma Dublin Core metaduomenų sistema. Jai sukurta “on-line” meta duomenu generatorius HUhttp://www.lnb.lt/libis/meta.phpUH

22BSTYLE

žymėmis aprašoma dokumento elementų stiliai. Naujesnės naršyklės supranta dviejų tipų stilius: kaskadinių lentelių (CSS) ir JavaScript stilių lenteles. Stiliaus tipo nustatymui naudojama TYPE atributas "text/css" arba "text/javascript".

Sintaksė: <style type="stylesheetType" > ... </style> Pavyzdys: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv=Content-Type content="text/html; charset=windows-1257"> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-4"> <meta name="GENERATOR" content="Microsoft Word 11"> <meta name="description" content="Susipažinimas su HTML pradmenimis"> <meta name="keywords" content="HTML, laboratoriniai darbai, antgalvis"> <title>Laboratorinis darbas Nr.2</title> <link href</head>

="style.css" rel="stylesheet" type="text/css">

15

14B3 Priedas. Pagrindinės koduotės

15BHUISOUH koduotėHs

HUISOUH - International Standards Organization nurodo koduočHiHų standartus skirtingiems raidynams ar kalboms.

Koduotė Aprašymas Kokias kalbas palaiko

HUISO-8859-1U Lotyniškas raidynas - 1 dalis ŠiaurėHsH Amerika, Vakarų Europa, Lotynų Amerika, Karibai, Kanada ir Afrika

HUISO-8859-2U Lotyniškas raidynas - 2 dalis Rytų Europa

HUISO-8859-3U Lotyniškas raidynas - 3 dalis PR Europa, Esperanto ir keletas kitų

HUISO-8859-4U Lotyniškas raidynas - 4 dalis Skandinavijos / Baltijos šalys (ir keletas kitų, kurios nepatenka į HUISO-8859-1UH)

HUISO-8859-5U Lotyniškas/Kirilicos raidynas - 5 dalis

Kalbos, kurios naudoja kirilicą. Pavyzdžiui Bulgarija, Baltarusija, Rusija ir Makedonija

16BHUUnicodeUH konsorciumas

HUUnicodeUH Konsorciumas sukūrė HUunicodeUH standartą, palaikantį visus simbolius. Ši koduotė darvadinama UTF - HUUnicode

UH Transformation Format.

HUUnicodeUH standartas buvo pripažintas visų programavimo kalbų ir operacinių sistemų, ją palaiko visos šiuolaikinėHsH naršyklėHsH.

HUUnicodeUH Konsorciumas dirba kartu su kitomis organizacijomis, kurios patvirtina standartus, tokiomis kaip HUISOUH, W3C ir ECMA.

Internete yra naudojama HUUTF-8UH koduotė. Visi HUHTMLUH 4 procesoriai palaiko HUUTF-8UH, taip pat visHUXHTML

i UH ir XML procesoriai palaiko UTF-8 ir HUUTF-16UH. Skaičius parodo keliais bitais bus

koduojama.

Pavyzdys:

Kuriamame puslapyje galite naudoti tokią HUhtmlUH žymę:

1 <HU

htmlUH

xmlns="http://www.w3.org/1999/HU

xhtmlUH

" xml:HU

langUH

="HU

utf-8UH

" HU

langUH

="HU

utf-8UH

" >