Web tehnologije:
pojam, struktura
i primena

Kako funkcioniše internet stranica koju svakog dana otvaramo, od koda do ekrana

🌐 Pojam🧱 Struktura🚀 Primena🧠 Kviz

Koristi strelice ← → na tastaturi, prevuci prstom ili klikni na dugmad dole.

01 · Pojam

Internet i web nisu isto

Mnogi ova dva pojma koriste kao sinonime, ali među njima postoji velika razlika. Klikni na karticu da saznaš više.

🛰️

Internet

Globalna mreža računara povezanih kablovima, optikom i bežičnim vezama.

To je „infrastruktura“, kao putevi i autoputevi. Preko interneta rade i e-pošta, onlajn igrice, video pozivi, a ne samo web.

🕸️

Web (WWW)

Servis koji radi na internetu: skup povezanih stranica dostupnih preko pregledača.

To su „vozila“ koja putuju tim putevima. Stranice se povezuju linkovima (hiperveze), pa otuda i ime: „World Wide Web“, svetska paukova mreža.

Web tehnologije su skup jezika, protokola i alata pomoću kojih se prave, prenose i prikazuju web stranice i aplikacije.
02 · Istorija

Kako je sve počelo

Klikni na godine i prođi kroz najvažnije trenutke u razvoju weba.

03 · Kako radi

Model klijent – server

Kada ukucaš adresu sajta, tvoj računar (klijent) šalje zahtev, a server vraća odgovor. Sve to traje manje od sekunde!

💻

Klijent

tvoj pregledač
GET /index.html
200 OK + HTML
🗄️

Server

računar koji čuva sajt
1. URLKorisnik ukuca adresu u pregledač.
2. DNSIme sajta se prevodi u IP adresu servera.
3. HTTP zahtevPregledač traži stranicu od servera.
4. PrikazServer vrati HTML, CSS i JS, a pregledač nacrta stranicu.
04 · Adresa

Anatomija URL adrese

Svaka stranica ima jedinstvenu adresu. Pređi mišem ili klikni na delove adrese.

https://www.skola.rs/raspored?razred=2#utorak

👆 Izaberi deo adrese

Saznaćeš čemu služi.

05 · Struktura

Tri stuba svake stranice

Struktura

HTML

Kostur stranice: naslovi, pasusi, slike, linkovi. Kaže šta se nalazi na stranici.

Izgled

CSS

Odeća stranice: boje, fontovi, raspored, animacije. Kaže kako to izgleda.

Ponašanje

JavaScript

Mozak stranice: reaguje na klikove, menja sadržaj, računa. Kaže šta se dešava.

Moja prva stranica

Ovo je kartica napravljena pomoću HTML-a. Uključi CSS i JavaScript i gledaj šta se dešava!

06 · Probaj sam

Napiši kod, vidi rezultat

Ovo je pravi mali editor. Promeni tekst, boju ili dodaj novi element: rezultat se odmah prikazuje desno.

Kod (HTML + CSS + JS)
Rezultat u pregledaču
07 · Raspored

Od čega se sastoji web stranica

Većina sajtova ima sličan raspored. HTML5 za svaki deo ima posebnu, semantičku oznaku.

<header>
<nav>
<aside>
<main>
<aside>
<footer>

👈 Klikni na deo stranice

Videćeš koja je njegova uloga.

08 · Arhitektura

Frontend, backend i baza podataka

Moderna web aplikacija ima tri sloja koji rade zajedno.

🎨

Frontend

Sve što korisnik vidi i dodiruje u pregledaču.

HTMLCSSJavaScriptReactVue
⚙️

Backend

Logika na serveru: prijava, obrada podataka, bezbednost.

Node.jsPHPPythonJavaC#
🗃️

Baza podataka

Trajno čuva korisnike, poruke, proizvode, ocene.

MySQLPostgreSQLMongoDBSQLite
Klikni na dugme za jednostavno poređenje.
09 · Primena

Gde se koriste web tehnologije?

Skoro svuda! Klikni na karticu da je okreneš.

🛒

E-trgovina

Onlajn kupovinaProdavnice, plaćanje karticom, praćenje paketa, sve u pregledaču.
🎓

Obrazovanje

Učenje na daljinuElektronski dnevnik, onlajn časovi, platforme poput Moodle-a i Google učionice.
💬

Društvene mreže

KomunikacijaInstagram, YouTube, TikTok: milijarde korisnika svakog dana.
🏦

Bankarstvo

E-bankingPlaćanje računa i prenos novca bez odlaska u banku, uz HTTPS zaštitu.
🏥

Zdravstvo

eUprava i eZdravljeZakazivanje pregleda, e-recepti, uvid u rezultate analiza.
🎮

Zabava

Igre i strimingIgrice u pregledaču, filmovi i muzika na zahtev.
🗺️

Mape i saobraćaj

NavigacijaGoogle mape, red vožnje, praćenje autobusa u realnom vremenu.
🤖

Veštačka inteligencija

AI asistentiČetbotovi i alati za prevođenje rade direktno u pregledaču.
10 · Danas i sutra

Bezbednost i budućnost weba

🔒

HTTPS

Šifrovana veza između tebe i servera, tako da niko ne može da pročita tvoje podatke.

📱

Responzivni dizajn

Ista stranica se prilagođava telefonu, tabletu i računaru.

⚡

PWA aplikacije

Web sajtovi koji se instaliraju i rade kao prave aplikacije, čak i bez interneta.

🧩

WebAssembly

Omogućava da teški programi (igre, editori videa) rade brzo u pregledaču.

🤖

AI na webu

Pametni asistenti, automatsko prevođenje i generisanje sadržaja.

🥽

WebXR

Virtuelna i proširena stvarnost direktno iz pregledača.

⚠️http://banka.rsNije bezbedno
11 · Proveri znanje
Pitanje 1/6Poeni: 0

Kraj

Hvala na pažnji!

Web nije samo tehnologija, već prostor u kom učimo, radimo, igramo se i povezujemo sa celim svetom.

🌐 PojamWeb je servis na internetu, a čine ga povezane stranice dostupne preko pregledača.
🧱 StrukturaHTML daje sadržaj, CSS izgled, a JavaScript ponašanje. Server i baza rade u pozadini.
🚀 PrimenaOd škole i banke do igrica i veštačke inteligencije, web je svuda oko nas.

Kako ti se dopala prezentacija?

❓ Imate li pitanja?