About HTML, CSS, JS, PHP

HTML
HTML (eng. HyperText Markup Language) je jezik za označavanje kojim se određuje

struktura, sadržaj i funkcija zadanog HTML dokumenta (web stranice).
Ključna odlika HTML-a je hipertekstualnost koja se odnosi na mogućnost povezivanja web
dokumenata. Klikom na hipervezu na jednoj web stranici pristupa se sadržaju drugog
dokumenta.
Osnovu web stranice čine HTML elementi kao što su naslov, odlomak, slika, poveznica i sl.
Svaki element je omeđen oznakama (eng. tags) koje obično dolaze u paru gdje prva označava
početak elementa, a druga kraj. Oznaka se sastoji od izlomljenih zagrada i alfanumeričkih
znakova. Nadalje, element je određen imenom, uz daljnje mogućnosti dodavanja atributa koji
dodatno definiraju svojstva navedenog elementa.
Sadržaj elementa se nalazi između oznaka pri čemu je ključno spomenuti mogućnost njegovog
ugnježđivanja.
<!DOCTYPE html>
<html>
<head>
<title>This is a title</title>
</head>
<body>
<p>Hello world!</p>
</body>
</html>
Primjer. Ispis “Hello World”
Na samom početku HTML dokumenta preporučljivo je postaviti <!DOCTYPE> element,

kojim se označava DTD (eng. Document Type Declaration). Time se definira točna inačica
standarda koja se koristi za izradu HTML dokumenta. Nakon <!DOCTYPE> elementa, <html>
elementom označava se početak HTML dokumenta.
<html> element je korijenska oznaka svakog dokumenta unutar kojeg se nalaze svi ostali
elementi. Navedena oznaka se nalazi na samom početku dokumenta, a njegova je uloga davati
upute web pregledniku o tome koja je verzija HTML-a na kojoj je stranica napisana.
1
Unutar <html> elementa nalaze se i <head> element te <body> element. <head> element
predstavlja zaglavlje HTML dokumenta u kojemu se najčešće definiraju jezične značajke
dokumenta kao i sam naslov stranice. Pomoću određenih HTML elemenata unutar zaglavlja
dodaju se i stilska obilježja stranice, bila ona direktno ugrađena (eng. embedded) ili dodana kao
referenca na vanjsku CSS datoteku.
Često se unutar zaglavlja definiraju i skripte kreirane u JavaScript jeziku. U <body> elementu
kreira se sadržaj HTML dokumenta, odnosno, stranice koju on prezentira.
HTML je prošao više razvojnih etapa, obzirom na svoje dugogodišnje postojanje. Trenutna
verzija je HTML 5.2 koja je objavljena 14. prosinca 2017.
HTML 5 uključuje detaljne modele obrade zbog poticanja interoperabilnih implementacija

čime se proširuju, poboljšavaju i racionaliziraju dostupne oznake te se uvode oznake i
programska sučelja za složenije web aplikacije.
Za nativno uključivanje i obradu multimedijskih i grafičkih sadržaja, dodani su novi elementi

poput <video>, <audio> i <canvas> te podrška za sadržaj skalabilnih vektorskih grafika (SVG)
te MathML za matematičke formule. Kako bi se obogatio semantički sadržaj dokumenta,
dodani su novi elementi strukture stranice kao što su <main>, <section>, <article>, <header>,
<footer>, <aside>, <nav> i <figure>.
JavaScript
JavaScript (skraćeno JS) je interpretirani skriptni programski jezik visoke razine koji se
izvršava u web pregledniku na strani korisnika. Izvorno se JavaScript trebao zvati LiveScript,
no kako bi se time potaklo korištenje novog jezika, nazvan je slično popularnom programskom
jeziku Javi.
Jezgra JavaScripta uključena je u većinu današnjih preglednika (Internet Explorer, Google

Chrome, Mozilla Firefox, Opera, Safari i drugi). Uz HTML i CSS, jedna je od tri temeljne
tehnologije World Wide Weba koja omogućuje izradu interaktivne, dinamičke stranice, lakše
za korištenje. Osim u internet domeni JavaScript se koristi i u produkciji PDF dokumenata te
izradi programskih dodataka (eng. desktop widgeta).
U okviru JavaScript-a imamo 7 tipova podataka. Podaci se mogu podijeliti u dvije grupe:
1) Podaci koji čuvaju primitivni tip vrijednosti:

● string,
2
● number,
● boolean,
● undefined,
● null,
● symbol.
2) Podaci koji čuvaju referentni tip vrijednosti:

● object.
Multiproceduralnost JavaScripta omogućuje programeru korištenje različitih programskih

paradigmi čime se objedinjuju ključna svojstva koja web stranica treba sadržavati. Paradigme
JavaScripta su objektno orijentirano programiranje i proceduralno programiranje. Osim što
nudi podršku za objektno orjentirano programiranje, uz korištenje varijabli, nizova, datuma,
regularnih izraza, matematičkih funkcija, JavaScript nudi i mogućnosti osnovnih manipulacija
DOM-a.
Document Object Model (DOM) je model za prikaz i interakciju s objektima u HTML-

dokumentu. Omogućava jednoznačan i jednostavan pristup dijelovima dokumenta te rukovanje
njegovim dijelovima. JavaScript definira svoj DOM u obliku ovakve hijerarhijske strukture:
Slika. Hijerarhijska struktura JS
Svakom objektu ili svojstvu pristupa se kroz ovakav model, tj. document je osnovni objekt
preko kojeg se pristupa svim drugim objektima dokumenta.
Na primjer, u dokumentu koji sadrži ovaj programski kôd:
<form action="">
Unesite ime: <input type="text" value="" />
<input type="submit" value="Pošalji" onclick="return provjeri();" />
</form>
Primjer. Forma
vrijednosti polja u koje se upisuje ime pristupa se ovako:
3
document.forms[0].elements[0].value
Primjer. Dohvaćanje vrijednosti elementa forme
Vidljivo je da je tekstni objekt prvi u polju elemenata koji se nalaze u prvom obrascu. Da bi se
programiranje pojednostavilo, omogućeno je imenovanje pojedinih objekata. Na primjer,
dodavanjem naziva obrascu (name="formaProvjera") i dodavanjem naziva tekstnom polju za
unos imena (name="ime") dobije se:
<form name="formaProvjera">
Unesite ime: <input type="text" value="" name="ime"/>
</form>
Primjer. Forma
Vrijednosti polja u tom slučaju pristupamo jednostavnije:
document.formaProvjera.ime.value
Primjer. Dohvaćanje vrijednosti unutar forme pomoću imena
Najjednostavniji način dohvata vrijednosti polja je pomoću jedinstvenog identifikatora (ID).

Preporuka je da vrijednost atributa ID mora biti jedinstvena na razini dokumenta. Prvobitni se
dokument može dodatno urediti dodavanjem atributa ID (id=“ime“) za polje za unos imena:
<form name="formaProvjera">
Unesite ime: <input type="text" value="" name="ime" id="ime"/>
</form>
Primjer. Forma
Vrijednosti polja u tom slučaju pristupamo još jednostavnije:
document.getElementById(‘ime’).value
Primjer. Dohvaćanje vrijednosti unutar forme pomoću ID-a
Atribut name i dalje treba biti naveden zbog načina na koji se obrađuju obrasci.
Objekt window također je važan objekt pomoću kojeg se upravlja prozorom preglednika. Dvije
često korištene funkcije vezane uz objekte su document i window:
4
● document.write – funkcija koja upisuje niz znakova koji se proslijedi kao prvi argument
u HTML-dokument na mjestu gdje se funkcija poziva,
● window.alert – funkcija ispisuje niz znakova koji se proslijedi kao prvi argument u
zasebnom prozoru i ne dopušta nastavak izvršavanja programa dok se ne zatvori.
Console objekt omogućuje pristup debugging konzoli unutar preglednika. Specifičnost

funkcioniranja varira od preglednika do preglednika.
Objektu se može pristupati iz bilo kojeg globalnog objekta. Najčešće korištena metoda je
console.log() koja ispisuje poruku unutar konzole.
<script>
console.log(“Hello world!”);
</script>
Primjer. Primjer korištenja console.log() metode
Jedan od načina korištenja JavaScript-a je direktno, unutar HTML dokumenta, pomoću

<script> oznake. Proizvoljan broj JavaScript-naredbi obrađuje se prilikom učitavanja HTML-
dokumenata i to redom kojim su napisane. Element <script> može se pojaviti u <head> ili
<body> elementu. Redoslijed izvršavanja različitih skripti sadržanih unutar <script> može se
manipulirati korištenjem async ili defer atributa.
<script>
document.getElementById("p1").innerHTML = "Hello world!";
</script>
Primjer. Javascript kôd
Drugi način je referenciranje na pojedinu datoteku koja sadrži JavaScript kôd, odnosno u
HTML dokumentu se navodi samo lokacija JavaScript datoteke. Datoteka obično ima
ekstenziju .js i sadrži čisti JavaScript kôd bez <script> elementa. Navedeni način se preferira
jer pojednostavljuje HTML datoteku te smanjuje njenu veličinu što uvelike povećava brzinu
preuzimanja s poslužitelja. Također, ukoliko se neka JS funkcija koristi u više HTML
dokumenata, poziva se jedna datoteka što pojednostavljuje održavanje. Kada se više puta
upotrebljava datoteka JavaScripta, ona se učitava u preglednik samo prilikom prve uporabe.
Nakon toga se datoteka lokalno sprema na disk i svakog sljedećeg puta interpretira iz lokalne
datoteke.
<script type="text/javascript" src="myscripts.js"></script>
Primjer. Referenciranje na Javascript kôd u HTML dokumentu
Aritmetički operatori
5
x+y zbrajanje
x-y oduzimanje
x*y množenje
x/y dijeljenje
x%y ostatak dijeljenja
eval(izraz) aritmetička operacija
Relacijski operatori
x > y, x < y veće od, manje od
x >= y, x <= y veće ili jednako, manje ili jednako
x == y jednako
x != y različito
x === y, x !=== y “strict” usporedba, uspoređiva tip podataka i

vrijednost
Javascript HTML DOM events

onBlur kada se ulazni fokus prebaci sa elementa forme
koristi se u slučaju kada korisnik promjeni sadržaj u

onChange
text, textarea ili select elementima forme
koristi se u slučaju kad input polje forme dobije

onFocus
ulazni fokus.
koristi se kada korisnik klikne na neki element

onClick
stranice
koristi se kada korisnik pritisne i pusti određenu

onKeyPress
tipku na tipkovnici
koristi se kada korisnik promjeni veličinu prozora

onResize
web preglednika
onSelect koristi se kada korisnik izabere ulazno polje forme.
6
koristi se kada korisnik pošalje formu, odnosno
onSubmit
pritisne dugme submit
onLoad koristi kada se učitava web stranica u preglednik
onMouseDown koristi se kada korisnik klikne na sadržaj stranice
koristi se kada korisnik pomakne kursor miša preko

onMouseMove
određenog elementa stranice
koristi se kada korisnik prijeđe kursorom miša preko

onMouseOut
određenog elementa
Današnje web aplikacije su većinom interaktivne pa programiranje njihovih korisničkih sučelja

postaje sve teže. U svrhu izvršavanja korisničkih zahtjeva, koriste se kombinacije svojstava i
funkcija čistog JavaScript jezika, JavaScript radnih okvira (eng. framework) i biblioteka. Često
korištene biblioteke u te svrhe su: jQuery, D3.js, AngularJS, Bootstrap, React.js, Node.js…
Node.js je specifičan jer je to radno okruženje JavaScript programskog jezika koje se koristi na
strani web servera. JavaScript se tradicionalno koristi na strani klijenta - tzv. front-end razvoj,
a Node je omogućio da se JS koristi i za back-end razvoj odnosno serversko izvršavanje koda.
7
jQuery
jQuery je višeplatformska JavaScript biblioteka dizajnirana u svrhu pojednostavljenja
korištenja JavaScript-a. Radi se o besplatnoj biblioteci otvorenog koda licenciranoj MIT
licencom. Prva verzija jQuery-a izašla je 2006. godine i od tad je jedna od najzastupljenijih i
najkorištenijih biblioteka JavaScripta.
Sintaksa jQuery-a pojednostavljuje kretanje unutar dokumenta te lakše dohvaća i upravlja

DOM elementima, a svoje mjesto našao je i u izradi vizualno impresivnih te funkcionalnih
mogućnosti u oblikovanju korisničkih sučelja.
Osnovna distribucija može se koristiti na dva načina:

● Klasično snimanje na lokalni disk web-sjedišta,
● CDN (Content Delivery Network).
Uporaba preko CDN-a ima dvije prednosti:

● Za smanjenje količine podataka koja putuje od poslužitelja do preglednika koristi se
tzv. minimizirana inačica datoteke JavaScript. To znači da su iz datoteke (programa)
uklonjene sve nevažne praznine, a ponekad se još obavi i skraćivanje naziva varijabli
tako da se redom dodjeljuju nazivi oblika a, b, c, …, z.
● Uporabom CDN-a postoji velika vjerojatnost da je korisnik posjetio web-sjedište koje
se koristi istom CDN-datotekom pa korisnikov preglednik ne dohvaća ponovo istu
datoteku, nego se koristi postojećom u lokalnoj predmemoriji (cache) te se tako dodatno
smanjuje količina podataka koja putuje od poslužitelja do preglednika.
Međutim, postoji i jedan nedostatak – minimizirani kôd teško je čitati pa ako postoji potreba
za upoznavanjem s bibliotekom jQuery, preporučava se korištenje neminimizirane inačice.
jQuery se najčešće koristi tako da se za određene elemente dokumenta definiraju određene
akcije.
8
U jQueryju se elementi određuju CSS-selektorima, odnosno na isti način kao i u CSS-u. U
sljedećem primjeru se može vidjeti kako koristiti jQuery pomoću funkcije jQuery:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery primjer 1</title>
</head>
<body>
<h3 id=”prviNaslov”>Naslov</h3>
<ul>
<li>stavka 1</li>
<li>stavka 2</li>
<li>stavka 3</li>
<li>stavka 4</li>
<li>stavka 5</li>
</ul>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script>
jQuery('li').on('click', function(){
jQuery('li').css('color', 'green');
});
</script>
</body>
</html>
Ovakva sintaksa jQuery-a se koristi primjerice u Wordpressu zbog izbjegavanja konflikata

između različitih JS biblioteka koje eventualno koriste znak “$”, poput MooTools-a ili
Prototype-a.
Kraći način uporabe je već spomenuti znak $ koji je alias za funkciju jQuery:
$('li').on('click', function(){
$('#prviNaslov').css('color', 'green');
});
U prepravljenom primjeru pokazano je kako se identificiraju elementi pomoću atributa id. Ako
je potrebno identificirati elemente kojima je atribut class postavljen na određenu vrijednost, to
se postiže ovako:
9
$('li').on('click', function(){
$('.naslov').css('color', 'green');
});
Metoda $(document).ready() ili skraćeno $(function()) omogućava nam
izvršavanje funkcija tek kada se stranica u potpunosti učita.
jQuery event metode
Metode Metode koje se više ne koriste
.blur() .bind()
.change() .delegate()
.click() .die()
.contextmenu() .error()
event.currentTarget .live()
event.data .die()
event.isDefaultPrevented() .toggle()
event.isPropagationStopped() .unbind()
event.preventDefault() .undelegate()
.focus() .unload()
.hover()
.off()
.on()
.ready()
.resize()
.scroll()
.select()
.submit()
.trigger()
10
Ajax i JSON
Ajax (eng. asynchronous JavaScript and XML) je skup tehnologija koje zajedno funkcioniraju
u svrhu stvaranja brže web aplikacije uz pomoć XML-a, HTML-a, CSS-a i JavaScript-a.
Omogućuje asinkronu razmjenu podataka s poslužiteljem preko XMLHttpsRequest objekta bez
ponovnog učitavanja stranice. Ajax nudi veću interaktivnost, bolje performanse i manju
potrošnju resursa jer se razmjenjuju potrebne informacije, a ne kompletna web stranica. Iako
sadrži XML u svom imenu, sam XML nije neophodan za korištenje Ajax-a, čak se u najvećem
broju slučajeva koristi JSON format.
JSON (eng. JavaScript Object Notation) je format datoteka otvorenog standarda za razmjenu
podatkovnih objekata koji se sastoji od parova atribut-vrijednost ili nizova.
Primjer Ajax poziva
data: Podaci za slanje na poslužitelj. Tip podataka je array objekt ili string. Ako se već ne radi
o stringu, jQuery vrši u konverziju podataka u query string format (primjer.
param=value&param1=value1).
dataType: Tip podataka koji se očekiva kao rezultat. Ukoliko se ne navede, jQuery će pokušati
zaključiti na temelju MIME tipu odgovora. (XML će dat XML, JSON će vratit JS objekt,
HTML vraća HTML...).
method: HTTP metoda koja će se koristit za upit (default metoda je GET metoda, POST
metodu potrebno posebno naglasiti)
url: String koji sadrži URL skripte gdje se šalje upit.
.done: povratni poziv koji se aktivira nakon uspješnog izvršavanja Ajax-a.
.fail: povratni poziv koji se aktivira nakon neuspješnog izvršavanja Ajax-a.
$.ajax({
url: "ajax.php",
data: { name: name, userid: userid },
method: "GET",
dataType: 'json',
contentType: 'application/json'
})
.done(successCallback)
.fail(errorCallback)
Primjer. Ajax poziv
11
Literatura
[1.] Chapman, S. What is JavaScript, About Tech, July 2016. Dostupno na:
http://javascript.about.com/od/reference/p/javascript.htm
[2.] w3schools. Dostupno na: https://www.w3schools.com/
[3.] Stančer, D. Osnove JavaScripta Dostupno na:
https://www.srce.unizg.hr/files/srce/docs/edu/osnovni-tecajevi/c501_polaznik.pdf
[4.] Javascript, Dostupno na: https://www.javascript.com/
12

About HTML, CSS, JS, PHP

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

About HTML, CSS, JS, PHP

Uploaded by

Copyright:

Available Formats

HTML

HTML (eng. HyperText Markup Language) je jezik za označavanje kojim se određuje

Primjer. Ispis “Hello World”

Na samom početku HTML dokumenta preporučljivo je postaviti <!DOCTYPE> element,

HTML 5 uključuje detaljne modele obrade zbog poticanja interoperabilnih implementacija

Za nativno uključivanje i obradu multimedijskih i grafičkih sadržaja, dodani su novi elementi

Jezgra JavaScripta uključena je u većinu današnjih preglednika (Internet Explorer, Google

1) Podaci koji čuvaju primitivni tip vrijednosti:

2) Podaci koji čuvaju referentni tip vrijednosti:

Multiproceduralnost JavaScripta omogućuje programeru korištenje različitih programskih

Document Object Model (DOM) je model za prikaz i interakciju s objektima u HTML-

Slika. Hijerarhijska struktura JS

vrijednosti polja u koje se upisuje ime pristupa se ovako:

Primjer. Dohvaćanje vrijednosti elementa forme

Vrijednosti polja u tom slučaju pristupamo jednostavnije:

Primjer. Dohvaćanje vrijednosti unutar forme pomoću imena

Najjednostavniji način dohvata vrijednosti polja je pomoću jedinstvenog identifikatora (ID).

Vrijednosti polja u tom slučaju pristupamo još jednostavnije:

Primjer. Dohvaćanje vrijednosti unutar forme pomoću ID-a

Console objekt omogućuje pristup debugging konzoli unutar preglednika. Specifičnost

Primjer. Primjer korištenja console.log() metode

Jedan od načina korištenja JavaScript-a je direktno, unutar HTML dokumenta, pomoću

Primjer. Javascript kôd

<script type="text/javascript" src="myscripts.js"></script>

Primjer. Referenciranje na Javascript kôd u HTML dokumentu

x%y ostatak dijeljenja

eval(izraz) aritmetička operacija

x > y, x < y veće od, manje od

x >= y, x <= y veće ili jednako, manje ili jednako

x === y, x !=== y “strict” usporedba, uspoređiva tip podataka i

Javascript HTML DOM events

koristi se u slučaju kada korisnik promjeni sadržaj u

koristi se u slučaju kad input polje forme dobije

koristi se kada korisnik klikne na neki element

koristi se kada korisnik pritisne i pusti određenu

koristi se kada korisnik promjeni veličinu prozora

onSelect koristi se kada korisnik izabere ulazno polje forme.

onLoad koristi kada se učitava web stranica u preglednik

onMouseDown koristi se kada korisnik klikne na sadržaj stranice

koristi se kada korisnik pomakne kursor miša preko

koristi se kada korisnik prijeđe kursorom miša preko

Današnje web aplikacije su većinom interaktivne pa programiranje njihovih korisničkih sučelja

Sintaksa jQuery-a pojednostavljuje kretanje unutar dokumenta te lakše dohvaća i upravlja

Osnovna distribucija može se koristiti na dva načina:

Uporaba preko CDN-a ima dvije prednosti:

Ovakva sintaksa jQuery-a se koristi primjerice u Wordpressu zbog izbjegavanja konflikata

jQuery event metode

Metode Metode koje se više ne koriste

Primjer Ajax poziva

Primjer. Ajax poziv

You might also like