OSNOVNI POJMOVI

Internet programiranje

( web development) je širok pojam, koji predstavlja različite poslove koji se

obavljaju prilikom kreiranja veb sajta ili veb-aplikacije za Internet. Po složenosti ovi poslovi mogu biti različiti i mogu
varirati od izrade najjednostavnije statičke web stranice do izrade složenih web aplikacija za elektronsko poslovanje.

Poslovi koje pojam internet programiranja može obuhvatati su veb-dizajn, izrada različitih veb sadržaja,

programiranje, konfigurisanje baza podataka, konfigurisanje servera i mreže, upravljanje sadržajem, razvoj
elektronskog poslovanja, čak i marketing. Često se pod ovim pojmom podrazumeva samo web-dizajn i administracija
sadržaja.

Internet

je skup velikog broja lokalnih i globalnih mreža koje koriste TCP/IP protokole u međuračunarskim

komunikacijama. Internet se takođe naziva i "mrežom svih mreža" jer povezuje milione računara širom sveta. Internet
nije jedinstvena mreža sa centralizovnom kontrolom, već je povezani skup nezavisnih mreža koje koriste iste
protokole, standarde i interfejse.

Internet kao globalna mreža pruža najrazličitije informacije u obimu koji se praktično ne može odrediti.

Pronalaženje tačno određenog dokumenta na Internetu predstavlja izuzetan problem obzirom na more raspoloživih
informacija. U cilju bržeg pronalaženja i jednostavnijeg pristupa željenim informacijama ustanovljeno je nekoliko
osnovnih servisa. Korisnik doživljava Internet kao

skup mrežnih usluga

. Usluge i servisi Internet-a su uvek

organizovani po klijent-server principu. Server je specijalni softver na nekom mrežnom računaru, koji opslužuje
zahteve korisnika. Klijent je aplikacija koja zahteva neku uslugu, obraća se serveru slanjem poruke sa opisom
zahtevanog zadatka. Server opslužuje zahtev i odgovara klijentu svojim porukama. Skup važećih poruka definisan je
protokolom. Server može usluživati više klijenata odjednom.

Word Wide Web

ili skraćeno WWW korisnicima je internet usluga koja pruža informacije u najatraktivnijem

multimedijalnom obliku. Ovaj servis na Internetu je veoma brzo postao najpopularniji, jer obezbeđuje lako, brzo i
jednostavno pronalaženje željenog sadržaja na globalnoj računarskoj mreži. Za korišćenje Web-a razvijene su posebne
korisničke aplikacije – pregledači, čitači, brouzeri (eng. Browsers). Brouzerima  se mogu jednostavno posećivati razne
web lokacije - sajtovi, koje sadrže tražene informacije u vidu tekstova, slika i drugih multimedijalnih sadržaja. Web
sajt je skup web stranica koje mogu sadržati tekst slike video i druge multimedijalne sadržaje, a koji su povezani
hipervezama - linkovima. Mogu biti statički – oni koji se ne menjaju duže vreme - i dinamički – oni koji se često
osvežavaju. Pretragu weba olakšavaju web pretraživači (eng.

Search engine

) – aplikacije koje na osnovu ključnih reči

prikazuju skup stranica na kojima su one pronađene.

E-mail

- elektronska pošta je jedan od najstarijih i najčešće korišćenih servisa na Internetu. Jednostavnom

tekstualnom sadržaju poruke mogu biti pridodati najrazličitiji prateći sadržaji kao što su slike, tonski i video zapisi.
Neki drugi servisi na internetu bili bi

: internet forumi

ili

diskusione grupe,

mogućnost direktnog praćenja

radio i

TV programa

putem Interneta,

kanali

(eng. channels) koji omogućavaju da se željeni sadržaj automatski prenese do

korisnikovog računara, a kasnije omogući njegov pregled (

RSS

internet telefonija

(

VOIP

) itd.

Svaka lokacija na Web-u ima svoju sopstvenu adresu, poznatu kao

URL

(eng. Uniform Resourse Location).

URL adresa je neophodna da bi se usmerio Web pretraživač na tačno određeno mesto na Internetu i pristupio željenom
sadržaju. URL se sastoji od protokola (http), znakova :// koji razdvajaju protokol od ostalih delova adrese, internet
domena, naziva računara, foldera ili dokumenta.

Internet domen

je tekstualna oznaka koja identifikuje skup uređaja ili Internet servisa, povezujući ih u

jedinstvanu administrativno-tehničku celinu. Domen se sastoji iz niza alfanumeričkih segmenata, razdvojenih
tačkama.

DNS

(engl.

Domain name system

)

je, u osnovi, sistem koji pretvara imena računara

( hostnames)

u IP

adrese. DNS takođe obezbeđuje podatke i o serverima elektronske pošte na domenu (MX), početnom DNS serveru
(SOA) i druge. DNS je zasnovan na hijerarhijskom principu i jedna je od osnovnih komponenti Interneta.

Najviši

Internet domen

(engl.

Top-level domain

ili engl.

TLD

) je posljednji deo imena Internet domena; odnosno, slova koja

slede posljednju tačku u nazivu domena. Na primer, u nazivu domena www.website.com najviši Internet domen je
com. Ovi domeni mogu biti



Najviše Internet domene državnih kodova. Ima dužinu od dva slova, na primer jp za Japan, rs za Srbiju, me za
Crnu Goru itd.



Generički najviši Internet domeni: Koristi se od strane posebnih kategorija organizacija (na primer com za
komercijalne organizacije, edu obrazovanje, gov državna uprava...)

Protokol

predstavlja skup pravila za komunikaciju. Njime se definiše format i redosled poruka između dva

uređaja koji komuniciraju i niz akcija koje ti uređaji moraju izvršiti u određenim trenucima. U najčešće korišćenom
apstraktnom modelu arhitekture mreže (

OSI model

) protokoli se dele u sedam slojeva.

Aplikacioni sloj

(Process/Application Layer) predstavlja protokole najvišeg sloja i odnose se na razmenu

podataka između pokrenutih programa na uređajima koji komuniciraju. Najpoznatiji korisnički protokoli su

HTTP

(

HyperText Transfer Protocol) – pregled web stranica,

FTP

(File Transfer Protocol) – prenos fajlova,

SMTP

POP

za elektronsku poštu,

TELNET

- rad na udaljenom računaru.

Domain Name System

(DNS) protokol koji se koristi

za prevođenje naziva hostova u IP adrese.

Sloj prezentacije

predstavlja protokole zadužene za enkripciju i kodiranje podataka.

Sloj sesije

se odnosi na

uspostavljanje sesije između uređaja.

Transportni sloj

obezbeđuje komunikacione usluge koje koriste aplikacije. Jedan od protokola ovog sloja je

TCP.

TCP

je orijentisan na uspostavljanje virtuelne veze, i obezbeđuje pouzdanost tj. sekvencioniranje i kontrolu

toka. Svaki TCP paket, pored ostalih informacija, sadrži i dva šesnaestobitna broja koji se nazivaju izvorni i odredišni
port. Pošto se komunikacija vrši između procesa na dva udaljena računara, izvorni port (Source Port) služi da
identifikuje proces na izvornom hostu, dok odredišni port (Destination Port) identifikuje proces na odredišnom hostu.

Mrežni sloj

obezbeđuje mehanizme za adresiranje, rutiranje, specifikaciju tipa usluge, fragmentaciju i

sastavljanje datagrama, a sadrži i neke sigurnosne informacije. Najpoznatiji je IP protokol.

Sloj veze

se odnosi na

fizičko adresiranje i razmenu podataka između mrežnih uređaja i za korekciju grešaka u fizičkom sloju.

Fizički sloj

odnosi na prenos signala, definiše električna i fizička svojstva uređaja, naponske nivoe, oblik konektora i slično.

TCP/IP je uobičajni naziv za grupu protokola koja omogućava povezivanje računara. TCP/IP je dobio naziv

po dva najvažnija protokola iz ove grupe – TCP skraćenica za "Transmission Control Protocol” i IP “Internet
Protocol". Uloga ovih protokola je da osiguraju komunikaciju između računara na Internetu.

Osim opšte prihvaćenog protokola za prenos informacija veoma je važan sistem adresiranja. Da bi se povezao

na Internet svakom računaru mora biti dodeljen identifikacioni jedinstveni broj poznatiji kao IP adresa. Ovu adresu
čine brojevi koji se pišu u četiri niza kao npr. 159.97.6.175, i predstavlja binarni broj broj dužine četiri bajta (32 bita).
Adresa počinje mrežnim brojem (network number) a ostatak se naziva "lokalna adresa". Pamćenje adresa u ovako
kodiranom obliku nije podesno za čoveka te se formiraju tzv. URL ili Web adrese koje se sastoje od dve ili više reči
razdvojenih tačkom.

HTML

HTML označava englesku skraćenicu od Hyper Text Markup Language i predstavlja jezik web stranica -

„hipertekstualni jezik za označavanje“. To je jezik za označavanje koji postavlja uputstva ili oznake (eng. tags) oko
teksta koji čitaču govore kako da na ekranu prikaže određeni sadržaj. HTML zapravo predstavlja skup instrukcija za
Web čitač.

Web stranica se sastoji od niza HTML naredaba koje se unose u tekst datoteku korišćenjem programa za

obradu teksta. Sadržaj Web stranice čine tekst, slike, video, zvuk i sve ostalo što se pomoću HTML-a na nju postavi.
Web čitači (eng. web browsers) prevode HTML iz dokumenta web stranica i prikazuju tekst, slike, animacije na
ekranu računara posetioca. Od verzije Web čitača (različiti proizvođači) donekle zavisi šta će posetilac videti na
ekranu. Web server na kome se nalazi Web strana i Web čitač za komunikaciju koriste protokol za prenos hiperteksta
HTTP (eng. Hyper Text Transfer Protocol). Pošto se izvršava pomoću web čitača HTML je platformski neutralan.

World Wide Web Consortium (

http://www.w3.org

) je internacionalna organizacija za standardizaciju HTML-a.

ALATI ZA KREIRANJE WEB STRANA

Postoje brojni besplatni, ali i komercijalni alati pomoću kojih se mogu kreirati web strane, a koji su u skladu

sa HTML standardima. Neki alati su toliko usavršeni da znanje HTML-a skoro nije ni potrebno, kao npr. Adobe
Dreamweaver. Međutim, kada je potrebno da se kreira nešto van šablona, prilagodi strana ili uradi nešto izvan skupa
komandi   iz   menija,   neophodno   je   poznavanje   HTML-a.   Sve   što   je   potrebno   jeste   najjednostavniji   program   za
uređivanje   teksta   (Notepad,   Wordpad   ili   sl.),   pretraživač   Web-a   (Mozilla   Firefox,   Internet   Explorer,   Opera,...)   i
poznavanje HTML jezika. Osim toga potrebno je i poznavanje CSS-a (eng. Cascading Style Sheet) za raspoređivanje
elemenata na stranu odnosno vizuelno oblikovanje strane.

Ne treba mešati editore teksta sa softverskim programom za obradu teksta. Između njih postoje značajne

razlike. Mnogi moderni programi za obradu teksta mogu da iz teksta izrade HTML dokument, ali takođe u njega
uključuju brojne skrivene kodove koji mogu praviti probleme za neke pretraživače. U vežbama će se koristiti editor
teksta Notepad++, koji predstavlja poboljšani, besplatni softver za uređivanje teksta i može se preuzeti sa adrese

http://notepad-plus-plus.org

Svaki računar je podešen tako da otvara HTML dokumenta pomoću podrazumevanog web brouzera. Dovoljno

je samo da se dvaput klikne na bilo koji fajl sa ekstenzijom .html ili .htm i fajl će se otvoriti u web brouzeru koji je
određen kao standardni.

Često je poželjno da se unutar koda ostavi neki komentar, kao objašnjenje dela koda, datum kada je kod pisan

ili ime autora. Postavljene oznaka komentara  oko iskaza, govore čitaču da ignoriše te iskaze. Da bi napravili
komentar, potrebno je da se tekst komentara obuhvati početnom i završnom oznakom komentara:

<! -- komentar -->

Za korektno prikazivanje specifičnih jezičkih karaktera unutar HTML strane, neophodno je da se web čitaču

naznači koji skup karaktera koristi. On se pojavjuje u dve verzije UTF-8 i UTF-16.

<style>...</style>

se koristi za definisanje stila. Njegovim korišćenjem utičemo na izgled pojedinih

HTML elemenata na stranici.

<link>

se koristi za definisanje veze (relacije) između HTML dokumenta i eksternog resursa. Najčešće

se koristi za definisanje šablona za stilove. Primer:

<base>

definiše podrazumevanu adresu ili podrazumevano odredište za sve linkove na stranici.

<script>

se koristi za skript jezike (npr. učitavanje JavaScript koda).

<meta>

obezbeđuje informacije o HTML dokumentu. Metapodaci se ne prikazuju na stranici, ali su

pogodni za parsiranje. Meta elementi se obično koriste za specifikaciju opisa stranice, ključne reči, informacije o
autoru stranice, poslednju izmenu na stranici i druge metapodatke. Metapodatke mogu koristiti pretraživači na
Internetu. Preporučljivo je da se unutar meta taga na vrhu HTML strane specificira koji skup karaktera se koristi, na
sledeći način:

Takođe, je potrebno prilikom snimanja .html dokumanta izabrati odgovarajuću enkripciju. Za notepad++ u

padajućem meniju Encoding je neophodno odabrati opciju Encode in UTF-8.

Primer 2

: Otvorite Netepad++ editor i upišite sledeći

sadržaj:

<!DOCTYPE html>
<html>

<head>

<title>Primer 2 </title>

</head>

<body>

Ovo je telo stranice
To će biti prikazano u web browser-u

<!--

Ovo je komentar
Može biti prikzan u više redova...
-->

</body>

</html>

Primer 3

: Otvorite Netepad++ editor i upišite sledeći

sadržaj:

<!DOCTYPE HTML >
<html>
<head>
<title>Vežba 1 - Moja prva web strana</title>
<meta http-equiv="Content-Type" content="text/html;

charset=utf-8" />

</head>
<body>
Dobrodošli na moju prvu web Stranu! Ja sam student

Petar Petrović.

</body>
</html>

HTML OZNAKE ZA FORMATIRANJE TEKSTA

S obzirom na to da najveći deo web stranice čini tekst, osnovni zadatak HTML-a je uređivanje teksta na

pogodan način. Kada se unosi neformatiran tekst u HTML dokument, nije bitno kako taj tekst unutar dokumenta
izgleda, već kako će izgledati kada se pokrene u web čitaču. Razlog se nalazi u činjenici da čitač ne prepoznaje
znakove za novi red (CR ili Enter) kao ispravne znake formatiranja. Svi čitači Weba ignorišu znakove za novi red,
odnosno za kraj reda (CR i LF) koje programi za obradu teksta umeću u HTML kod. Zato je za prelazak u novi red
neophodno koristiti oznaku za prelom reda <br>.

<br>

je oznaka za prelom reda, koja nalaže čitaču da pređe u naredni red, pa tek onda da prikaže ostatak

stranice. Za razliku od uparenih oznaka prazne oznake ne zahtevaju završnu oznaku.

Bez obzira koliko blanko znaka postavite unutar HTML koda, unutar web čitača će se on videti kao jedan

blanko znak. Zato, ukoliko želite više od jednog blanko znaka (space na tastaturi) morate da koristite znak za nelomivi
razmak

&nbsp

; na mestu gde želite da čitač prikaže veći razmak.

Primer 4 – Novi red, razmak i komentar

<title>Ovo je moja druga HTML strana</title>

</head>
<body>

<p>Ovo je prvi paragraf.</p>
<p>Ovo je drugi paragraf.</p>
<p>Ovo
je

treci

paragraf.</p>

<p>Prethodni tag odvaja tekst sa razmakom između redova.
Beline i
znak za novi red
se ignorišu.</p>
<br>Nov red obezbeđuje tag br.
<br>Ovo je prost tag, ne postoji kraj taga.
<br>Između redova ne postoji razmak.
<!--Završavamo drugi primer. Ovo je komentar i nece se

videti u browser-u-->
</body>
</html>

<p>...</p>

je oznaka za pasus. Najopštije grupisanje teksta vrši se u pasusima. Element za pasus zahteva

početnu oznaku, dok je krajnja oznaka neobavezna. Međutim, u cilju doslednosti, bolje je okružiti ceo tekst pasusa.

<center> i </center> -

Ako se drugačije ne naglasi tekst unutar HTML stranice je poravnat uz levu ivicu.

Centriranje teksta ili bilo kog drugog elementa stranice se dobija pomoću tagova <center>. Poravnanje teksta se može
izvršiti i pomoću atributa ALIGN, na sledeći način:

align="left"

align="center"

align="right"

<blockquote>...</ blockquote> -

HTML pasusi nemaju uvučeni prvi red i podrazumevano su poravnati

ulevo. HTML oznaka blockquote formatira tekst uvlačenjem ili povećavanjem margina na levoj i desnoj strani teksta
koji je blok čitača.

<div>...</div>

su oznake za dobijanje novog odeljka. Tekst koji predstavlja odeljak se od ostalog teksta

odvaja novim redom bez razmaka. Ovaj tag može imati atribut za pozicioniranje

ALIGN

sa istim vrednostima kao tag

<p>.

Primer 5 – Formatiranje pasusa

<title>Formatiranje pasusa</title>

</head>
<body>

<p>Ovo je paragraf.</p>
<p align=right> Ovaj paragraf će biti spušten dva

reda i poravnat sa desne strane.</p>

<p align=center> Ovaj paragraf će biti spušten dva

reda i centriran.</p>

<p align=justify> Ovaj paragraf će biti spušten dva

reda i poravnat sa obe strane.</p>

<p> Ovaj paragraf će biti spušten dva reda i

poravnat sa leve strane.</p>

<div>Ovo je odeljak.</div>
<div align=right> Ovaj odeljak će biti spušten jedan

red i poravnat sa desne strane.</div>

<div align=center> Ovaj odeljak će biti spušten

jedan red i centriran.</div>

<div align=justify> Ovaj odeljak će biti spušten

jedan red i poravnat sa obe strane.</div>

<div> Ovaj odeljak će biti spušten jedan red i

poravnat sa leve strane.</div>

<blockquote>Ovaj tekst će biti uvučen u odnosu na

ostatak teksta.

<br>I svi naredni će biti uvučeni sve do kraja

taga.</blockquote>

<pre>

Ovaj text
će izgledati
kao što je
napisan

</pre>
<!--Vrsta fonta je Courier New, a veličina 2.

</body>
</html>

Formatiranje teksta može se obaviti unošenjem početne oznake formata na sam početak teksta. Najčešće

korišćene oznake formata su:

<b>...</b>

za prikazivanje teksta podebljanim fontom.

<strong>…</strong>

slično prethodnoj oznaci.

<i>...</i>

za prikazivanje teksta iskošenim fontom.

<em>…</em>

za naglašen tekst.

<u>...</u>

za prikazivanje teksta koji je podvučen.

Atribut size služi za promenu veličine slova i može se kretati u opsegu od 1 do 7 (mogu se zadati vrednosti od

-7 do +7). Ova veličina, zapravo predstavlja dimenziju fonta u odnosu na veličinu osnovnog fonta.

<cite> </cite>

Oznake citata ističu tekst, obično kurzivnim slovima.

<code> </code>

Ove oznake prebacuju tekst koji obuhvataju u neproporcionalni (tzv. mono) font, kao

sto je Courier, da bi istakle tekst. Koriste se da bi označili HTML kod u dokumentu sa HTML primerom.

<q> </q>

Oznake navoda okružuju tekst znacima navoda.

Pre nego što je CSS (eng. Cascading Style Sheet) postao alat za formatiranje po izboru za web dizajn, o čemu

će biti više reči kasnije, HTML je obezbeđivao osnovne načine formatiranja teksta i podešavanja izgleda na ekranu.
Neki od tih načina su opstali i u verziji HTML5, dok su drugi zastareli (moderni pretraživači ih ne podržavaju).

Primer 6 – Formatiranje fonta

<title>Formatiranje fontova </title>

</head>
<body>

<!--velicinu fonta možemo menjati tagovima h1...h6
oni se koriste za naslove, pa će tekst biti prikazan u

novom redu-->

<h1>Ovo je najveći font</h1>
<h6>Ovo je najmanji font</h6>
Podrazumevana veličina je h3.

<font color="#0000FF">
<br>Ovo je podrazumevana veličina 3 i podrazumevana

vrsta Times New Roman

<font color=red face="Comic Sans MS" size=7>
<br>Ovo je font Comic Sans MS i najveća veličina

7 </font>

<br>Osobine ovog teksta su vraćene na

podrazumevane vrednosti osim boje

</font>
<br>Sada sve osobine imaju podrazumevane vrednosti
<p>Jos neke osobine fonta:
<br><b>Boldiran tekst</b>
<br><strong>Boldiran tekst</strong>
<br><i>Iskošen tekst</i>
<br><em>Iskošen tekst</em>
<br><u>Podvučen tekst</u>
<br><sub>Samnjen i spušten tekst (index)</sub>
<br>x<sub>1</sub>
<br><sup>Smanjen i podignut tekst (stepen)</sup>
<br>x<sup>2</sup>
<br><big>Povećan font za 1</big>
<br><small>Smanjen font za 1</small>

</body>
</html>

SPECIJALNI ZNACI

Da bi se specijalni znaci prikazali u prozoru čitača, u HTML kod se mora uneti numerička vrednost koja

predstavlja taj simbol. Numerička vrednost zapravo predstavlja ASCII kod željenog simbola. Čitaču Weba ćete reći da
prikaže simbol tako što ćete ispred njegove numeričke vrednosti staviti znakove & i #, a posle koda tačku i zarez (;).
Znači, da biste rekli čitaču da znak © prikaže na stranici, treba da unesete © u HTML kod Web stranice.
Tekstualni zapis simbola (©) je ©

&nbsp

daje jedno blanko mesto. Ako se želi 8 blanko razmaka jednostavno se napiše osam ovakvih naredbi

jedna za drugom odvojenih tačkom-zarezom:          

&lt

< (znak manje),

&gt

> (znak veće),

&amp

znak &

HORIZONTALNA LINIJA

Postavljanje horizontalne linije na Web stranicu može se obaviti primenom oznake <hr> na sledeći način.

Raspoloživi atributi za definisanje izgleda horizontalne linije su:

align

određuje čitaču da poravna horizontalnu liniju uz jednu od ivica ili da je postavi na sredinu prozora
aplikacije čitača.

size

određuje debljinu horizontalne linije u pikselima.

width

atribut definiše dužinu linije. Vrednost ovog atributa se može zadavati u pikselima (npr.
width=“300px“ ili samo width=“300“) ili u procentima širine prozora čitača. Ako zadate vrednost
30% (npr. width=“30%“), čitač će nacrtati horizontalnu liniju dužine jednaku 1/3 širine prozora čitača.

noshade

ovaj atribut nalaže čitaču da prikaže liniju bez senke.