HTML SKRIPTA-Finalna Verzija

8/8/2019 HTML SKRIPTA-Finalna Verzija

1/100

SKRIPTA ZA VEBE IZ PREDMETA

ELEKTRONSKO POSLOVANJE

HTML I CSS

Beograd 2010.


2/100

SADRAJ

I DEO.........................................................................................................................................6

Uvod .........................................................................................................................................6

Internet servisi...........................................................................................................................6

World Wide Web....................................................................................................................7

1.1.1 Arhitektura WWW-a ....................................................................................................7

1.1.2 Statiki i dinamiki web ..............................................................................................8

Priprema okruenja za izradu HTML sajtova............................................................................10

Primer organizacije sajta po folderima.................................................................................13

II DEO......................................................................................................................................14

Uvod u HTML...........................................................................................................................141.2 Kreiranje HTML dokumenta ............................................................................................14

Zaglavlja u HTML-u (Headings)...............................................................................................16

2 Razdvajanje Paragrafa ..........................................................................................................17

Drugi tipovi break-ova..........................................................................................................17

3 Rad sa stilovima .....................................................................................................................18

4 Rad sa listama .......................................................................................................................19

4.1 Neureene liste ...............................................................................................................19

Ureene liste........................................................................................................................20

Umetnute liste......................................................................................................................20Liste definicija......................................................................................................................22

HTML tagovi za ubacivanje slika..............................................................................................23

Centriranje teksta i Inline grafike..........................................................................................23

4.2 Atributi Height (Visine) i Width (irine) ...........................................................................24

Mapiranje slika ( tag).................................................................................................25

5 Linkovi....................................................................................................................................26

Link za lokalne fajlove..........................................................................................................26

5.1 Link za grafiku ................................................................................................................27

Link ka drugim folderima .....................................................................................................28

Anchor linkovi ka folderima vieg nivoa ...............................................................................28

Anchor link ka stranici na Internetu .....................................................................................29

5.2 Linkovi i adrese ..............................................................................................................29

5.2.1 Kako rade linkovi u pretraivau ...............................................................................29

5.2.2 Apsolutne ili relativne putanje ...................................................................................29


3/100

5.2.3 Atribut target.............................................................................................................31

Heksadecimalne oznake i boje ...............................................................................................31

Jednobojne pozadine (Solid Color Backgrounds).................................................................32

Teksturne pozadine..............................................................................................................33

6 META tagovi..........................................................................................................................346.1 Meta tag za automatski prelazak na drugu web stranicu ................................................34

Meta tagovi za opis..............................................................................................................35

Kreiranje tabela........................................................................................................................35

Redovi i Kolone....................................................................................................................37

6.2 Tabela sa podacima ........................................................................................................38

Grupisanje redova tabele.....................................................................................................40

HTML forme.............................................................................................................................41

Text Input Elementi (type="text")..........................................................................................41

Password Input Elementi (type="password")........................................................................426.3 Text Area Input Elementi (type="textarea") .....................................................................42

Radio buttons (type="radio")................................................................................................43

6.4 Check Boxes (type="checkbox") .....................................................................................44

Menu Select (type="select").................................................................................................45

Grupisanje opcija u padajuoj listi........................................................................................45

6.5 Korienje oznaka za input polja ....................................................................................46

Submit and Reset (type="submit" and type="reset")............................................................47

6.6 Grupisanje elemenata forme ...........................................................................................51

7 Korienje skriptova klijentske strane ....................................................................................52

III DEO .....................................................................................................................................53

8 CSS .......................................................................................................................................53

8.1 ta je to CSS? ................................................................................................................53

Naini primene stilova..........................................................................................................54

8.1.1 CSS kao eksterni fajl................................................................................................54

8.1.2 Interni stilovi.............................................................................................................55

8.1.3 Inline .......................................................................................................................55

8.1.4 Alternativne liste stilova ...........................................................................................56CSS Sintaksa...........................................................................................................................56

Iskazi - vrste............................................................................................................................58

Selektori Uvod.......................................................................................................................59

Tipovi selektora...................................................................................................................59

Type selektori.......................................................................................................................60


4/100


5/100

9.5 Forme .............................................................................................................................98

9.5.1 Formatiranje forme ...................................................................................................98

9.6 Prilagoavanje ulazno-izlaznim ureajima ......................................................................98

9.6.1 Prilagoavanje za tampanje ...................................................................................98

9.7 Pozicioniranje pomou CSS ............................................................................................999.7.1 Box model................................................................................................................99

9.7.2 Stranica sa sadrajem u dve kolone (bez tabela) ...................................................100


6/100

I DEO

Uvod

HTML, HyperText Markup Language, je standarizovani jezik koji se koristi pri strukturiranjutekstova, medija i ugraenih objekata u web stranice i elektronsku potu. Kao modifikovanu ipojednostavljenu verziju SGML jezika, HTML standarizuje i odrava World Wide WebConsortium (W3C). Originalnu verziju HTML-a kreirao je Tim Berners-Lee, a prva zvaninaverzija je izala juna 1993 godine.

HTML jezik je sainjen od obinog teksta i tagova. Iako se HTML znakovi (tags) esto nazivajukodom, tehniki HTML nije kod jer raunarski kod su instrukcije koje od raunara trae da izvriodreenu operaciju. Svrha HTML znakova je da se se struktura dokumenta "oznai" tako da bi

korisnikov agent (user agent), tj. internet pretraiva mogao da prepozna strukturu dokumenta iispravno je prikae u prozoru internet pretraevaa kojeg korisnik koristi.

Za dodatno modifikovanje web stranica koriste se sledee tehnologije:

CSS ili Cascading Style Sheets za izgled i poloaj prezentacije Skriptni jezici (Javascript, VBScript) za omoguavanje dinaminosti i interaktivnosti na

web prezentacijama, DOM ili Document Object Model, koji oznaava vezu izmeu skripte i elementa na

straniciGornji dodaci, u paketu sa HTML jezikom, ponekad se nazivaju DHTML ili Dinamini HTML.

Internet servisi

Sadraj i uslugama koje Internet nudi nazivaju se servisi Interneta. Svi servisi Interneta rade poklijent-server konceptu. Sutina tog koncepta je da se pomou programa koji se nalazi naraunaru korisnika mree pristupa eljenim podacima koji su smeteni na serveru na nekojlokaciji svetske mree.

Servisi Interneta se obino dele na:

Osnovne servisi koji postoje na svakom raunaru koji je na mrei; Javne servisi koji se instaliraju na znaajnije servere na mrei obezbeujui lak pristup

podacima; Posebne servisi namenjeni zadovoljenju specifinih elja korisnika.

Glavni predstavnik osnovnog servisa je e-mail (elektronska pota). Najznaajniji javni servis jeWWW. U posebne servise spadaju servisi za pretraivanje, sigurnosni servisi, servisi namenjeniadministratorima servera i mrea, i brojni drugi servisi.


7/100

World Wide Web

Najpopularniji Internet servis je World Wide Web (WWW). Nastao je 1989. godine kao rezultatideje Tim Berners Li-a i njegovih saradnika u okviru Centra za nuklearna istraivanja uvajcarskoj (CERN). U poetku veb prezentacije su bile tekstualnog tipa. Godine 1993. MarkAndersen sa saradnicima u Nacionalnom centru za superkompjuterske aplikacije na Ilinoisuniverzitetu napravio je veb brauzer sa grafikim korisnikim interfejsom koji je prikazivao boju,sliku i animaciju. Godinu dana kasnije, Andersen i Dim Klark su osnovali Netscape, koji jekreirao prvi komercijalni veb brauzer - Internet explorer, koji je postao dominantan na tritu.

WWW je sistem sa univerzalno prihvaenim standardima za skladitenje, pronalaenje,formiranje i prezentaciju informacija u klijent-server konceptu. Veb stranice se zasnivaju nastandardnom HTML (Hypertext Markup Language) jeziku koji formatira dokumente i pravidinamike linkove ka drugim dokumentima i slikama smetenim na istim ili drugim raunarima.

HTTP (Hypertext Transfer Protocol) je komunikacioni protokol koji omoguava saobraaj vebstranica u mrei. Kompletna putanja do zahtevanih veb stranica naziva se URL (UniformResource Locator).

Za realizaciju WWW servisa vaan je veb server. Veb server je softver za lociranje i skladitenjeveb stranica. On locira veb stranice koje korisnik raunara zahteva i dostavlja ih.

1.1.1Arhitektura WWW-a

WWW predstavlja mreu dokumenata koji su meusobno povezani; skup protokola koji definiukako sistem radi i prenosi podatke i softver koji omoguuje rad ove koncepcije. Ono po emu seWWW razlikuje od drugih servisa na Internetu je njegovo jednostavno korienje. WWWomoguava pretraivanje dokumenata i kretanje, kako po razliitim dokumentima jednograunara tako i po dokumentima razliitih raunara, po Internetu, korienjem jednostavnihkomandi. Svakim pritiskom na taster mia pristupa se novoj stranici koja se nalazi na istom ilidrugom serveru.

Navigacija kroz veb je jednostavna, jer se za prelazak sa jedne stranice na drugu koristehipertekst veze. Dovoljno je pritisnuti podvuenu re ili frazu i korisniku e biti prikazan linkovanidokument.

WWW je jedan od najvanijih servisa Interneta ija upotreba omoguuje:

pretraivanje, pronalaenje i itanje dokumenata na razliitim raunarima; korienje Internet servisa kao to su : Telnet, FTP, Gopher; pretragu baza podataka; prikupljanje podataka i informacija; prezentacija i uvanje multimedijalnih podataka.

WWW koristi dokumente koji su kreirani na osnovu HTML-a (Hyper Text Markup Language).HTML omoguuje, putem linkova koje nudi, prelaz sa jednog na drugi dokument, koji moe bitilociran na istom ili udaljenom raunaru. Pozicioniranjem na izabrani link i jednostavnimpritiskom na taster mia prelazi se na drugi sajt, pomou HTTP-a (Hyper Text Transfer


8/100

Protocol). Pretraga je omoguena softverom zvanim veb brauzer. Klijent postavlja zahtev, aljega veb serveru koji pomou CGI-a (Common Gateway Interface), preuzima razliite aplikacije.Arhitekturu WWW-a ine tri velika segmenta:

veb klijent veb brauzer, tj. aplikacija instalirana na raunaru-klijentu koja se koristi za

pristup stranicama na vebu (Internet explorer, Mozzila, Opera, Safari, i dr.) veb server softver instaliran na serverskom raunaru (Apache, Microsoft Internet

Information Services, i dr.) skup dostupnih servisa.

Brauzer klijenta je u interakciji sa serverom, koji u stvari predstavlja posrednika u interakcijiklijenta sa dostupnim servisima.

Lokalni podaci

Veb ita

Dodaci veb itaa

(Add-ins)

Prikupljanje

informacija

Upravljanje

transferom podataka

Sigurnost transakcija

Digitalna biblioteka

Alati za prenos

informacija

KLIJENT SERVERDOSTUPNI

SERVISI

Slika 1 Opti koncept arhitekture veba

1.1.2Statiki i dinamiki web

Web je u poetku svoga razvoja postojao iskljuivo kao statiki, tj. nisu postojale tehnologijekoje bi uzele u obzir informacije koje su pristigle od korisnika i na osnovu njih generisaleodgovor. Mogunosti statikog Weba oigledno nisu bile naroito velike: HTML stranice jesunosilac informacija, ali onih koje se ne menjaju zavisno od konteksta te informacije su uvekiste. Oigledno je bilo neophodno da se doe do odreenog stepena programibilnosti na vebu,tj. da se razviju tehnologije koje e omoguiti vei stepen interaktivnosti od statikog veba.

Pristup statikim stranicama na veb tee po sledeem redosledu:

1. Autor veb sajta kreira statiku veb stranicu i uva je u odreenom folderu na serveru


9/100

2. Klijent veb brauzer daje HTTP zahtev za datom stranicom. Zahtev se zadaje kadakorisnik raunara unese odgovarajui URL u veb brauzer.

3. Veb server prihvata zahtev klijenta i locira traenu html stranicu4. Traena stranica se vraa veb itau koji je prikazuje korisniku.

Izmena statikih veb sajtova podrazumeva izmenu pojedinanih stranica veb sajta, to nije

ekonomino ukoliko je potrbno esto aurirati veb sajt. U tom sluaju, mnogo je efikasnijeprimeniti neku od dinamikih tehnologija za kreiranje veb sajtova.

Web server

Korisnik

1.Autor pie HTML i

pohranjuje ga na diskuservera

2.Klijent daje HTTPzahtev za stranicu

3.Web server locira .htm

datoteku

4.HTML tok se vraa

itau

Slika 2 Statike veb stranice i nain pristupa

Dinamike Web stranice se zasnivaju na principu da se HTML kod ne stvara sve dok korisnik nepoeli da vidi Web stranicu. To dinamiko stvaranje stranica omoguuje da one buduprilagoene korisnikovim zahtevima, da zavise od prethodnih akcija korisnika, od vremena imesta kad je pristupio lokaciji, od njegovog identiteta i specifinih potreba.

Pristup dinamikim veb stranicama tee po sledeem redosledu:

1. Veb ita alje HTTP zahtev veb serveru. HTTP zahtev sadri URL sa traenomstranicom.

2. Veb server prihvata klijentski zahtev i aktivira aplikativni server. Aplikativni server jesoftver koji moe i ne mora biti instaliran na istom raunaru kao i veb server.

3. Na osnovu informacija primljenih u klijentskom zahtevu, aplikativni server prosleuje upitka serveru baze podataka.

4. Na osnovu dobijenog zahteva, na serveru baze podataka izvrava se odgovarajui upit.Rezultat obrade alje se nazad do aplikativnog servera

5. Aplikativni server formira HTML stranicu u koju ugrauje informacije dobijene iz bazepodataka. HTML stranica prosleuje se veb serveru.

6. Veb server alje HTML stranicu do klijentskog raunara.


10/100

Database server

Web server Aplikacioni server

Korisnik

1. Pretraiva alje HTTPzahtev koji sadri URL

2. Web server aktiviraaplikacioni server

3. Aplikacioniserver aljezahteve i

instrukcije do

database servera

4. Povratna

informacija

5. HTML strana satraeniminformacijama

6. Web server stranualje do pretraivaa

Slika 3 Dinamike veb stranice i nain pristupa

Priprema okruenja za izradu HTML sajtova

WAMP je paket nezavisno kreiranih programa instaliranih na raunaru koji koriste MicrosoftWindows operativni sistem. Interakcija ovih programa omoguava korienje dinamikih webstrana.

"WAMP" je akronim formiran od inicijala operativnog sistema (Windows) i glavnih komponentipaketa: Apache, MySQL i PHP (ili Perl ili Python). Apache je web server, koji omoguava

korisnicima da web browser-ima, kao to su Internet Explorer ili Firefox pristupe sadraju naweb serveru.

MySQL je sistem za upravljanje bazama podataka. PHP je skript jezika serverske strane kojimoe da manipulie informacijama koje su sadrane u bazi i generie web strane iznova svakiput kada se element sadraja zahteva iz browser-a. Ostali programi mogu takoe biti ukljueni upakete, kao to je phpMyAdmin koji omoguava grafiki interfejs za pristup MySQL-u, ili nekedruge skript jezike, kao tu su Python ili Perl.


11/100

Za instalaciju Wamp servera potrebno je pokrenuti instalacioni fajl WampServer2.0c.exe iklikom na next i I accept the agreement lako se instalira WAMP server. Klikom na Start/AllPrograms/WampServer/Start WampServer ete pokrenuti WAMP server, kao to je prikazanona slici 4.

Slika 4 Pokretanje WAMP servera

U donjem desnom uglu ekrana (na Taskbar-u) pojavie se ikonica koja predstavlja WAMPserver. Kada kliknete na tu ikonicu pojavie se meni sa slike 5.

Slika 5 Opcije koje nudi WAMP server


12/100

Levim klikom na nju moe se pristupiti localhost-u, PHP MyAdmin-u, SQLite Manager-u. Uzpomo www directory moe se brzo pristupiti www folderu u kome se prave projekti kojipredstavljaju sajtove. Postoje i opcije za starovanje Apache i MySQL servera i modula i mogue

je dobiti informaciju o verziji koja se koristi. Quick Admin omoguava pokretanje, stopiranje iponovno startovanje svih servisa. Klikom na localhost (127.0.0.1) dobie se ekran sa slike 6 kojipredtavlja Wamp Homepage. Ovde se mogu videti konfiguracije servera, alati i projekti koji se

kreiraju u www folderu. Svi sajtovi se uvaju u C:/WAMP/WWW. Ovde sauvani sajtovi e bitividljivi kao folderi u odeljku Your Projects.

Slika 6 Wamp Homepage

Klikom na phpMyAdmin prikazae se slika 7. Ovo nam omoguava pristup MySQL bazipodataka.


13/100

Slika 7 Prikaz phpMyAdmin-a

Primer organizacije sajta po folderima

Ukoliko ste sajt nazvali mojsajt njemu se moe pristupiti preko C:WAMP/WWW/mojsajt/. Sajt jefolder koji je najee organizovan po folderima koji su slike, download, template, index.html idruge stranice. Root folder zavisi od servera, poto je kod nas to WAMP server onda je rootfolder c://wamp/www. URL adresa preko koje se moe pristupiti sajtu je http://localhost/mojsajt.Index.php je stranica koja je podeena da se otvara pri pokretanju sajta. Na slici 8 je prikazano

kako se najee organizuje sajt po folderima.

Slika 8 Organizacija foldera


14/100

II DEO

Uvod u HTML

Kada web browser prikae stranicu ona se uitava iz jednostavnog tekstualnog fajla i sastoji izspecijalnih kodova ili tag-ova koji su oznaeni sa < i > znakovima.

Osnovni format za HTML tag je:string of text

Na primer, naslov za sekciju moe koristiti header tag:Sta su HTML tagovi ?

Ovaj tag govori web browser-u da prikae tekst Sta su HTML tagovi ? u stilu header-a level 3.Vano je napomenuti da krajnji ending tag, sadri / znak kose crte. Ova kosacrta / govori web browser-u da stopira tag-ovanje teksta. Ako se kosa crta izostavi, webbrowser e nastaviti tag na ostatku teksta u dokumentu, pravei neeljene rezultate. Ukolikopostoji tamparska greka u HTML-u, stanica e se prikazivati, ali ne onako kako je zamiljeno.

Radni prostor za kreiranje HTML strana ine tekst editor (Notepad, Wordpad i sl.) i web browseru kome se stranice pregledaju. Za kreiranje HTML stranica mogu se koristiti i napredni HTMLeditori kao to su Dreamweaver ili Kompozer. Microsoft Word nije pogodan za kreiranje HTMLstranica, iako postoji opcija za uvanje fajla u html formatu.

1.2 Kreiranje HTML dokumentaSvaki HTML dokument mora poeti tagom i zavriti se tagom . HTML dokumentsadri uobiajeno dva razliita dela, head i body. Head sadri informacije o dokumentu koje sene prikazuju na ekranu. Body sadri sve ostalo to se prikazuje kao deo web stranice.

Osnovna struktura svake HTML stranice je:

: :: :: :


15/100

Linija na samom vrhu:

nije tehniki zahtevana, ali je kod koji govori browser-u koja je verzija HTML tekue stranica

koja se pie. Potrebno je okrui ceo HTML sadraj sa ... tagovima.

Takoe, u primeru postoji i tag za komentar: . Tekst izmeu tag-ova se nepokazuje na web stranici ali taj tekst slui za informisanje pri pregledanju izvornog HTML koda.

Slede koraci koji se koriste za kreiranje HTML fajla.

Korak 1 Ako ve nije otvoren, pokrenite tekst editor.

Korak 2 Unesite sledei tekst:

FON WebU ovoj lekciji koristiete Internet da prikupljate informacije o FON-u, a potom ete napisatiizvetaj na osnovu vaih rezultata.

tag je korien da jedinstveno identifikuje svaki dokument i takoe prikae naslov na title

bar-u prozora browser-a.

Korak 3 Sauvajte dokument kao fajl koga e te nazvati fon.html i sauvajte ga naradnoj povriniu folderu/direktorijumu koji ste ve podesili.

Korak 4 Vratite se u prozor web browser-a koji ste koristili kao va radni prostor workspace.

Korak 5 Izaberite Open File... sa File menija i pronaite kreirani dokument.

Trebalo bi da sada vidite u title bar-u radne povrine prozora tekst FON Web i u web straniciispod, jedna reenica od teksta koji ste napisali, U ovoj lekciji...

Ukoliko se promeni izvorni kod HTML dokumenta, u web browseru je potrebno osveiti (refresh)stranu da bi se izmenjeni fajl uiotao.


16/100

Zaglavlja u HTML-u (Headings)

Zaglavlja se u HTML-u kreiraju tako to se delovi teksta okrue heading tag-ovima, tj. tag-ovimaza zaglavlje.Format za HTML zaglavlje tag je:Tekst koji se pojavljuje u zaglavlju

gde je N broj od 1 do 6 i oznaava veliinu zaglavlja. Evo i nekih primera sa razliitimveliinama zaglavlja:

Slika 9 Veliine zaglavlja

Nivoi zaglavlja su rangirani od nivoa 1 (najvaniji) do nivoa 6 (najmanje vaan).

Smetanje HTML zaglavlja u dokument:

Korak 1 Otvorite HTML tekst fajl kreiran u prethodnom primeru.Korak 2 Prvo emo koristiti tag da prikaemo na ekranu naslov kao najvee zaglavlje,. Unesite sledee iznad postojeeg body teksta tj. posle tag-va:

FON Web

Korak 3 Ispod teksta koji ste upravo uneli, kreirajte drugo zaglavlje za budue delove vaeFON Web stranice.

Unesite sledea zaglavja unutar body-ja vae web stranice:

O fakultetuDelatnost fakultetaSmerofi na FON-uinformacioni sistemi i tehnologijemenadmetupravljanje kvalitetomindustrijsko inenjerstvoVesti


17/100

Korak 4 Sauvajte promene u vaem tekst editoru.

Korak 5 Vratite se u web browser, osveite stranicu.

2 Razdvajanje ParagrafaHTML kod za paragraf break je

i
.
Korak 1. Otvorite html iz prethodnog fajl u tekstualnom editoru.

Korak 2. Pomerite reenicu ( Fakultet...) tako da je ona iznad O fakultetu zaglavlja. Posleovoga dodajte sledei tekst iznad O fakultetu zaglavlja:

Fakultet organizacionih nauka je visokoobrazovna institucija. lan je beogradskog univerziteta.Sedite fakuleta je u ulici Jove Ilia 154.

Korak 3. Sauvajte promene u text editoru.

Korak 4. Vratite se u va web browser, osveite stranicu i pogledajte promene.

Korak 5. Vratite se u HTML dokument u text editor. Posle druge reenice ispod unesemo O fakultetu , potom unesemo paragraph tagove

i

Ovaj deo bi trebao sada da izgleda ovako:

O fakultetu Fakultet organizacionih nauka je visokoobrazovna institucija. lan je beogradskog univerziteta.

Sedite fakuleta je u ulici Jove Ilia 154.

Korak 6. Sauvajte promene u text editoru i pogledajte novi fajl u browseru.

Drugi tipovi break-ova

Da razdvojite glavne delove web stranice, koristi se horizontal rule ili hr tag. On unosihorizontalnu liniju. HTML format za horizontal rule tag je:

Stavite hr tag ispod O fakultetu zaglavlja. Ovo e pomoi da razdvojimo otvorene reenicelekcije sa drugih delova koji slede.

I na kraju konano, sledi
tag koji forsira tekst u novu liniju kao

tag, ali bez ubacivanjeblank linije. Uporedimo razliitosti izmeu upotrebe
i

u sledea dva primera u tabeli 1:


18/100

Table 1 Mogunosti paragraf tipova

HTML kod Rezultat u browser-uU ovoj lekciji pokazacemo Vamrazlicite mogucnosti paragraftagova.

Takodje...

otkricete i razlicite izvanrednemogucosti i kombinacije tagova srodnih njemu.

U ovoj lekciji pokazacemo Vam razlicitemogucnosti paragraf tagova.

Takodje...

otkricete i razlicite izvanredne mogucosti ikombinacije tagova srodnih njemu.

U ovoj lekciji pokazacemo Vamrazlicite mogucnosti paragraftagova.

Takodje...
otkricete i razlicite izvanrednemogucosti
i kombinacije tagova srodnih njemu.

U ovoj lekciji pokazacemo Vam razlicitemogucnosti paragraf tagova.

Takodje...otkricete i razlicite izvanredne mogucostii kombinacije tagova srodnih njemu.

tag moe biti korien za razliit raspored stila.

3 Rad sa stilovima

Ba kao word procesor, HTML moe preneti web browser-u da prikae neke delove teksta uItalic ili Bold stilu ili ak u kombinaciji.

HTML nudi nekoliko tag-ova za dodavanje stila vaem tekstu (tabela 2).

Table 2 Tag-ovi za dodavanje stila

HTML kod Rezultat u browser-uOvo je Bold...

Ovo je Italic... Ovo je Typewriter...

Ovo je Bold...

Ovo je Italic...

Ovo je Typewriter...Ovo je Bold ANDItalic

Ovo Je Takodje

Novi i

Ovo je Bold AND Italic

Ovo Je Takodje


19/100

Unapredjeni! Novi i Unapredjeni!

Pratite sledee korake da dodate style tag-ove u HTML dokument:

Korak 1. Otvorite HTML dokument u text editoru.

Korak 2. Pronaite re Fakultet u prvoj reenici. Promeniemo je u bold-u da jenaznaimo kao vanu re. Unesite tag-ove da bi se ova re pojavila kao bold tekst:

Fakultet

Korak 3. Sada emo modifikovati drugi paragraf sa bold i italic tag-ovima da naglasimorei. Unesite ... i ... tag-ove oko rei beogradskog univerziteta tako da ovaj deoizgleda ovako:

Fakultet organizacionih nauka je visokoobrazovna institucija. lan je beogradskoguniverziteta. Sedite fakuleta je u ulici Jove Ilia 154.

Korak 4. Konano, koristili smo typewriter tag koji oznaava posebnu re. Iznad Delatnostfakulteta zaglavlja, unesite sledee:

Delatnost fakulteta, je obazovno-nauni rad ukljuujui i srodne delatnosti.

Sauvajte u text editoru i ponovo je uitajte va web browser.

4 Rad sa listama

4.1 Neureene liste

Neureene liste ili .. tag-ovi, su one koje se pojavljuju kao podaci sa bulet oznakomili oznakama na poetku. Bullet oznaka zavisi od posebne verzije vaeg web browser-a i fontaspecifikovanog za prikazivanje normalnog teksta.

Evo primera neureene liste:

Izgled u browser-u

TIPOVI STUDIJA: Dodiplomske Postdiplomske

A ovo je HTML format koji pravi ovakav izgled liste:

TIPOVI STUDIJA:


20/100

Dodiplomske Postdiplomske

tag oznaava poetak i kraj liste, i oznaava svaku stavku liste.

Ureene liste

Ureene liste su one gde browser numerie svaku sukcesivnu listu podataka tako to poinje sa1. Primetite jedinu promenu ul tag-a u ol tag. Evo jednog primer

A ovo je HTML format:

SMEROVI:IT MEN UK OM

Umetnute liste

Ureene i neureene liste mogu imati razliite nivoe; svaka e biti ubaena skladno u va webbrowser.Ovde je dat primer jedne neureene liste sa podnivoima drugih lista:

Izgled u browser-u

Izgled u browser-u

SMEROVI:1. IT2. MEN3. UK4. OM


21/100

Neuredjena i umetnuta lista

Ovo je prva stavka Ovo je druga stavka

o Ovo je prva stavka druge podstavke Ovo je prva podstavka Ovo je druga podstavka

o Ovo je druga stavka druge podstavkeo Ovo je treca stavka druge podstavke

Ovo je treca stavka

Primetite kako se bullet oznaka menja sa svakom promenom nivoa liste. A ovako izgleda HTMLformat koji daje izgled gore navedene tabele:

Neuredjena i umetnuta lista

Ovo je prva stavkaOvo je druga stavka Ovo je prva stavka druge podstavke Ovo je prva podstavka Ovo je druga podstavka Ovo je druga stavka druge podstavke Ovo je treca stavka druge podstavke

Ovo je treca stavka

Ne samo da moete meati ureene liste unutar ureenih, ve moete takoe da meate iunosite razliite tipove listi. Recimo, HTML poinje da izgleda veoma runo, ali gledajte kakoliste u potpunosti sadre druge liste.

Npr., ova ureena lista sadri umetnutu neureenu listu:


22/100

A ovako izgleda HTML dokument, kojim se postie ovakav efekat:

Kombinovana lista

Ovo je prva stavkaOvo je druga stavka Ovo je prva stavka druge podstavke Ovo je prva podstavka Ovo je druga podstavka Ovo je druga stavka druge podstavke Ovo je treca stavka druge podstavke

Ovo je treca stavka

Pogledajte fajl u browser-u.

Liste definicija

Pored ureenih i neureenih listi postoje i liste definicija. Za definisanje jedne takve liste koristese tagovi izmeu kojih se navode definicija. Svaka definicija se sastoji od definisanogtermina koji se stavlja izmeu i taga i same definicije za taj pojam koja se stavljaizmeu otvorenog i zatvorenog taga. Sledi primer.

FON- Fakultet organizacionih naukaETF- Elektrotehnicki fakultet

Izgled u browser-uKombinovana lista

1. Ovo je prva stavka2. Ovo je druga stavka

o Ovo je prva stavka druge podstavke1. Ovo je prva podstavka2. Ovo je druga podstavka

o Ovo je druga stavka druge podstavkeo Ovo je treca stavka druge podstavke

3. Ovo je treca stavka


23/100

HTML tagovi za ubacivanje slika

Inline slika je ona slika koja se pojavljuje unutar Web stranice,

kao to je recimo ova slika logo

HTML format za inline image tag izgleda ovako:

gde je filename.gif ime GIF fajl-a koji je smeten u istom direktorijumu/fajl-u gde je smeten iHTML dokument. Inline znai da e web browser prikazati sliku izmeu teksta. Tekst seodmah nastavlja iza logo slike.

Da bi se slika pojavila u posebnom redu, prosto unesite paragraf tag ispred image tag-a:

Centriranje teksta i Inline grafike

Sa atributom u tag-u, takoe se moe regulisati poravnavanje susednog teksta salinijom slike. Atribut align dodat ispred tag-a moe proizvesti sledee efekte:

- poravanava tekst sa gornjom ivicom slike - poravnava tekst sa sredinom slike - poravnava tekst sa donjom ivicom slike

Tekst se poravnava samo za jednu liniju... ( skupiti ili razvui WWW browser window i videti tase deava). Postavljanje Inline Image u HTML Dokument

Korak 1 Kreirajte folder pod nazivom HTML VebeKorak 2 U ovom folderu sauvajte sliku logo.jpg (desni klik, Save Picture As) i sliku

fon.jpg

Korak 3 U istom folderu, kreirajte HTML fajl u unesite sledei kod:

FAKULTET
http://elab.fon.bg.ac.yu/file.php/3/html/slike_za_lekcije/slika.jpghttp://elab.fon.bg.ac.yu/file.php/3/html/slike_za_lekcije/leonardo.jpghttp://elab.fon.bg.ac.yu/file.php/3/html/slike_za_lekcije/slika.jpghttp://elab.fon.bg.ac.yu/file.php/3/html/slike_za_lekcije/leonardo.jpg


24/100

Ovo je zvanini logo predmeta na fakultetu.

Fakultet datira od 1969 godine.

Sauvajte fajl i pogledajte kako izgeda u browser-u.

4.2 Atributi Height (Visine) i Width (irine)

Druga opcija koju mogu sadrati tag-ovi su dva atributa koja daju dimenzije slike upikselima. Standardno, web browser e utvrditi ove dimenzije na osnovu slike koju uitava;uitavanje slike moe biti bre ukoliko se naznae ove veliine u HTML-u. Format koji sadriovu opciju izgleda upravo ovako:

gde x oznaava irinu, a y visinu slike u pikselima.

Napomena: Poredak atributa unutar tag-a nije bitan.

esto se zapitamo da li moemo da promenimo dimenzije slike unoenjem drugih veliina odtrenutne u kojoj se slika nalazi? Odgovor na ovo pitanje je pozitivan, ali rezultati mogu bitineeljeni. Uneti vee brojeve (da bi slika bila vea) rezultat bi bio "blocky" picture. Ponekad ovomoe biti koristan efekat na slikama sa velikim povrinama obojenim punom bojom. Ukoliko sepak unesu manji brojevi ( da bi slika bila manja ) rezultat bi mogao biti u vidu iskrivljene slike.Takoe, puna veliina slike mora biti download-ovana, tako da nema prave utede uvremenu potrebnom za download slike. Svaki re-sizing slike zahteva extra "work" web browser-a da bi rekalkulisao page layout, tj. izgled, plan stranice. Za pripremu slika koje e biti sastavni

deo web strane, moe se koristiti Photoshop. Takoe se moe naznaiti i veliina Inline Image-au dimenzijama koje su procentni deo trenutne veliine prozora browser-a, tj. prozora, tako da ese slika sama resize-ovati sa promenom, tj. proirivanjem i smanjivanjem veliine browserprozora od strane korisnika.

U prethodnom primeru, izmenite kod, tako da izgleda na sledei nain:

FAKULTET>

Ovo je zvanini logo predmeta na fakultetu.

Fakultet datira od 1969 godine.p>

U browser-u pogledajte rezultate promene. Pokuajte da menjate veliinu prozora browser-a iprimetite kako se veliina prve slike menja proporcionalno veliini prozora, dok je veliina drugeslike fiksna, tj. ne menja se sa promenom veliine browser-a.


25/100

Mapiranje slika ( tag)

Za definisanje mape nad slikom koristi se tag. Mapirana slika predstavlja sliku koja usebi sadri pojedine delove na koje je mogue kliknuti i koji predstavljaju linkove ka drugimstranicama.

Prvi korak je otvaranje i zatvaranje taga:

...

Svaki tag mora da sadri atribut name da bismo kasnije nekoj slici pridruili tu mapupozivajui se na vrednost tog atributa koji smo zadali u tagu .

Drugi korak prilikom kreiranja mape jeste ubacivanje regiona (povrina). To se radi pomou taga. Sledi primer jedne takve povrine:

Svaki tag ima obavezni atribut shape, atribut koji govori o tome kog oblika je povrina.Shape atribut moe uzeti sledee vrednosti:

1. default povrinu predstavlja cela slika

2. rect definie pravougaonu povrinu3. circle povrinu predstavlja krug4. poly povrinu predstavlja poligon koji se formira od taaka

Drugi obavezni atribut jesu koortinate (coords) u kojim se navode take za kreiranje te povrine.Ukoliko je vrednost atributa shape=rect u koordinatama se zadaju dve take (x,y parovi) kojepredstavljaju dijagonalu pravougaonika koji treba da se kreira. Ukoliko je vrednost atributashape=circle u koordinatam se zadaje taka (x,y) koja predstavlja centar kruga i treavrednost koja predstavlja poluprenik. Ukoliko je vrednost shape=poly u koordinatama sezadaju take od kojih se pravi poligon.

Trei atribut koji je skoro neizostavljiv jeste hrefkoji predstavlja adresu na koju e browser otii

prilikom klika na tu povrinu.

Recimo, mapa bi mogla da izgleda ovako:


26/100

Kada je kreirana mapa, potrebno je na stranici ubaciti sliku. Korienjem atributa usemap sedata slika povezuje sa kreiranom mapom.Kompletan primer izgleda ovako:

5 Linkovi

Link za lokalne fajlove

Najprostiji link je onaj koji otvara jo jedan HTML fajl u direktorijumu. HTML format koji ovo radije:

tekst koji odgovara linku

Gde je a oznaka za link (anchor) i href za " hypertext reference". Filename mora biti drugiHTML fajl. Bilo koji tekst da dolazi posle prvog i pre zavnog bie "hypertext" koji sepojavljuje kao podvuen i predstvalja hiperlink. Sledei koraci grade link u HTML dokumentu nalokalni fajl:

Korak 1 Otvoriti novi HTML document u text editor-u.


27/100

Korak 2 U ovaj dokument ubaciti sledei kod:

Korak 3 Ovde ste doli jer ste kliknuli na link!

Korak 4 Sauvati dokument pod nazivom "drugi.html" u nekom folderu.

Korak 5 U istom folderu kreirati jo jedan HTML fajl "prvi.html".

Korak 6 U tom fajlu otkucati sledei kod:

Ovo je dokument sa linkom.

Kliknite na link da predjete na drugu stranu.

Link na drugu stranu

Korak 7 Sauvajte fajl i pogledajte u browser-u. Proverite da li link radi.

5.1 Link za grafiku

U prethodnoj lekciji govori se o nainu prikazivanje "inline" grafike na web stranici. Sa anchortagom takoe se moe formirati link koji prikazuje grafike fajlove. Kada je anchor linkselektovan, on e sam download-ovati image fajl i prikazati sliku (image) u web browser-u.

Napomena: Veina browser-a e, kao link, prikazati image fajl u web browser-u. U zavisnostiod web browser-a, i preferences/settings na kompjuteru, moe biti ponueno ili da sauva fajl ilida se selektuje aplikacija da prikae fajl. Bez obzira na izbor, ako se ode tako daleko, link imagefajla je uspean. Najprostiji anchor link je fajl u istom folderu kao i dokument koji se tako zove.

Format za kreiranje hypertext link za grafiku je isti kao i gornji za linkovanje na drugi HTMLdokument:

tekst koji predstavlja link

gde je filename.gif ime GIF image file-a.

Sada treba pratiti sledee korake kako bi se dodao link za grafiku HTML dokumentu:

Korak 1 Download-ujte sliku fon.jpg.

Korak 2 U istom folderu gde je slika, kreirati HTML fajl koji sadri sledei kod:

Ovo je dokument sa linkom na sliku.

Kliknite na link da biste videli sliku u browser-u.

Link na sliku

Korak 3 Sauvati fajl i pogledati u browser-u.


28/100

Link ka drugim folderima

Anchor tagovi takoe mogu da linkuju HTML dokument ili grafiki fajl u drugi folder u odnosu nadokument koji sadri anchor. Npr. u ovoj lekciji moe se sauvati sva grafika u odvojenomfolderu zvanom Pictures. Dok se kreira sve vie i vie HTML fajlova, uvanje image fajlova naovim HTML-ovima e uiniti stvar manje vie organizovanijom za korisnika:

Korak 1 Kreirati folder Pictures na istoj lokaciji gde je sauvan fajl iz prethodne vebe.

Korak 2 Pomeriti fon.jpg fajl u novi folder.

Korak 3 Izmeniti kod html fajla tako da red za link izgleda ovako:

link na sliku
.
Korak 4 Pogledati fajl u browser-u.

Napomena: Sa HTML-om se moe narediti web browseru da otvori bilo koji dokument/grafikukoji se nalazi u folderu na niem nivou (npr. u sub-directoriju ili folderu unutar directorija/folderakoji sadri HTML fajl) korienjem "/" karaktera da se naznai promena u folderu Pictures. Ako

je sve uraeno kako treba, link u reenici link na sliku bi trebalo da pozove fajl sauvan ufolderu Pictures.

Anchor linkovi ka folderima vieg nivoa

Linkovi koji su gore prethodno konstruisani poznati su kao "relative" linkovi, sa znaenjem daweb browser moe konstruisati ceo URL koji se odnosi na trenutnu lokaciju HTML stranice ilinkovati informaciju u tagovima. Ovo je jako korisno, jer se mogu izgraditi itaveweb stranice na jednom kompjuteru, testirati, a potom i pomeriti na drugi kompjuter i svi relative

linkovi e ostati netaknuti.

U ovoj lekciji e se konstruisati hyperlink ka dokumentu koji je sauvan u folderu nieg (lower)nivoa od working HTML stranice. Takoe se moe konstruisati link koji je povezan sa (higher)viim nivoom foldera:

return to home

Svaki primer "../" URL-a na anchor linku govori web browser-u da ide na folder vieg nivoa uodnosu na tekuu stranicu; u ovom sluaju da ide dva nivo iznad i trai fajl koji se zovehome.html.

Recimo da folder Pictures nije bio u istom folderu kao i prvi.html fajl ve jedan nivo iznad.U prethodnoj sekciji je konstruisan link iz prvi.html fajla u fon.jpg fajl u folderu Pictures:

Sada, treba reorganizovati ovu web strukturu tako da folder Pictures bude na viem nivou:


29/100

Prednost ove strukture je u tome da e biti lake sauvati veliki broj slika u gornjem folderu kojimoe da se deli sa drugim web stranicama. Pokuajte samostalno da kreirajte odgovarajuustrukturu foldera i da napravite link!

Anchor link ka stranici na Internetu

Potpun HTML format za Anchor link ka stranici na Internetu :

Text to Activate Link

gde je URL skraeno od Uniform Resource Locator, adresa Internet sajta gde korisnik treba daode. Niz Text to Activate Link oznaava ta e se pojaviti kao hypertext u web browser-u(obino ne uvek) podvueno i u plavoj boji. Kada korisnik klikne na hypertext, web browser ega linkovati na Internet site odreen sa URL. Treba zapamtiti da URL moe biti link za drugiWorld Wide Web (WWW) server, Gopher server, FTP site, ili bilo koji text, grafiku, muziku, videofajl na ovim serverima. Sada, e se dodati hypertext link na sajt koji sadri podatke ofakultetu.Treba pratiti sledee korake kako bi se dodali anchor linkovi na HTML dokument:

Korak 1 Promeniti fajl iz prethodne vebe tako da kod izgleda ovako:

Ovo je dokument sa linkom na sajt.

Kliknite na link da biste otvorili sajt Fon-a.

Link na sajt fakulteta.

Korak 2 Sauvati fajl i pogledati u browser-u.

5.2 Linkovi i adrese

5.2.1Kako rade linkovi u pretraivauHiprelinkovi se prave tako to se neki element na strani okrui kotvom, odnosno oznakom a.Atribut href, to je skraenica za hypretext reference, definie odredite linka.

Tekst na kome je postavljen link se u pretraivau oznaava tako da se moe jasno razlikovatiod okolnog teksta. Obino je link podvuen i obojen plavom bojom. Nakon to ste posetiliadresu na koju taj link upuuje, linkovi obino postaju purpurne boje. Podrazumevano je da seslike na kojima je postavljen link prikazuju sa okvirom u istim bojama, premda mnogi webdizajneri definiu svoje boje. Kada prelazi preko linka, kursor menja oblik u aku sa kaiprstomupretim u neto, lme se ukazuje da se taj link moe kliknuti.

5.2.2Apsolutne ili relativne putanje

URL je skraenica za universal resource locator. URL ili web adresa je u sutini pokaziva naodreeni dokument ili objekat koji se nalazi negde na Internetu, sa datom putanjom koja opisujekako se dolazi do tog dokumenta. URL putanja moe biti apsolutna, relativna u odnosu nadokument, ili relativna u odnose na koren.


30/100

Apsolutna adresaje adresa na Internetu koja sadri sve informacije koje su raunaru potrebne uvezi lokacije koja se trai. Tu spadaju informacije o tome kako se vraaju informacije, ukljuujuiprotokol, domen, fasciklu i ime datoteke.http://www.mfa.org/exhibitions/upcoming.htmZato je protokol tako bitan? Svim vrstama web adresa se moe pristupiti preko apsolutnogURL-a, ukljuujui i web strane, adrese elektronske pote, FTP sajtove, itd. Protokol ukazuje na

to koja vrsta resursa se trai.

Relativna putanjaje skraeni oblik adrese kod koje se razliti delovi adrese, kao to je protokol,adresa sajta ili fascikla, mogu predvideti na osnovu ostalih informacija koje stoje naraspolaganju.

Putanje relativne u odnosu na dokument daju samo informacije koje su potrebne da iz tekuegdokumenta se ode na eljenu stranu. Ako se eli povezati dve strane koje se nalaze u istojfascikli, potrebno je da zadate samo ime datoteke, na primer (sa strane mojastrana.html):mojadrugastrana.html.

Ako se eli postaviti link na neku stranu koja je dublje u strukturi fascikle, u odnosu na stranu sa

koje se link poziva, onda treba da se navede i ime fascikle i ime datoteke (ako je link na stranimojastrana.html) mojafascikla/mojastrana.html.

Ako se eli da link ukazuje na drugu stranu koja je u fascikli, koja je iznad fascikle u kojoj setrenutno nalazi, onda preko ../ ukazuje se na to da treba da se popne jedan nivo navie. Izaovog sledi ime datoteke (linka sa strane mojastrana.html): ../index.html.

Ako se eli da se u hijrearhiji fascikli kree navie ili nanie za vie nivoa, onda treba navestisva imena fascikli ili indikatore ../ vie puta, po jednom za svaki nivo.pages/myfolder/mythirdpage.html../../index.html

Putanja relativna u odnosu na koren uspostavlja vezu izmeu datoteke i korena celog sajta.Koren sajta je ono to se smatra generalnim imenom sajta, kao to je na primerwww.macromedia.com ili www.mfa.org:

/index.html/pages/mypage.html/pages/myfolder/mythirdpage.html

Putanje koje se zadaju relativno u odnosu na koren uvek ispred same putanje imaju kosu crtu(/), to moete videti i u primerima koje smo dali.

Zato biste koristili putanje relativne u odnosu na koren sajta? Ove putanje kasnije mogu dautede vreme, ako je potrebno da promenite organizaciju dokumenata na svom sajtu. Ako imatevesti u nekom preduzeu, koje ste postavili onlajn i ako mesene lanke prebacujete u fascikluArchive, kada zapone novi mesec onda putanje koje se zadaju relativno u odnosu na korensajta mogu da utede vreme koje biste proveli u prepravljanju linkova koji sada treba da budu uskladu sa novom strukturom.
http://www.mfa.org/exhibitions/upcoming.htmhttp://www.macromedia.com/http://www.macromedia.com/http://www.mfa.org/http://www.mfa.org/exhibitions/upcoming.htmhttp://www.macromedia.com/http://www.mfa.org/


31/100

5.2.3Atribut target

Kada se klikne na link, podrazumeva se da se novi dokument otvara u istom prozorupretraivaa u kome je prethodno bio otvoren tekui dokument. Sa druge strane, HTMLomoguava da zadate gdelink treba da se otvori u novom prozoru pretraivaa, ili ako se radi ofrejmovima, onda u odreenom frejmu. Ovo se zadaje putem opcionalnog atributa oznake

anchor , a to je target. Ako elite da se novi dokument otvori u posebnom prozorupretraivaa, onda atribut target treba da podesite na _blank.

Heksadecimalne oznake i boje

U vaem web browseru na raspolaganju vam je pregrt boja kojima moete da obojite tekst ipozadine. Svaka boja se identifikuje kroz tri njene Red-Green-Blue (RGB) vrednosti, koje suzadate brojem u rasponu od 0 do 255, pri emu svaka predstavlja intenzitet crvene, zelene iplave. Maksimalne vrednosti (R=255, G=255, B=255) dae belu a minimalne vrednosti (R=0,G=0, B=0) prikazae crnu boju. Sve ostale boje su zadate ureenom trojkom (tripletom) RGBvrednosti.

Tricky deo je da se vrednosti za boje zadaju u heksadecimalnom umesto u dekadnom sistemu(0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F), a sve zbog toga to je kompjuterima lake da njima barataju.Pa recimo u primeru "6699FF", "66" oznaava vrednost crvene, "99" vrednost zelene, a "FF"vrednost plave.

Evo nekoliko primera (tabela 3):

Table 3 Boje u heksadecimalnom sistemu

Boja Heksadecimalno Boja Heksadecimalno

FFCCCC 3300FF

33FF66 AA0000

663300 9900FF

000077 FFFF00

EEEEEE 888888

444444 000000

U svakom sluaju se ne sekirajte zbog numerikih konverzija iz dekadnog u

heksadecimalni sistem, jer postoji mnotvo alatki koje vam omoguavaju da samoklikom na eljenu boju, dobijete ispisanu njenu heksadecimalnu reprezentaciju. A isami web browseri su dovoljno pametni da prepoznaju skraenice za sledeih 16boja.

Boja Ime boje Boja Ime boje

aqua black

blue fuchsia


32/100

gray green

lime maroon

navy olive

purple red

silver teal

white yellow

Jednobojne pozadine (Solid Color Backgrounds)

Za FON Web, prva stvar koja je raena je dodavanje color background-a na index.html fajl.HTML format za dodavanje solid color background-a modifikuje tag-a na sledei nain:

gde je XXXXXX heksadecimalna reprezentacija (oznaena sa # znakom ispred) eljene boje.

Korak 1 Otvoriti fon.html fajl u text editor-u.

Korak 2 Pronai tag i promeniti ga u:

Korak 3 Save i Load HTML file u web browser-u

Ako je sve uraeno kako treba, browser bi trebalo da promeni pozadinu u jednobojnu crnu boju.Ali, moda sada ne moete da vidite tekst! Zato? Zbog toga to je default color za text jetakoe crna, tako da sada imamo crni tekst na crnoj pozadini! Na sreu, dodatnim komandama,body tagu moemo dodati boju za tekst i hypertext:

gde XXXXXX vrednosti oznaavaju sledee:

BGCOLOR = boju background-a,tj. pozadine (default je grey (siva)) TEXT = boju stvarnog body teksta (default je black, tj crna) LINK = boju hypertext link-a (default je blue, tj plava) VLINK = boju hypertext-a koja oznaava da je ve pregledan (default je purple)

Izmenom vrednosti ovih vrednosti u body tagu, moemo dobiti:

NAPOMENA: redosled oznaka u tagu nije relevantan

Sada treba modifikovati tag-ove u svim HTML fajlovima (to moete uiniti lako koristeicopy i paste malopreanjeg primera, na novi tag).


33/100

Teksturne pozadine

Boje osveavaju izgled web stranica, ali dodavanjem tekstura, koristei male (GIF ili JPEG)sliice, moete napraviti i lepi efekat. Njih e web browser kopiranjem razvui na celupozadinu. Obratite panju na:

itljivost: mnoge pozadinske teksture e vie odmoi nego pomoi itaocu. Pokuajte dapostavite teksture koje su svetlije (uz taman tekst) ili tamne (uz svetao tekst),olakavajui itanje na taj nain jaim kontrastom.

Veliinu: Ne postavljajte slike velikih veliina, jer su konekcije kod nas jo uvek spore, pae drugima biti potrebno dosta vremena da stranice uopte i otvore.

HTML format za dodavanje pozadine kroz sliicu je:

gde paper.gif predstavlja naziv samog fajla slike.Potom u tag dodajte i

dobiete crveni tekst na sliici koja e biti iskopirana na celom backgroundu web stranice (slika3).

Slika 10 Izgled tekstualne pozadine

Korak 1 Iz materijala sa sajta skinite fajl paper.gif i iskopirajte je u folder boja koji stepredhodno napravili.

Korak 2 U tekst editoru kreirajte primer web stranice u folderu boja, unoenjem koda,eljenog teksta i odgovarajueg linka do slike

Primer

UNESITE ZELJENI TEKSTKOJI CE BITI PRIKAZANNA MULTIPLIKOVANOJ POZADINSKOJ SLICI


34/100

Korak 3 Fajl snimite sa html ekstenzijom. Kreiranu web stranicu otvorite u browseru ipogledajte da li ste zadovoljni rezultatom.

6 META tagovi

Sintaksa HTML-a dozvoljava korienje meta informacija unutar web stranice i to u onom deluweb stranice koji browser ne prikazuje. Postoje razliiti tipovi meta tagova, ali u okviru ovihlekcija razmotriemo samo neke od najkorisnijih. Meta tagovi se u HTML dokumentu smetaju uzaglavlje dokumenta, tj. izmeu tagova i .

6.1 Meta tag za automatski prelazak na drugu webstranicu

Prvi tip meta tagova omoguava kreiranje HTML web stranice koja e ukoliko ne bude uitana

posle tano odreenog vremenskog perioda automatski prei na neku drugu web stranicu. Ovose koristi iz vie razloga:

U sluaju pomeranja stranice. Ukoliko doe do pomeranja stranice zbog redizajna sajtaili promene servera, kao i u sluaju ukidanja stranice, potrebno je preusmeriti pozivstranice na novi URL.

U sluaju kreiranja serije web stranica koje treba sa se menjaju u odreenimvremenskim intervalima (kao Slide Show).

U sluaju web sajtova koji imaju uvodnu stranicu (intro)

Sintaksa ovog tipa meta tagova izgleda na sledei nain:

My page title

gde x predstavlja vreme koliko e ova stranica biti prikazana (izraeno u sekundama), a URL jeadresa na koju e se izvriti preusmeravanje posle isteka tog vremena. Primer :

Korak 1 Pokrenite tekst editor i kreirajte novi HTML fajl. Napravite sledee zaglavlje saodgovarajuim meta tagovima.

Korak 2 Prepravite fajl tako da ima sledei kod:

Untitled Document
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdhttp://www.w3.org/1999/xhtmlhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdhttp://www.w3.org/1999/xhtml


35/100

ekaj!!!

Korak 3 Sauvajte stranicu i pogledajte u browser-u kako izgleda.

Meta tagovi za opis

Meta tagovi vam omoguavaju da postavite dodatne informacije na vau web stranicu koje eomoguiti da se ona lake pronae na Internetu. Krajnje pojednostavljeno, web pretraivai(Google, Altavista, Yahoo, itd.) rade po sledeem principu: svaki od pretraivaa sadri bazupodataka u kojoj su podaci o web stranicama. Na osnovu kriterijuma pretrage zadatog od stranekorisnika, pretrauje se baza podataka i prikazju rezultati. Rezultat pretrage su web stranicekoje sadre traeni kriterijum. Na veini ovih web stranica traeni kriterijum se nalazi na poetkusadraja stranice, tako da osim ako je sam poetak stranice veoma deskriptivan, korisnik needobiti pravu sliku onoga to je na stranci. Sintaksa meta taga za dodavanje opisa straniciizgleda ovako:

Maksimalna duina meta tagova iznosi 1024 karaktera, poev od prvog < i zakljuno saposlednjim > u meta tagu, to znai da uneti opisi treba da budu kratki i precizni. Jo jedankoristan meta tag koji e olakati pronalaenje web stranice preko pretraivaa je omoguavadodavanje kljunih rei (keywords) koje opisuju stranicu. Sintaksa ovog taga izgleda ovako:

Kreiranje tabela

HTML za basic table strukturu je prikazan ispod u tabeli 4

Table 4 HTML kod za prikaz tabele

HTML kod Izgled u browser-uRed 1 kolona 1Red 1 kolona 2

Red 1 kolona 3

Red 2 kolona 1Red 2 kolona 2Red 2 kolona 3


36/100


border=1 atribut u tag-u daje instrukcije browser-u da iscrta liniju oko tabele debljine od1 pixela. Svaki red je definisan sa Table Row tag-ovima ... i svaka elija u svakom redu

je definisana sa Table Data ... tag-ovima. Svaki ... tag moe sadrati bilo kojitip HTML tag-a -- headers, styled text, hypertext links, inline graphics itd. U ovom tag-u moe sekoristiti nekoliko atributa kojima se podeava,( Alignment )tj. centrira ili regulie svaki podatakkoji se unosi u elije (tabela 5):

Table 5 Atributi za regulisanje svakog podatka iz elije

Horizontal Alignment (Horizontalno

centriranje)

Vertical Alignment (Vertikalno centriranje)

centrira sveelemente na levu stranu elije(ovo je default setting)

centrira sveelemente na desnu stranu elije

centrira sveelemente u centralnom delu elije

centrira sve elementena vrh elije

centrira sveelemente na dno elije

centrira sveelemente na sredinjem delu elije(ovo je po default setting)

Ovi atributi se mogu koristiti i kombinovano:

Ovaj HTMLe prikazati eliju sa podacima smetenim u levom donjem uglu elije. Da bi steodradili ovu vezbu sledite sledee korake:

HTML kod moemo kucati u nekom tekst editoru (NotePad, TextPad, i dr.), kao i u prethodnimlekcijama.

Korak 1 Pokrenite tekst editor. Naprevite osnovnu konstrukciju za html stranicu kao dosada.

Korak 2 Kod koji elite da unesete kucate u sekciji koda kao u Tabeli 1.

Korak 3 Da biste pogledali izgled fajla u browser-u potrebno je da ga prvosauvate (File/Save), a zatim izaberete konkretan browser u kome elite da pogledate fajl.


37/100

Redovi i Kolone

Tabela koja je ispod prikazana je prosta i u obliku kocke tri reda sa tri kolone. ta se svemoe dobiti ukoliko se koriste colspan i rowspan atributi u ... tag-ovima (tabela 6)

Table 6 Korienje colspan i rowspan atributa

HTML kod Rezultat u browser-uRed 1 kolona 1Red 1 kolona 2-3



** Obratiti panju na atribut druge elije uprvom redu (obuhvata) spans 2 kolone.Tekst je podeen tako da se nalazi u centruelije.

Sada je prikazana elija koja obuhvata 2 reda.Red 1 kolona 1Red 1 kolona 2-3Red 2 kolona 1

Red 2 kolona 2Red 2 kolona 3Red 3 kolona 1Red 3 kolona 3

Red 1 kolona 1 Red 1 kolona 2-3

Red 2 kolona 1 Red 2 kolona 2 Red 2 kolona 3

Red 3 kolona 1 Red 3 kolona 3


38/100

6.2 Tabela sa podacima

Korak 1 Pokrenite tekst editor. Napravite osnovnu konstrukciju stranice za HTML.

Korak 2 Izmeu body tagova unesite sledei kod.OdsekProsecna ocenaBroj studenata *Informacioni sistemi i tehnologije7.68302Menadment7.9284Upravljanje kvalitetom8.6254Operacioni menadment8.32>18 & 18 &


39/100

Pogledajte HTML kod za prvi red. Table Header tag-ovi ...funkcioniu isto kao i...tag-ovi izuzev toga da se svaki tekst automatski podeava na bold i da su svipodaci smeteni u centru elije. Takoe, u eliji za Operacioni menadment mora se samokoristiti HTML za specijalne karaktere da bi se prikazali simboli kao to su "", i "&".

Sada treba jo po neto dodati u tabelu.

Neki browser-i dopustaju korisniku da specificira i druga podeavanja za linije koje grade tabelu.Ovo su atributi za table tag:

gde X oznaava irinu (u pixelima) od spoljanje ivice tabele. Atribut cellpadding specificirakoliko praznog prostora "space" postoji izmeu podataka u eliji i zidova elije veliina kojaoznaava visinu Y uinie eliju veom ("poveavanje" elije). Atribut cellspacing specifikuje (upixelima) irinu izmeu unutranjih linija koje dele eliju.

Izmeniti tag tako da sada pie:

tag postavlja niz teksta (centriran irinom tabele) kao naslov/poglavlje u tabeli.Izmeniti linije tabele, tako da sada pie:

STATISTIKA

Moe se i dodati HTML unutar tag-a; proveriti da li se nalazi unutar...

tag-ova.

Obojiti tekst ... tag-ovima u narandastu boju. Izmeniti HTML za prvi red tako daizgleda ovako:

OdsekProsecna ocenaBroj studenata *

Pomeriti tabelu tako da se sada nalazi na sredini stranice. Ako web browser

podrava... tag, onda samo okruiti tabelu sa ovim tag-ovima.

Konano, treba dodati kolonu sa leve strane prikazati u grupama sve smerove. Sada trebadodati praznu eliju dodavanjem na prvi red HTML tabele (jednu sa column headings,tj. zaglavljem kolone).

Odsek


40/100

Prosecna ocenaBroj studenata *

Zatim otii na drugi red HTML tabele (sadre podatke za odseke), i dodati u prvu eliju kojaobuhvata 4 reda (prve etiri linije sa podacima o nazivu odseka):

Popularni
smerovi

Manje
popularni
smerovi

Napomena: Veliine tabele pokuavaju da se same prilagode u skladu sa irinom sadraja kojise unosi u tabelu. Mogu se dodati neki
tag-ovi , tako da ova prva kolona ne budepreiroka. Tabela koju ete dobiti na stranici u Internet Exploreru posle unosa gore navedenogkoda treba da ima sledei izgled kao tabela 8:

Table 8 Izgled tabele

STATISTIKA

Odsek Prosecna ocena Broj studenata *

Popularnismerovi

Manjepopularnismerovi

Informacioni sistemi i tehnologije 7.68 302

Menadment 7.9 284Upravljanje kvalitetom 8.62 54

Operacioni menadment 8.32 >18 &


41/100

MesecTroskovi

Zbir5.000

Januar4000

Februar

1000

HTML forme

Text Input Elementi (type="text")

Forme se koriste za kreiranje jednolinijskih polja u koja korisnici unose tekst. Default irina je 20karaktera, a mogu se kreirati i polja sa drugim veliinama unoenjem vrednosti u size option.Moe se ograniiti i broj unosa karaktera podeavanjem vrednosti u MAXLENGTH option. Textinput polja e biti prazna kada se stranica uita, osim ako korisnik ne zada poetni tekst krozVALUE opciju (tabela 9).

Table 9 Tabela za unos teksta

Polje za unos teksta "text1" je 30 karaktera iroko.


42/100

Polje za unos teksta "text2" je 30 karaktera iroko, ali prihvatasamo 20 karaktera.

Polje za unos teksta "text3" je 40 karaktera iroko, to jepodrazumevana (default) vrednost.

Password Input Elementi (type="password")

Ovi elementi su identini text input elementima, osim kada korisnik unosi podatke u njih, videe"bullet" karaktere, tj. zvezdice, a ne slova koja unosi kao ifru (password). Password tekst jeifrovan kroz prenos i potom na kraju deifrovan kada je podatak polja uitan na server. Videtirazliku izmeu unoenja podataka u polja u tabeli 7 ispod ovog teksta i u prethodnoj tabeli 10.

Table 10 Tabela za unos ifre

Polje za lozinku "pass1" je 30 karaktera iroko.

Polje za lozinku "pass2" je 30 karaktera iroko, ali prihvata samo 20karaktera.

Polje za lozinku "pass3" je iroko 40 karaktera, to je defaultvrednost.

6.3 Text Area Input Elementi (type="textarea")

Ovi elementi su tekst polja koja sadre vie od jedne linije za unos podataka i mogu se scroll-ovati tako da korisnik moze da unese vie teksta. Tag opcije definiu veliinu polja brojemkaraktera u redu i koloni. Dodavanjem opcije WRAP=VIRTUAL, tekst koji je prethodno unet e


43/100

se automatski smestiti sa desne strane polja. Takoe se moe zadati i default tekst koji e seprikazati u polju (tabela 11).

Table 11 Tabela za unos polja za upis teksta

Oblast za unos teksta "comments" je 45 karaktera iroko i 6 linijavisoko.The first time I ever saw a web page, I thought....(continue)

The f irst time I ever saw a w eb page, I tho

Radio buttons (type="radio")

Radio dugmii su kontrole koje su povezane tako da samo jedno radio dugme, tj. button moeda se selektuje u jednom trenutku; ako se selektuje jedno radio dugme, sva ostala automatskipostaju desektovana. Set radio buttons-a je je definisan pod istim zajednikim imenom.Vrednost koja se alje u web formu je vrednost radio button-a koji je prethodno selektovan.Dodavanjem opcije CHECKED jednom od button-a u setu ponuenih, posebno e se istai taj

button tako da izgleda osvetljeno, kada se stranica uitava (tabela 12).

Table 12 Izgled tabele sa radio dugmetom

4 radio buttons se default vrednostima. hotdogs are my favorite food
ilike hamburgers
steak istasty

beansare for veggie-lovers

hotdogs are my favorite food

i like hamburgers

steak is tasty


44/100

beans are for veggie-lovers

3 radio buttons bez predefinisanih vrednosti.

ketsup
mustard
mayonnaise

ketsup

mustard

mayonnaise

NAPOMENA: Videti kako dva seta radio buttons-a, jedan nazvan "food" i drugi "spread"

funkcioniu nazavisno jedan od drugog.

6.4 Check Boxes (type="checkbox")

Ovi elementi su slini prethodnim radio buttonsima, ali nisu zavisni od drugih buttons-a, tako damoe biti selektovano vie njih u isto vreme. Svaki checkbox ima jedinstveno ime ili naziv.Ukoliko polje nije tiklirano, obinim klikom na njega pojavice se X ili check mark znak na tommestu. Ukoliko je box oznaen, jo jedan klik e ukloniti check mark iz polja. Vrednost poslata uweb formi je vrednost checkbox-a koji je selektovan; u suprotnom ta vrednost ne postoji.Dodavanjem opcije CHECKED u checkbox e posebno istai taj checkbox dok se stranauitava (tabela 13).

Table 13 Izgled tabele sa tipom "checkbox"

4 check boxes sa predefinisanim vrednostima. hotdogs are my favorite food
i like hamburgers
steak is tasty

hotdogs are my favorite food

i like hamburgers

steak is tasty


45/100


3 check boxes bez predefinisanih vrednosti.

ketsup
mustard
mayonnaise

ketsup

mustard

mayonnaise

Menu Select (type="select")Select daje padajui menije koji omoguavaju korisniku da izabere jednu od ponuenih stavki ulisti. ... tag definie tekst koji se pojavljuje u meniju. Vrednost poslednjeselektovane opcije je vraena kada je prenesen podatak iz polja. Dodavanjem SELECTEDopcije pokazuje koji element se prikazuje kada se stranica uitava; u suprotnom, prva stavka jeselektovana kao default (tabela 14).

Table 14 Tabela sa opcijama

Meni sa 4 opcije, gde je 3 stavljena kao predefinisana. Colby from Ohio Sharp Cheddar fromOregon Holy Cheese fromSwitzerland English Longhorn

Grupisanje opcija u padajuoj listi

Mogue je unutar padajue liste grupisati opcije za selektovanje. To se radi pomou taga.. izmeu kojih je potrebno navesti opcije koje elite da grupiete.Ukoliko imate veliki broj opcija u listi na ovaj nain ih moete uini lake dostupnim.


46/100

Simulacije i simulacioni jeziciInternet tehnologije

Internet marketingZastita racunarskih sistema

Kao to vidite na slici, ukoliko elite da zadate naziv grupi opcija u padajuoj listi to moeteuiniti dodavanjem atributa labeldatom tagu.

Takoe, mogue je onemoguiti selektovanje cele grupe opcija korienjem atribura disabled ipostavkom na vrednost disabled ()

6.5 Korienje oznaka za input polja

Za definisanje oznaka pored nekog inputa koje e se na njega odnositi koristi se tag. Taoznaka moe biti tekst, slika ili bilo koji HTML kod koji se nae izmeu i taga.Sledei primer pokazuje upotrebu teksta kao oznake inputa.

Korisnicko ime:


47/100

Sifra:

Oznake imaju jednu zanimljivu osobinu. Naime, preko atributa for je mogue navesti idelementa na koji se ta oznaka odnosi. U tom sluaju, prilikom akcije (recimo klika) nad oznakomista ta akcija se prenosi na input polje na koji se oznaka odnosi. Konkretno u ovom primeru, akokliknemo na oznaku korisniko ime u fokus e doi input polje za unos korisnikog imena,dakle, kao da smo kliknuli na samo input polje.

Sledei primer pokazuje upotrebu oznaka ali kada se izmeu label taga nalazi neka slika.

Izaberite pol:

Klikom na jednu od ove dve slike selektuje se i odgovarajui radio button.

Submit and Reset (type="submit" and type="reset")

Ovaj tip kreira buttons (dugmie) na formi. Submit button govori web browser-u da sakupi sveselekcije, vrednosti, i uneti tekst iz polja i smesti ga na mesto definisano u ACTION delu formtag-a. Reset button vraa formu na default stanje, onako kako je izgledao i prvi put kada jekorisnik posetio web stranicu. VALUE opcija definise tekst koji se nalazi na buttonsima (tabela

15).

Table 15 Tabela sa submit i reset dugmiima

Submit button


48/100

Send this form data now!

Reset button

Clear the w eb form

NAPOMENA: Za ovu lekciju, kreiran je prosti JavaScript alert message koji se pojavljuje kadase koristi Submit button. Ukoliko je unet neki tekst, ili promenjen neki button meni selekcija,Reset button iznad, e sve vratiti na poetno stanje.

Sada emo kreirati web page formu koja e sadrati sve gore navedene elemente.Treba kreirati novu web stranicu u kojoj e se forma prikazati u main display polju, a potomizmeniti levu stranu frejma koja sadrzi meni izbora da bi dodali link za nau novu stranicu.

Korak 1 Otvorite proj_menu.html fajl u vaem text editoru. Posle HTML koda koji sadrilink informaciju za "Reference" frames web page, dodajte:

REPORT...
forma za slanje izvestaja

Korak 2 Save , tj. sauvajte ovaj HTML file.

Korak 3 Zatim emo kreirati novu web stranicu koja e sadrati formu. Kreirajte novi fajl utext editor-u i snimite ga kao fajl proj_report.html u istom direktorijumu/folderu kao i drugaHTML dokumenta.

Korak 4 Da bi bolje razumeli ovaj dokument, prezentovaemo jednu po jednu njegovusekciju. Prvi deo fajla sadri "normal" deo naeg HTML fajla. Ovo dodajte u va novi fajl:

IZVESTAJ

Korak 5 Sada unesite kod, kojim ete oznaiti poetak forme. Do sledee lekcije, neemopisati ACTION=... deo.

Korak 6 Report forma e se prikazati kroz HTML tabele, koje su korisne za web forme jerdozvoljavaju korisniku da podeava tekst kao i elemente forme. Kreirajte tabelu koja sadri 4osnovna dela vae forme:

Informacije o studentu Izvetaj o odsecima


49/100

Izvori koji su korieni za dobijanje informacija Poalji i Poniti sve

Svaka od ovih sekcija e biti oznaena velikim poljem tabele koja definie tu sekciju vae forme.Dodajte sledee da biste formirali tabelu i prvu sekciju "Informacije o studentu":

Informacije o studentuIme i prezime
unesite Vase ime i prezimee-mail
unesite Vas e-maillozinka
unesite lozinku

Napomena: Kreirali ste eliju sa 2 kolene za tekst " Informacije o studentu " zajedno sa tri redatabele koji sadre tekst input polja. Stavljene su oznake za polja u prvoj koloni svakog reda,poravnate udesno. Takoe su smetene kratke instrukcije u malom , plavom tekstu poredsvakog elementa. Primetite da svaki element forme ima jedinstveno ime. Tree polje forme je ustavri password type da bi sakrilo ime koda koji e korisnik uneti.

Korak 7 Sada emo uraditi drugu sekciju gde se koristi ova web forma koja prikazujeIzvetaj o odsecima - koristiete text input, menu selections, radio buttons, i checkboxes:

Naziv odseka

unesite naziv odseka ciji podaci Vas interesujuNajpopularniji odsek jeIzaberite...


50/100

ISiTMENUKOMNevazno

(opsirnije o odsecima na sajtu fakulteta)status redovan vanredan

unesite broj dosijea

prednosti odabranog odseka po Vama sudobar sadrzaj kurseva na odseku
nastavni kadar
duzina studiranja
lakse zaposlenje nakon zavrsetka
nista posebno
(broj cekiranih opcija je proizvoljan)

dodatne informacije
napisite sta smatrate da je potrebno, a vezano je za predjasnjiizbor

Napomena: Uporediti format radio button-sa u odnosu na check boxes; svaki radio button setima isto ime dok svi check boxes imaju razlicita imena.

Korak 8 Trea sekcija forme web stranice se koristi za prikazivanje izvora koji sukorieni u tri unosna polja. Posto su uneti podaci u stvari web site adrese, moe se podesitidefault VALUE za "http://" u text input tagovima:

Izvori


51/100

reference

navedite tri web sajta na kojima cete vrsiti pretragu zainformacijama

Korak 9 Poslednja sekcija ove tabele/forme sadri button koji e prikupiti sadrajizvetaja u formi i drugi button koji se moe koristiti da resetuje formu na poetno, praznostanje. To je takoe i kraj tabele, forme i ostatka HTML dokumenta.

Na kraju...

Korak 11 Uradite Save dokumenta proj.html i potom ga uitajte u web browser. Levastrana ove web stranice sa frejmovima bi sada trebalo da sadri link koji ste dodali u drugomkoraku, i koji e uitati formu web stranice koju ste kreirali u prethodnim koracima. Forma jouvek nee raditi nita, ali buttons, meniji i polja bi trebalo da budu osposobljeni za editovanje.

6.6 Grupisanje elemenata forme

Za logiko grupisanje vie elemenata forme koristi se tag . Ovaj tagtakoe iscrtava okvir oko grupisanih elemenata forme. Naravno, mogue je sa stilovima menjatinjegovu boju i druge karakteristike.

PrijavljivanjeKorisnicko ime:
Sifra:


52/100

Ovde je upotrebljen i tag koji se koristi za definisanje naslova za okvir.Naravno, to nije obavezno i u tom sluaju e se prikazati samo okvir, bez naslova.

7 Korienje skriptova klijentske strane

Da bi browser prepoznao kd client-side skript jezika koji se pridruuje HTML stranici, potrebnoje da se taj kd postavi unutar para oznaka i . Sledi primer:

document.write("Hello World!")

Ovo je primer JavaScript koda. Kao to se vidi, obavezan atribut prilikom definisanja skriptovaklijentske strane jeste atribut type koji govori o tipu jezika koji se nalazi u okviru oznaka i .

Skriptove klijentske strane je mogue ukljuiti i iz eksternog fajla. U tom sluaju sadraj izmeu i oznaka ostaje prazan a unutar taga obavezan je atribut srckojipredstavlja apsolutnu ili relativnu putanju do skript fajla koji se ukljuuje.

Neki brauzeri ne podravaju skript jezike ili je korisnik jednostavno onemoguio korienje istihmenjanjem podeavanja brauzera. U tom sluaju je korisno korisnicima pruiti neki alternativnitekst ili sadraj. To se omoguava korienjem para oznaka i u koji seumee bilo koji kod koji e se prikazati samo ako korisnik ima iskljuenu opciju korienjaJavaScript i drugih skript jezika. Sledi primer:

document.write("Pozdrav! JavaScript radi...")

Izvinjavamo se, JavaScript nije podrzan od strane vaseg browser-a.

Ukoliko browser podrava JavaScript ispisae se:

Pozdrav! JavaScript radi...


53/100

Ukoliko ne podrava, ispisae se:

Izvinjavamo se, JavaScript nije podrzan od strane vaseg browser-a.

III DEO

8 CSS

8.1 ta je to CSS?

CSS je tehnologija koja omoguuje razdvajanje strukture stranice od njenog izgleda, topredstavlja osnovni princip ove tehnologije. To konkretno znai da informacije koje se eleprezentirati na stranici treba da budu sadrane u HTML fajlu, a opis izgleda stranice i naina

predstavljanja informacije treba da se nalazi u drugom fajlu css fajlu. Odrednica CSS(Cascading Style Sheets) u prevodu znai Kaskadne Liste Stilova.

CSS je preporuka konzorcijuma W3C (World Wide Web Consortium). W3C konzorcijum ineuniverziteti, kompanije kao to su Microsoft, Netscape i Macromedia, i eksperti iz mnogih oblastikoje su vezane za web. Osnovan je od strane Tim Berners Lee-a i zadatak mu je da unapreujei promovie web. Jedna od njegovih uloga je da publikuje preporuke (eng, recommendations).Na te preporuke treba gledati kao na standarde. Preporuke W3C-a pokrivaju mnoge aspekteweb-a kao na primer HTML, CSS, skript jezike, XML i jos mnogo toga to je vezano za web.

Kaskadne liste stilova su formalno opisane u dve specifikacije koje je izdao W3C. To su CSS1 i

CSS2 specifikacije. CSS2 Specifikacija je sada aurirana u specifikaciju CSS2.1. gde broj 1oznaava broj revizije. Ovom revizijom izbaene su pojedine komponente iz CSS2 specifikacijeza koje se vremenom utvrdilo da nema izgleda da u skorije vreme budu implementirane u Webitaima. Na primer, jedno svojstvo koje je izbaeno je text-shadow jer dugo vremena nijedobilo podrku ni od jednog Web itaa. Naravno, tom revizijom nije stavljena taka na razvoj iunapreenje CSS-a, pa se moda u budunosti ovo svojstvo ponovo pojavi i ue na velikavrata, a do tada ne treba oajavati zbog njega.

CSS1 specifikacija je publikovana u decembru 1996. godine i opisuje jednostavan model zaformatiranje, najee korien za prikaz na ekranu. CSS1 specifikacija sadri oko 50 svojstava( na primercolorili font-size ).

CSS2 specifikacija je finalizirana u maju 1998. godine i zasnovana je na CSS1 specifikaciji. Onaobuhvata sva svojstva CSS1 specifikacije i dodaje oko 70 svojih svojstava, kao to su svojstvaza opisivanje zvunih prezentacija i slino.

Linkovi koji vode ka ove dve specifikacije dati su u nastavku:

Specifikacija CSS1 http://www.w3.org/TR/REC-CSS1Specifikacija CSS2 http://www.w3.org/TR/REC-CSS2
http://www.w3.org/TR/REC-CSS1http://www.w3.org/TR/REC-CSS2http://www.w3.org/TR/REC-CSS1http://www.w3.org/TR/REC-CSS2


54/100

definiete izgled vae stranice na jednom mestu kako bi izbegli ponavljanje koda nastranici.

jednostavno menjate izgled stranice ak i nakon to ste je kreirali. Poto su stilovidefinisani na jednom mestu, moete da promenite izlged vae stranice odjednom.

definiete veliinu fonta sa istom preciznou koju vam prua word procesor, bez

ogranienja na sedam veliina fonta koje su definisane u HTML-u. pozicionirate sadraj stranice sa preciznou na nivou piksela. redefiniete izgled postojeih tagova u HTML-u. Na primer, ako elite da se

tag koji inicajlno prikazuje tekst podebljanim slovima, prikae u crvenoj boji sa veliinomfonta od 16 piksela, to sa CSS-om vrlo lako moete da uradite.

podesite stil za linkove na nain koji vama odgovara na primer elite da se linkoviprikazuju nadvueni.

Naini primene stilova

Stilovi se mogu primeniti na neku stranicu na tri naina: Povezivanjem HTML stranice i eksternog fajla sa ekstenzijom .css (u kome su

definisana pravila)koji se uva na nekom serveru (na istom serveru na kome se nalazi iHTML fajl ili na nekom drugom)

Unutar stranice u headdelu HTML koda u okviru taga. Direktno u odreenom HTML tagu koji se eli formatirati tzv. Inline.

8.1.1CSS kao eksterni fajl

Ovaj nain pridruivanja stilova stranici je strogo preporuen s obzirom na to da omoguava

veliku fleksibilnost prilikom promene stila stranice i primene jednog istog stila na vie razliitihstranica. Ovaj nain zapravo predstavlja materijalizaciju osnovnog principa kojim se vodi CSSfilozofija : razdvojiti sadraj od izgleda stranice.

Znai, ako se u eksternom CSS fajlu napie da pozadina stranice bude bela, ona e biti bela nabilo kojoj stranici koja je sa ovim fajlom prethodno bila povezana, i ako nakon toga u istom CSSfajlu promenite boju pozadine u crnu ona e istovremeno postati crna u svim tim stranicamamakar ih bilo i 1000. Sa druge strane, za ovu jednostavnu promenu boje pozadine, za svih tih1000 stranica mora se izvriti 1000 promena! Ovakva dinaminost moe se postii i kada su upitanju fontovi, boje, linkovi, paragrafi, liste, tabele, hederi, pozicije, dimenzije...

Da bi se fajl sa definisanim stilovima (koji ima ekstenziju .css) eksterno povezao sa HTMLstranicom, potrebno je da se fajl linkuje sa te stranice koristei tag u okviru taga HTML stranice. Pretpostavimo da imamo neki fajl u kome su definisana css pravila i da setaj fajl zove stilovi.css inalazi u istom folderu kao i naa stranica. Povezivanje ovog fajla sanaom HTML stranicom obavlja se na sledei nain:

Ovime je svako pravilo koje je definisano u ovom fajlu primenjeno na odgovarajue tagove kojise pojavljuju na naoj stranici.


55/100

8.1.2Interni stilovi

Ovako primenjeni stilovi ne mogu se vezati za vie stranica istovremeno ve se piu u zaglavljusame stranice i pripadaju samo njoj. Za ovako definisane stilove se kae da su ugraeni u

stranicu (eng. embedded). Ovakav nain definisanja i primene stilova treba izbegavati zbogtoga to se umanjuje fleksibilnost i dinaminost a takoe se naruava i pravilo odvajanjasadraja stranice od definicije izgleda.

Interni stil se postavlja u zaglavlje dokumenta pomou taga u okviru taga nasledei nain:

body{background-color: #ffffff;

}

P{color: #000000;}

Ovde treba pomenuti jo jedan nain linkovanja fajla sa stilovima koji se moe koristiti ukombinaciji sa ovim nainom ili zasebno. To se ostvaruje korienjem komande @import kojomse css fajl uvozi u dokument a sintaksa je sledea:

@import url(http://style.com/basic);

Po HTML 4.0 specifikaciji ukjuen je i atribut media u okviru taga za odreivanjemedija na koji se stil primenjuje. Ovaj atribut moe uzimati sledee vrednosti:

sreen - Izlazni medij je ekran print - Izlazni medij je tampa projection - Izlazni mediji je projektor speech - Izlazni medij je ureaj za sintezu govora all - Koristi sve izlazne medije

Pomou atributa type navodi se MIME tip za liste stilova.

8.1.3 InlineInline znai upisivanje stila u okviru samog taga u HTML stranici na koji se stil odnosi. Skorosvaki HTML element sadri atribut style u kome se mogunavoditi CSS pravila kao vrednostatributa. Na primer:

Ovo je paragraf


56/100

Ovakav nain primene stila se takoe ne moe preporuiti jer sadraj stranice i definicija stilovanisu odvojeni, to uzrokuje nefleksibilnost i neefikasnost pri izmeni stila.

8.1.4 Alternativne liste stilova

Jedan dokument ne mora imati samo jedan fajl sa stilovima koji je za njega zakaen. Mogue jedefinisati glavni stil i neogranien broj alternativnih lista stilova ime se korisniku pruamogunost da izabere onaj stil koji mu najvie odgovara. Kako korisnik bira eljenu listu stilovazavisi od Web itaa. Svi Web itai jo uvek nemaju podrku za to ali oni koji imaju nude umeniju stavku choose stylesheet ili neto tome slino.Da bi ukljuili vie lista stilova potrebno je ukljuiti vie tagova u zaglavlju HTMLdokumenta, sa odgovarajuim title i rel atributima. Dat je primer definisanja alternativnihlista stilova:

...

Dakle, pri definisanju alternativnog stila, vrednost atributa rel je "alternate stylesheet".

CSS Sintaksa

Svaka Kaskadna Lista Stilova predstavlja seriju instrukcija koje se zovu iskazi. Postoje razliitevrste iskaza1, ali najvanija vrsta je pravilo(eng. Rule). Pravilo radi dve stvari:

1. Identifikuje elemente u HTML dokumentu na koji se odnosi2. Ukazuje Web itau na to kako da iscrta te elemente na stranici

Pod elementima se podrazumevaju paragrafi, linkovi, liste itd.Deo pravila koji govori Web itau kako izabrani element treba da bude prikazan naziva se

deklaracijom. Deklaracija moe da sadri odreen broj svojstava kojima se postavljajukonkretne osobine elementa.Deo pravila koji govori o tome koji HTML element se opisuje naziva se selektor(eng. Selector).

1 Za detalje pogledati u nastavku deo iskazi vrste


57/100

Slika 11Sintaksa za opis kaskadnih lista stilova

Dakle, jedan css fajl se sastoji iz niza iskaza (od kojih su veina pravila), a jedno pravilo ima trielementa u sebi:

1. selektor (selector)

2. svojstvo (property) (najmanje jedno svojstvo)3. vrednost svojstva (value) (najmanje jednu vrednost)

Skup svojstava i njihovih vrednosti predstavljaju deklaraciju.

Primer:body

{

font-family: Verdana, "Minion Web", Helvetica, sans-serif;

font-size: 1em;

text-align: justify;

}

Iz primera se moe uoiti i anatomija pravila. Na poetku je selektor, zatim u prostoru izmeudve vitiaste zagrade (koje oznaavaju poetak i kraj deklaracije) nalaze se svojstva i njihovevrednosti koje su meusobno odvojene dvotakom, dok su svojstva meudsobno razdvojenataka zarezom.

Slika 12 Anatomija pravila

Evo nekoliko pravila koje treba potovati pri pisanju lista stilova kako ne bi dolo doneoekivanih efekata u radu sa stilovima:

1. Svaki iskaz mora imati selektor i deklaraciju. Deklaracija dolazi odmah iza selektora ioiviena je vitiastim zagradama.

2. Deklaracijuinejedan ili vie svojstava odvojenih taka-zarezom.


58/100

3. Svako svojstvo ima ime iza koga je dvotaka a zatim ide vrednost za to svojstvo.Postoji veliki broj razliitih vrednosti za svojstva ali svako svojstvo moe primiti samovrednost koja mu je po specifikaciji propisana.

4. Nekada svojstvo moe dobiti vie vrednosti kao to je to sluaj sa font-familysvojstvom. Viestruke vrednosti trebaju biti odvojene zarezom i praznim prostorom.

5. Vrednost koja se prikazuje sa vie rei treba staviti pod navodnike

6. Izmeu vrednosti svojstva i jedinice u kojoj se vrednost navodi ne sme da postojiprazan prostor.

Primer: font-size: 1em; - Ispravnofont-size: 1 em; - Neispravno

7. Kao i kod HTML-a, dodatni prazan prostor se ignorie te se moe koristiti kako bi seolakalo citanje koda.

8. Kada za jedan element postoji vie definisanih stilova onda e biti primenjeni stilovipo sledeem prioritetu, pri emu poslednji nain definisanja ima najvei prioritet jer jenajblii elementu:

1. Web ita default stilovi

2. Eksterna lista stilova3. Ugraena lista stilova unutar zaglavlja stranice4. Inline definisan stil

9. Selektori se mogu grupisati tako to e se svaki selektor odvojiti zarezom. U primerusu grupisani svi elementi za naslove u HTML-u i svakom od njih dodeljena je osobinada su slova ispisana zelenom bojom.

Primer:

h1,h2,h3,h4,h5,h6{color: green}

Iskazi - vrste

Postoji nekoliko vrsta iskaza:

@Rules (@pravila)o @importo @mediao @page

Komentari HTML komentari Rules (pravila)

KomentariKomentari prilikom pisanja kaskadnih li

Documents

HTML SKRIPTA-Finalna Verzija