1

1. Uvod i istorija

Internet je postao deo svakodnevnog ţivota savremenog čoveka i sve više smo svesni

značaja upotrebe tog moćnog sredstva. Reč je nastala kao sloţenica od INTERnational

NETwork (meĎunarodna mreţa). To je skup računara koji su povezani širokom mreţom

komunikacijskih linija. Tako umreţeni računari meĎusobno komuniciraju i razmenjuju

podatke. Mreţa se u stvari sastoji od računara, telekomunikacijskih linija, ljudi koji je koriste

i ureĎuju i informacija koje se razmenjuju preko nje. Na taj način je nastao svetski

informacioni sistem.

Pronalazak interneta se moţe porediti sa Gutenbergovom mašinom za štampanje iz 17.

veka kao najvećim pronalaskom tog vremena. Pored elektronskih izdanja knjiga i časopisa,

internet se koristi za zadovoljenje različitih potreba informisanja ljudi, zabave, komunikacije,

elektronskog poslovanja itd. Sa današnjim tempom ţivota internet je postao potreba za brz i

efikasan pristup informacijama i obavljanja mnogih poslova koristeći prednosti koje nudi.

Kako je ureĎen internet? Ova moćna mreţa nema vlasnika, ali postoje nezavisne

organizacije koje su zaduţene za standardizaciju, kako bi se komunikacija obavljala pomoću

istih protokola.

1.1. Nastanak interneta

Internet je nastao šezdesetih godina 20. veka, u vreme hladnog rata, kao projekat

američkog ministarstva odbrane ARPANET za prenos vojnih i vladinih podataka u slučaju

nuklearnog rata. PredviĎeno je da to bude decentralizovana mreţa računara koja bi mogla da

funkcioniše u uslovima delimičnog uništenja. Oktobra 1968. u istraţivačkom institutu

Stanford započet je projekat sa prvobitnim ciljem da se poveţu računari na velikim

razdaljinama istog ranga, koji mogu da preuzmu meĎusobne funkcije u slučaju „ispadanja“ iz

mreţe bilo kog drugog računara.

Vinton Serf je još u vreme svojih studentskih dana u saradnji sa ekipom koju je

finansirala Vlada SAD-a, zamislio i usvršio nacrt novog načina komuniciranja. Ta

komunikacija je bila rezervisana samo za malu grupu ljudi sa univerziteta i iz vojnih struktura.

Sredinom sedamdesetih godina dolazi do povezivanje više manjih računarskih mreţa u

jedinstven sistem. Ta veza izmeĎu vladinih i univerzitetskih računara se kasnije proširuje i

razvija u internet. Dok početkom osamdesetih godina pristup imaju uglavnom samo studenti

univerziteta od devedesetih godina dolazi do naglog razvoja mreţe zahvaljujući mogućnosti

povezivanja personalnih računara.

Uključivanje u mreţu je jednostavno i moţe se izvesti na više načina: telefonski,

kablovski... Povezivanje personalnog računara je sa dobavljačem (provajderom). Dobavljač

obezbeĎuje vezu neposredno ili putem priključka na jednu od kičmenih deonica (backbone)

koje povezuju razne servere na Internetu. Serveri su programi koji obezbeĎuju resurse na

Internetu, a klijenti su programi koji omogućuju korišćenje tih resursa (posrednik izmeĎu vas

i vašeg računara). Računar u mreţi na kom se nalaze server programi zove se host (domaćin)

Internet nam nudi pristup informacijama u bibliotekama, vladinim i komercijalnim

organizacijama bilo gde i bilo kad, korišćenje elektronske pošte (kad ste poslednji put dobili

čestitiku za Novu godinu klasičnom poštom?), stavljanje svojih informacija na raspolaganju

drugima koji su na mreţi, učestvovanje u diskusionim grupama na razne teme, kupovanje

robe iz kuće itd.

Najpopularniji deo Interneta je Web World Wide – WWW koji se često zove samo

Veb (Web) (paukova mreţa, tkanje). To je kolekcija tekstualnih i multimedijskih datoteka

povezanih hipertekstom. Hipertekst je način organizacije materijala koji prevazilazi

ograničenja tradicionalnog teksta koji je organizovan linearno. Organizacija hiperteksta se

zasniva na ideji pronalaţenja podataka pomoću specijalnih veza u elektronskom obliku –

hiperveza (hyperlink) i to je način pristupa informacijama na internetu. Taj način podseća na

2

paukovu mreţu, pa je zato i dobio u nazivu reč web. Svaki dokument ima jedinstveni URL

(Uniform Resource Locator – jedinstvena oznaka resursa), tj. adresu koja ukazuje na mesto

gde se nalazi na Internetu.

1.2. Kako je nastao WWW i kako radi?

Sredinom 1960-ih Ted Nelson je skovao reč "hipertekst" da opiše sistem ne

uzastopnih veza izmeĎu teksta. Ideja je bila da se krećete izmeĎu tekstualnih referenci, bez

potrebe da čitate materijal u linearnom nizu. Tako bi deo informacije doveo do srodne

informaciju u lancu linkova prikupljajući podatke iz izvora rasutih širom više dokumenata.

Tek petnaest godina kasnije, Tim Berners-Li, u Evropskoj laboratoriji za fiziku (CERN), je

napisao program pod nazivom "Enquire-Within-Upon-Everything" koji je omogućavao da

veze budu izmeĎu proizvoljnih čvorova teksta u dokumentu. Svaki čvor ima identifikator

naslova i listu dvosmerne veze kako bi čitaoci mogli da skaču sa jednog dela dokumenta u

drugi aktiviranjem tekstualne veze.

1989. godine fizičari Tim Berners Lee i Robert Kajo, saradnici evropskog centra za

nuklearna istraţivanja (CERN) u Ţenevi, usavršili su hipertekstualni sistem i izumeli WWW,

koji će podstaći širenje informacija i omogućiti širokoj publici pristup internetu i njegovu

brzu ekspanziju. Tema je bila metoda za pronalaţenje dokumenata na Internetu pomoću

hiperveza – hipertekst označen drugom bojom i podvučen, klikom na njega otvara se novi

dokument. Cilj projekta je bio da omogući razmenu informacija istraţivača iz oblasti fizike

visokih energija. Probni rad je započeo marta 1991.

Za korišćenje ovog servisa interneta razvija se posebni softver, čitači – browsers.. Prvi

grafički čitači Web-a nastaju 2 godine kasnije. Mosaic je čitač koji je razvio Marc Adreessen

iz NCSA (Nacionalni centar za primenu superračunara) u Šempejnu, SAD. 1994. on osniva

kompaniju za proizvodnju komercijalne verzije Mosaic-a, Netscape Navigator

Naglim širenjem veb postaje glomazan da bi CERN njime upravljao i jula 1994.

osniva se organizacija za odreĎivanje standarda i upravljanje širenjem veba, WWW

Consortium, ili W3C www.w3.org

Veb se zasniva se na stranicama programiranim pomoću HTML-a (Hyper Text

Markup Language – jezik za označavanje hiperteksta) Markup language kombinuje tekst i

dodatne informacije o tekstu. Te informacije su na primer o strukturi teksta, ili prezentaciji i

one se izraţavaju korišćenjem oznaka koje se mešaju sa primarnim tekstom. Najpoznatiji

takav jezik je HTML. Originalno markup je korišćeno u izdavačkoj industriji za

komunikaciju izmeĎu autora, korektora i štampara.

HTML dokument je napravljen programima za obradu teksta i koristi se neka vrsta

upravljačkog koda na osnovu kog se prikazuje dokument. U njemu postoje rezervisane reči na

osnovu kojih čitač veba zna kako da prikaţe informacije izmeĎu tih oznaka i tako prevodi

HTML kod u strane popunjene tekstom, bojom i grafikom.

Rekli smo da svaki dokument na vebu ima URL Uniform Resource Locator –

jedinstvena oznaka resursa (zabluda je da je to adresa veb lokacije – web site, jer je veb

stranica samo jedan tip URL adrese).

URL ima oblik <protokol>://<domen>/<putanja>

Protokol (skup postupaka, pravila) moţe biti:

HTTP (HyperText Transfer Protocol) za komunikaciju veb servera sa čitačima (to je

tip veb adrese) i on radi u saradnji sa TCP protokolom koji obezbeĎuje pouzdan

prenos podataka izmeĎu servera i klijenta. Primer: http://www.vtsns.edu.yu

FTP (File Transfer Protocol) za prenos datoteka izmeĎu servera i klijenta (tip ftp

adrese). Primer: ftp://ftp.download.cg.yu/Mp3

Mailto je protokol koji označava adresu elektronske pošte,ali ga korisnik ne vidi, vidi

se u izvornom kodu web strane (tip Email adrese koja ima poseban oblik URL

mailto:nalog@domen

3

News označava diskusionu grupu Useneta, isto je skriven. Primer:

news://news.neobee.net/alt.books.reviews

Gopher (prevaziĎen – za preuzimanje datoteka sa lokacija zvaničnih institucija);

Domen odreĎuje računar na internetu kome pristupate i on sadrţi ime servera koji

obično ima naziv kompanije (yahoo.com) ili organizacije (redcross.org), drţavne ustanove

(whitehouse.gov)

Recimo URL ftp://ftp.proaxis.com i http://www.proaxis.com ukazuju na isti računar,

ali su različiti resursi, tj. protokoli. Postoji više nivoa domena: domen drugog nivoa, domen

trećeg nivoa i domeni pojedinih zemalja. Sa ova tri se uglavnom zadovoljavaju sve potrebe za

adresama, pa se viši nivoi retko sreću. Sufiks domena je domen najvišeg nivoa (com, org,

gov, uk, yu ...) Primer: vtsns.edu.yu – vrhunski domen je yu, drugi nivo domena je edu.yu, a

treći vtsns.edu.yu

Domen na internetu se dobija kupovinom internacionalnih domena (com, net,..) kod

ovlašćene organizacije. Neki sajtovi nude naziv domena besplatno uz ograničenja, recimo da

je 3. nivoa, što se teţe pamti (sajt www.tripod.com nudi takav domen). Za obezbeĎenje

nacionalnog domena treba se obratiti nacionalnoj organizaciji koja to radi za domene 1. i 2-

nivoa (za dodeljivanje https://www.rnids.rs/ Za domaće domene obraćamo se svom

provajderu, obično nude 1 MB prostora.

Putanja ukazuje na pojedinačnu veb stranicu i u putanji imamo tačno usmeravanje na

odreĎenu stranicu (recimo preko foldera u koji je grupisano više stranica tematski sličnih).

Primer: http://www.eunet.rs/prezentacije/personal.phtml

U putanji se moţe izostaviti http, ako se stavlja www (ili obrnuto) jer čitač sam dodaje

po potrebi, pošto ih prepoznaje.

U razvoju veba moţemo razlikovati više faza, od Web 1.0, pa do Web 5.0, za sada.

Web 1.0 je prva generacija veba kreirana 1989. (Tim Berners-Lee). To je bio skup

podataka ponuĎen korisniku u obliku jednosmernog protoka informacija. Naziva se još “read-

only web“, jer je nudio korisniku samo mogućnosti traţenja i čitanja informacija. Sadrţaji su

bili statički sa veoma ograničenom interakcijom i učešćem u kreiranju sadrţaja.

Web 2.0 „read-write web” predstavlja drugu generaciju veba čija je glavna

karakteristika interakcija, odnosno dvosmerna komunikacija. Tako je internet od informacione

mreţe postao informaciona platforma. Izraz Web 2.0 prvi je upotrebio DiNucci (DiNucci, D.,

„Fragmented Future”, 1999), a ušao je sasvim u upotrebu 2004. godine posle prve Web 2.0

konferencije “O'Reilly Media and Media Live” odrţane u San Francisku. Web 2.0 je postao

moćno sredstvo koje omogućuje učešće korisnika u kreiranju dinamičkog sadrţaja.

Treća faza Web 3.0 “semantic web” se zasniva na semantičkom povezivanju, odnosno

mogućnosti da se prave logičke veze izmeĎu informacija i da veb aplikacije razumeju šta je

korisniku bitno, nudeći upravo takve sadrţaje. Taj semantički veb traţi efikasnije rešenja za

pronalaţenje informacija prilagoĎeno njegovim potrebama. On omogućuje bolju saradnju

izmeĎu korisnika i ureĎaja i definiše se kao “read-write-execute web”

Web 4.0 – “symbiotic web” moţe se posmatrati kao ultra inteligentni elektronski

izvršilac koji je svuda prisutan. To je veb prilagoĎen mobilnom okruţenju. Web 4.0 povezuje

sve ureĎaje iz stvarnog i virtuelnog sveta u realnom vremenu “read-write-concurrency web”

(čita, piše i usklaĎuje). Najjednostavniji primer je lociranje ključeva od kola “guglovanjem”

svoje kuće.

Web 5.0 još nije do kraja definisan, ali bi trebalo da omogući emocionalnu interakciju

izmeĎu korisnika i računara, zato se i naziva “emotional web”. Sada je veb “emocionalno”

neutralan, što znači da ne opaţa šta korisnik oseća. Koristeći prepoznavanje oblika (lica,

glasa), i najpogodnijeg ureĎaja, veb će moći da vidi kako se osećate i da pruţi najbolju

sadrţaj.

4

1.3. Ostali servisi interneta

Elektronska pošta je gotovo isto široko u upotrebi kao veb. To je elektronski oblik

meĎuljudske komunikacije. Dokumenti se šalju s jednog računara na drugi i vreme isporuke

se meri sekundama. Dokumenti su obično tekstualne datoteke, ali mogu biti i druge vrste

(slike, animacije itd.), a mogu se uz osnovnu poruku slati i pridruţene datoteke (slika ili duţi

tekst)

FTP – File Transfer Protocol (protokol za prenos datoteka) predtavlja način

prenošenja datoteka putem interneta. Nastao je pre veba i koristi se za brzo preuzimanje

datoteka sa Internetovih FTP lokacija. Postoje dva načina prenosa datoteka:

Download – prenos datoteka sa udaljenog host računara na vaš računar

Upload – prenos datoteka sa vašeg računara na drugi računar, tj. internet

ftp.microsoft.com

Diskusione grupe (Usenet) su nastale kad i internet. One se obrazuju prema temi ili

oblasti interesovanja i finkcionišu kao virtuelni okrugli sto. Svako iz grupe moţe da postavi

poruku i svako moţe da je pročita

Četovanje (chat) – ćaskanje je virtuelna pričaonica koja omogućuje ţivu komunikaciju

u realnom vremenu. Osobe prijavljene na serveru mogu da unose poruke koje momentalno

vide svi ostali. Obično su tekstualne poruke, ali neki programi omogućuju korišćenje zvuka i

slike.

Društvene mreže – zajednica ljudi ili organizacija istih interesovanja koji su povezani

interakcijskim vezama. Danas besplatni on-line servisi nude korisnicima raznovrsne vidove

komunikacije i mogućnost sopstvene prezentacije.

Cloud Computing ili “računarstvo u oblaku” je noviji servis interneta koji predstavlja

omogućavanje pristupa raznim računarskim resursima. To je u stvari korišćenje putem mreţe

udaljenih servera koji vrše usluge čuvanja podataka, njihovim upravljanjem i obradom,

zamenjujući lokalne servere ili personalne računare. Cloud computing se moţe uporediti sa

snabdevanjem električnom energijom, gasom, ili pruţanjem telefonskih i poštanskih usluga.

Sve ove usluge su predstavljene korisnicima na jednostavan način koji je lako razumeti, bez

potrebe poznavanja načina pruţanja usluge. Slično tome, cloud computing nudi programerima

i korisnicima računarskih aplikacija apstraktni pogled na usluge koji pojednostavljuje i

ignoriše mnoge detalje o unutrašnjem radu. Takva ponuda internet servisa naziva sa

„oblakom“. Tipična cloud computing usluga je dostava zajedničkih poslovnih aplikacija na

mreţi kojoj se pristupa sa Veb servisa ili softvera kao što su veb čitači, dok se aplikativni

softver i podaci čuvaju na serverima „u oblacima“.

1.4. “Relikvije” Interneta

U početku nastanka Interneta većina informacija je bila u obliku teksta bez vizuelne

privlačnosti. Za pretraţivanje takvog teksta korišćen je sistem Gopher. Prvi put je razvijen na

Univerzitetu u Minesoti, čija je maskota pacov torbar (Golden Gopher). Gopher je bio računar

gde su bile smeštene tekstualne informacije i te lokacije su koristili univerziteti, vlada i sl.

Danas nestaju, ne aţuriraju se, ali još mogu biti korisne (izvodi iz vesti CNN-a, Kongresna

biblioteka SAD-a). http://www.yahoo.com/Computers_and_Internet/Internet/Gopher/

Korišćeni čitači su bili Jughead, Veronica

BBS – bulletin board system (sistem oglasnih tabli) su bili pojedinačni serveri koji su

imali informacije od vaţnosti za neku zajednicu. Korisnici su pristupali kao što sad pristupaju

Internetu, ali većina nije bila deo Interneta, već je samo bila povezana sa korisnicima. Danas

ih koriste neke ustanove za internu komunikaciju

Telnet je postupak kontrolisanja drugog računara sa udaljenosti. Računar se moţe

povezati sa udaljenim serverom i kontrolisati ga pomoću nekog programa. Koristio se za

daljinsku kontrolu web servera. Telnet server je za razliku od BBS-a povezan sa Internetom.

Hiper veze ovih relikvija interneta uglavnom više ne funkcionišu.

5

2. W3C – World Wide Web Consortium

W3C je organizacija osnovana 1994. u cilju razvijanja zajedničkih protokola na Webu.

Osnovana je dogovorom izmeĎu Massachusetts Institute of Technology (MIT) i European

Organization for Nuclear Research (CERN), sa podrškom US i Evropske komisije. Osnivač

ove organizacije je Tim Berners-Lee, pronalazač veba. Zadatak W3C je postavljanje

Standarda za Web koji se nazivaju W3C Recommendations (preporuke). W3C ţeli da Web

bude pristupačan svim korisnicima bez obzira na razlike u kulturi, obrazovanju,

sposobnostima, resursima i fizičkim ograničenjima. W3C takoĎe koordinira svoj rad sa

mnogim drugim organizacijama za standarde, kao što su Internet Engineering Task Force,

Wireless Application Protocols (WAP) Forum i Unicode Consortium.

W3C ima centrale na tri univerziteta:

Massachusetts Institute of Technology, U.S.

The French National Research Institute, Europe

Keio University in Japan

Pošto je Web toliko značajan nijedna organizacija sama ne bi trebalo da ima kontrolu

na njegovu budućnost. Zato W3C funkcioniše kao organizacija članova. Neki od poznatih

članova su:

IBM

Microsoft

America Online

Apple

Adobe

Macromedia

Sun Microsystems

Najvaţniji rad W3C je razvoj Web specifikatija (nazvan "Recommendations –

preporuke") koje opisuju protokole komunikacije (HTML, XML i druge). Svaka W3C

preporuka je razvijena od grupe članova i pozvanih eksperata. Grupa dobija polazna uputstva

od kompanija i drugih organizacija i kreira radni nacrt i konačno predloţenu preporuku.

Preporuka se potvrĎuje od strane članova i direktora W3C za formalno odobrenje kao W3C

Recommendation.

2.1. WEB TEHNOLOGIJE I W3C

Web tehnologije koje se koriste su HTML, CSS, JavaScript, DHTML ...

HTML (Hypertext Markup Language) je strukturalni jezik za kreiranje hipertekst

dokumenata na webu. Hipertekst je aktivan tekst, tekst koji sadrţi veze (linkove) ka drugim

dokumentima. On je ASCII fajl, tako da se moţe editovati u bilo kom programu za obradu

teksta.

JavaScript je jezik za skriptovanje koji se moţe umetnuti u HTML kod i koji moţe

direktno interpretirati pretraţivač. Mnogi interaktivni elementi (roloveri isl.) kreiraju se ovim

jezikom.

CSS Cascading Style Sheets (Listovi kaskadnog stila) je proširenje HTML-a koje daje

kontrolu pri formatiranju i dizajniranju tekstualnog sadrţaja sajta. Pored toga omogućena je

kontrola nad izgledom čitavog sajta pomoću izmene CSS master fajla, a mogu se koristiti i

slojevi.

DHTML (Dynamic HTML) predstavlja običan HTML zajedno sa CSS i JavaScript-

om. Cilj je da se omogući kreiranje sajtova sa više animacija

XML – Extansible Markup Language je prošireni jezik za označavanje i dizajner

kreira markere pomoću kojih opisuje sadrţaj sajta. On ima suštinski značaj za dinamičke

sajtove (recimo jednostavnom izmenom master fajla preformatira se odreĎeni objekat na

čitavom sajtu.

6

2.2. HTML verzije

HTML 2.0 je prva verzija razvijena od strane Internet Engineering Task Force HTML

Working Group 1996. Svi današnji čitači se zasnivaju na novijim verzijama, pa ovu ne

treba proučavati više.

HTML 3.2 je realizovan kao W3C preporuka 1997. Dodate su karakteristike kao

fontovi, tabele, apleti, slike okruţene tekstom, stepeni i indeksi na postojeći HTML

2.0 standard. Tag <font> koji je dodat ovim standardom uneo je nepotrebnu

komplikaciju u vaţnom zadatku odvajanja sadrţaja HTML (teksta) od njegovog

prikaza (stila) Zato je očekivano da će biti uklonjen iz buduće verzije HTML.

HTML 4.0 je nastao kao W3C preporuka 18.12.1997. Dodatne korekcije su izvršene

24.04.1998. Najvaţnija karakteristika HTML 4.0 je uvoĎenje liste stilova (CSS).

HTML 4.01 je nastao kao W3C preporuka 24.12.1999. HTML 4.01 je minimalna

korek-cija HTML 4.0.

XHTML 1.0 je verzija HTML, koja preformuliše HTML 4.01 u XML. XHTML 1.0 je

usvojen kao W3C preporuka 20.01.2000. kao prva velika izmena HTML od 1997. i

vrlo vaţan korak u kreiranju standarda koji omogućuje bogatije web strane na širem

području upotrebe web čitača, kao što su desktop PC, mobilni ureĎaji i telefoni.

XHTML je XML aplikacija koja se oslanja na HTML 4.01

HTML 5 je poslednja verzija nastala sa osnovnim ciljem unapreĎenja HTML-a, kao i

podrška za najnovije multimedijalne sadrţaje. HTML5 se moţe smatrati mešavinom

karakteristika i specifikacija HTML-a i XHTML-a. Kao standard je preporučen

oktobra 2014. od strane W3C organizacije. HTML5 omogućuje prikaz bogatijeg

sadrţaja bez potrebe dodatnih alatki, kao što su Flash, Java i Silverlight. Podrţava

animaciju, grafiku, muziku, video, i sloţene veb aplikacije. Moţe da radi na PC,

tabletima, smart telefonima ili televizorima

7

3. HTML

HTML – jezik za označavanje hiperteksta na internetu (Hyper Text Markup

Language) je standardni programski jezik interneta. HTML dokument je fajl koji se moţe

kreirati bilo kojim tekst editorom. To je tekstualna datoteka, koja sadrţi oznake (markup

tags). Te oznake koristi veb čitač za prikaz veb stranice. HTML fajl mora da ima ekstenziju

.htm ili .html (.htm je varijanta kod ograničenja 8.3 u imenu fajla koje je postojalo u starijim

verzijama korišćenih softvera)

3.1. Osnovni elementi HTML – Hyper Text Markup Language

Osnovna komponenta strukture teksta je elemenat (zaglavlje, paragraf, tabela, lista

itd.) Za označavanje elementa koriste se oznake (tags) koji ukazuju čitačima – browsers da se

radi o elementu koji moţe da sadrţi tekst, druge elemente ili oboje i kako da prikaţu stranicu.

Tagovi se sastoje od dve uglaste zagrade <ime taga> i obično su u paru za označavanje

početka i kraja tag instrukcije, npr. <H1> ……</H1>

Neki elementi mogu imati atribute kao dodatne informacije, recimo poravnanje teksta

i sl. Svaki HTML dokument mora imati neke standardne tagove, kao head i body. Head

sadrţi naslov, a body tekst koji se sastoji od paragrafa, spiskova itd.

Primer: <html>

<head>

<title> ovo je naslov </title>

</head>

<body>

<h1> ovo je zaglavlje tipa 1 </h1>

<p> ovo je paragraf u kome pišemo tekst i to je prvi paragraf</p>

<p> ovo je drugi paragraf</p>

</body> </html>

Obavezni tagovi su html, head, title, body i njihovi završni. Neki čitači će tačno

oblikovati tekst i bez njih, ali neće svi. U vašem čitaču moţete videti izvorni kod web stranice

koristeći iz menija View opciju View Source

Značenje tagova:

HTML govori da fajl sadrţi informaciju kodiranu HTML-om (ekstenzija html

pokazuje isto to, a ako ste ograničeni na 8.3 onda se koristi htm)

Head ukazuje na prvi deo vašeg dokumenta koji sadrţi naslov

Title sadrţi naslov i identifikuje sadrţaj dokumenta u opštem kontekstu. On se obično

prikazuje na vrhu prozora čitača i treba da je kratak i jedinstven. Pretraţivači ga koriste za

identifikaciju stranice (uobičajeno oko 64 karaktera)

Body je drugi i najveći deo dokumenta koji se prikazuje u tekstualnom prostoru prozora čitača

Headings – to su zaglavlja i ima ih 6 nivoa. Obično su većeg i poodebljanog fonta u

odnosu na ostali tekst. Sintaksa je <hn> tekst zaglavlja </hn> n=1,6 i ne treba preskakati, već ići po redu.

Paragraph <p> ukazuje na početak novog paragrafa i bez obzira kako kucate tekst u

njemu (ostavljate prazna mesta, prelazite u novi red i sl.) sve što ide do sledeće oznake za

paragraf prikazuje se kao jedan paragraf. Znak za kraj se moţe izostaviti jer čim naiĎe na novi

paragraf tag to znači da se prethodni završio, ali ipak ga koristite zbog usaglašenosti sa

XHTML. Ako koristite atribute, onda ih treba zatvarati. Atributi su za poravnanje

align=“center”, align=“right”, align=“left” (poslednje se ne mora unositi, jer je default)

<br> je tag za prekid reda bez viška praznih redova koji se javlja kod novog paragrafa, tj taga <p> Zgodno je za adrese.

8

Tag <pre> (unapred formatiran tekst) sluţi za generisanje teksta fiksne širine, tj. on

izgleda isto kao u izvornom kodu. Moţe se koristiti atribut width koji odreĎuje maksimalan

broj karaktera u redu. U njemu se mogu koristiti hiper veze, ali treba izbegavati druge tagove.

Ukoliko koristite u tekstu specijalne oznake koje u HTML-u imaju posebno značenje, kao <,

>, & za njih se koristi HTML kod. Recimo za < je &lt, za > je &gt, za & je &amp

<blockquote> je tag za izdvajanje dela teksta u posebnu celinu, obično menjajući margine.

<hr> je tag koji prikazuje horizontalnu liniju širine prozora čitača. Recimo, nesto

odvajamo. Moţe se birati i debljina i širina. Širina se izraţava u procentima širine prozora. Recimo: <hr size=“4” width=“40%”>. Ovaj tag nema završnog para.

<!---> je tag za komentar koji se ne prikazuje

Formatiranje teksta

<b> Definiše podebljan tekst

<big> Definiše povećan tekst

<em> Definiše istaknut tekst

<i> Definiše italic tekst

<small> Definiše umanjen tekst

<strong> Definiše pojačan tekst

<sub> Definiše spušten tekst

<sup> Definiše podignut tekst

<ins> Definiše umetnut tekst

<del> Definiše izbrisan tekst

Atributi

Tagovi mogu imati atribute. Oni daju dodatne informacije. Recimo tag koji definiše tabelu

<table> moţe da sadrţi atribut koji kaţe da tabela nema okvir <table border="0"> Atributi

uvek dolaze u paru ime/vrednost: ime="vrednost". Oni se uvek stavljaju u početni tag

elementa. Vrednosti atributa treba da su uvek pod navodnicima, obično duplim, a moţe i

jednostrukim. U nekim situacijama, kad sama vrednost atributa sadrţi navodnike, treba

korisititi jednostruke: name='John "ShotGun" Nelson'

Tagovi <p> i <h1,...6> mogu da imaju atribut:

. align sa vrednostima “left”, “right”, “center”, “justify”

Tag <body> moţe da ima atribute:

. bgcolor (boja pozadine)

. text (boja teksta)

. link, alink, vlink (boja neaktivnog, aktivnog i posećenog linka)

. background (pozadinska slika) sa vrednosti: “file_name” (ime slike)

U tagu <body> moţemo zadati boju pozadine koristeći šestocifreni heksadekadni broj,

gde su svake dve cifre komponente RGB modela boja, ili tri broja za RGB model ili

navoĎenjem imena boje. Vrednosti za svaku komponenentu idu od 00-FF, tj. u dekadnom

sistemu od 0-255

Na primer:

<body bgcolor="#000000">

<body bgcolor="rgb(0,0,0)">

<body bgcolor="black">

Background atribut odreĎuje pozadinsku sliku. Vrednost je URL slike. Ako je slika

manja od pprozora čitača, ponavljaće se dok ga ne popuni.

Primer:

<body background="clouds.gif">

<body background="http://www.w3schools.com/clouds.gif">

URL moţe biti relativan ili apsolutan. Ako koristimo pozadinsku sliku treba da vodimo

računa o sledećim stvarima:

9

Da li se dugo učitava?

Da li je u skladu sa ostalim slikama na strani?

Da li je u skladu sa bojom teksta?

Da li izgleda dobro kada se ponavlja?

Da li će odvući paţnju od teksta?

bgcolor, background, tekst atributi u <body> tagu se ne koriste u HTML 4 i XHTML. W3C

ih ne preporučuje, već umesto njih Style sheets (CSS)

Tag <hr> moţe da ima atribute:

. width

. size sa vrednosti “% piksela”,

. noshade sa vrednsti “noshade”

. align sa već pomenutim vrednostima

Posebno ćemo se pozabaviti atributom style. To je atribut koji odreĎuje stil

pojedinačnog elementa iz CSS tehnologije. CSS razlikuje 3 načina definisanja stilova:

spoljni, koji se uvozi kao External style sheet i sluţi za odreĎivanje izgleda

celog veb sajta, tj. svih njegovih stranica;

unutrašnji Internal styling koji koristi <style> element u HTML <head>

odeljku i odreĎuje izgled jedne strane;

unutar linije, Inline styling koji se koristi da primeni jedinstven stil na

pojedinačan HTML elemenat

Ovaj atribut se definiše pomoću vrednosti nekog od svojstva elementa. Njegova

sintaksa glasi:

style="property:value;"

Evo nekoliko primera za svojstva čije se vrednosti mogu dati

properties

“background-color=…;” boja pozadine

“color= …;” boja teksta

"font-family:verdana;“ font

"font-size:300%;" velicina slova

"text-align:center;“ poravnanje teksta

i kako se primenjuju:

Primer 1

<body style="background-color:lightgrey;">

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

</body>

Primer 2

<h1 style="color:blue;">This is a heading</h1>

<p style="color:red;">This is a paragraph.</p>

Primer 3

<h1 style="font-family:verdana; font-size:300%;">This is a heading</h1>

<p style="font-family:courier; font-size:160%;">This is a paragraph.</p>

10

3.2. HTML, XHTML, HTML5

HTML-je počeo kao vrlo jednostavnim jezikom za izradu veb stranica. XHTML je

nastao sa razvojem veba, kada su programeri uvideli da je potrebno nešto više HTML 4.

Stroga verzija XHTML (eXtensible HyperText Markup Language) je smatran mnogo

preciznijim i predvidivim od HTML 4. Evo nekih razlika izmeĎu HTML-a i XHTML-a, koje

treba uvaţiti

XHTML elementi moraju biti tačno “ugnjeţdeni”

XHTML elementi moraju biti uvek zatvoreni odgovarajućim parom

XHTML elementi se moraju pisati malim slovima

XHTML dokumenti moraju imati korenski elemenat

Primer za 1. (pravilno ugnjeţdavanje)

<b><i>This text is bold and italic</b></i> nepravilno

<b><i>This text is bold and italic</i></b> pravilno

Primer za 2. (svi tagovi moraju imati završni par koji ih zatvara, pa i prazni tagovi)

<p>Ovo je prvi paragraf<p>Ovo je drugi nepravilno

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

prazni elementi moraju imati završni tag na kraju ili se početni tag završava sa />.

<br>, <hr> nepravilno

<br />, <hr /> pravilno

Primer za 3. (elementi se pišu malim slovima)

<BODY> <P>Ovo je paragraf</P> </BODY> nepravilno

<body> <p>Ovo je paragraf</p> </body> pravilno

Primer za 4. Svi XHTML elementi moraju biti ugnjeţdeni u <html> korenski

element. Svi drugi elementi mogu imati podelemente, koji moraju biti pravilno ugnjeţdeni u roditeljski elemenat i imati završni par:

<html> <head> ... </head> <body> ... </body> </html>

Nepravilno

<table WIDTH="100%">

<table width=100%>

<input checked>

<input readonly>

<input disabled>

<option selected>

<frame noresize>

<img src="picture.gif" name="picture1" />

Pravilno

<table width="100%">

<table width="100%">

<input checked="checked" />

<input readonly="readonly" />

<input disabled="disabled" />

<option selected="selected" />

<frame noresize="noresize" />

<img src="picture.gif" id="picture1" /> ili

<img src="picture.gif“ id="picture1"

name="picture1" />

11

Još neka XHTML sintaksička pravila

Imena atributa pišu se isto malim slovima

Vrednosti atributa se moraju staviti pod navodnike

Minimizacija atributa je zabranjena

Atribut id zamenjuje atribut name

XHTML DTD definiše obavezne elemente

Atribut lang se primenjuje na skoro svaki XHTML element. On odreĎuje jezik

sadrţaja u elementu. Ako ga koristimo moramo dodati xml:lang atribut, ovako:

<div lang="no" xml:lang="no">Heia Norge!</div>

Svi XHTML dokumenti moraju imati DOCTYPE deklaraciju. Html, head i body elementi

moraju postojati i title mora biti unutar head elementa. <!DOCTYPE> deklaracija nije HTML

tag, to je instrukcija za čitač u kojoj verziji HTML je stranica napisana.

<!DOCTYPE Doctype goes here>

<html xmlns="http://www.w3.org/1999/xhtml">

<head> <title>Title goes here</title> </head>

<body> </body></html>

DOCTYPE deklaracija nije deo XHTML dokumenta, niti je HTML element, pa ga ne

treba zatvarati završnim tagom.

Atribut xmlns u <html> tagu se zahteva u XHTML. Ipak validator w3.org neće

zameriti ako ga nema jer je "xmlns=http://www.w3.org/1999/xhtml" fiksna vrednost i biće

dodata u <html> tag i ako ga ne uključimo

XHTML dokument sastoji se tri glavna dela: DOCTYPE , head, body. Osnovna

struktura dokumenta je:

<!DOCTYPE ...>

<html>

<head> <title>... </title> </head>

<body> ... </body> </html>

DOCTYPE deklaracija treba da je uvek u prvoj liniji XHTML dokumenta. Ovo je

primer jednostavnog (minimalnog) XHTML dokumenta:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head> <title>simple document</title> </head>

<body> <p>a simple paragraph</p> </body> </html>

DOCTYPE deklaracija definše tip dokumenta:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Ostatak dokumenta izgleda kao HTML

XHTML DTD (Document Type Definiton)

DTD (Document Type Definition) je skup pravila za definisanje legalnog graĎenja

blokova veb dokumenta kao HTML ili XML. DTD odreĎuje sintaksu veb strane u SGML

(Standard Generalized Markup Language – to je internacionalni standard za markup jezike,

osnova za HTML i XML) DTD se koristi u SGML aplikacijama, kao što je HTML, da odredi

pravila koja se primenjuju u markiranju dokumenta, pojedinih tipova, uključujući skup

elemenata i deklaracije entiteta. XHTML je odreĎen kao SGML tip definicije dokumenta ili

'DTD'. XHTML DTD opisuje kompjuterski čitljiv jezik

XHTML standard odreĎuje tri tipa definicije dokumenta: strict, transitional i frameset

12

XHTML 1.0 Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Ovo se korisiti kad ţelimo da zbilja da očistimo markup, oslobodimo se zbrke u

prezentovanju. Korisiti se zajedno sa Cascading Style Sheets.

XHTML 1.0 Transitional

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Koristi se kad su nam potrebne prednosti karakteristika HTML prezentacija i kad

hoćemo da podrţimo čitače koji ne razumeju Cascading Style Sheets. Ovo je

najopštiji tip definicije i najčešće se koristi

XHTML 1.0 Frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Koristimo kad ţelimo da upotrebimo HTML Frames – okvire da podelimo prozor

čitača na dva ili više dela

U HTML 4.01, <!DOCTYPE> deklaracija upućuje na DTD, jer se XHTML 4.01

bazira na on SGML. HTML5 se ne bazira na SGML, i zato ne zahteva DTD

HTML5 zapravo i nije odbacivanje XHTML; on ima neke od najboljih karakteristika

oba HTML 4 i XHTML.

Jednostavan DOCTYPE: definicija DOCTYPE za XHTML je stvarno komplikovana.

HTML5 ima veoma jednostavnu i čistu definiciju dokumenta <!DOCTYPE html>.

Odvajanje sadrţaja i stila: HTML5 ne uključuje stil oznake iz HTML 4 (fonta, centar,

i tako dalje), umesto toga zahteva upotrebu CSS-a. Isto tako, umesto ureĎenja stranica

pomoću tabela i okvira daje prednost ureĎenju pomoću CSS-a.

Stroga tradicija: standardi za kodiranje HTML5 su više nalik XHTML-u nego HTML

4, većina programera koristi stroge standarde XHTML da bi kod bio lakši za čitanje i

predvidiv.

Bolja integracija za CSS i programske jezike: HTML5 projektovan kao centralna

osovina koji spaja mnoge druge tehnologije: CSS za vizuelni izgled, JavaScript za client-side

programiranje, serverske strane jezike kao što su PHP za kontrolu servera, i baze podataka.

HTML5 omogućuje prikaz bogatijeg sadrţaja (bez potrebe dodatnih alatki, Flash i sl.)

kao što su: animacija, grafika, muzika, video, sloţene veb aplikacije. Pored toga moţe da radi

na PC, tabletima, smart telefonima ili televizorima. Tako se javljaju novi elementi kao što su:

<canvas> za 2D crtanje

<video> i <audio> elementi za media playback

elementi koji definišu sadrţaj <article>, <footer>, <header>, <nav>, <section>

kontrolne forme kalendar, datum, vreme, email, url, search

13

3.3. Liste

HTML podrţava numerisane, nenumerisane i liste definisanja.

Nenumerisane liste poćinju sa <ul> i završavaju odgovarajućim parom. Na početku

sva-kog reda se koristi tag <li>, (ne mora da ima završni tag, ali treba zbog XHTML).

Tag <li> moţe da sadrţi u sebi paragrafe.

Numerisane liste (ordered) se označavaju tagom <ol> i isto se koriste tagovi <li> na

početku svako reda.

Liste definisanja počinju tagom <dl> i završavaju se odgovarajućim parom. Tag

<dt> ozačava izraz koji definišemo, a <dd> definiciju. Čitači obično stavljaju

definicije uvučeno u novi red. U listi definicije ( <dd> tag) mogu se smestiti

paragrafi, prekidi linija, slike, linkovi, druge liste itd.

Razgranate liste imaju u tagovima na početku reda grananja tagove za otvaranje novih

lista.

Primer razgranate nenumerisane liste lošeg ugnježdavanja:

<ul>

<li>Coffee</li>

<li>Tea

<ul>

<li>Black tea</li>

<li>Green tea</li>

</ul> Greška je što nema para zatvaranja za tag <li>Tea

<li>Milk</li>

</ul>

Primer dobrog ugnježdavanja:

<ul>

<li>Coffee</li>

<li>Tea

<ul>

<li>Black tea</li>

<li>Green tea</li>

</ul>

</li> <li>Milk</li>

</ul>

Ovako izgleda na veb stranici

Coffee

Tea

o Black tea

o Green tea

Milk

Ukoliko ţelimo da definišemo tip oznake na početku reda u listi moţemo koristiti

atribut type sa vrednostima disc, circle, square, none, ili atribut style, na sledeći način

style=“list-style-type:disc;”

Za liste nabrajanja vrednosti atributa type mogu biti 1, I, i, A, a

14

Primer liste definisanja:

<dl>

<dt>Coffee</dt>

<dd>Black hot drink</dd>

<dt>Milk</dt>

<dd>White cold drink</dd>

</dl>

Coffee

Black hot drink

Milk

White cold drink

3.4 Linkovi – veze sa drugim dokumentom ili drugim odeljkom istog dokumenta

Linkovi se označavaju osvetljavanjem i podvlačenjem odreĎenog teksta ili slike.

Odgovarajući HTML tag je oblika:

<a href=“ime dokumenta”>tekst koji predstavlja hiperlink</a>

(a – anchor, tj. sidro)

Recimo <a href=“poema.html”>pesma</a>

Ako su dokumenta u istom direktorijumu na vašem računaru, onda se ne mora

navoditi kompletan put kako stići do njega, već samo ime dokumenta. Ako nisu u istom

direktorijumu moţe se navesti relativan put (u odnosu na direktorijum gde se nalazi tekući

dokument iz koga ide povezivanje) ili apsolutni put, kompletan URL (što je duţe).

Target atribut definiše gde će dokumenat biti otvoren i vrednosti mogu biti:

“_blank” (u novom prozoru)

“_parent” (u roditeljsko okviru)

“_self” (u istom okviru gde je pozvan)

“_top” (popunjava ceo prozor)

U sledećem primeru se otvara u novom prozoru:

<a href="http://www.w3schools.com/" target="_blank">Visit W3Schools!</a>

Link moţe i da se koristi za dovoĎenje korisnika do odreĎenog dela tekućeg dokumenta ili

odreĎenog dela drugog dokumenta, što je korisno ako je dugačak tekst i sastoji se iz više

celina, poglavlja. U tom slučaju koristi se pored taga za označavanje linka i tag imenovanja

koji imenuje deo teksta na koji ukazuje link.

Primer:

<a href=“#naslov”>početak pesme</a>

<h1> <a name=“naslov”>Reče mi jedan čoek</a></h1>

Prvi tag je za link koji vodi na početak pesme, tj. njen naslov u kome je tag zadavanja imena

linka. Ako se iz drugog dokumenta koristi link za deo teksta prvi tag je

<a href=“poema#naslov”>početak pesme</a>

Ako link povezuje sa nekom stranicom web-a, onda se navodi komplet URL

<a href=http://www.vtsns.edu.yu>nasa skola</a>

Link moţe da povezuje i sa servisom elektronske pošte, tj. da uključi e-mail.

<a href=mailto:adresa>Ime</a>

Ovoriće se e-mail prozor sa zadatom adresom i poruka se moţe uneti.

15

3.5 Tabele u HTML-u

Tabele su česti objekti na web stranicama. Pored klasičnog izgleda, gde se jasno

uočavaju vrste i kolone sa odreĎenim tekstom, tabele se često koriste i za raspored raznih

objekata na stra-nici. Recimo za više malih slika i sl. U tabeli se definišu prvo vrste <tr>, a

zatim svaka ćelija u vrsti <td>. Pored toga posebni tag <th> definiše ćeliju koja predstavlja

zaglavlje vrste ili kolone.

Elementi tabele i opis

<table>

</table>

Definiše tabelu. Ako ima atribut border onda prikazuje i okvir

<caption> Definiše naslov tabele i predviĎeno mesto je centar vrha tabele. Atribut

align=“bottom“ postavlja naslov ispod

<tr>...</tr> OdreĎuje red (vrstu) i mogu se koristiti atributi align i valign za horizontalno i

vertikalno poravnanje

<th>..</th> Definiše ćeliju koja je zaglavlje i moţe da ima atribute za ćeliju i sadrţaj. Tekst

je podebljan i centriran.

<td>..</td> Definiše podatke ćelije i moţe da koristi atribute. Tekst je vertikalno centriran i

ulevo poravnat

Napravimo raspored časova:

Imaćemo 6 kolona. Prva je za vreme, a 5 za radne dane. Prva vrsta sadrţi zaglavlja

ćelija. U zaglavlju prve kolone nema ničega, a u ostalima su imena dana. Da se ćelija bez

sadrţaja ne bi izgubila u sabijanju viška praznog prostora koje HTML radi uvek (setite se kod

kucanja teksta da ne vodi računa o vašim ekstra proredima, već ga prikazuje kao neprekidan

tekst sve dok ne doĎe do kraja paragrafa), onda se koristi oznaka &nbsp; (non breaking

space). Ova oznaka ostavlja prazan prostor na stranici. U prvoj koloni je vreme u koje počinje

čas. Kako neki predmeti traju jedan čas, a neki po dva, to su odreĎene ćelije morale uz atribut

rowspan da zauzmu dve vrste.

ponedeljak utorak sreda četvrtak petak

8,30

9,00

9,30

10,00

10,30

11,00

Prvo definišemo tabelu i zatim krenemo sa definicijom svake vrste redom. Ako se ne

zada vrednost okvira border=“n“ onda se dobija tabelarni raspored, ali bez okvira. Pošto je

prva vrsta zaglavlje svake kolone tako i definišemo ćelije (biće podebljan tekst) sa sadrţajem

koji predstavlja dane. Sledeća vrsta počinje satnicom, a to će biti zaglavlje te vrste, pa isto tu

ćeliju definišemo kao zaglavlje. Sledeća ćelija u toj vrsti je obična <td>. Ako traje duţe od

sata koristi se atribut rowspan=n da bi predmet zauzeo više vrsta.

<html>

<head><title>raspored časova</title>

</head>

<body>

<h1 align=“center“>raspored časova</h1>

<hr width=“80%“ size=“10“>

<table align=“center“ border=“1“>

<tr>

<th> &nbsp</th>

16

<th> ponedeljak</th>

<th>utorak</th>

<th> sreda</th>

<th> četvrtak</th>

<th> petak</th>

</tr>

<tr>

<th>08,30</th>

<td >računari</td>

<td rowspan=“2“>uvod u gr.tehn</td>

<td>&nbsp</td>

......

</tr>

Da bismo obezbedili prostor u ćeliji oko unetog teksta postavimo u <table> atribut

cellpadding=“n“ (recimo 10). Isto tako moţemo za celu tabelu, ţeljenu vrstu ili ćeliju da

postavimo boju atributom bgcolor=“#xxxxxx” Veličina tabele se moţe odrediti u odnosu na

širinu ekrana atributom width=“x%“ u <table>, a to vaţi i za svaku kolonu koristeći atribut

width u zaglavlju svake kolone, tj. u svakoj ćeliji prve vrste. Tabele bez okvira se mogu

koristiti za ubacivanje malih slika, recimo u prvoj vrsti, a nazivi u drugoj i pritom se klikom

na svaku od njih otvaraju velike.

Primer ubacivanja boje i slike

<html>

<body>

<h4>Cell backgrounds:</h4>

<table border="1">

<tr>

<td bgcolor="red">First</td>

<td>Row</td>

</tr>

<tr>

<td background="bgdesert.jpg">

Second</td>

<td>Row</td>

</tr>

</table>

</body>

</html>

17

3.6 Slike i mape

Većina čitača moţe da prikaţe slike koje su formatu BMP, GIF i JPEG. Učitavanje

slika usporava prikaz dokumenta, pa se preporučuje da sve slike koje se pojavljuju ne budu

veće od 100 KB. Isto tako treba voditi računa da ne budu većih dimenzija od 480 piksela

širine i 300 visine, jer nemaju svI 21 inčni monitor. Umesto prikaza slika bolje je da se one

povezuju linkovima kao spoljne slike. Ako imate više slika na stranici bolje je napraviti niz

povezanih stranica. Za prikaz slike se koristi tag:

<img src=“ime slike”>

gde je ime slike URL ili ime fajla (obavezno praćeno odgovarajućom ekstenzijom .gif .jpg

.jpeg .bmp .png). Atributi za dimenzije slike height i width daju broj piksela za visinu i

širinu slike. Da bi se izbeglo sabijanje ili istezanje slike treba dati tačne dimenzije. Ako

korisnik ima samo čitač teksta, onda se umeće alternativni tekst koji se pokazuje umesto slike

<img src=“ime slike” alt=“tekst”> primer

Slike se mogu poravnati sa tekstom ili prikazati odvojeno Podrazumeva se poravnanje

donje ivice slike sa paragrafom, a moţe se izabrati “top” i “middle”

<img src=“ime slike” align=“middle”>

Bez teksta slika čini poseban paragraf i podrazumevano je poravnanje uz levu ivicu, a

moţe se postaviti u centar ili desno

<p align=“right”>

<img src=“ime slike”> </p>

Smeštanje slike uz desnu ivicu moţemo uz pomoć atributa style i vrednosti za float

<img src=" ime slike" style="float:right; width:42px; height:42px;">

Slika moţe da bude i hiperlink kao tekst

<a href=“ime dokumenta”><img src=“ime slike”></a>

Slika koja je hiperlink obično je uokvirena. Taj okvir se moţe ukloniti atributom

border=“0” u okviru taga <img ...> ili podebljati zadavanjem ţeljene vrednosti, recimo

border=“6”. Često se slike strelica koriste za vraćanje na prethodnu stranicu ili početnu

stranicu. Pored boje moţe se postaviti i slika na pozadinu <body background=“ime slike”>

Treba voditi računa da slika bude u istom direktorijumu kao html dokument i

obavezno navesti ekstenziju. Da bi se izbeglo dugo otvaranje stranice moţe se slika

minijaturizovati korišćenjem širine i visine od recimo 50, 60 piksela i postaviviši je kao

hiperlink za otvaranje slike u pravoj veličini.

<a href=“ime slike.jpg">

<img src=“ime slike.jpg" ALT="link za veliku sliku“ width=“62” height=“85”> -- [full size image, 55k] -- </a>

Umesto atributa za širinu i visinu, moţemo koristiti Inline stil pa atributom style

definisati širinu i visinu slike

<img src=“ime slike.jpg" ....... style="width:128px;height:128px;">

Moţe se napraviti manja kopija slike u drugom formatu, pa se njeno ime navodi u tagu

<img...> Korisno je da se uvek stavi alternativni tekst, a isto tako i informacija o veličini slike

da korisnik oceni da li ţeli da je otvara ili ne.

Napomene: align, border, hspace, vspace atributi su odbačeni u HTML 4.01 jer ih ne

podrţava XHTML 1.0 Strict DTD.

Ako koristite alt attribute u Firefox tekst se neće pokazati pri prelasku mišem preko

slike kao u drugim čitačima. Firefox koristi alt atribut samo ako se slika ne moţe da učita.

Ako ţelimo da pri prelasku mišem preko slike dobijemo tekst u Firefox-u treba da koristimo

title atribut u <img> tagu <img src="image.gif" alt="..." title="......."

18

Slike – mape

Slika – mapa je slika sa oblastima koje povezuju linkovima sa drugim dokumentom,

obično uvećanim delom slike. U tagu <img> se koristi atribut usemap koji upućuje na atribut

id ili name u tagu <map>. Tag <map> koristi atribut id ili name koji definiše ime mape (koji

atribut treba koristiti od ova dva zavisi od čitača, pa se preporučuje da se oba koriste). Tag

<area> definiše oblast na slici – mapi. On je uvek ugnjeţden u tagu <map>. Atributi su:

shape - definiše oblik oblasti: rect, rectangle, circ, circle, poly, polygon

coords - definiše koordinate oblasti: leva, gornja, desna, donja (rect), centar-x, centar-

y, r (circ) x1,y1,x2,y2,...xn,yn (poly)

href – odreĎuje na koji URL upućuje oblast

target – odreĎuje u kakavom se prozoru otvara URL (koristili smo kod linkova)

Primer:

<p> Click on one of the planets:</p>

<img src ="planets.gif“ width ="145" height ="126" alt="Planets“ usemap="#planetmap"/>

<map id ="planetmap“ name="planetmap">

<area shape ="rect" coords ="0,0,82,126"

href ="sun.htm" target ="_blank"

alt="Sun" />

<area shape ="circle" coords ="90,58,3"

href ="mercur.htm" target ="_blank"

alt="Mercury" />

<area shape ="circle" coords ="124,58,8"

href ="venus.htm" target ="_blank"

alt="Venus" />

</map>

19

3.7 Meta tag i okviri – frames

Meta element daje meta informacije o stranici, kao što je opis, ključne reči za pretraţivače

i period obnavljanja. <meta> tag je uvek u head elementu. Meta podatak je uvek u obliku para

ime/vrednost

Primeri:

Ključne reči za pretraţivače:

<meta name="keywords" content="HTML, DHTML, CSS, XML, XHTML,

JavaScript, VBScript" />

Opis web strane:

<meta name="description" content="Free Web tutorials on HTML, CSS, XML, and

XHTML" />

Poslednja revizija strane:

<meta name="revised" content="Hege Refsnes, 6/10/99" />

Osveţavanje strane svakih 5 sekundi:

<meta http-equiv="refresh" content="5" />

Okviri omogućuju prikaz više HTML dokumenata u istom prozoru. Svaki dokumenat je

jedan okvir i oni su nezavisni meĎusobno. Nedostaci korišćenja okvira su što se mora više

dokumenata odrţavati i što je teško štampati celu stranicu. Frameset Tag <frameset> definiše

kako se deli prozor na okvire. Svaki okvir definiše skup vrsta ili kolona. Vrednosti

vrsta/kolona pokazuju koji deo ekrana zauzima svaka vrsta/kolona. Tag <frame> definiše šta

HTML dokument smešta u okvir. Na primer imamo skup okvira od 2 kolone. Prva zauzima

25% širine prozora, adruga 75%.

Na primer, HTML dokument "frame_a.htm" je smešten u prvu kolonu, a HTML

dokument "frame_b.htm" u drugu:

<frameset cols="25%,75%">

<frame src="frame_a.htm"> <frame src="frame_b.htm"> </frameset>

Ako okvir ima vidljiv ram, korisnik moţe da mu menja veličinu. Ukoliko ţelimo da ga

sprečimo u tome dodajemo atribut noresize=“noresize” u tag <frame>

<noframes> tag se dodaje za čitače koji ne podrţavaju okvire

Ne moţemo koristiti <body></body> tag zajedno sa <frameset></frameset> Ako dodamo

<noframes> tag koji sadrţi neki tekst za čitače koji ne podrţavaju okvire, onda ćemo tekst

staviti u <body></body> tag

Primer:

<html>

<frameset cols="25%,50%,25%">

<frame src="frame_a.htm">

<frame src="frame_b.htm">

<frame src="frame_c.htm">

<noframes>

<body>

Your browser does not handle frames!

</body>

</noframes>

</frameset>

</html>

Frame_

a

Frame_b

Frame_

c

20

Primer mešovitih okvira

<html>

<frameset rows="50%,50%">

<frame src="frame_a.htm">

<frameset cols="25%,75%">

<frame src="frame_b.htm">

<frame src="frame_c.htm">

</frameset>

</frameset>

</html>

Primer navigacionog okvira

Prvi okvir sadrţi listu linkova sa drugim okvirom kao ciljem. Fajl "tryhtml_contents.htm"

sadrţi tri linka. Izvorni kod linkova je:

<a href ="frame_a.htm" target ="showframe">Frame a</a><br>

<a href ="frame_b.htm" target ="showframe">Frame b</a><br>

<a href ="frame_c.htm" target ="showframe">Frame c</a>

Drugi okvir će prikazati onaj dokument koji je tog momenta linkovan, s tim što je u početnom

momentu u primeru prikazan dokument prvog linka (frame_a). Ovde je širina prve kolone

izraţena u pikselima, a za drugu je predviĎen ostatak prozora čitača.

<html>

<frameset cols="120,*">

<frame src="tryhtml_contents.htm">

<frame src="frame_a.htm" name="showframe">

</frameset>

</html>

Moţe se koristiti i „inline“ okvir, koji sadrţi drugi dokument

<html>

<body>

<iframe src="default.asp"></iframe>

<p>Some older browsers don't support iframes.</p>

<p>If they don't, the iframe will not be visible.</p>

</body>

</html>

Some older browsers don't support iframes. If they don't, the iframe will not be visible

(Neki stariji čitači ne podrţavaju inline okvire. Ako ih ne podrţavaju oni neće biti vidljivi)

Frame_a

Frame_b

Frame_c

Frame_a

Frame_b

Frame_c

Frame_a

21

3.8 Forme

Sluţe za unos podataka. Elementi forme preko kojih se podaci unose mogu biti: tekstualna

polja, polja za unos duţeg tekstualnog sadrţaja, padajući meni, radio dugmad, čekiranje

ponuĎenih opcija itd.

<form>

<input>

<input>

</form>

Primer za tekstualno polje (u većini čitača je 20 karaktera predviĎena širina polja)

<form>

First name:

<input type="text" name="firstname">

<br>

Last name:

<input type="text" name="lastname">

</form>

First name:

Last name:

Primer za radio dugmad (samo jedna od ponuĎenih opcija može da se bira):

<form>

<input type="radio" name="sex" value="male"> Male

<br>

<input type="radio" name="sex" value="female"> Female

</form>

Male

Female

Primer za čekiranje opcije – može se birati više od jedne)

<form>

I have a bike:

<input type="checkbox" name="vehicle" value="Bike" />

<br />

I have a car:

<input type="checkbox" name="vehicle" value="Car" />

<br />

I have an airplane:

<input type="checkbox" name="vehicle" value="Airplane" />

</form>

I have a bike:

I have a car:

I have an airplane:

22

Primer sa padajućim menijem:

<form>

<select name="cars">

<option value="volvo">Volvo</option>

<option value="saab">Saab</option>

<option value="fiat">Fiat</option>

<option value="audi">Audi</option>

</select>

</form>

Volvo

Kad korisnik klikne na dugme Submit sadrţaj forme se šalje drugom fajlu. Atribut akcije

forme odreĎuje ime fajla kome se šalje sadrţaj.

<form name="input" action="html_form_action.asp"

method="get">

Username:

<input type="text" name="user">

<input type="submit" value="Submit">

</form>

Username: Submit

<textarea rows="10" cols="30">

The cat was playing in the garden</textarea>

The cat w as playing in the gard

Primer kreiranja dugmeta

<form>

<input type="button" value="Hello world!">

</form>

Primer forme za slanje pošte:

<html><body>

<form action="MAILTO:someone@w3schools.com"

method="post" enctype="text/plain">

<h3>This form sends an e-mail to W3Schools.</h3>

Name:<br>

<input type="text" name="name"

value="yourname" size="20">

Hello world!

23

<br>

Mail:<br>

<input type="text" name="mail"

value="yourmail" size="20">

<br>

Comment:<br>

<input type="text" name="comment"

value="yourcomment" size="40">

<br><br>

<input type="submit" value="Send">

<input type="reset" value="Reset">

</form>

</body>

</html>

This form sends an e-mail to W3Schools. Name:

yourname

Mail:

yourmail

Comment:

yourcomment

Send Reset

24

4. Kako se uključiti na internet

Svaki PC računar prosečne konfiguracije moţe da ostvari pristup na internet. Naravno,

prvo se mora izabrati dobavljač (provajder) preko koga se priključenje obavlja u svetsku

mreţu. Arhitektura interneta je distribuirana mreţa u kojoj je sloţena struktura mešovito

hijerarhijska. Najniţim nivoom se mogu smatrati mali internet posrednici, dobavljači, koji

nude PPP pristup internetu, zatim internet posrednici koji iznajmljuju internet konekcije

drugim posrednicima, i na vrhu strukturw veliki internet posrednici poznati kao „Big Six”,

“Velika šestorka”, koja drţi interkontinentalne veze. Oni imaju toliko raširenu mreţu, da

nemaju potrebe za bilo kakvim transferom sa drugim provajderima. To su: Level 3

Communications (SAD, Kolorado sedište, ali pokriva i Juţnu Ameriku, Evropu i delove Azije

), TeliaSonera International Carrier (Švedska, nordijske i baltičke zemlje), NTT (Japan),

Cogent (SAD, Vašington), GTT (SAD, Evropa. Azija) i Tata Communications (Indija, Sri

Lanka, Nepal i Juţna Afrika).

Glavni mreţni saobraćaj izmeĎu internet posrednika se odvija preko veza, internet

okosnica ili backbone. Saobraćaj se odvija velikom brzinom, a kao prenosnici mogu se

koristiti zemaljski linkovi (optički link) ili sateliti (satelitski link). Da bi paket podataka bio

uspešno poslat iz tačke A u tačku B (od posrednika A do posrednika B) potrebno je pronaći

tačnu putanju. Za taj posao su zaduţeni ureĎaji koji se nazivaju ruteri.

Opredeljenje za dobavljača (ISP – Internet Service Provider) zavisi od cene,

pouzdanosti, tipa i brzina priključka, podrške koju pruţa, usluga koje nudi, zakup Web

servera itd. Pored tehničkih razlika postoje i razlike u brzini rada, tj. prenosa podataka. Osim

toga, vaţna je i veza provajdera sa internetom (tzv. link provajdera). Ona je obično od 512

Kb/s do 6 Mb/s.

Danas se koriste priključci putem:

telefonske linije

kablovski

beţični

4.1. Telefonskom linijom

Veza se uspostavlja sa dobavljačem preko

modema (dial up)

ISDN ureĎaja

ADSL modema

Modem je ureĎaj koji pretvara analogne signale u digitalne i obrnuto i moţe biti

eksterni ili interni. Brzina rada se izraţava bitima u sekundi b/s (kb/s). Prvi modemi u PC

računarima su imali brzinu 2400 b/s, a danas uobičajena 56 kb/s, ali praktično se ta brzina ne

postiţe zbog ogra-ničenja u telefonskim centralama. Do nedavno su postojala dva standarda:

x2 firme U.S. Robotics i K56files firme Rockwell and Lucent. Od 1998. je definisan nov

standard V.90, a krajem prošlog veka V.92 koji omogućava privremeni prekid prenosa

podataka da bi se omogućio telefonski po-ziv preko iste linije. Iako dial-up pristup (veza

ostvarena preko telefonske linije i modema) je ograničen na 56 kbit/sec i dalje je dominantan

način pristupa Internetu za većinu korisnika.

ISDN – Integrated Services Digital Network (digitalna mreţa sa integrisanim

uslugama) je vi-ši stepen, tj. nadgradnja postojeće javne telefonske mreţe. Većina telefonskih

centrala i prenosnih sistema izmeĎu njih je digitalizovano, ali pretplatnički deo mreţe je

analogan. ISDN omogućuje da i pretplatnički deo bude digitalan i omogućava istovremeno

korišćenje telefona i računara za pristup Internetu. ISDN adapter je bolji od modema jer je

veza tiha, brza, podaci se ne gube zbog šuma. ISDN BRI – bazni priključak, ima 3 kanala: 2B

za prenos podataka i signalni kanal D. B kanal ima protok od 64 kb/s i mogu se koristiti

odvojeno za Internet i telefoniranje, ili spojeno da dobijete priključak duple brzine 128kb/s, a

25

D 16 Kb/s. Kablovski pristup Internetu kod nas pola-ko hvata zamah, zahvaljujući činjenici da

kablovski Internet provajderi (pre svega SBB) imaju sopstvenu, nezavisnu infrastrukturu koju

mogu da šire i prilagoĎavaju svojim potrebama

ADSL – Asimetric Digital Subscriber Line (asimetrična digitalna pretplatnička linija)

modemi prenose podatke znatno većom brzinom do 9 Mb/s. Brţi su u dolaznom nego

odlaznom smeru. Brzina zavisi od udaljenosti pretplatnika od telefonske centrale i omogućuju

korišćenje iste telefonske linije za Internet i telefonski razgovor. Koristi 3 posebna frekventna

opsega: za prenos podataka u dolaznom, odlaznom smeru i za telefoniranje. ADSL je u Srbiju

došao krajem januara 2005. godine. Maksimalna brzina kojom „dovlačite” podatke sa

Interneta (download) višestruko je veća od brzine kojom podatke šaljete ka Internetu

(upload). Trenutno su na raspolaganju tri brzine ADSL pristupa: 64/256, 128/512 i 192/768

Kbit/sec (prva brojka predstavlja brzinu uploada, druga downloada). To je način da vašu

postojeću telefonsku liniju iskoristite za stalnu i brzu vezu sa Internetom, a da pritom preko

iste te linije i dalje telefonirate. Neke od osnovnih prednosti ADSL-a nad drugim načinima

broadband pristupa su:

Uspostavlja se stalna veza sa Internetom (24 časa dnevno na vezi). Nema zvanja

provajdera, signala zauzete linije, čekanja da se veza uspostavi itd.

Postiţu se velike brzine prenosa, recimo download brzinom od 768 kilobita u sekundi

(maksimalna brzina prenosa kod klasičnih analognih linija i modema je 56 kilobita u

sekundi, kod ISDN-a 64 ili 128 kilobita u sekundi; ubrzavate, dakle, prenos preko 10

puta)

Analogna ili ISDN linija se i dalje moţe koristiti za razgovore glasom ili primanje

poziva. Pritom se veza sa Internetom ne prekida dok telefonirate glasom - obe

aktivnosti teku paralelno.

Linija je slobodna dok ste na Internetu - saradnici i prijatelji koji vas zovu neće

dobijati signal "zauzeto", telefon normalno zvoni.

Ne plaćate telefonske impulse za pristup Internetu već fiksnu mesečnu sumu - moţete

planirati svoje izdatke, a opet će vam Internet biti pristupačan kad god vam je nešto

potrebno.

UvoĎenje je, ako ima tehničkih uslova, brzo i jednostavno, bez potrebe da se provlače

novi kablovi ili menjaju postojeći.

Provajderi nude različite pakete koji su prilagoĎeni korisničkim zahtevima i

potrebama. Obično su to manji paketi za ličnu upotrebu, ili veći za kompanije. Većina paketa

nudi prateće servise, kao što je mogućnost postavljanja veb prezentacije, mail-boksove

odreĎene veličine, registrovanje domena, dodeljivanje dinamičke ili statičke IP adrese itd.

4.2. Kablovski

Kablovski priključak je povezivanje koaksijalnim ili optičkim kablom kojim se

prenose TV emisije. Obično kompanije za kablovsku TV nude i kablovski modem. Priključak

za kablovsku TV treba da je blizu računara ili se koristi Ethernet kartica u računaru. Brzina je

do 30 Mb/s teorijski, ali praktično, dolazna brzina je do 10 Mb/s, a odlazna do 2 Mb/s.

Nedostatak je što se magistrala za prenos podataka deli sa svim korisnicima u susedstvu. Ovo

je najbrţi način pristupa internetu.

Prednosti kablovskog interneta, su pored većih brzina i stalno slobodne telefonske

linije, oslobaĎanje od nedostataka telefonske pretplatničke linije kao što su zauzeta linija,

prekid veze i sl. Prednost kablovskog interneta u odnosu na ADSL je bolja iskorišćenost veze

izmeĎu glavne stanice i korisnika, tj. manji su gubici u prenosu, mogućnost većeg protoka od

korisnika prema glavnoj stanici (apload) i td.

Mana korišćenja interneta preko kablovske veze je deljenje jednog fizičkog kabla i

jednog propusnog opsega od strane svih korisnika koji se nalaze na jednoj grani, odnosno ne

postoji neposredna veza iz glavne stanice do svakog korisnika. Rezultat je da se traţena brzina

saobraćaja lako ostvaruje u situaciji kada je mali broj korisnika interneta, ali povećanjem

26

broja korisnika preko neke granice se ne moţe obezbediti propusni opseg koji garantuje

ponuĎač. Uz dobru iskorišćenost mreţnih resursa i primenu savremene tehnologije ovaj

problem moţe biti u velikoj meri ili u potpunosti prevaziĎen.

4.3. Bežičnim putem

Beţične veze sa Internetom omogućuju pristup Internetu bez ikakvih kablova

satelitske veze

LMDS

CDPD, PCS

Satelitske veze omogućuju korišćenjem antene prijem podataka, a za slanje koristi se

neki drugi način (modem). Dolazna brzina je oko 400 Kb/s. Evo šta nudi Astra-Sat. PC

konfiguracija ili server mora biti opremljena sledećim programima i delovima za satelitski

internet prijem :

PENTIUM 500MHz - minimum

CD-ROM citac

VGA grafička kartica, za kvalitetniji prijem TV signala potrebna je bolja kartica

Zvučna karta

Jedan slobodan PCI-Bus Interface slot (za instalaciju Satelitskog modema primaće

kartice)

Najmanje 30MB slobodnog prostora na hard disku

Analogni modem priključen na spoljnu analognu/digitalnu telefonsku liniju - interni ili

externi (minimalne brzine 14.400bps) ili ISDN adapter priključen na ISDN

telefonsku liniju, WAN, GPRS ili kablovski internet za UpLink

Operativni sistem Windows XP ili Linux

Otvoren račun sa uplaćenim satima kod Vašeg lokalnog internet provajdera. Najbolje

preko SMIN brojeva (koštaju identično kao lokalni poziv). TakoĎe još jeftinije je

za UpLink koristiti GPRS preko mobilnih provajdera jer oni naplaćuju po KB

preuzetog sadrţaja, a vi DownLink preusmeravate preko satelita.

Microsoft Internet Explorer, Netscape Navigator, Opera ili sl.

Ostali uslovi za prijem:

Satelitska antena (min. 90 cm) namestena na poziciju Astre 1D 23.5 stepeni istocno

Univerzalni digitalni LNB konverter za antenu, sa kablom prikljucenim na satelitski

modem u Vasem kompjuteru.

Slobodan horizont iza antene u pravcu Jug-Jugoistok

Za istovremeno koriscenje jedne satelitske antene za prijem interneta ili TV kanala

preko satelita na racunar i prijem TV kanala na odvojenom TV prijemniku,

potreban digitalni TWIN LNB univerzalni konverter da bi se mogao ostvariti

prijem osnovni zahtev je da geografski zivite na lokaciji untar opsega pokrivenosti

satelita ASTRA.

Ako se kojim slucajem nalazite izvan opsega satelita ASTRA moguc je prijem uz

specijalnu dodatnu opremu po zahtevu.

U okviru ovog pretplate dobijate pristup internetu preko satelita Astra mesec dana

brzinom do 256, 512 ili 1024 kbit/sec. Ne postoje dodatni troškovi po megabajtu količine

prenetih podataka niti po bilo kom drugom osnovu. Astrasat zadrţava pravo da sve korisnike

koji mnogo downloaduju podatke tokom preopterećenosti prebaci na "Best effort channel" sve

dok ne doĎe do rasterećenja servera. Napominjemo da ovo nije pristup za non stop download

jer ce takvi korisnici posle par dana biti nezadovoljni brzinom koja ce im biti drasticno

smanjena. Najmanja brzina na koju moţe biti smanjen protok u trenucima najveceg

opterecenja je brzina ISDN konekcije.

LMDS – (Local Multipoint Distribution Service) koristi delove radiofrekventnog

spektra. Relejne stanice prenose podatke mikrotalasima do lokalnih primopredajnika. Najbliţi

27

primopredajnik prenosi podatke do LMDS modema, koji ih šalje računaru kroz Ethernet

priključak. Razdaljina od vas do primopredajnika do 3 km. Brzina do 500 Kb/s

CDPD (ćelijski digitalni paket podataka) i PCS (lični komunikacioni sistem)

tehnologije za prenos podataka do dţepnih telefona i računara.

4.4 Posrednički serveri

Kod nekih dobavljača postoji mogućnost konfigurisanja Proxy servera. To je

aplikacija koja omogućava učitavanje popularnih veb stranica direktno sa servera provajdera

gde su smeštene umesto sa veba. Na taj način se ubrzava učitavanje. Proxy server je računar

koji funkcioniše kao posrednik izmeĎu veb čitača korisnika (kao što je Internet Explorer) i

interneta. Proxy serveri doprinose poboljšanju veb performansi tako što čuvaju kopije veb

stranica koje se često koriste. Proxy serveri doprinose i poboljšanju bezbednosti tako što

filtriraju neke veb sadrţaje i zlonamerni softver. Oni se uglavnom koriste u organizacijama i

preduzećima.

Po funkcijama mogu biti

Keš posrednici koji ubrzavaju pristup veb sadrţajima, keširanjem (snimanjem na svoj

lokalni disk) sadrţaj koji klijent traţi, pa pri ponovnom traţenju podatke dostavlja

mnogo brţe, iako moraju da provere da li se u meĎuvremenu nešto menjalo.

Veb posrednici, koji mogu da blokiraju neţeljeni sadrţaj sa spoljašnjih mreţa, kao i da

omogućavaju kontrolisanje i evidenciju pristupa Internetu u zavisnosti od klijenta.

Tako mogu da kontrolišu kojim sajtovima se moţe pristupiti i ko moţe pristupiti.

Poneki veb posrednički serveri modifikuju sadrţaj koji preuzimaju sa interneta tako da

on bude prilagoĎen klijentima - na primer za mobilne telefone ili PDA ureĎaje.

Ostali mogu biti

Nevidljivi, za koje klijent ne treba da podešava računar ili i nije svestan njihovog

postojanja. Njihov rad se zasniva na presretanju saobraćaja klijenata i česti su u većim

firmama.

Javni, dostupni i preko interneta, a ne samo iz lokalne mreţe.

Za poštu, filtriraju neţeljenu dolaznu, ali i odlaznu poštu..

28

5. Protokoli na internetu

Internet protokoli su nastali kao standardizovan dogovor za regulisanje procedura koje

se koriste za razmenu podataka na internetu. Kako je internet ogromna mreţa, tu se i radi o

mreţnim protokolima, koji se sastoje od pravila za komunikaciju.

Internet je nastao kao ideja decentralizacije mreţe računara gde je trebalo obezbediti

bezbednu komunikaciju prebacivanjem paketa podataka u distribuirane čvorove mreţe.

Podaci koji se prenose treba da su podeljeni u male pakete koji mogu različitim putevima stići

na odredište (kroz različite čvorove duţ mreţe). Prenošenjem različitih delova poruka

različitim putevima, bezbednost je pojačana. Pošto paketi mogu da putuju različitim putevima

ako je jedan put zatvoren, operećen, drugi moţe da se koristi. Distribuirana mreţa povezanih

računara je mnogo sigurnija i moţe bolje da izdrţi destrukciju većih razmera nego

centralizovana mreţa povezana sa jednom ili nekoliko domaćina računara. Pri tome se mora

upravljati prenosom paketa podataka raznim putevima, i prikupljanjem svih paketa, kao i

ponovnom formiranju orginalne poruke. Pa tako imamo protokole koji dodeljuju adrese

računarima u mreţi, koji prave pakete podataka i šalju ih odreĎenim putevima, definišu

čitanje i prikaz veb prezentacija, protokole za elektronsku poštu itd.

Moţe se posmatrati nekoliko vrsta protokola koji se koriste na internetu:

1) Skup standarda (protokoli) koji odreĎuju način i brzinu povezivanja dva modema.

2) Protokoli za serijsku kominikaciju izmeĎu vašeg računara i internet posrednika (PPP –

point to point protocol). Ovaj protokol se koristi za direktnu konekciju izmedju dve

tačke preko serijskog kabla, telefonske linije, optičkog kabla itd. Većina provajdera

koristi PPP za dial-up konekciju.

3) TCP/IP protokol koji vam omogućava komunikaciju izmeĎu dva ili više računara.

4) Protokoli za internet usluge:

HTTP – (Hiper – Text Transfer Protocol) zа World Wide Web

FTP – (File Transfer Protocol) za prenos datoteka

SMTP – (Small Mail Transfer Protocol) za prenos e-mail poruka

NNTP – (Network News Transfer Protocol) za prenos news poruka

Telnet – za rad na udaljenim serverima/računarima

ATM (Asynchronous Transfer Mode) – asinhroni reţim prenosa

DLC (engl. Data Link Control) – kontrola veze za prenos podataka.

Protokoli obuhvataju više funkcija

Adresiranje (definiše način dodele internet adresa), internet moduli koriste adrese

koje paketi nose u IP zaglavlju kako bi ih prosledili dalje ka destinaciji.

Rutiranje, odreĎivanje putanje za prenos podataka sa jednog računara na drugi bez

prethodnog uspostavljanja veze (connectionless), po (best-effort) modelu.

Fragmentaciju (rastavljanje) i ponovno sastavljanje paketa kada je potrebno kako bi

se preneli kroz mreţu koja ima manji MTU (maximum transmission unit).

5.1 IP/TCP protokol

TCP/IP je skup protokola čija je uloga da omogući umreţenim računarima da dele

svoje resurse putem mreţe. Ovaj protokol je razvijen od strane agencije DARPA u okviru

ARPANET-a ranih sedamdesetih. TCP/IP (Transmission Control Protocol / Internet

Protocol) definiše kako treba računare povezati na internet i kako se podaci razmenjuju

izmeĎu njih.

TCP/IP protokol se sastoji od dva dela. Prvi, TCP, omogućuje komunikaciju izmeĎu

aplikacionog softvera (čitača) i mreţnog softvera. On deli podatke na manje pakete radi

lakšeg i sigurnijeg transfera, a zatim ih na odredištu spaja ponovo u originalnu datoteku. Kad

jedna aplikacija ţeli da komunicira sa drugom, šalje se zahtev na tačnu adresu i tako TCP

29

uspostavlja komunikaciju izmeĎu dve aplikacije. Na taj način je linija komunikacije izmeĎu

dva računara zauzeta sve dok je jedna od dve aplikacije drţi zatvorenom.

IP deo adresira svaki taj paket sa odredišnom i izvorišnom adresom. Svi paketi moraju

da proĎu kroz odreĎenu putanju koju odreĎuje ureĎaj ruter. IP vodi računa o komunikaciji

izmeĎu računara i odgovoran je za slanje paketa primaocu preko Interneta. Paketi mogu ići

različitim putevima, u zavisnosti od gustine saobraćaja, a IP ruter brine da stignu na pravu

adresu. IP ne zauzima komunikacionu liniju izmeĎu računara kao TCP. Svaka linija se moţe

koristiti za komunikaciju izmeĎu mnogih računara u isto vreme.

Osnovna funkcija IP protokola je da svaki mreţni ureĎaj ima svoju jedinstvenu adresu

i da komunicira s drugim ureĎajima. Znači, mreţni ureĎaji su identifikovani preko IP adresa.

IP protokol, takoĎe, definiše strukturu paketa kojim podaci putuju kroz mreţu. Princip je

pretvoriti informacije u strukture pogodne za prenos. U zaglavlju paketa, pored adrese

pošiljaoca i primaoca podataka, stoje još i informacije potrebne za rutiranje, odnosno

usmeravanje paketa kroz mreţu koje obaveštavaju kako paket treba da putuje (koliko je

stanica već prošao, da li se moţe deliti u manje pakete, itd.)

1984 napravljen je pilot projekat za instalaciju i ocenu TCP/IP protokola na ne-Unix

mašinama u CERN-u. Trebalo je rešiti problem heterogenog povezivanja novijih otvorenih

sistema i prihvaćen je TCP/IP kao najbolje rešenje. Otvoreni sistemi su sistemi koji se stalno

mogu modifikovati. Cilj uvoĎenja koncepta otvorenih sistema jeste da se smanji raznolikost u

oblasti mreţnih komunikacija, tj. da se teţi ka standardizaciji svih segmenata mreţe. Tako se

prevazilaze problemi u komunikaciji koji mogu da nastanu usled korišćenja opreme i metoda

koje drugi računar ne prepoznaje. Tipičan primer otvorenog sistema u oblasti protokola jeste

TCP/IP, koji se stalno moţe modifikovati.

Trenutna verzija ovog protokola je 4 (oznaka je IPv4) meĎutim, zbog velike

ekspanzije interneta ovaj protokol postaje sve problematičniji i trenutno je u fazi nova verzija

6 (tačna oznaka je IPv6) koja treba u dogledno vreme da reši sadašnje probleme ovog

protokola.

5.2 IP adresa

IP broj ili IP adresa je jedinstvena brojčana oznaka računara na internetu. Svaki

računar povezan na internet mora imati jednoznačno dodeljenu IP adresu, kako bi se paketi

mogli isporučiti. IP adresa je zapravo binarni broj, koji se za trenutno vaţeću verziju IPv4

sastoji od 32 bita, što znači da se obezbeĎuje 232

adresa . Često se radi lakšeg pamćenja IP

adrese zapisuju u dekadnom obliku, kao četiri dekadna broja odvojena tačkom. Svaki od tih

brojeva je u rasponu 0-255, što je raspon brojeva koji se mogu prikazati u jednom 8-bitnom

binarnom prikazu.

Postoje meĎunarodne organizacije koje se brinu o raspodeli IP adresnog prostora. IP

adrese mogu biti privatne i javne. Javne IP adrese su jedinstvene, globalne i standardizovane.

Razvojem interneta počelo je nedostajati slobodnih IP adresa. Rešenje tog problema su bile

privatne IP adrese. Privatne adrese mogu biti duplirane pod uslovom da se ne nalaze u istoj

lokalnoj mreţi. Prilikom izlaska korisnika iz lokalne mreţe na internet, privatna IP adresa se

pretvara u javnu IP adresu pomoću metoda NAT (Network Address Translation) i PAT (Port

Address Translation).

I pored mnogih tehnika za uštedu adresa, kao što je privremena dodela adresa ili NAT

translacija gde cele poslovne mreţe funkcionišu sa jedne javne IP adrese, javlja se sa

porastom korisnika problem nedostatka adresa. Zato je predlog za uvoĎenje novog standarda

IPv6, koji će obezbeĎivati 2128

adresa. Umesto 4 grupe dekadnih brojeva u rasponu od 0 do

255 brojeva (recimo kao 194.255.125.1) imamo 16 grupa. Predloţeno je da se koriste umesto

dekadnih heksadekadni brojevi i da se nule uklanjaju. Teoretski, postojalo bi tačno 2128

, ili

3.403×1038

unikatnih adresa domaćinskih interfejsa. Adresa verzije 6 se piše kao osam

četvorocifrenih heksadekadnih brojeva (8 puta po 16 bitova) odvojenih dvotačkama. Jedan niz

nula po adresi moţe da se izostavi, pa je 1080::800:0:417A isto što i

30

1080:0:0:0:0:800:0:417A. Globalne adrese koje se šalju ka jednom odredištu se sastoje iz dva

dela: 64-bitni deo za rutiranje i 64-bitni identifikator domaćina.

Kako će verovatno kroz 10 godina i ovo biti malo predviĎa se odreĎivanje prioriteta

saobraćaja.

U zavisnosti od internet veze, IP adresa moţe biti uvek ista pri konekciji (statička IP

adresa), ili različita pri svakoj novoj konekciji (dinamička). Za dinamičku IP adresu mora da

postoji server koji pruţa adresu. IP adrese se uobičajeno daju kroz servis koji se zove DHCP

(Dynamic Host Configuration Protocol - ili Protokol Konfiguracije Dinamičnog Domaćina).

Internet adrese su potrebne ne samo za jedinstveno nabrajanje domaćinskih interfejsa,

već i za svrhe rutovanja, pa je veliki broj njih uvek nekorišćen ili rezervisan.Jedan isti ureĎaj

(na primer računar) moţe imati više priključaka na mreţu (više mreţnih kartica), pa u tom

slučaju moţe imati i više IP adresa (ali samo jedna po kartici).

Računari se u mreţi prepoznaju po IP adresi koju poseduju. Kako bi lakše pamtili

adrese serverima se dodeljuju simboličke adrese tipa http://www.vtsns.edu.rs a IP adresa te

simboličke adrese je recimo 195.252.92.4 Prevod IP adrese u simboličku adresu vrši DNS

servis (DNS server kod internet posrednika).

5.3 Još neki protokoli

SMTP (Simple Mail Transfer Protocol) - osnovni protokol aplikacija za elektronsku

poštu. Ovaj protokol koristi uslugu pouzdanog transfera podataka protokola TCP. Ima

klijentsku i serversku stranu. Klijentska se zapravo izvršava na serveru za elektronsku poštu

onoga koji šalje i druga strana koja se izvršava na serveru. Kada server šalje poruku drugim

serverima, on preuzima ulogu SMTP klijenta, a kad prima poruke ponaša se kao SMTP

server. Klijentska strana na uspostavlja TCP konekciju sa serverskom stranom. Nakon

uspostavljanja konekcije prelazi se na proces sinhronizacije aplikacijskog sloja, tokom koje

SMTP klijent navodi adresu pošiljaoca, posle čega počinje slanje poruke, oslanjajući se na

uslugu pouzdanog transfera podataka protokola TCP . Ukoliko ima još poruka postupak se

ponavlja, ukoliko nema, prekida se konekcija

POP (Post Office Protocol) – Lokalni e-mail klijent koristi POP3 kao standardan

protokol za primanje pošte sa udaljenog servera preko TCO/IP konekcije. POP3 podrţava

krajnje korisnike omogućujući im primanje pošte kada su konektovani i manipulisanje poštom

i kad nisu. Klijenti imaju opciju da ostave poštu na serveru, ali generalno POP3 prima svu

poštu kad je konektovan, smešta ih na korisnikov računar kao nove, a briše sa servera i

diskonektuje se

IMAP (Internet message Access protocol) je noviji protokol i podrţava i konektovan i

diskonektovan način rada. E-mail klijenti koji koriste IMAP ostave poštu na serveru sve dok

korisnik ne odluči da je izbriše. Tako više e-mail klijenata moţe da pristupi istom mail box-u.

IMAP se često koristi na velikim mreţama (univerziteti i sl.). POP3 ili skida poštu na računar

ili joj pristupa preko web-a i oba postupka traju duţe nego IMAP

31

Dodatak – HTML Reference

= New in HTML5.

Basic HTML Tag Description

<!DOCTYPE> Defines the document type

<html> Defines an HTML document

<title> Defines a title for the document

<body> Defines the document's body

<h1> to <h6> Defines HTML headings

<p> Defines a paragraph

<br> Inserts a single line break

<hr> Defines a thematic change in the content

<!--...--> Defines a comment

Formatting Tag Description

<acronym> Not supported in HTML5. Use <abbr> instead.

Defines an acronym

<abbr> Defines an abbreviation or an acronym

<address> Defines contact information for the author/owner of a document/article

<b> Defines bold text

<bdi> Isolates a part of text that might be formatted in a different direction from other text outside it

<bdo> Overrides the current text direction

<big> Not supported in HTML5. Use CSS instead.

Defines big text

<blockquote> Defines a section that is quoted from another source

<center> Not supported in HTML5. Use CSS instead. Defines centered text

<cite> Defines the title of a work

<code> Defines a piece of computer code

<del> Defines text that has been deleted from a document

<dfn> Represents the defining instance of a term

<em> Defines emphasized text

<font> Not supported in HTML5. Use CSS instead.

Defines font, color, and size for text

<i> Defines a part of text in an alternate voice or mood

<ins> Defines a text that has been inserted into a document

<kbd> Defines keyboard input

<mark> Defines marked/highlighted text

<meter> Defines a scalar measurement within a known range (a gauge)

<pre> Defines preformatted text

<progress> Represents the progress of a task

<q> Defines a short quotation

<rp> Defines what to show in browsers that do not support ruby annotations

<rt> Defines an explanation/pronunciation of characters (for East Asian typography)

<ruby> Defines a ruby annotation (for East Asian typography)

32

<s> Defines text that is no longer correct

<samp> Defines sample output from a computer program

<small> Defines smaller text

<strike> Not supported in HTML5. Use <del> or <s> instead.

Defines strikethrough text

<strong> Defines important text

<sub> Defines subscripted text

<sup> Defines superscripted text

<time> Defines a date/time

<tt> Not supported in HTML5. Use CSS instead.

Defines teletype text

<u> Defines text that should be stylistically different from normal text

<var> Defines a variable

<wbr> Defines a possible line-break

Forms and Input Tag Description

<form> Defines an HTML form for user input

<input> Defines an input control

<textarea> Defines a multiline input control (text area)

<button> Defines a clickable button

<select> Defines a drop-down list

<optgroup> Defines a group of related options in a drop-down list

<option> Defines an option in a drop-down list

<label> Defines a label for an <input> element

<fieldset> Groups related elements in a form

<legend> Defines a caption for a <fieldset> element

<datalist> Specifies a list of pre-defined options for input controls

<keygen> Defines a key-pair generator field (for forms)

<output> Defines the result of a calculation

Frames Tag Description

<frame> Not supported in HTML5.

Defines a window (a frame) in a frameset

<frameset> Not supported in HTML5.

Defines a set of frames

<noframes> Not supported in HTML5.

Defines an alternate content for users that do not support frames

<iframe> Defines an inline frame

Images Tag Description

<img> Defines an image

<map> Defines a client-side image-map

<area> Defines an area inside an image-map

<canvas> Used to draw graphics, on the fly, via scripting (usually JavaScript)

<figcaption> Defines a caption for a <figure> element

<figure> Specifies self-contained content

33

Audio / Video Tag Description

<audio> Defines sound content

<source> Defines multiple media resources for media elements (<video> and <audio>)

<track> Defines text tracks for media elements (<video> and <audio>)

<video> Defines a video or movie

Links Tag Description

<a> Defines a hyperlink

<link> Defines the relationship between a document and an external resource (most used to link to

style sheets)

<nav> Defines navigation links

Lists Tag Description

<ul> Defines an unordered list

<ol> Defines an ordered list

<li> Defines a list item

<dir> Not supported in HTML5. Use <ul> instead.

Defines a directory list

<dl> Defines a description list

<dt> Defines a term/name in a description list

<dd> Defines a description of a term/name in a description list

<menu> Defines a list/menu of commands

<menuitem> Defines a command/menu item that the user can invoke from a popup menu

Tables Tag Description

<table> Defines a table

<caption> Defines a table caption

<th> Defines a header cell in a table

<tr> Defines a row in a table

<td> Defines a cell in a table

<thead> Groups the header content in a table

<tbody> Groups the body content in a table

<tfoot> Groups the footer content in a table

<col> Specifies column properties for each column within a <colgroup> element

<colgroup> Specifies a group of one or more columns in a table for formatting

Styles and Semantics Tag Description

<style> Defines style information for a document

<div> Defines a section in a document

<span> Defines a section in a document

<header> Defines a header for a document or section

<footer> Defines a footer for a document or section

34

<main> Specifies the main content of a document

<section> Defines a section in a document

<article> Defines an article

<aside> Defines content aside from the page content

<details> Defines additional details that the user can view or hide

<dialog> Defines a dialog box or window

<summary> Defines a visible heading for a <details> element

Meta Info Tag Description

<head> Defines information about the document

<meta> Defines metadata about an HTML document

<base> Specifies the base URL/target for all relative URLs in a document

<basefont> Not supported in HTML5. Use CSS instead.

Specifies a default color, size, and font for all text in a document

Programming Tag Description

<script> Defines a client-side script

<noscript> Defines an alternate content for users that do not support client-side scripts

<applet> Not supported in HTML5. Use <embed> or <object> instead.

Defines an embedded applet

<embed> Defines a container for an external (non-HTML) application

<object> Defines an embedded object

<param> Defines a parameter for an object