SVEUILITE JOSIPA JURJA STROSSMAYERA U OSIJEKU ELEKTROTEHNIKI FAKULTET OSIJEK

Ante uljak Mario Jurevi Ivan peh

Izrada web stranice za interaktivna predavanja

INTERNET PROGRAMIRANJESEMINARSKI RAD

Osijek, 2011.1

Sadraj:Sadraj:........................................................................................................................................2 UVOD ................................................................................................................................3 PROGRAMI, JEZICI I FORMATI KORITENI ZA IZRADU INTERAKTIVNIH SADRAJA................................................................................................................................4 Programi koriteni za izradu stranice......................................................................................4 Notepad++...........................................................................................................................4 Photoshop............................................................................................................................4 Firebug.................................................................................................................................5 Jezici koriteni pri izradi stranice...........................................................................................7 HTML.................................................................................................................................7 CSS......................................................................................................................................9 PHP....................................................................................................................................10 MySQL..............................................................................................................................13 Formati sadraja web stranice .............................................................................................15 JNLP i JAR........................................................................................................................15 DCR...................................................................................................................................15 FLV....................................................................................................................................16 IZRADA INTERAKTIVNIH PREDAVANJA........................................................................16 HTML....................................................................................................................................16 ..............................................................................................................................................16 Izrada stranice ...................................................................................................................16 Umetanje interaktivnih sadraja........................................................................................18 CSS.......................................................................................................................................19 Oblikovanje stranice..........................................................................................................19 Izrada izbornika.................................................................................................................21 PHP........................................................................................................................................22 MYSQL.................................................................................................................................26 KORITENJE INTERAKTIVNIH PREDAVANJA...............................................................27 Kretanje po stranici pomou izbornika.................................................................................28 Video animacije....................................................................................................................28 Java aplikacije.......................................................................................................................29 Dcr simulacije........................................................................................................................31 ZAKLJUAK...........................................................................................................................32 2

UVODWeb stranice danas su nezaobilazan element prezentacije svakog poduzea, projekta ili osobe na internetu. One utjeu na ukupan dojam, posebno zbog toga to Internet populacija rapidno raste iz dana u dan, a raste i broj novih, inovativnih Internet servisa, pa tako naravno i konkurentnih web stranica. Web stranice sve vie dobivaju na znaenju i u edukaciji jer se pomou njih mogu prikazati razni sadraji koji vizualno predoavaju odreene probleme, bilo tekstom, slikama, videom ili nekim drugim interaktivnim sadrajem. Predznak interaktivno znai da korisnik sam moe utjecati na odvijanje odreenih procesa. Predavanja koja je izradila ova grupa sadre animacije, aplikacije, slike i tekst koji su povezani u kompleksnu web stranicu. Na poetku, prije samoga koritenja stranice, potrebno je kreirati korisniko ime i lozinku te se logirati pomou njih da bi se dolo do predavanja. Interaktivna predavanja obrauju problematiku kolegija Teorija polja i valova. Da bi izradili ova interaktivna predavanja potrebno nam je znanje o html-u i css-u za izradu web stranice, znanje php-a za ureivanje i podatke za logiranje i registraciju, ureivanju slika u photoshopu, izrada animacija u flashu, izrada aplikacija u javi, izrada kalkulatora za neke fizikalne veliine u javascriptu. U drugom poglavlju biti e opisani programi koriteni za izradu ovih predavanja kao to su: Notepad ++, Photoshop, Firebug te Any FLV Player. Nadalje, biti e reeno neto o HTML u, CSS u i formatima interaktivnih sadraja. U treem poglavlju opisan je proces izrade interaktivnih predavanja, dok je u etvrtom poglavlju objanjen nain koritenja istih.

3

PROGRAMI, JEZICI I FORMATI KORITENI ZA IZRADU INTERAKTIVNIH SADRAJA Programi koriteni za izradu straniceNotepad++ Notepad++ je besplatan editor programskog koda. Iako naizgled vrlo jednostavan i skroman, podrava mnotvo naprednih opcija te to je najvanije, besplatan je. Alat je prema [1] napisan u C++ jeziku te koristi Win32 API i STL koji osiguravaju veliku brzinu i manju veliinu samog programa te se nalazi pod GPL licencom. Notepad++ prepoznaje i oznaava sintaksu za vie programskih jezika, portabilan je i ne zauzima gotovo nita resursa raunalu. Besplatan program moe se skinuti na adresi http://notepad-plus.en.softonic.com/.

Slika 2.1. Program Notepad ++

Photoshop Photoshop je najpopularniji alat za stvaranje i ureivanje slika. Profesionalan alat za web dizajn, grafiki dizajn, te fotografe. Jedan od razloga zato je Photoshop toliko popularan je to njegovo suelje je prilagodljivo, veoma je intuitivan te raspolae sa velikim brojem alata. Na internetu moete pronai mnogo besplatnih uputa za koritenje. Jedan od 4

nedostataka programa je potreba za velikom koliinom resursa. Za trenutni CS3 treba minimalno 512MB RAM-a, grafika kartica sa 64MB te 1GB prostora na disku. No preporuljivo je svakako imati preko 1GB radne memorije jer jednom kada se krenu raditi vei projekti, radna memorija je presudan faktor. [2]

Slika 2.2. Photoshop i alatna traka

Firebug Firebug je besplatna Open Source alatka dostupna kao dodatak (eng. plugin) za Firefox koja omoguava pronalaenje i otklanjanje greaka u HTML, CSS i JavaScript kodu. Da bi koristili Firebug, potrebno je znanje iz CSS-a i HTML-a. Prema [2] Firebug nije editor koda, to znai da nema mogunost trajnog uvanja izmjena koje su testirane na stranici (svaka izmjena koju treba sauvati mora se kopirati u tekstualni editor koda i tamo sauvati). Funkcija ove alatke je manipuliranje kodom direktno na stranici i praenje kako odreene promjene utjeu na izgled stranice bez potrebe za stalnim uvanjem, upload-om na server i osvjeavanjem stranice da bi izmjenjen sadraj postao aktivan. Besplatan program moe se preuzeti na: https://addons.mozilla.org/en-US/firefox/addon/1843/

5

Slika 2.3. Firebug 1.1.1. Any FLV Player Any FLV Player je osnovni program koji omoguuje korisnicima da koriste i objavljuju video sadraje. Suelje programa je jednostavno s kontrolama prikazanima u obliku gumba du vrha ekrana. Any FLV Player se razlikuje od drugih programa za prikaz video sadraja jer omoguuje korisnicima da objavljuju svoje FLV videozapise na web stranicama.

Slika 2.4. Any FLV Player

6

Jezici koriteni pri izradi straniceHTML HTML je prema [3] kratica za Hyper Text Markup Language, a predstavlja prezentacijski jezik za kreiranje web stranica. Da bi se web stranice mogle oblikovati, stvoren je HTML. Pomou njega mogue je mijenjati fontove slova po tipu (obitelji: Arial, Times, Curier itd.), veliini i stilu (obian, italic, bold ili italic bold). Mogue je umetati slike u tekst, definirati prored, uvuenost teksta i ostalo. HTML ima dvije sutinske osobine hipertekst i univerzalnost. Hipertekst znai da se moe napraviti veza (eng. link) na web stranici koja e posjetitelja odvesti na drugu web stranicu ili na praktino bilo to na internetu, to znai da se informacijama moe pristupiti iz brojnih razliitih smjerova. Univerzalnost znai da svako raunalo moe itati web stranice jer se one spremaju kao Text Only datoteke. Svejedno je ima li posjetitelj Macintosh ili Windows raunalo, Unix pa ak i runi ureaj kao to je Palmtop, Web je otvoren za sve. Softver koji se koristi za prikazivanje i pregled web stranica zove se pretraiva (eng.browser). Najpopularniji pretraivai danas su Mozilla Firefox, Google Chrome, Opera, Internet Explorer, Netscape. Poetkom razvoja web-a, postojali su tzv. 'ratovi pretraivaa', u kojima se stranice nisu mogli prikazivati u vie razliitih pretraivaa, npr. stranica napisana za Netscape nije se mogla prikazati u Internet Explorer. Zato je organizacija World Wide Web Consortium ili W3C poela uvoditi standarde kojih se trebaju pridravati svi pretraivai kako bi se postigla univerzalnost. Tagovi su HTML komande. Jedan tag je komanda koja govori naem pretraivau. to i kako napraviti tj. na koji nain prikazati sadraj naih stranice. HTML tagovi su "case insensitive" tj. svejedno je da li ih piemo malim ili velikim slovima. Tagovi se piu unutar oznaka "< >" npr: . Ovaj tag se nalazi na poetku svakog HTML dokumenta i on govori naem pregledniku da je datoteka koju je upravo poeo uitavati ba HTML dokument i da kao takvog treba i prikazati. Na kraj HTML dokumenta se stavlja zavrni HTML tag: . Ovaj tag govori pretraivau da je to kraj naeg HTML dokumenta. Veina tagova ima i poetni i zavrni tag. Zavrni tag se dobiva dodavanjem znaka "/" i oznaava mjesto na kojem prestaje djelovanje poetnog taga. Svaki HTML dokument se sastoji od dva dijela: zaglavlja (eng. head) i tijela (eng. body). Zaglavlje se odvaja tagovima i , a tijelo dokumenta tagovima 7

i . Sve ono to napiemo u zaglavlju dokumenta nee se prikazati u prozoru pretraivaa ve obino slui samo da prui neke informacije o naoj stranici, kao npr. u okviru zaglavlja nalazi se tag unutar kojega stoji naslov stranice (naslov se nee pojaviti u tijelu stranice ve naslov koji se pojavljuje u naslovnoj liniji preglednika, unutar zaglavlja nalazi se adresa css dokumenta koji djeluje na html te druge informacije. S druge strane sve ono to napiemo izmeu tagova i predstavljat e tijelo naeg dokumenta i pojavit e se kao sadraj nae web stranice u prozoru preglednika. Dakle, svaki HTML dokument mora imati slijedeu strukturu: Informacije o stranici Sadraj stranice

HTML HEAD TITLE META H1 BODY P UL LI LI LI Slika 2.5. Primjer HTML strukture

8

CSS

CSS je kratica od Cascading Style Sheets. CSS je tzv. stilski jezik koji omoguava dodavanje razliitih stilova HTML elementima kao to su: veliina i vrsta pisma, pozadinske boje, okviri, poloaj elemenata, margine, itd... Svrha CSS-a je zapravo odvajanje stila prezentacije od samog sadraja web stranice. Prvo je potrebno napisati HTML dokument (naslovi, paragrafi, linkovi, slike, liste itd.), a zatim napraviti CSS dokument koji je povezan sa HTML dokumentom i preko kojeg svi tagovi u HTML-u dobivaju odreena svojstva (npr. veliina i boja teksta, poloaj elemenata i sl.). Znai HTML dokument je ureen preko CSS-a, odnosno svaki element u CSS-u, djeluje na neki tag u HTML-u.. Razlozi zato se ta dva dokumenta odvajaju su: preglednost dokument jednostavnije, bre i sigurnije odravanje HTML i CSS dokumenta jednostavnija prenamjena web dokumenta za razliite tipove preglednika odnosno ureaja (npr. handheld i mobilni ureaji, audio preglednici, printeri, TV i sl.) Graa CSS-a je: 1) deklaracijski blok koji dolazi iza selektora ukljuuje sve mogunosti oblikovanja koje se primjenjuju na selektor; blok poinje sa otvorenom vitiastom zagradom ({) i zavrava sa zatvorenom vitiastom zagradom (}) 2) deklaracija izmeu otvorene i zatvorene vitiaste zagrade deklaracijskog bloka dolazi jedna ili vie deklaracija ili instrukcija za oblikovanje. Svaka deklaracija ima dva dijela: atribut i vrijednost, te zavrava znakom toka-zarez (;) 3) selektor govori web pregledniku koji element na web stranici teba oblikovati (npr, naslov, odlomak, link, slika, tablica, forma i sl...) 4) atribut CSS nudi mnogo razliitih mogunosti oblikovanja koje se zovu atributi. Atributi definiraju odreeni stilski efekt. 5) vrijednost atributa

9

definira kako e se oblikovati odreeni atribut; razliiti atributi zahtjevaju razliite tipove vrijednosti, npr.: mjerne duljine > 12px, 2em ili 1in; boja > black ili #000000; URL > slike/slika-1.jpg) ili specifina kljuna rije > top, center, left).

Anatomija CSS elemenata 0. Pravilo (Rule set, Rule) 1. Deklaracijski blok (Declaration block) 2. Deklaracija (Declaration) 3. Selektor (Selector) 4. Atribut (Property) 5. Vrijednost atributa (Value) 0 1 2

p 3

{

fontweight: bold; 4 5

}

Slika 2.6. Graa CSS elementa

PHP PHP je open-source server-side skriptni jezik za dinamiko generiranje HTML koda, zapravo to je skraenica od Hypertext Preprocesor. Drugim rijeima, PHP je skriptni jezik pomou kojeg moete kreirati HTML stranicu na serveru prije nego to se ona, popunjena dinamikim sadrajem, poalje klijentu. Ovim nainom generiranja sadraja klijent ne moe vidjeti kod (skriptu) koji je generirao sadraj koji gleda, veima pristup istom HTML kodu. Ono to PHP stavlja jo vie ispred ostalih web skriptnih tehnologija je njegova podrka za koritenjem irokom paletom baza podataka. Podrava sve popularnije baze podataka kao to su MySQL, PostgreSQL, dBase, Oracle, ODBC 10

Varijable Varijable prije svog imena obavezno moraju sadravati znak $. Tako PHP govori prevoditelju da se radi o varijabli, a ne o tekstu. Jo jedna vrlo bitna stvar kod varijabli u PHPu je da su imena varijabli casesensitive, to znai da program razlikuje velika i mala slova. Mogue konverzije su: (int), (integer) - prebaci u integer (real), (double), (float) - prebaci u double (realni broj) (string) - prebaci u string (array) - prebaci u niz (object) - prebaci u objekt Tipovi podataka U PHP-u ne postoje fiksni tipovi podataka varijabli. Naime, ne morate definirati tip varijable prije njenog koritenja - varijablu moete deklarirati bilo kada unutar skripte i pridruivati joj razliite tipove podataka tokom izvoenja skripte. Isto tako moete mijenjati tip podataka neke varijable jednog te istog sadraja, ali o tome par redaka kasnije. Tipovi podataka koje podrava PHP su: Operatori U svakom programskom jeziku postoje razni operatori kojima se vri manipulacija, matematike operacije ili usporedba vrijednosti. Operatori koje PHP koristi su: Cijeli brojevi (integer) Realni brojevi (floating-point numbers) Tekstualni podaci (String) Nizovi Objekti

11

Aritmetiki operatori Operatori pridruivanja Logiki operatori Operatori usporeivanja Operatori uveavanja i smanjivanja

Kontrolne strukture Pomou kontrolnih struktura odreujemo tok skripti, odluujemo i raunamo. One su zaduene za logiku aplikacija.

Naredba If.. else

Opis Najee koritena kontrolna struktura. Njoj dajemo logiki izraz koji se provjerava i ovisno o njegovom ishodu koji moe biti true ili false izvrava se blok naredbi. Umjesto else kljune rijei moe se koristiti i elseif kljuna rije. Ona se izvrava ako je uvjet u if-u rezultirao false. Ona takoer ispituje logiki izraz.

Elseif

Switch

uzima za argument nekakav izraz i onda gleda da li je on jednak jednom od zadanih sluaja. Ukoliko nije jednak niti jednom od njih, izvrava default akciju ili ne izvrava nita. Switch je idealan alat za izradu vienamjenskih stranica.

While petlja

izvrava svoj blok naredbi dokle god je izraz u uvjetu istinit (true). Uvjet se ispituje prije izvoenja bloka naredbi. Zbog toga je mogue da se blok ne izvri niti jednom ukoliko je uvjet na poetku false.

Do while

Za razliku od normalne while petlje, kod Do 12

while petlje uvjet se ispituje tek nakon izvravanja bloka naredbi. Tako je uvijek zagarantirano barem jedno izvravanje bloka naredbi iako je uvjet odmah na poetku false. For petlja For petlja koristi broja petlje koji se prije svakog izvravanja bloka naredbi petlje uvea ili smanji. For petlju koristite kada znate toan broj potrebnog ponavljanja bloka petlje. Broja petlje moe biti bilo koja ve postojea varijabla ili momo stvoriti novu varijablu za potrebe petlje. Ukoliko rabite drugi tip, uobiajena imena takvih varijabli su $i, $j, $k i njih ete sresti u gotovim svim aplikacijama diljem svijeta.

MySQL

Jedan od programa za upravljanje bazom podataka je MySQL. On je server, koji je cijelo vrijeme aktivan i eka na portu 3306 da doe upit za nekim podacima. Unutar MySQL servera moe biti puno razliitih baza podatka, npr. baza podataka za voenje knjigovodstva tvrtke A ili baza podataka o zaposlenima tvrtke B ili baza podataka u kojoj su pohranjeni sadraji koji se prikazuju na web stranici itd. Svaka baza podataka u sebi ima jednu ili vie tablica sa podacima npr. tablica u kojoj su pohranjeni podaci o zaposlenima firme. U svaku tablicu se spremaju podaci o jedinki npr. zaposleniku i to se zove zapis ili (eng. record). Tako tablica zaposlenici ima puno redaka tj zapisa svaki zapis pohranjuje podatke jednog zaposlenika. Takoer tablica ima stupce ti stupci se nazivaju atributi. Tako se nazivaju zato jer se time misli na atribute zaposlenika ako se radi o tablici sa zaposlenima tj. svi podaci koji se o pojedinim zaposleniku trebaju pamtiti npr. ime, prezime, adresa, grad itd. Kada imamo puno tablica i spremamo u nau bazu podataka podatke o puno razliitih stvari vrlo je vjerojatno da e se pojaviti potreba da te podatke stavimo u nekakav odnos. Odnos se openito u bazi podataka naziva relacija.

13

Da bi uope mogli staviti zapise u odnos moram uvesti pojam kljua. Klju je neki podatak u zapisu koji se pojavljuje u drugom zapisu (u drugoj tablici ali nekad moe u istoj) i tako vee ta dva zapisa. Potreban nam je jo jedan termin da bi mogli iz PHP radit sa naom bazom podataka a to je primarni klju. To je atribut u tablici koji je jedinstven za svaki od zapis. Kada program za upravljanje bazom podataka (MySQL) pohranjuje bazu negdje na disk raunala on obraa posebnu pozornost na primarni klju u svakoj tablici i njega koristi kad ponovno treba pristupiti tim podacima. Znai ako nas zanima neto od podataka korisnika Ivan MySQL e koristiti korisniko ime da bi te podatke dohvatio sa diska raunala. Jedna stvar je bitna kod primarnoga kljua a to je da svaki mora biti jedinstven u svojoj tablici. Znai ne smije nam se pojaviti dva ista korisnika imena u tablici.

14

Formati sadraja web straniceJNLP i JAR

JNLP (eng. Java Network Launching Protocol) je protokol koji specificira nain na koji se pokree Java Web Start aplikacija. JNLP se sastoji od seta pravila koja definiraju kako tono implementirati mehanizam za pokretanje. Bilo koji korisnik moe koristiti JNLP jednostavno koristei JNLP klijent. Instalacija moe zapoeti automatski kada se eli koristiti Java aplikacija. JNLP radi na slian nain kao HTTP/HTML. Za prikaz HTML webstranice, nakon to korisnik klikne na link, pretraiva alje URL webserveru koji odgovara s HTML datotekom. Pretraiva zatim trai izvore koji se odnose na ovu datoteku i na kraju prikazuje sadraj kada je primio dovoljno podataka. JAR (eng. Java Archive) datoteka skuplja vie datoteka u jednu. Koristi se za distribuciju Java aplikacija u obliku Java class datoteka. Korisnici mogu kreirati ili ekstrahirati JAR datoteke koristei komandu jar. JAR datoteka omoguuje uinkovito postavljanje seta klasa i njihovih aplikacija i jednom zahtjevu. To ini primanje JAR datoteke puno brim nego pojedinano primanje vie nekomprimiranih datoteka koje ine jednu Java aplikaciju. DCR

DCR tip datoteke prvenstveno je povezan s Kodak Digital Camera. Nerafinirani format slike za neke Kodak digitalne kamere. Neobraene slike su podaci koji dolaze izravno iz CCD detektora kamere. Neobraene datoteke mogu sadravati tekstualne informacije o mslici i uvjetima u kameri kada je neto snimljeno.

15

FLV

FLV (eng. Flash Video) tip datoteke je prije svega poznat kao Shockwave Flash i popularno zvan Flash. Odnosi se na oba Adobe Flash Player i Adobe Flash Professional programe. Ako skinemo videozapis s YouTube a on e vjerojatno imati .flv ekstenziju i biti e Flash Video datoteka. Pretvara moe ove datoteke pretvoriti u druge formate

IZRADA INTERAKTIVNIH PREDAVANJA HTMLCijela interaktivna predavanja baziraju se na html kodu. Pomou njega mogue je prikazati razne interaktivne sadraje, jednadbe u obliku slika i sve opisati tekstom. Svaki dio gradiva ima svoj html dokument, a svi oni su meusobno povezani poveznicama koje su implementirane u izbornicima, kako bi u svakom trenutku bilo mogue prebaciti se sa bilo kojeg poglavlja, na bilo koje poglavlje. Izrada stranice Stranica je podijeljena u nekoliko glavnih sektora, neki od njih su statini. to znai da su isti su na svim stranicama (to su sektori oznaeni brojevima 1,2 i 5 na slici 3.2.), a u nekima se sadraj izmjenjuje (3,4). Prema slici 3.2. oznaeni su glavni sektori interaktivnih predavanja, a to su: 1. Header 2. Glavni izbornik 3. Podizbornik 4. Sadraj 5. Footer

16

Slika 3.1. Glavni sektori stranice interaktivnih predavanja U html kodu to izgleda ovako:

17

Unutar tag-a nalaze se osnovne informacije o stranici (naslov, put do css dokumenta, omoguene skripte itd.). sastoji se od slike i loga Elektrotehnikog fakulteta te izbornika koji slui za kretanja po temeljnim cjelinama (. Unitar mainMenu izbornika moramo izdvojiti i najznaajniji, TPV izbornik, koji povezuje sve html dokumente. U nalaze se interaktivni sadraji te opisi poglavlja. Unutar ovog sektora postoji i izbornik koji slui za kretanja po podpoglavljima neke cjeline. , odnosno sektor footer, je dno stranice.

Umetanje interaktivnih sadraja

Video

Dio koda kojim se prikazuje video u pretraivau. Unutar src naveden je put do video datoteke te .xml dokumenta u kojemu se nalazi kod videa. Sa width i height odreena je visina i irina video playera. AllowFullScreen je postavljen u true to znai da je omogueno gledanje videa na punom ekranu.

18

Na isti nain (pomou tagova i implementiraju se i formati .dcr i flash formati. Za razliku od njih, java formati se jednostavno pozivaju pomou linka i ti interaktivni sadraji se otvaraju u odvojenom, neovisnom prozoru: Java

CSSOblikovanje stranice Pomou CSS-a stranica je estetski ureena, glavni css dokument nalazi se u mapi css i zove se template.css. Njime je ureena veina html dokumenata.

Slika 3.2. Izgled HTML dokumenta bez CSS-a

19

Slika 3.3. Izgled HTML dokumenta sa CSS-om U sljedeem dijelu objasnit emo samo neke linije koda dokumenta template.css. #mainMenu {

height: 46px; padding: 0 25px; background: #333333 url('../images/bg_main_menu.png') repeat-x; border: 1px #8a817e solid; border-width: 1px 0 6px; float:left; width:722px; text-decoration:none; }

Ovim css svojstvima ureen je glavni izbornik. Njegova visina postavljena je na 46 piksela, a irina na 722 piksela. Kao pozadniska slika stavljena je bg_main_menu.png iz foldera images. Ta slika ima visinu 46 piksela, a irina samo 1piksel, zato smo postavili svojstvo repeat-x, to znai da se slika ponavlja po x-osi i dobivamo dojam da je ta slika iroka 722 piksela. Na taj nain smo smanjili veliinu slike i time optimizirali uitavanje stranice. Obrub je boje # 8a817e (zapis u heksadecimalnom obliku) i oblika solid. Svojstvo 20

float postavljeno je u vrijednost left to znai da e se sektor 'slagati' sa lijeva na desno. Textdecoration:none govori da tekst bude normalan, odnosno da ne bude podebljan, ukoen ili podcrtan. Izrada izbornika Svi izbornici u interaktivnim predavanjima izraeni su pomou CSS-a. U svakoj stranici postoje tri izbornika, glavni izbornik, TPV izbornik i sporedni izbornik. Kod izbornika je bitno da se on mijenja u skladu sa 'kretanjem' po stranici, tj. ako odaberemo neko poglavlje, ono se mora razlikovati od ostalih. To se dobro vidi na slici 4.1. gdje je u glavnom izborniku odabrana cjelina elektrostatika, pa je taj dio izbornika promijenio pozadinsku boju u bijelu i na taj nain se razlikuje od ostalih cjelina. Isto tako, u sporednom izborniku sa desne strane vide se koja su teme odabrane, tj. aktivne, koje se mogu odabrati i sl. TPV izbornik temelji se na hover opciji, odnosno prelaskom pokazivaa mia preko poveznice. Znai, kada pokaziva mia doe na TPV izbornik, sa donje strane se pojavi 3 dodatna linka, odlaskom na link predavanje otvara se dodatni linkovi itd. Dio koda koji to opisuje je:

#elektrostatika_menu_mp li:hover > ul{ min-height:100px; margin-left:172px; margin-top:-32px; width:100px; position:absolute; z-index:2; text-decoration:none; }

Pomou tih css svojstava odreujemo gdje e se pojaviti izbornik sa linkovima, kako e on izgledati, tj. njegovu duljinu, irinu, obrube, poziciju itd.

21

PHPPomou PHP-a je napravljena stranica za registriranje i prijavu. U ovom poglavlju ukratko e biti opisan kod kojim smo to postigli.

Korisniko ime: Lozinka

Prethodni dio koda nalazi se na stranici indeks.php, a definira tekstualna polja u koja se upisuju podaci potrebni za prijavu (korisniko ime i lozinka). Iz koda se vidi da se ti podaci alju u datoteku login-exec.php.

22

Datoteka login-exec.php: