Primijenjena informatika

Autori

Karlo Vizec
dr. sc. Predrag Brođanac

Lektura

Smiljana Karlušić Kožar, prof.
Iva-Marija Pitlović, prof.

Uvod

Dobrodošli u Primijenjenu informatiku, udžbenik za sve koji žele detaljnije naučiti o programiranju i izradi aplikacija. Ovdje ćete naučiti kako napraviti web i mobilne aplikacije pomoću web programiranja. Jedna od čari web programiranja jest ta što omogućuje izradu aplikacija za sve tri glavne platforme – web, mobilne uređaje i stolna računala – uz minimalne promjene u istim programskim jezicima i tehnologijama. Usto je i najpopularnije područje programiranja (JavaScript, glavni jezik za web programiranje, bio je najpopularniji programski jezik 2024. godine), što donosi veliki broj materijala za učenje i raznovrsne mogućnosti zapošljavanja.

Za koga je ova knjiga?

Ovaj udžbenik je napravljen kao glavni materijal za učenje za pohađatelje istoimene fakultativne nastave u srednjim školama. Gradivo je stoga prilagođeno srednjoškolcima. Udžbenik je detaljniji nego što je zamišljeno da će biti pokriveno tijekom nastave Primijenjene informatike. Određene teme i detalji su izostavljeni iz kurikuluma zbog nedostatka vremena.

Udžbenik pretpostavlja vrlo malo predznanja o programiranju. Svakako, ako već imate iskustva s programiranjem, to vam samo može pomoći. Očekuje se osnovno znanje programiranja; nije važno koji ste programski jezik koristili, bitno je da razumijete što su varijable, petlje, kako napisati jednostavan program itd. Ako nikada prije niste koristili nijedan programski jezik, preporučujem vam da prvo naučite osnove programiranja, a zatim prijeđete na ovu knjigu.

Uz učenike srednjih i osnovnih škola, ovaj udžbenik je dovoljno detaljan da ga bilo koja osoba koju zanima (web) programiranje može koristiti i (nadam se) naučiti podosta iz njega. Znanje predstavljeno u njemu dovoljno je detaljno da vas stavi na put do zapošljavanja kao (junior) web programer.

Zašto Primijenjena?

Odlučio sam se za naziv Primijenjena informatika jer mi je cilj s ovim kurikulumom i udžbenikom učenicima pobliže prikazati što i kako profesionalni programeri rade. Fokus tijekom cijelog udžbenika i kurikuluma bit će na praktičnoj primjeni znanja. Učit ćete kroz projektno učenje, radit ćete vlastite aplikacije. U početku će one biti jednostavne, ali će postajati sve složenije. Naravno, teorije će uvijek biti, ona je neophodna, ali u određene teme neću ulaziti toliko duboko.

U osnovnoškolskom i srednjoškolskom informatičkom kurikulumu (barem izvan strukovnih škola), nema fokusa na izradu softvera kakav se u suvremenom dobu u praksi proizvodi i koristi. Naravno, veći je fokus na teoriji, koja prije ili kasnije postane nužna. Ideja Primijenjene informatike jest potkrijepiti standardni informatički kurikulum i omogućiti učenicima da iskoriste to znanje za izradu vlastitih aplikacija koje bi zaista imale šansu za uspjeh.

Kako koristiti ovu knjigu?

Projektno učenje

Programiranje, kao i većina vještina, ne može se naučiti pasivnim čitanjem. Kao i u matematici, vježba čini majstora: matematika se ne može naučiti samo čitanjem udžbenika, već zahtjeva rješavanje zadataka. Isto vrijedi i za programiranje, samo što su u ovom slučaju zadaci uglavnom projekti, odnosno cjelovite web-stranice ili aplikacije.

Ovaj udžbenik koristi projektno učenje: tijekom rada s udžbenikom ćemo zajedno (ali i vi samostalno!) razviti nekoliko aplikacija. Stoga su poglavlja u ovom udžbeniku podijeljena u dvije kategorije: konceptualna i projektna. U konceptualnim poglavljima naučit ćete nešto novo, a u projektnim ćete primijeniti stečeno znanje razvijajući zajedno nekoliko manjih web-stranica i aplikacija.

Nakon nekoliko poglavlja bit će naputak da je vrijeme za samostalan razvoj web-stranice ili aplikacije, uz prijedloge tema i upute za uspješnu realizaciju projekta. Ne preskačite projektna poglavlja, a pogotovo ne samostalan rad. Bez samostalnog rada nećete naučiti programirati, a znanje stečeno u konceptualnim poglavljima brzo će izblijedjeti. Cilj ove knjige i kurikuluma je da naučite razvijati projekte i sofisticirane aplikacije. Da biste to postigli na visokoj razini, morate se aktivno usavršavati.

Kvizovi

Uz projektna poglavlja i samostalan rad, na kraju svakog poglavlja nalazi se kviz za utvrđivanje gradiva. Kvizovi sadrže nekoliko vrsta pitanja, od najjednostavnijih pitanja višestrukog izbora i kratkih odgovora (najviše nekoliko riječi)... do pitanja u kojima ćete trebati odrediti hoće li se prikazani kôd pokrenuti bez greške i, ako hoće, što će ispisati.

Rezultati kvizova spremaju se isključivo lokalno i nitko ih osim vas ne vidi. Nemojte preskakati ni kvizove jer vam pomažu da odmah primijenite naučeno.

Interaktivni primjeri koda

Neki primjeri koda, poput ovog ovdje, su statični: ne možete ih pokrenuti niti išta s njima raditi. U ovakvom će se obliku nalaziti isječci koda koji se ne mogu sami po sebi izvršiti ili su manji dijelovi većeg programa.

let poruka = "Hello, world!"

Ovaj je isječak koda napisan u programskom jeziku JavaScript, koji ćete uskoro upoznati, i jednostavno postavlja novu varijablu poruka. Uz svaki takav primjer možete vidjeti naziv datoteke u kojoj se (može) nalaziti i programski jezik u kojem je napisan.

S druge strane, uz takve statične primjere koda, u ovoj knjizi postoje i tri vrste interaktivnih primjera. Drugim riječima, taj kod možete odmah mijenjati i izvršavati unutar udžbenika.

console.log(poruka)

Primijetite da u gornjem desnom kutu primjera piše naziv datoteke: script.js. Taj će se naziv nalaziti uz gotovo svaki primjer kako bismo riješili dobro poznato pitanje u programiranju: gdje smjestiti taj kod? Uz to, svaki sljedeći primjer koda u istoj datoteci (s istim nazivom) ima pristup kodu iz prethodnih primjera u toj datoteci (u istom poglavlju). Zbog toga se, kada izvršite posljednji primjer, ispiše poruka iz prethodnog primjera: u istoj su datoteci!

Pokušajte promijeniti poruku i pokrenuti kod!

Iako je jedna mala kutija s kodom dovoljna za primjere samo s JavaScriptom, web-stranice se sastoje od nekoliko programskih jezika. Također bi bilo lijepo da zapravo vidimo što se događa na toj stranici! Zbog toga su primjeri s HTML-om, CSS-om i/ili JavaScriptom prikazani u sljedećem obliku pomoću platforme Codepen. I njih možete mijenjati i vidjeti što su vaše promjene napravile.

Primijetite HTML tipku u gornjem lijevom kutu Codepena. Ako je pritisnete, otvorit će se prozor za uređivanje HTML-a te web-stranice. Promijenite naslov ispisan na stranici i pogledajte što će se dogoditi!

Konačno, za najsloženije tehnologije i primjere koda do kojih ćemo doći tek za nekoliko mjeseci, u knjizi ćemo koristiti potpuni Visual Studio Code uređivač koda (nastavite čitati da biste saznali što je to!) preko StackBlitza. Sve to u knjizi! To je program koji profesionalni programeri koriste kada pišu kod, a podržava sve značajke koje programeri trebaju. To je uređivač koda koji ćete i vi koristiti tijekom ove knjige. Ne brinite, nećete morati ništa instalirati na svoje računalo; ako čitate ovu knjigu, već imate na računalu sve što vam je potrebno!

Važno je napomenuti da se, za razliku od rezultata kvizova koji se spremaju unutar vašeg preglednika, promjene koje napravite na primjerima koda ne spremaju i resetirat će se kada osvježite stranicu knjige te da StackBlitz primjeri ne rade u Firefoxu.

Uskoro ćete se upoznati s gotovo istom verzijom Visual Studio Codea kao što je ova ovdje, i nju ćete koristiti za programiranje, vježbanje i izradu projekata tijekom ove knjige. Naravno, možete, i toplo vam preporučujem, da ga nastavite koristiti i nakon što završite s ovom knjigom. Međutim, ako želite izabrati neki drugi uređivač koda, to je sasvim u redu.

Poigrajte se s kodom i tekstom koji vidite u primjeru da vidite kakav će utjecaj imati na stranicu. Slobodno istražite koje sve trikove Visual Studio Code krije! U ovoj ćete knjizi upoznati neke od njih.

Vaše programsko okruženje

Visual Studio Code

Već sam spomenuo da ćete koristiti Visual Studio Code kao uređivač koda za programiranje, koji ću nadalje zvati VSCode. Možda ste, ako ste prije programirali u Pythonu, koristili IDLE ili nešto slično. VSCode je integrirano razvojno okruženje (IDE) i sadrži sve potrebne alate za programiranje.

To svakako uključuje i uređivač teksta kao i IDLE, ali u VSCode-u je on i inteligentan. VSCode ima IntelliSense, tehnologiju koja pruža sugestije koda dok programirate. Primjerice, ako ste negdje prije u kodu deklarirali varijablu let brzina = 170 i kasnije u kodu počnete pisati brzina, VSCode će vam predložiti dovršetak s njezinim imenom. Naravno, ovo je najosnovniji primjer. VSCode ima puno drugih značajki koje ćete otkriti, a jedna od najjednostavnijih je isticanje ključnih dijelova koda bojom, kao što ste vidjeli u primjeru gore.

Uz IntelliSense, VSCode ima ugrađeni terminal, preglednik datoteka unutar projekta, podršku za gotovo sve programske jezike putem ekstenzija te razne teme i izglede. VSCode je također IDE koji koristi većina web-programera u profesionalnom okruženju i, po mom mišljenju, izgleda puno ljepše od IDLE-a.

Računalo u oblacima

VSCode nećete instalirati na vaše računalo (iako možete, upute se nalaze na kraju knjige) nego ćete koristiti računalo u oblaku preko platforme GitHub Codespaces. GitHub je platforma za programere na kojoj pohranjujemo i dijelimo kod, međusobno komuniciramo i promoviramo softver. Praktički društvena mreža za programere koju ćete i vi koristiti.

GitHub Codespaces je GitHubova platforma koja omogućuje svima s GitHub računom (besplatan je!) da dobiju virtualno računalo smješteno na GitHubovim serverima i pristupe mu putem VSCode-a u pregledniku. Tako je, sve što vam je potrebno za potpuno korištenje ove knjige je web-preglednik, po mogućnosti Chrome. Specifikacije vašeg računala nisu važne. To virtualno računalo (Codespace) ima dvije procesorske jezgre, 8 GB RAM-a i oko 60 GB prostora na disku. Te specifikacije su više nego dovoljne za sve što ćemo raditi dok koristimo ovu knjigu. Promjene koje napravite u Codespaceu trajno se spremaju u oblak i možete se prijaviti bilo gdje i nastaviti s programiranjem.

Korištenje Codespacea je poželjno jer nam omogućuje standardizaciju razvojnog okruženja svih učenika i time osigurava da svi mogu isprobati i pokrenuti sve što smo zamislili, neovisno o specifikacijama računala u školi ili kod kuće. Zajamčeno je da svaka škola i svaki učenik imaju računalo dovoljno snažno za pokretanje Chromea. Ostalo nije važno. Drugi razlog je što ne zahtjeva nikakvu lokalnu instalaciju programa niti postavljanje radnog okruženja, što otklanja niz problema koji dolaze s instalacijom softvera (nažalost, taj problem nikad ne nestaje).

OK, kako da ja dobijem Codespace?

Prvi korak je registracija GitHub računa. Za to vam je potrebna e-adresa i lozinka (izaberite snažnu lozinku!). Često ćete koristiti GitHub tijekom učenja, pa će se ovo vrijeme isplatiti!

Otvorite GitHubovu stranicu za registraciju i unesite svoju e-adresu, lozinku i korisničko ime. Preporučujem vam da ne uključite slanje promotivnih e-poruka od GitHuba. Zatim će vas GitHub zamoliti da riješite jednostavan zadatak kako bi potvrdio da niste robot. Ako želite, možete odabrati glasovni umjesto vizualnog zadatka. Slijedite upute i kad završite, nastavite. GitHub će vam poslati kod na unesenu e-adresu za verifikaciju računa. Otvorite svoj e-mail račun i unesite taj kod.

Nakon toga je registracija dovršena i GitHub će vas preusmjeriti na vaš profil. Drugi korak je otvaranje naše stranice, klik na gumb Codespaces u gornjem desnom kutu i odobravanje pristupa našem serveru. Nakon toga ćemo za vas napraviti Codespace i preusmjeriti vas na njega. To je to! Sljedeći put kad budete htjeli otvoriti svoj Codespace, otvorite tu stranicu i ponovno se prijavite s GitHubom. Dočekat će vas tamo gdje ste stali.

Za nekoliko sekundi bi vas trebao dočekati ovakav ekran:

Prvo postavljanje Codespacea može potrajati nekoliko minuta, stoga budite strpljivi, isplatit će se. Kada se postavljanje završi, dočekat će vas potpuni VSCode u pregledniku u kojem možete odmah početi programirati. Automatski podržava mnoge jezike (uključujući Python, JavaScript, HTML, CSS, C/C++, SQL itd.), a možete instalirati ekstenzije za dodavanje podrške za još njih.

Popis predinstaliranog softvera nalazi se na gore navedenoj stranici. Korištenje vašeg Codespacea je za sada neograničeno i naravno smijete ga koristiti za bilo što vezano uz informatiku, ne samo za ovaj predmet i knjigu.

Zaključak

Sada ste spremni u potpunosti iskoristiti sve što ova knjiga i kurikulum nude. Tijekom sljedećih nekoliko poglavlja naučit ćete kako raditi sofisticirane web-aplikacije. To znanje ćete moći iskoristiti za izradu mobilnih i desktop aplikacija! U sljedećem poglavlju (prvom projektnom poglavlju!) prvo ćemo zajedno napraviti jednostavnu web-stranicu kako biste vidjeli praktičnu primjenu tog znanja. Nemojte preskakati ovo poglavlje, čak i ako preferirate učiti korak po korak, jer ćete u njemu naučiti kako koristiti Visual Studio Code!

Nadam se da ćete uživati u ovom procesu učenja. Ako imate prijedloge za poboljšanje knjige ili kurikuluma, neovisno o tome koliko su veliki ili mali (čak i ako je samo tipfeler!), slobodno nam javite! Sretno programiranje!

Vaš osobni portfelj

Započet ćemo učenje web programiranja na praktičan način: u ovom ćete poglavlju izraditi osobnu web stranicu, vaš portfelj, na kojoj ćete navesti tko ste, što volite raditi i slično. Web programeri, vjerovali ili ne, programiraju web stranice. Nema boljeg načina da osjetite što znači biti web programer nego da izradite vlastitu web stranicu!

Nećemo raditi ništa pretjerano komplicirano, ali bit će dovoljno da se upoznate s osnovnim konceptima HTML-a i CSS-a, HTML oznakama, strukturom web stranice, uljepšavanjem stranice i mnogim drugim što ćemo detaljno obraditi u sljedećim poglavljima. Usput ćete naučiti koristiti Visual Studio Code i povezane alate koji će vam olakšati programiranje!

Što je što u Visual Studio Codeu?

Prije nego što se bacimo na kod, upoznat ćete se s vašim programskim okruženjem, VSCodeom. Kada ste prvi put otvorili Codespace, možda vas je preplavio velik broj opcija i prozora. VSCode zaista ima mnogo opcija, a još ih više možete dodati pomoću ekstenzija. Većina ih je zapravo relativno jednostavna.

Internet i računalne mreže

U ovom poglavlju istražit ćemo fascinantni svijet interneta i računalnih mreža. Upoznat ćemo se s osnovnim konceptima koji omogućuju globalnu povezanost i razmjenu informacija.

Proučit ćemo kako računala komuniciraju međusobno, što su protokoli i kako funkcionira infrastruktura interneta. Također ćemo se dotaknuti važnih tema poput IP adresa, DNS-a i različitih vrsta mreža.

Cilj ovog poglavlja je pružiti vam temeljno razumijevanje tehnologija koje pokreću suvremenu digitalnu komunikaciju i postaviti osnovu za daljnje istraživanje ovog dinamičnog područja.

Internet

Predače Interneta kao što su ARPANET bile su u početku eksluzivne. Broj korisnika bio je malen, ograničen na profesijonalne korisnike, uglavnom sveučilišta i vladine organizacije. Stoga je i broj čvorova bio relativno mali.

Za razliku od ARPANET-a, na Internet su povezane milijarde uređaja, od osobnih računala, servera do pametnih automobila. Očekuje da će broj ne-IoT uređaja povezanih na Internet (računala, serveri, itd.) u 2025. dostići 10 milijardi. Sam broj uređaja je ogroman, veći je od populacije Zemlje, a svakom godinom se drastično povećava.

Dijagram ARPANET mreže u rujnu 1974. Izvor: Britannica.

Dakle, zbog tolikog broja korisnika koje mora služiti, Internet mora biti dizajniran da podrži toliki broj korisnika. Kao što smo prije spomenuli, Internet je masovni, distribuiran sustav. Najlakše ga je zamisliti kao mrežu mreža: ogromna mreža stvorena od velikog broja manjih mreža, npr. WAN, koje su same stvorene od još manjih mreža, npr. LAN. Prostire se cijelom Zemljom, prolazi kroz stotine države i svih sedam kontinenata.

Internet načelno nema središnju organizaciju koja njime upravlja. Malo je čudo što je moguće (na relativno lagan način) napraviti web stranicu kojoj netko može pristupiti putem Interneta iz (više-manje) bilo koje zemlje svijeta na gotovo bilo kojem uređaju s pristupom Internetu. To je moguće zbog standardizacije koju provede međunarodne organizacije.

Jezgra Interneta sastoji se od nekoliko ogromnih, medunarodnih korporacija (ISP-ova) koji se vlasnici nekoliko skupina međusobno povezanih mreža s velikim protokom. Glavni dio tih mreža je skupina podvodnih komunikacijskih kablova koji povezuju Internet izmedu kontinenata. Te mreže su kralježnica Interneta. Ti su kablovi bitni geostrateški resursi za države, ali i korporacije. Pomoću njih obavještajne agencije mogu provoditi kibernetičku špijunažu.¹

Međukontinentalna mreža podvodnih komunikacijskih kablova koji služe kao kralježnica Interneta iz 2015. Izvor: OpenStreetMap.

Adresiranje, domene i DNS

Svaka web stranica ima svoju adresu. To je uvjetovano činjenicom da mora postojati neki standardizirani sustav pomoću kojeg će računala pronalaziti jedni druge. Kroz korištenje Interneta, primjetili ste da koju god stranicu otvorite, vaš preglednik će prikazati neku adresu, npr. google.com, carnet.hr ili github.com. Takva vrsta web adrese je domena.

Postoji nekoliko vrsta domena. Najviša razina su vršne domene (engl. top-level domains, TLDs). One uključuju .com, .net, .org, .edu, .hr.

Vršne domene se mogu nadalje podjeliti na generičke domene (gTLDs, npr. .com, .edu, .net, itd.) i geografske domene (ccTLDs, npr. .hr, .us, .uk, .de, itd.). Generičke domene sastoje se od tri znaka, a geografske od dva. Pomoću vršnih domena mogu se registrirati vlastite domene preko registara domena.

Gotovo svaka stranica na Webu ima svoju domenu. Domene nisu ni skupe za registrirati. Prosječna .com ili .net domena košta oko 10€ godišnje. Uz domene je moguće registrirati i beskonačni broj poddomena, npr. ocjene.skole.hr ili www.google.com. Organizacija koja je zadužena za upravljanjem domena je Internetska korporacija za dodjeljena imena i brojeve (engl. Internet Corporation for Assigned Names and Numbers, ICANN).

Međutim, iako su domene korisne za lako pamćenje i navigiranje Internetom, one nisu zapravo način na koji su uređaji na Internetu adresirani. Iza svake domene leži IP (engl. Internet Protocol) adresa. IP je mrežni protokol (O mrežnim protokolima ćemo detaljnije u sljedećem poglavlju.) koji omogućava da uređaji u mreži međusobno šalju informacije. Ta mreža ne mora biti Internet. U IP-u, podaci se šalju u obliku podatkovnih paketa. Svaki podatkovni paket sadrži metapodatke, adresu pošiljatelja, primatelja, i slično, te sam sadržaj paketa.

Svaki uređaj povezan u bilo koju vrstu računalne mreže, npr. preko rutera, dobiti će svoju jedinstvenu, lokalnu IP adresu. Naravno, svaki uređaj također ima i javnu IP adresu, onu vidljivu uređajima na širem Internetu. Važno je naglasiti da (u kućnim LAN mrežama) javnu IP adresu obično nema svaki pojedini uređaj; ruter ima svoju javnu IP adresu koja je onda zajednička svim uređajima koji su povezani pomoću njega.¹

IP adrese su brojevi. Najčešći oblik IP adrese su IPv4 adrese.¹

IPv4 adrese se zapisuju u obliku četiri 8-bitnih brojeva odjeljeni s točkom: A.B.C.D. Primjeri IPv4 adresa uključuju 8.8.8.8, 245.40.3.36 i 127.0.0.1. IP adresa 127.0.0.1 je rezervirana te označava računalo koje je poslalo zahtjev, njezina kratica je localhost. Drugim riječma, bilo koji promet poslan na nju biti će vraćen nazad pošiljatelju. Najveći osmobitni broj je $2^8 - 1$ (255). Dakle, svaki broj u IPv4 adresi ne može biti veći od 255, odnosno najveća IPv4 adresa je 255.255.255.255.

U početku je to bilo više nego dovoljno. Nitko nije mogao predvidjeti da će Internet postati ovako veliki kakva je danas. Polako je to postalo nedovoljno jer se sve više računala povezivalo na Internet. IPv4 adrese postaju sve skuplje zbog toga (velika potražnja, mala ponuda). Internet je danas u procesu prebacivanja na IPv6 adrese koje se sastoje od 128 bitova. Dakle, s IPv6 adresama, je moguće adresirati $2^{128}$ uređaja na Internetu. IPv6 adrese se zapisuju u obliku osam četveroznamenkastih heksadekadskih brojeva odvojeni s dvotočkom, npr. 6802:f535:52bb:a290:a069:5e2e:470c:c3ca.

Prevođenje između domena, jezik koji ljudi koriste za pronalazak stranica, i IP adresa, jezik koji koriste računala, događa se preko DNS-a (engl. Domain Name System). DNS sustav sastoji se od imenskih servera koji zapravo provode prevođenje između domena i IP adresa. Također, DNS je hijerarhiski. To znači da ne mora svaki imenski server sadržavati popis svih domena i pripadajućih IP adresa već samo mali komad. Kada preglednik otvara neku stranicu, zatražiti će od DNS-a da prevede tu domenu u IP adresu. DNS će prvo provjeriti lokalni spremnik, ako tamo nema zapisa ili ako IP adresa više nije valjana, onda će zahtjev prosljediti mjerodavnijem imenskom serveru, npr. od ISP-a, sve dok ne dođe to točne IP adrese koju će onda vratiti pregledniku.

Hijerarhija DNS-a.

Mrežni protokoli

Svaki računalni sustav ima u sebe ugrađene protokole. Oni mogu biti implicitni, programer može napraviti protokol bez da to primjeti. Uzmimo za primjer aplikaciju kao što je WhatsApp. Ona mora obavijestiti korisnika kada je primio nove poruke. Jednostavna verzija protokola za provjeru dostupnosti novih poruka može biti sljedeća:

1. Klijent (aplikacija) šalje zahtjev serveru za provjeru novih poruka.
2. Server provjeri s bazom podataka jesu li dostupne nove poruke.
3. Server odgovori klijentu: (a) ako su nove poruke dostupne, odgovori da su dostupne i pošalje nazad te poruke ili (b) ako nisu dostupne, odgovori da nema novih poruka.
4. Klijent obavijesti server da je primio poruke.
5. Server označi u bazi podataka da su te poruke poslane klijentu, odnosno da više nisu nove.
6. Klijent i server zatvore vezu.
7. Klijent pričeka 15 sekundi prije no što ponovi zahtjev za provjeru.

Ovakav protokol bi radio, ali nije najbolje rješenje. Glavne mane su mu to što:

1. Korisnik mora čekati najviše 15 sekundi prije nego što može primiti poruku. Kod suvremenih aplikacija to vrijeme je znatno manje.
2. Klijent će često naletiti na situaciju gdje šalje nepotrebne zahtjeve serveru kada novih poruka nema te na taj način oduzima dragocjeno vrijeme serveru.
3. Server neće prekinuti vezu ako klijent nije poslao obavijest da je primio poruku nakon nekog vremena.
4. Nema mehanizam da server ponovno pokuša poslati poruke klijentu ako u prijašnjem pokušaju nije obavijestio server da je primio poruke.

Bolje rješenje bilo bi ono u kojem server obavještava korisnika kada su nove poruke dostupne, umjesto da klijent svakih nekoliko sekundi ili minuta šalje zahtjev serveru. Tako bi korisnik vrlo brzo saznao da su mu poslane nove poruke i mreža bi bila pod puno manjim opterećenjem jer se zahtjevi šalju samo kada je to nužno. Iz ovog primjera možemo izvesti sljedeću definiciju protokola.

TCP/IP

Nakon IP-a, sljedeći najbitniji protokol koji tvori TCP/IP skup protokola je TCP (engl. Transmission Control Protocol). U prijašnjem poglavlju smo rekli da IP omogućuje uređajima da međusobno šalju podatke u obliku podatkovnih paketa. Međutim, tu IP staje. IP se bavi isključivo slanjem informacije između računala, a ne i među programima unutar tih računala. Za to nam treba TCP. Svaki program koji ima otvorenu vezu prema nekom drugom računalu ili programu imati će dodjeljeni port.

Kako je port broj od 16 bitova, najveći port je 65535. Port se zapisuje nakon IP adrese i od nje odvaja dvotočkom, npr. 127.0.0.1:443.

Tablica 1: Popis čestih rezerviranih portova i pripadajućih protokola.

TCP koristi IP, on spada u jednu razinu više u mrežnoj hijerarhiji. On omogućava dvosmjernu i pouzdanu komunikaciju između računala u mreži. Pouzdana je zato što TCP garantira da će drugo računalo primiti poslane podatkovne pakete u smislu da će neke pakete ponovno poslati ako se dogodila privremena greška u slanju ili primanju. Naravno, TCP ne može garantirati da će slanje uspjeti ako postoji dugotrajni problem s jednim od računala. Mnogo drugih protokola, npr. SMTP, FTP, HTTP, itd., koriste TCP.

TCP nije jedini protokol koji se koristi za slanje i primanje podataka, tj. za transport podataka. Drugi takav protokol je UDP (engl. User Datagram Protocol). UDP, kao i TCP, isto koristi IP i spada u istu hijerahisku razinu mrežnih protokola. Kao i TCP, UDP služi za slanje i primanje podataka na razini programa te isto koristi portove. Glavna razlika je ta što UDP ne garantira da će svi poslani podatkovni paketi stići na njihovo odredište ako postoje smetnje u mreži, a često postoje. Ovo je zapravo dobra stvar za neke aplikacije, recimo usluge za videje na zahtjev (VoD, engl. Video on Demand), npr. YouTube, Twitch, itd. To je dobro za njih jer je korisnicima puno prihvatljivije da video izgubi malo kvalitete na nekoliko sekundi nego da potpuno zastane dok TCP ne pošalje ponovno pakete koji nisu bili primljeni. Drugim riječima, UDP je koristan za sustav koji zahtjevaju komunikaciju u stvarnom vremenu.

SMTP

IP i TCP su protokoli koji služe osnovnoj komunikaciji između računala i pripadajućih programa. Iznad njih se nalaze aplikacijski protokoli napravljeni za određene vrste aplikacija. Jedan od najkorišteniji i najstarijih je SMTP (engl. Simple Mail Transfer Protocol). On služi za slanje i primanje elektroničke pošte. Originalni SMTP je naprarvljen 1981. da zamjeni korištenje FTP-a, jednog drugog aplikacijskog protokola, za email. Komunikacija preko SMTP-a odvija se pomoću SMTP servera koji jedan drugome šalju poruke. Obično će se SMTP server neke domene odnosno stranice nalaziti na poddomeni mail, npr. mail.carnet.hr. Korisnici obično interaktiraju sa SMTP serverom pomoću SMTP klijenta, najčešće aplikacije poput Gmaila ili Outlooka. SMTP server će, po zahtjevu za slanje pošte, pomoću DNS-a naći IP adresu SMTP servera primatelja te poslati poruku.

Naravno, originalni SMTP nije verzija SMTP-a koja se koristi danas. Tijekom godina je SMTP standard bio proširivan. Jedna od najvećih mana originalne verzija je manjak mehanizma za provjeru ima li SMTP server koji je poslao poštu dozvolu slati u ime neke domene. Nije postojao način da korisnik provjeri je li email koji je primio lažiran. Danas postoji više načina za provjeru, jedan od njih je DMARC.

FTP

FTP (engl. File Transfer Protocol) je još jedan aplikacijski protokol koji se koristi za slanje i primanje datoteka preko mreže. FTP je još stariji od SMTP-a, originalno razvijen 1971. Kao i kod SMTP-a, rad se odvija pomoću FTP servera, koji obično imaju poddomenu ftp (npr. ftp.example.com), a korisnici njima upravljaju preko FTP klijenata. Poznati FTP klijenti uključuju FileZilla i WinSCP. Danas se često koristi protokol SFTP (engl. SSH File Transfer Protocol) koji koristi SSH (engl. Secure Shell) protokol za enkripciju podataka.

Računalne mreže

U početku su računala bila ogromni strojevi, zujimali su cijele sobe i bili su sporiji od najsporijeg pametnog mobitela. I što je najbitnije, nisu bila povezana. Jedno računalo je bilo samo za sebe, nije imalo pristup ostalima, a to je znatno ograničavalo njihovu funkcinonalnost. Podaci su morali biti prebacivani između računala pomoću fizičkih uređaja, diskete, a to je potrajalo i nije bilo praktično za velike udaljenosti.

Informatičari su to ubrzo shvatili te nije prošlo mnogo vremena od razvoja prvih računala do razvoja prve veće računalne mreže. Ta je mreža bila ARPANET. Razvila ju je američka agencija ARPA, sada zvana DARPA, 1969. Do 1971. je imala 15 računala povezana na nju. Za razliku od današnjeg Interneta, ARPANET bio je znatno manje sofisticiran, sigurnosne mjere nisu postojale, umreženi računala bilo je malo i bio je spor. Ključna razlika je činjenica da su ARPANET i slične mreže koristili većinom informatički stručnjaci, sveučilišta i vlada, a ne i svakodnevni građani.

Međutim, ARPANET je bio ključan korak u razvoju modernog Interneta. ARPANET je bio rani primjer većeg distribuiranog sustava. Distribuirani sustavi su ključni sastojak modernog računarstva jer omogućuju podjelu rada na više računala, a to znatno povećava performanse. Jedno računalo nije dovoljno snažno za zadatke koji zahtjevaju veliku količinu računalnih resursa. Očiti primjeri su znanstveni izračuni, npr. simulacija proteina ili treniranje velikih jezičnih modela kao GPT-4. Naravno, sam Internet je najveći primjer masovnog distribuiranog sustava.

Danas je sve više i više uređaja umreženo. Štoviše, svjetska ekonomija ovisi o Internetu. Tijekom zadnjih nekoliko godina, sve je više i Internet of Things (IoT) uređaja, npr. pametni televizori, frižideri, termostati i slično.

Osnove vrste i svrha mreža

Internet kao koncept najlakše se može zamisliti kao "mreža od mreža". Računalne mreže postoje kako bi omogućile međusobno povezivanje računala i drugih uređaja u svrhe međusobne komunikacije.

Te računalne mreže od kojih se sastoji Internet uključuju one najmanje, LAN (engl. Local Area Network) mreže koje se nalaze u kućama i stanovima svih ljudi.

One se obično sastoje od rutera, nekoliko računala i mobitela, televizora te još neke opreme. Sljedeća najbitnija razina mreže je WAN (engl. Wide Area Network). Glavna razlika između WAN i LAN mreža je u geografskom području koje zauzimaju. WAN mreže će obično imati naprednije sustave koji su potrebni za upravljanje tako velikim prostorom.

Još kategorija računalnih mreža postoje, uključujući Personal Area Network (PAN) i Metropolitan Area Network (MAN). PAN mreže su nekoliko metara u veličini. Primjer takve mreže su mobitel i slušalice spojene pomoću WiFi-a ili Bluetootha. MAN mreže obično su one mreže koje povezuju veće područje, recimo neki grad ili naselje.

Pristup Internetu daju pružatelji internetskih usluga (engl. Internet Service Provider, ISP). Primjeri ISP-ova u Hrvatskoj su Hrvatski Telekom, Optima Telekom, A1 i drugi.

Komponente mreža

Za veliku većinu osoba, pristup Internetu dobiti će u obliku uređaja koji se zove ruter (od engl. router). Ruter je uređaj koji služi kao glavna pristupna točka Internetu, na njega se, žično ili bežično, povezuju drugi uređaji koji zahtjevaju pristup Internetu, ali i ostalim uređajima u LAN mreži. Njegova svrha je komunikacija između uređaja u njegovoj mreži i šireg Interneta. On odašilje i prima (te onda šalje uređaju koji je namijenjeni primatelj) pakete podataka koje šalju i primaju uređaji povezani u mrežu putem rutera.

Dijagram jednostavne LAN mreže s ruterom i nekoliko uređaja povezanih na njega. Kompliciranije LAN mreže mogu imati i mrežni preklopnik (engl. switch). Izvor: Cloudflare.

Komponente mreže prikazane na Slici 1.1 jesu one najčešće. Međutim, postoje i druge komponente mreža. Ruter, recimo, nije nužan da bi se stvorila mreža. Primjer uređaja koji može zamjeniti neke svrhe rutera je mrežni preklopnik. On povezuje računala u mrežu u obliku zvijezde tako što koordinira slanje poruka između računala i omogućava im da komuniciraju međusobno. Glavna razlika između preklopnika i rutera je ta što preklopnik ne može sam povezati svoju mrežu s vanjskim svijetom Interneta. Međutim, preklopnici su često spojeni na ruter te tako mogu povezati računala s ostatkom Interneta.

Dijagram LAN mreže s mrežnim preklopnikom. Izvor: Cloudflare.

World Wide Web

World Wide Web je stvorio znanstvenik u CERN-u Tim Berners-Lee. CERN je mjesto gdje fizičari bombardiraju čestice s drugim česticama u nadi da će otkriti kako radi svemir. Međutim, Berners-Lee, koji je bio manje zainteresiran za uništavanje svijeta od ostalih, je vidio problem u trenutnom načinu djeljenja informacija između znanstvenicima. On je predložio ideju hiperteksta. Hipertekst je tekst koji u sebi ima poveznice na druge povezane tekstove. Vidio je priliku da se taj koncept napravi pomoću TCP/IP-a. Godine 1990. je napravio prvu verziju HTTP-a (engl. HyperText Transfer Protocol). HTTP je isto aplikacijski protokol.

Ta je ideja vrlo brzo zaživjela i drugi znanstvenici, ali i drugi korisnici, su se ubrzo pridružili. Ubrzo je osnovan World Wide Web Consortium (W3C), neprofitna organizacija s ciljem poboljšanja Weba. Web i Internet se često poistovjećuju, ali oni nisu ista stvar. Web je skup aplikacija koji leže na temelju Interneta, kao što vidimo.

HTTP i prijatelji

TLS/SSL

Suvremeni HTTP je znatno drugačiji od originalne verzije. Kao i SMTP, bio je napravljen u doba kada računalna sigurnost nije bila u prvom planu jer je vrlo malo ljudi zapravo koristili računala. Pa tako nije imao ugrađenu podršku za enkripciju komunikacije između HTTP servera i preglednika. Ta je mana ubrzo uočena kada je Web postajao sve popularniji. Tvrtka Netscape, koja je tada proizvodila poznati web preglednik Netscape Navigator, razvila je prvu verziju protokola za sigurnu komunikaciju pomoću HTTP-a, SSL (engl. Secure Sockets Layer). SSL je uklopljen u HTTP kao unaprijeđeni protokol HTTPS. Danas je TLS (engl. Transport Layer Security) zamjenio SSL.

Klijenti i serveri

HTTP server se često naziva i web server. HTTP koristi HTTP metode za izvršavanje zahtjeva. Metoda govori koja vrstu akcije izvršava određeni URL na serveru. HTTP zahtjev se sastoji od metode, URL-a zahtjeva, tijela (sadržaja) zahtjeva, verzije HTTP-a i headera koji sadrže metapodatke o zahtjevu.

Tablica 1: Popis najčešćih HTTP metoda i njihovih svrha.

Svaki HTTP zahtjev mora dobiti i odgovor koji se sastoji od HTTP koda i tijela odgovora. Tijelo nije obavezno.

Tablica 2: Popis najbitnijih kodova HTTP odgovora i njihovih značenja.

HTTP kodovi 200--299 označuju uspješan zahtjev, 300--399 preusmjeravanje, 400--499 klijentsku pogrešku i 500--599 serversku pogrešku.

Poznati web serveri uključuju Nginx i Apache HTTP Server. Tijelo HTTP zahtjeva i odgovora može biti bilo koji oblik podataka. Tip podataka se određuje pomoću Content-Type headera. Kada preglednik otvara neku stranicu, web serveru će poslati GET zahtjev na domenu, odnosno IP adresu, te stranice. Server će vratiti odgovor s kodom 200 OK ako stranica postoji ili 404 Not Found ako ne postoji. Ako postoji, također će vratiti i tijelo sa HTML kodom stranice.

Tijela HTTP zahtjeva koji se šalju nekom API-u obično zapisuju pomoću JSON-a (engl. JavaScript Object Notation). To je format koji je čitljiv računalima i ljudima, a relativno je jednostavan. Prije se koristio XML (engl. Extended Markup Langauge), ali ga je JSON zamjenio jer je jednostavniji i sadrži manje sigurnosnih propusta.

Programiranje na Webu

Kada je Berners-Lee napravio HTTP, želio je napraviti jednostavan jezik za izradu web stranica. Odlučio je napraviti markup jezik. To je jednostavan jezik, bazirao ga je na SGML jeziku. Nazvan je HTML (engl. HyperText Markup Language).

<!DOCTYPE html>
<html>
<head>
  <title>Naslov stranice</title>
</head>
<body>
  <h1>Naslov</h1>
  <p>Ovo je paragraf teksta.</p>
</body>
</html>

Primjer 1: Osnovna struktura HTML dokumenta.

Dakle, stranice su na početku bile jednostavne, tekst s poveznicama, nisu ni imale slike. Kasnije je HTML dobio i sposobnost dodavanja slika, naravno, i drugih vrsta medija. Međutim, HTML nema mogućnost promjenu stila web stranice, npr. boju teksta ili font teksta ili lokaciju elemenata. Za to je napravljen CSS (engl. Cascading Style Sheets).

body {
  background-color: #f0f0f0;
  font-family: Arial, sans-serif;
}

h1 {
  color: #333;
  text-align: center;
}

Primjer 2: CSS kod koji mjenja izgled naslova i pozadine na stranici.

Ubrzo su programeri željeli i mogućnost dodavanje interaktivnosti web stranicama. Do tada su web stranice bile statičke: korisnici nisu mogli interaktirati s njima. JavaScript (JS) je programski jezik koji je napravio Brendan Eich u 10 dana namjenjen da posluži kao jednostavni jezik za skriptiranje na web stranicama. U početku je to i bio, koristio se isključivo na web stranicama. Bio je na neki način baziran na Javi jer je tada Java bila vrlo popularna pa je Netscape, tvrtka koja je zaposlila Eicha da napravi JS, želio da bude slična Javi. S vremenom su se Java i JavaScript krenuli razilaziti. Dakle, JavaScript nije jednostavnija verzija Jave nego je svoji samostalan jezik.

Od 2009. JS se sve više koristi za programiranje i izradu servera, mobilnih i desktop aplikacija i drugih proizvoda. To je omogućio Ryan Dahl, koji je 2009. napravio Node.js, izvršno okruženje koje JavaScriptu daje sve biblioteke i sposobnosti koju imaju ostali jezici. Pod time uglavnom govorimo o pristupu resursima operacijskog sustava, npr. pristup datotekama, mreži, itd.

Godine 2017. je izašao WebAssembly (WASM), međukod koji omogućuje da se gotovo bilo koji programski jezik izvršava na web stranicama. Većina popularnih programskih jezika imaju barem djelomičnu podršku za WASM.

document.querySelector("button").addEventListener("click", function() {
  alert("Button clicked!");
});

Primjer 3: JavaScript kod koji otvara dijalog na kojem piše Button clicked! kada se pritisne tipka.

Osnove HTML-a

HTML je temeljni jezik za izradu web stranica. U ovom poglavlju upoznat ćemo se s osnovama HTML-a i njegovom ulogom u stvaranju strukture i sadržaja web stranica.

HTML koristi oznake (tagove) za definiranje različitih elemenata na web stranici, poput naslova, odlomaka, slika i poveznica. Naučit ćemo kako pravilno koristiti ove oznake i stvoriti dobro strukturirane HTML dokumente.

Kroz ovo poglavlje, steći ćete osnovno razumijevanje HTML sintakse, naučiti kako organizirati sadržaj pomoću HTML-a i pripremiti se za daljnje učenje o web razvoju. Bez obzira jeste li početnik ili želite osvježiti svoje znanje, ovo poglavlje pružit će vam čvrste temelje za rad s HTML-om.

Što je HTML?

Kao što smo spomenuli u prijašnjem poglavlju, HTML je programski (markup) jezik koji se koristi za definiranje strukture web stranice koju će onda renderirati web preglednik (npr., Firefox, Chrome, itd.). HTML je u osnovi jednostavan, ali može biti složen koliko je god potrebno za potrebe projekta. Glavna jedinica HTML-a je element. Elementi pretstavljaju svaku strukturu unutar HTML-a. Njih koristimo da označimo različite dijelove stranice, kao što su naslovi, odlomci, slike, itd. i odredimo kako da se ponašaju i što rade.

Elementi se pišu u obliku tagova. Tagovi se sastoje od naziva elementa, koji se piše između < i > znakova. Pogledajte primjer ispod:

Moja mačka je vrlo mrzovoljna

Ako bi žejeli da taj komad teksta bude neovisan, mogli bi ga staviti unutar <p> taga i na taj način od njega napraviti element:

<h1>Moja mačka je vrlo mrzovoljna</h1>

Sada kada smo to učinili, web preglednik će taj komad teksta prikazati kao odlomak s nekim preddefiniram stilom (npr., veličina fonta, boja, itd.) i omogućiti nama da ga mjenjamo. O tome ćemo detaljnije uskoro.

Anatomija HTML elementa

Kao što smo već spomenuli, HTML tagovi se sastoje od naziva elementa, koji se piše između < i > znakova.

HTML element se sastoji od sljedećeg:

• Otvarajući tag - početak elementa. Od otvarajućeg taga element kreće vrijediti. Sastoji se od naziva elementa između < i > znakova. U ovom slučaju se radi o odlomku (tj. paragrafu) pa je naziv taga p koji je zatvoren s < i > znakovima, tako da je otvarajući tag <p>.
• Tijelo elementa - tijelo elementa nalazi se između otvarajućeg i zatvarajućeg taga. U ovom slučaju je to tekst " Moja mačka je vrlo mrzovoljna". Tijelo elementa može biti prazno, ako element ne sadrži nikakav tekst ili druge elemente.
• Zatvarajući tag - kraj elementa. Od zatvarajućeg taga element prestaje vrijediti. Sastoji se od naziva elementa između </ i > znakova. U ovom slučaju je to </p>.

Dakle, element je otvarajući tag i zatvarajući tag te sadržaj između njih.

Napravite svoj prvi HTML element

Kao što smo spomenuli u uvodnom poglavlju, primjere HTML koda možete mjenjati i vidjeti promjene u stvarnom vremenu u udžbeniku. Sada ćete napraviti vaš prvi element. U primjeru ispod je napisan komad teksta. Vaš zadatak je da od njega napraviti * boldani* tekst tako da tekst napisan dolje zatvorite <strong> tagovima. Na kraju svakako pritisnite tipku ispod, Prikaži rješenje, kako bi vidjeli postupak i detalje.

<strong>
    Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit
</strong>

<p>Astrofizika je najstarija grana fizike.</p>

<p>
  Astrofizika je najstarija grana fizike.
</p>

Elementi unutar drugih elemenata

Element može staviti unutar tijela drugog elementa. Ovo je vrlo moćna funkcijonalnost kao što ćete uskoro vidjeti. Prije nekoliko trenutaka ste vidjeli da koristeći <strong> tag možete napraviti da tekst bude boldan. Ako ste koristili Word ili sličan alat, vjerojatno znate da tekst možete biti i italic, odnosno zakrivljen. To činimo pomoću <em> taga.

<p>
    <em>Astrofizika je najstarija grana fizike.</em>
    Njezini začeci će se možda pronaći u drevnim kulturama koje su se bavile promatranjem neba.
</p>

Ovo nam omogućuje da, primjerice, učinimo da je element kojeg smo već označili kao odlomak također djelomično i italic. Druge mogućnosti ćete uskoro vidjeti.

Elementi bez tijela

Nemaju svi elementi otvarajući tag, tijelo i zatvarajući tag. Postoje elementi koji nikada nemaju tijelo pa zato imaju samo otvarajući tag. Ti elementi nemaju tijelo jer generalno nemaju sadržaj već se koriste za ubacivanje sadržaja na stranicu ili definiranja informacija o stranici. Najjednostavniji primjer je <br> tag koji ubacuje novi redak u tekst. U HTML-u, ako jednostavno dodate novi redak u sam kod, to neće promjeniti sadržaj na stranici, kao što možete vidjeti u gornjem primjeru.

Ako želite dodati novi redak, morate koristiti <br> tag.

Taj tag nema tijelo jer nije potrebno, sve što on radi je ubacuje novi redak.

Atributi

Elementi mogu imati atribute. Atributi su dodatne informacije o elementu koje se nalaze unutar otvarajućeg taga. Informacije koje se nalaze unutar atributa se ne odražavaju direktno na stranici, najčešće su potpuno nevidljive korisniku.

Atribut se sastoji od:

• Naziva atributa i razmaka - uvijek dolazi razmak nakon naziva otvarajućeg taga pa zatim naziv atributa.
• Jednakosti - nakon naziva atributa dolazi jednakost, bez razmaka.
• Vrijednost atributa - vrijednost atributa dolazi nakon znaka jednakosti i uvijek je zatvorena s dvostrukim navodnicima.

U gornjem primjeru se nalazi atribut class na odlomku. Taj se atribut koristi kako bi olakšao upravljanje izgledom više elemenata iste vrste (klase) pomoću CSS-a. O njemu ćemo naučiti kasnije

Napravite vaš atribut

Ako bi web stranice sadržavale samo tekst, bile bi dosadne. Danas u pravilu svaka web stranica sadržava slike. Pitanje je kako ćemo ih ubaciti u našu stranicu?

Za to koristimo <img> tag. <img> tag je element bez tijela, tako da nema zatvarajući tag. Ako tag nema tijela, onda kako ćemo odrediti njegovo ponašanje, u ovom slučaju koju sliku će prikazati? Atributi!

<img> tag ima jedan obavezan atribut: src i jedan atribut koji nije obavezan, ali se toplo preporučuje: alt. src atribut određuje putanju do slike, a alt atribut određuje tekst koji će se prikazati ako slika nije učitana. Slika će se prikazati na stranici na mjestu gdje se nalazi <img> tag. Iako je alt atribut neobavezan, preporučuje se da se koristi jer pomaže s pretraživanjem web stranice na tražilicima i pristupačnošću stranice.

Pokušajte sada dodati sliku (logo V. gimnazije) na ovu web stranicu tako da se nalazi ispod teksta. Putanja do slike je https://www.petagimnazija.hr/wp-content/uploads/2016/05/5_gimnazija_Logo_small-1.png. Putanja slike može biti poveznica ili putanja do slike na vašem računalu.

<h1>
  V. gimnazija
</h1>
        
<p>
  V. gimnazija ubraja se među najbolje škole u Republici Hrvatskoj. Smještena je u najužem centru grada Zagreba, u Klaićevoj ulici broj 1.
</p>

<img src="https://www.petagimnazija.hr/wp-content/uploads/2016/05/5_gimnazija_Logo_small-1.png" alt="Logo V. gimnazije">

Anatomija HTML dokumenta

U pravilu, HTML elementi ne postoje u izolaciji, nalaze se unutar HTML dokumenta odnosno stranice.

<!doctype html>
<html lang="hr">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

Svaki HTML dokument se sastoji od sljedećih djelova, svaki predstavljen svojim tagom:

1. <!DOCTYPE html> - označava da se radi o HTML dokumentu.
2. <html></html> - označava početak HTML dokumenta, sav HTML kod se nalazi unutar njega. U jednom HTML dokumentu mora postojati samo jedan <html> tag, isto vrijedi za <!DOCTYPE html> tag.
3. <head></head> - sadrži metapodatke o dokumentu, kao što je naslov stranice koji se prikazuje u tabu preglednika. Metapodaci se odnose na informacije o stranici, a ne na sadržaj koji se nalazi na njoj. Uključuje, uz naslov, opis stranice, CSS kod vezan uz taj HTML dokument, i slično.
   1. <title></title> - naslov stranice koji se prikazuje u kartici (tabu) preglednika, a ne na samoj stranici.
   2. <meta charset="UTF-8"> - definira shemu za prikaz znakova koje stranica koristi. U ovom slučaju, to je UTF-8, što je najčešće korišteno kodiranje znakova na webu. Uz UTF-8, postoje i druge sheme kodiranja, najpoznatiji je ASCII, ali on ne podržava sve znakove koje koristimo u svakodnevnom životu, samo osnovne engleske znakove. <meta> tag također nema zatvarajući tag i može se koristiti za dodavanje opisa stranica i ostalih metapodataka, o tome ćemo detaljnije kasnije.
4. <body></body> - sadrži sve vidljivo na stranici, kao što su naslovi, paragrafi, slike, linkovi, i slično.

Uvod u JavaScript

Osnovni zadaci za vježbu JavaScripta

for, if, liste, stringovi, funkcije

1. Napiši program koji će izračunati prosjek brojeva u listi.

2. Kreiraj funkciju koja pronalazi najveći broj u zadanom nizu brojeva.

3. Za unesenu godinu u 21. stoljeću potrebno je odrediti je li prijestupna. Godina je prijestupna ako je djeljiva sa 4 i nije djeljiva sa 100 ili je djeljiva sa 400.

4. Implementiraj program koji broji koliko ima samoglasnika u zadanoj riječi.

5. Osmisli skriptu koja će obrnuti redoslijed znakova u stringu.

6. Potrebno je zbrojiti sve parne brojeve od 1 do n (n unosi korisnik).

7. Iz liste brojeva izdvoji sve brojeve djeljive s 3 u novu listu.

8. Generiraj Fibonaccijev niz do n-tog člana.

9. Napiši funkciju koja provjerava je li riječ palindrom.

10. Izračunaj faktorijel zadanog broja koristeći petlju.

11. Program treba pretvoriti Celsius u Fahrenheit za raspon temperatura.

12. Filtriraj sve negativne brojeve iz liste i spremi ih u novu listu.

13. Za uneseni string provjeri koliko ima velikih, a koliko malih slova.

14. Kreiraj kalkulator koji podržava osnovne matematičke operacije (+, -, *, /).

15. Pronađi drugi najveći broj u listi bez korištenja sort metode.

16. Implementiraj brojač koji ispisuje brojeve unatrag od n do 1.

17. Iz dvije liste brojeva pronađi zajedničke elemente.

18. Program treba generirati tablicu množenja za uneseni broj.

19. Za niz riječi pronađi najdužu riječ.

20. Izračunaj sumu svih znamenki u zadanom broju.

21. Ukloni sve duplikate iz liste brojeva.

22. Provjeri je li uneseni broj prost.

23. Kreiraj funkciju koja će zamijeniti mjesta najmanjem i najvećem broju u listi.

24. Izračunaj broj ponavljanja svakog znaka u stringu.

25. Program treba pretvoriti decimalni broj u binarni bez korištenja ugrađenih funkcija.

Prilog

A - Najčešći HTML tagovi

Struktura dokumenta

• <html>: Korijenski element HTML dokumenta. Obuhvaća cijeli sadržaj web stranice. Sve ostali elementi se nalaze unutar ovog taga.
• <head>: Sadrži metapodatke o dokumentu, kao što su naslov, veze do vanjskih datoteka (CSS, JavaScript), i ključne riječi za pretraživače. Ne prikazuje se direktno na stranici.
• <title>: Definira naslov dokumenta, koji se prikazuje u naslovnoj traci preglednika. Važan za SEO.
• <body>: Sadrži vidljivi sadržaj web stranice, tekst, slike, poveznice itd. Sve što se vidi na stranici nalazi se unutar ovog taga.
• <!DOCTYPE html>: Deklaracija tipa dokumenta. Govori pregledniku koju verziju HTML-a koristite. Obično se nalazi na samom početku dokumenta.

Tekst

• <h1> do <h6>: Naslovi (headings). <h1> je najvažniji naslov, a <h6> najmanje važan. Koristite ih hijerarhijski za strukturu sadržaja.
• <p>: Paragraf. Koristi se za formatiranje teksta u odlomke.
• <br>: Prelazak u novi red (line break). Nema zatvarajućeg taga.
• <span>: Generički inline kontejner. Koristi se za stiliziranje dijelova teksta unutar većeg elementa.
• <strong>: Označava važan tekst. Obično se prikazuje podebljano.
• <em>: Naglašava tekst. Obično se prikazuje kurzivom.

Poveznice

• <a href="URL">: Kreira poveznicu (link) na drugu stranicu ili resurs. Atribut href specificira URL.
• <nav>: Definira blok navigacijskih poveznica.

Liste

• <ul>: Nenumerirana lista (unordered list). Koristi se za kreiranje liste s točkama.
• <ol>: Numerirana lista (ordered list). Koristi se za kreiranje liste s brojevima.
• <li>: Element liste (list item). Definira pojedinu stavku u listi.

Multimedija

• <img src="URL" alt="opis">: Ubacuje sliku. Atribut src specificira URL slike, a alt alternativni tekst koji se prikazuje ako se slika ne može učitati.
• <video src="URL" controls>: Ubacuje video. Atribut controls dodaje kontrole za reprodukciju.
• <audio src="URL" controls>: Ubacuje audio. Atribut controls dodaje kontrole za reprodukciju.

Tablice

• <table>: Definira tablicu.
• <tr>: Redak tablice (table row).
• <th>: Zaglavlje ćelije tablice (table header).
• <td>: Ćelija tablice (table data).

Obrasci

• <form>: Definira obrazac.
• <input>: Polje za unos podataka u obrascu. Različiti tipovi polja se definiraju atributom type (npr. text, password, submit, checkbox, radio).
• <label>: Oznaka za polje za unos.
• <select>: Padajući izbornik.
• <option>: Opcija u padajućem izborniku.
• <textarea>: Polje za unos veće količine teksta.
• <button>: Gumb.

Ostalo

• <div>: Generički blok kontejner. Koristi se za grupiranje elemenata i stiliziranje.
• <section>: Definira dio dokumenta (sekciju).
• <article>: Definira samostalan dio sadržaja, kao što je blog post ili članak.
• <aside>: Definira sadržaj koji je tangencijalno povezan s glavnim sadržajem, kao što je sidebar.
• <header>: Zaglavlje sekcije ili stranice.
• <footer>: Podnožje sekcije ili stranice.
• <main>: Glavni sadržaj dokumenta.