FAKULTET ZA UPRAVU

SARAJEVO

SEMINARSKI RAD

PREDMET : E-uprava

TEMA : Web dizajn

Mentor : Prof. dr Aida Habul Student: Lihovac Šadija

Sarajevo,Novembar 2019

WPriručnik
Autorica: Mariza M
UVOD

Današnje društvo obilježeno je naglim rastom i razvojem informacijske tehnologije

(IT), što je rezultiralo velikom ovisnošću društva, u širem smislu, o znanju i
kompetencijama osobe u IT području. I ovisnost raste iz dana u dan, ljudsko pravo
na obrazovanje i informacije nije prošireno i na IT područje. Pojavili su se
problemi koji utječu na društvo u cjelini, koji stvaraju prepreke i udaljavaju ljude
od glavnog razloga i motivacije za napredak, od prilike. Biti računalno nepismena
osoba, danas znači biti osoba koja nije u mogućnosti sudjelovati u modernom
društvu, biti osoba bez prilike. Unatoč priznanju Europske komisije, UNESCO-a,
OECD-a i ostalih relevantnih institucija o neophodnosti i korisnosti informatičke
pismenosti, još uvijek postoje grupe ljudi s otežanim pristupom osnovnoj
računalnoj naobrazbi (npr. osobe s invaliditetom, osobe s poteškoćama u učenju,
radnice/i migranti, nezaposlene osobe, osobe koje žive na udaljenim mjestima
gdje nemaju pristup računalnoj edukaciji).

0/52
 SADRŽAJ:

1. Web koncepti................................................................................................................5

1.1. Ključni pojmovi...................................................................................................................5

1.1.1. Razumijevanje da Internet podržava niz usluga kao što je World Wide Web (WWW),
prijenos datoteka, e-mail, instant messagging (IM)................................................................................5
1.1.2. Razumjeti termin: klijent/server te razumjeti funkcionalnost i odnos između preglednika i
web servera...................................................................................................................................5
1.1.3. Razumjeti pojmove domene, Uniform Resource Locator (URL), hiperveza, web hosting,
tražilice..........................................................................................................................................5
1.1.4. Razumjeti korištenje osnovnih protokola: Transmission Control Protocol/Internet
Protocol (TCP/IP), Hypertext Transfer Protocol (HTTP), File Transfer Protocol (FTP)......................................7

1.2. Web objavljivanje..............................................................................................................7

1.2.1. Identificirati glavne prednosti web stranica: pristup velikom broju ljudi, jednostavnost
ažuriranja, interaktivnost publike, troškovne uštede..............................................................................7
1.2.2. Razumjeti procese stavljanja web stranice online: registracija domena, odabir web
hosting usluga.................................................................................................................................8
1.2.3. Prepoznati tehnike optimizacije tražilica, npr. uključivanje relevantnih meta podataka,
uključivanje mape stranice i web linkova, registracija na tražilice..............................................................8
1.2.4. Prepoznati faktore koji utječu na brzinu skidanja podataka sa web stranice npr. zvuk,
video, grafički formati, animacije, kompresije podataka..........................................................................9

1.3. Zakonska pitanja................................................................................................................9

1.3.1. Razumjeti izraz autorsko pravo i njegove implikacije na tekst, sliku, zvuk, video na web
stranicama.....................................................................................................................................9

2. HTML..........................................................................................................................10

2.1. Osnove HTML-a................................................................................................................10

2.1.1. Razumjeti izraz Hypertext Markup Language (HTML).....................................................10
2.1.2. Razumjeti ulogu W3C konzorcija u razvijanju HTLM preporuka, razumjeti pogodnosti
tih preporuka, npr. interna operativnost web stranica preko pretraživača, pojačana
dostupnost, dosljedne deklaracije tipova dokumenata....................................................................10

2.2. Korištenje HTML-a...........................................................................................................10

2.2.1. Korištenje preglednika za gledanje izvornog koda web stranica....................................10
2.2.2. Korištenje markiranih oznaka za strukturu rasporeda web stranice: <html>, <head>,
<title> i <body>.........................................................................................................................11

1/52
2.2.3. Korištenje markiranih oznaka za razvijanje raspored web stranice: <h1>, <p> <br/>, <a
href>, <img/>...............................................................................................................................12

3. Izrada web stranica.....................................................................................................13

3.1. Dizajn...............................................................................................................................13
3.1.1. Prepoznati planiranje i tehnički dizajn, npr. evaluacija potrebe za ciljanu publiku,
kreiranje okvirne priče, organiziranje strukture stranice, kreiranje predloška za raspored
stranice, donošenje odluke za navigacijsku shemu..........................................................................13
3.1.2. Prepoznati dobar font. Korištenje fontova, npr. Arial, Courier, Helvetica......................13

3.2. Korištenje aplikacije.........................................................................................................14

3.2.1. Otvoriti, zatvoriti aplikaciju za izradu web stranica. Otvoriti, zatvoriti web stranicu 14
3.2.2. Kreirati, pohraniti novu web stranicu na lokaciju na tvrdom disku................................15
3.2.3. Kreirati, pohraniti novu web stranicu baziranu na dostupnom predlošku.....................16
3.2.4. Dodati, promijeniti opisni naslov na stranici...................................................................16
3.2.5. Primijetiti razliku iz pogleda izvornog koda u dizajnerski pogled....................................17

3.3. Poboljšanje produktivnosti..............................................................................................18

3.3.1. Postaviti osnovne opcije u aplikaciji: zadani preglednik, zadani tip dokumenta, kodiranje,
fontovi........................................................................................................................................18
3.3.2. Korištenje dostupnih Help funkcija.................................................................................19

3.4. Unos teksta i oblikovanje.................................................................................................20

3.4.1. Umetnuti, izmijeniti, obrisati tekst..................................................................................20
3.4.2. Razumjeti i upotrijebiti relativnu veličinu fonta..............................................................21
3.4.3. Primijeniti oblikovanje teksta: bold, italic, tip fonta i boju.............................................21

3.5. Oblikovanje odlomaka.....................................................................................................22

3.5.1. Postaviti svojstva odlomka..............................................................................................22
3.5.2. Umetnuti, ukloniti pauzu u odlomku ili rečenici.............................................................22
3.5.3. Kreirati, izmijeniti numeriranu (numbered), grafičku (bulleted) listu.............................23

3.6. Oblikovanje stranica........................................................................................................25

3.6.1. Postaviti margine na stranici: gornja, donja, lijeva, desna..............................................25
3.6.2. Dodati, izmijeniti, ukloniti boju stranice ili slike..............................................................25
3.6.3. Promijeniti boju hiperveze na stranici: visited, active, unvisited....................................26

3.7. Hiperveze.........................................................................................................................27

2/52
3.7.1. Razumjeti termine apsolutna i relativna hiperveza.........................................................27
3.7.2. Umetnuti, promijeniti, ukloniti hipervezu: tekst, slika....................................................27
3.7.3. Umetnuti, promijeniti, ukloniti e-mail hipervezu: tekst, slika.........................................28
3.7.4. Definirati cilj hiperveze: same window, new window.....................................................28
3.7.5. Postaviti polazišnu točku (anchor), umetnuti link do polazišne točke............................29

3.8. Tablice..............................................................................................................................30
3.8.1. Umetnuti, obrisati tablicu................................................................................................30
3.8.2. Umetnuti, promijeniti naslov tablice...............................................................................31
3.8.3 Poravnati tablicu: lijevo, desno, centar...........................................................................32
3.8.3. Umetnuti, obrisati stupce i retke.....................................................................................33
3.8.4. Izmijeniti širinu stupca, visinu retka................................................................................33
3.8.5. Spojiti, razdvojiti ćelije.....................................................................................................34
3.8.6. Izmijeniti širinu rubova tablice, širinu ćelije, razmak ćelije.............................................35
3.8.7. Promijeniti boju pozadine, sliku pozadine, slike unutar ćelije i cijele tablice.................35

4. Korištenje objekata.....................................................................................................37

4.1. Grafički objekti.................................................................................................................37

4.1.1. Dodati, ukloniti sliku sa web stranice..............................................................................37
4.1.2. Postaviti, izmijeniti atribute slike: size, border, alignment, alternative text..................37

4.2. Forme...............................................................................................................................39
4.2.1. Umetnuti formu na web stranicu....................................................................................39
4.2.2. Dodati, ukloniti jednu liniju, više linija.............................................................................39
4.2.3. Dodati, ukloniti polje forme (form field): drop-down, check box, radio button.............41
4.2.4. Postaviti, izmijeniti postavke polja forme: text field, drop-down, check box, radio button
43
4.2.5. Dodati, ukloniti tipke za predaju (submit), resetiranje (reset)........................................44
4.2.6. Postaviti, izmijeniti postavke za tipke predati, resetirati................................................44
4.2.7 Postaviti, izmijeniti akciju forme (form action) za slanje izlazne forme putem mail-a....45

5. Stilovi..........................................................................................................................46

5.1. Css koncepti.....................................................................................................................46

5.1.1. Razumjeti pojam Cascading Style Sheets (CSS), njihovu uporabu i korist.......................46

5.1.2. Prepoznati glavne pristupe primjeni stilova: inline, internal, external...........................46

3/52
5.1.3. Razumjeti strukturu CSS pravila: selector i declaration (property, value)......................47

5.2. Korištenje CSS..................................................................................................................47

5.2.1. Kreirati, pohraniti novu CSS datoteku.............................................................................47
5.2.2. Kreirati, izmijeniti CSS pravila: boja, pozadina, font........................................................48
5.2.3. Staviti u privitak eksterni (vanjski) CCS na web stranici..................................................49

6. Pripremiti učitavanje...................................................................................................50

6.1. Provjera............................................................................................................................50
6.1.1. Identificirati i popraviti neispravne linkove na web stranici...........................................50
6.1.2. Prepoznati pravilnu uporabu sadržaja na web stranici: uključujući datum zadnjeg
ažuriranja, detalji softvera potrebnog za otvaranje, gledanje podataka, osiguravajući
kompatibilnost sadržaja sa drugim web pretraživačima..................................................................50
6.1.3. Provjeriti pravopis web stranice i izvršiti potrebne ispravke..........................................50

6.2. Publikacija........................................................................................................................50
6.2.1. Razumjeti proces učitavanja (upload), preuzimanja (download) web stranice na web
server i sa web servera.................................................................................................................50
6.2.2. Ucitati (upload), preuzeti (download) web stranicu na server i sa servera....................51

Opći uvjeti korištenja........................................................................................................52

4/52
1. WEB KONCEPTI

1.1. Ključni pojmovi

1.1.1. Razumijevanje da Internet podržava niz usluga kao što je World Wide Web
(WWW), prijenos datoteka, e-mail, instant messagging (IM).
Internet ili „mreža svih mreža“ je javna mreža koja preko zajedničkog protokola (IP)
povezuje računala i računalne mreže diljem svijeta. Sva spojena računala i mreže
međusobno razmjenjuju informacije i koriste razne usluge. Dakle, Internet nije samo
WWW, ili stranice i sadržaji dostupni preko preglednika. WWW je samo jedna od, iako
vjerojatnog najviše korištena, usluga koju Internet nudi korisnicima.
U ostale usluge dostupne preko Interneta spadaju i:
 File transfer (prijenos datoteka) – prebacivanje datoteka sa jednog računala na
drugo.
 Email (elektronička pošta) - predstavlja najstariju uslugu Interneta, a omogućava
razmjenu digitalnih poruka između jedne ili više osoba.
 Instant messaging (IM) – omogućava razmjenu elektroničkih poruka u stvarnom
vremenu između dvije ili više osoba. Radi se dakle o popularnim chatovima
(GTalk, MSN, Skype itd.) koji uz razmjenu poruka danas podržavaju i video/audio
komunikaciju.

1.1.2. Razumjeti termin: klijent/server te razumjeti funkcionalnost i odnos

između preglednika i web servera
Internet je vjerojatno najpoznatiji primjer klijent/poslužitelj odnosa. Između klijenta i
poslužitelja postoji velika razlika. Radi se o odnosu između dva računala/programa pri
čemu je klijent onaj koji šalje zahtjeve prema poslužitelju, a poslužitelj zahtjeve obrađuje i
vraća rezultate klijentu. Poslužitelj je obično neko udaljeno računalo kojeg korisnik fizički
ne vidi.
Odnos između web poslužitelja i web preglednika:
 Web poslužitelj: to je računalo/server na kojem se nalazi sav sadržaj koji se može
vidjeti na nekoj stranici u web pregledniku. Web poslužitelji su stalno spojeni na
Internet, a na njih se spaja korištenjem URL-a. Tako ukoliko se primjerice u web
preglednik unese www.google.com u biti se pristupa Google poslužitelju.
 Web preglednik: omogućava pregledavanje web stranica. On u sebi sadrži
mehanizme koji omogućavaju da se sadržaj dohvaćen sa poslužitelja prikaže na
ispravan i razumljiv način. Kao takav u principu predstavlja posrednika između
korisnika i poslužitelja.

1.1.3. Razumjeti pojmove domene, Uniform Resource Locator (URL), hiperveza,

web hosting, tražilice
Domena predstavlja jedinstveno ime na Internetu. Mogli bi reći da ono što je fizičkim
osobama OIB, web stranicama je ime domene. Ona jedinstveno identificira neku stranicu
na Internetu.
URL (Uniform Resource Locator) je drugo ime za web adresu. URL se sastoji od dva dijela:
 Ime protokola (npr. http)
 Ime domene (odnosno adresa poslužitelja na kojeg se korisnik želi spojiti), npr.
www.google.com
Kada se tako u polje za adrese u web pregledniku unese http://www.google.com nalaže
se pregledniku da se korištenjem http protokola spoji na poslužitelja koji sadrži domenu
www.google.com.
Hiperveza predstavlja pojedine posebno označene riječi, slike i druge elemente web
stranice koji su posredna veza prema dodatnim informacijama. Najčešće se klikom miša
na hiperveze otvaraju druge stranice. Između ostalog može se otvarati neki drugi dio iste
stranice, omogućiti skidanje nekog sadržaja, pokretati aplikacije.
Na slici niže je dan prikaz hiperveze koje su u tekstovima, kako bi se naglasile, obično,
obojene u plavo, a ponekad i podcrtane.

Web hosting: kada se kreira stranica potrebno ju je pohraniti na neko mjesto otkud će biti
stalno dostupna korisnicima. Za to se obično koriste web hosting servisi, odnosno
kompanije koje posjeduju web poslužitelje na koje se sadržaj može pohraniti.
Tražilica: tražilica je alat koji omogućava pretragu Interneta za informacijama, slikama i
ostalim vrstama datotekama pohranjenim na raznim mjestima dostupnima preko mreže.
Tražilice rade prema određenim algoritmima pomoću kojih na upit korisnika prikazuju
relevantne rezultate pretrage. Prije toga se prikupljaju i pohranjuju informacije o raznim
web stranicama te se zatim analiziraju kako bi se indeksirale i spremile u bazu podataka za
buduće potrebe. Kada korisnik unese upit u tražilicu, pretražuje se baza prema indeksima
te se korisniku prikazuju rezultati koji najbolje odgovaraju unesenim pojmovima pretrage.
Bitno je dakle razumjeti da se korištenjem tražilice ne pretražuje cijeli Internet već baza
podataka koju određena tražilica ima. Zato se i dešava da se u različitim tražilicama mogu
dobiti različiti rezultati. Ovo je važno s aspekta vlasnika stranice koji bi se po završetku
izrade stranice trebao osigurati da se njegova stranica plasira na raznim tražilicama, u
suprotnom će pristup njegovoj stranici biti moguć samo kada korisnik izravno u mjesto za
adresu u web pregledniku unese adresu njegove stranice. Trenutno najpoznatija tražilica
je Google.com.
 1.1.4. Razumjeti korištenje osnovnih protokola: Transmission Control
Protocol/Internet Protocol (TCP/IP), Hypertext Transfer Protocol (HTTP), File
Transfer Protocol (FTP)
TCP/IP protokol: ovaj protokol je glavni protokol za komunikaciju Internetom. On je taj
koji definira pravila kojima računala moraju udovoljavati kako bi mogla komunicirati sa
drugim računalima preko mreže.
TCP dio je zadužen za rastavljanje poruka koje se šalju preko mreže u manje pakete koji se
onda na odredištu sastavljaju kako bi se dobila poslana poruka. To znači na primjer da
poslani e-mail ne putuje mrežom u komadu već se rastavlja na sitne dijelove koji odvojeno
putuju mrežom, ne nužno istim kanalom, a onda se na odredištu po podacima koje svaki
paket nosi sastavljaju. Svaki paket u sebi nosi informaciju na koju adresu treba biti
isporučen (IP adresu). IP protokol je taj koji zadužen za to da svaki paket dođe na
odredište.
HTTP protokol: HTTP je mrežni protokol koji omogućava razmjenu gotovo svih vrsta
resursa na WWW-u. Pod resursima se misli na datoteke, stranice, slike, rezultati
pretraživanje itd. U suštini je to jezik kojim web preglednik šalje zahtjeve poslužitelju.
Postoji i HTTPS inačica koja predstavlja sigurnu, kriptiranu verziju HTTP komunikacije.
FTP protokol: FTP protokol se koristi kako bi se učitale (upload) odnosno dohvatile
(download) datoteke u komunikaciji između klijenta i poslužitelja, ili između dva računala
na Internetu. Drugim riječima, ova protokol je zadužen za razmjenu datoteka preko
Interneta.

1.2. Web objavljivanje

1.2.1. Identificirati glavne prednosti web stranica: pristup velikom broju ljudi,
jednostavnost ažuriranja, interaktivnost publike, troškovne uštede
U današnje vrijeme se sve više osoba/kompanija odlučuje za posjedovanjem web stranice.
Razlozi koji idu u prilog izradi i posjedovanju vlastite stranice su:
 Na jednostavan način je moguće doći do široke publike,
 Informacije je moguće u vrlo kratkom roku mijenjati praktički od bilo kuda. Ukoliko
se primjerice radi o stranici koja nudi neke proizvode u samo nekoliko klikova je
moguće ažurirati cijene,
 Web stranice omogućavaju puno bolji odnos sa korisnicima u odnosu na klasične
tiskane materijale ili reklame na televiziji ili radiju. Korisnik ima mogućnost na
jednostavan način doći do dodatnih informacija, odgovora na pitanja, razmijeniti
iskustava preko foruma (ukoliko stranica isti posjeduje) i slično,
 Održavanje web stranice košta puno manje nego oglašavanje preko drugih medija
pa online poslovanje može znatno smanjiti troškove osoblja, poslovnog prostora i
slično.
 1.2.2. Razumjeti procese stavljanja web stranice online: registracija domena,
odabir web hosting usluga
Proces stavljanja web stranice online se sastoji od nekoliko koraka:
 Nakon što je stranica gotova potrebno je registrirati domenu, odnosno registrirati
jedinstveno ime koje će predstavljati stranicu na Internetu. Poželjno je pri odabiru
domene voditi računa da domena ne bude preduga, da bude dobro osmišljena i da
ju korisnici mogu jednostavno zapamtiti.
 Registracijom domene još uvijek nije rezerviran prostor na Internetu za stranicu
već je samo definirana njena adresa. Korak koji slijedi je odabir web hosting usluge,
odnosno pronalazak kompanije koja nudi servere na kojima će se stranica nalaziti.
Postoji široka ponuda hosting ponuditelja i na vlasniku stranice je da odabere onog
tko nudi uslugu koja mu najviše odgovara.
Jednom dovršena ova dva koraka stranica, stranicu je potrebno učitati na server web
hosting kompanije i ona postaje dostupna na Internetu.

1.2.3. Prepoznati tehnike optimizacije tražilica, npr. uključivanje relevantnih meta

podataka, uključivanje mape stranice i web linkova, registracija na tražilice.
Tehnike optimizacije tražilica se svode na to da se postigne čim veća mogućnost da se
upravo vaša stranica pojavi na što višoj poziciji među rezultatima pretraživanja. Činjenica
je da se kod pretraživanja najviše otvaraju rezultati pretrage na prvih nekoliko stranica
rezultata, što se ide dalje vjerodostojnost rezultata opada, a samim time i posjećenost tih
stranica.
Neke od tehnika koje stoje na raspolaganju su:
Uključivanje relevantnih meta podataka: meta podaci se koriste kako bi se naveli važni
podaci o stranici. Ti se podaci ne vide na stranici, a njihova je zadaća pružanje relevantnih
podataka tražilicama za lakše indeksiranje stranica što znači da pomažu tražilicama u
rangiranju stranica.
Osnovna sintaksa izgleda:

Sukladno imenima meta elemenata oni dakle sadrže ime autora, opis stranice te ključne
riječi koje se mogu povezati sa sadržajem stranice.
Uključivanje mape stranica i web linkova: mapa stranica je lista svih stranica koje web
stranica sadrži. Uključivanje mape osigurava da su sve stranice prijavljene na tražilice.
Registracija na tražilice: kako je ranije navedeno, nije dovoljno samo izraditi i objaviti
stranicu, već je potrebno tražilicama dati do znanja da stranica postoji.
Neke od opcija koje primjerice nudi Google su:
 Add your URL – dodavanje URL-a
 App crawling – indeksiranje
 Search Console- prijavljivanje mape stranica
 1.2.4. Prepoznati faktore koji utječu na brzinu skidanja podataka sa web stranice
npr. zvuk, video, grafički formati, animacije, kompresije podataka
Ukoliko stranica osim teksta sadrži i razne druge komponente kao što su video, zvuk,
animacije i slično to utječe na brzinu učitavanja stranice pa te komponente ukoliko se
izaberu pogrešni formati, ili ukoliko se stranica prenatrpa sadržajima mogu dovesti do
sporosti otvaranja. Brzina otvaranja stranica je od ključne važnosti za osiguravanje
pozitivnog korisničkog iskustva, a postaje još važnija sve većom upotrebom mobilnih
uređaja.
Kod odabira formata preporuke su slijedeće:
 Audio – .mp3 format
 Video - .flv format
 Grafički formati - .jpg za slike općenito, .gif i .png za slike sa malo boja kao što su
pozadinske slike.
Kompresija podataka također utječe na brzinu učitavanja stranice. Preporuka je napraviti
kompresiju HTML i CSS datoteka prije no što ih se stavi na web server kako bi se njihova
veličina smanjila, a samim time se povećava brzina skidanja sadržaja i učitavanja stranice.

1.3. Zakonska pitanja

1.3.1. Razumjeti izraz autorsko pravo i njegove implikacije na tekst, sliku,

zvuk, video na web stranicama
Činjenica je da se mnogi sadržaji mogu lako skinuti sa raznih stranica, no to ne znači da se
svi sadržaji na stranicama mogu dalje slobodno koristiti već upravo suprotno, u većini
slučajeva sadržaji podliježu određenim pravima zaštite vlasništva. Sadržaje sa tuđih
stranica je moguće slobodno koristiti samo ukoliko je tako eksplicitno navedeno, u
suprotnom svakako treba provjeriti pod kojim uvjetima se sadržaji smiju skidati i koristiti.
2. HTML

2.1. Osnove HTML-a

2.1.1. Razumjeti izraz Hypertext Markup Language (HTML)

HTML je prezentacijski jezik za izradu web stranica. Radi se o opisnom jeziku kojim se
opisuje izgled dokumenta, pozicije slika, veličina teksta, boja slova itd. HTML nije
programski jezik i njime se ne može izvršiti nikakva zadaća u programskog smislu,
odnosno ne može izvršiti nikakvu pa ni najjednostavniju programsku logiku kao što je
primjerice operacija zbrajanja.
HTML stranice nisu ništa drugo nego obične tekstualne datoteke sa ekstenzijom .html ili
.htm sa uputama kako prikazati stranicu. Obzirom da se radi o običnim tekstualnim
datotekama može ih se izrađivati u bilo kojem tekstualnom editoru kao što je primjerice
Notepad. Naravno, postoje i naprednije varijante vizualnih editora koji se nazivaju
WYSIWYG editori – „What you see is what you get“ ili „Ono što vidiš to i dobiješ“. To su
editori koji imaju mogućnost tijekom izrade stranice odmah prikazivati izgled stranice.
Za opis stranica koriste se markirane oznake (tagovi) koji se pišu unutar < i >. Svaki tag je
naredba koja govori pregledniku što i kako treba napraviti, odnosno na koji način treba
prikazati sadržaj.

2.1.2. Razumjeti ulogu W3C konzorcija u razvijanju HTLM preporuka, razumjeti

pogodnosti tih preporuka, npr. interna operativnost web stranica preko
pretraživača, pojačana dostupnost, dosljedne deklaracije tipova dokumenata.
W3C konzorciji je međunarodna organizacija sa ciljem postavlja standarda za korištenje
HTML-a.
Neke od njihovih preporuka odnose se na:
 Interna operativnost web stranica preko pretraživača: odnosi se na preporuke o
tome kako koristiti HTML da bi stranice bile jednako prikazane u raznim
pretraživačima
 Dosljedne deklaracije tipova dokumenata: obzirom da se radi o međunarodnim
standardima znači da se može koristiti bilo koji HTML editor za izradu web stranica
 Pojačana dostupnost: W3C razvija preporuke imajući na umu i slabovidne osobe.

2.2. Korištenje HTML-a

2.2.1. Korištenje preglednika za gledanje izvornog koda web stranica

Svi preglednici pružaju mogućnost pregleda izvornog koda web stranice. Na slici niže
prikazano je kako se u Internet Exploreru može vidjeti kod.
Otići na View -> Source ili desni klik na stranicu u odabrati View source.
Nakon toga će se otvoriti dokument u kojem je moguće vidjeti kod stranice.

2.2.2. Korištenje markiranih oznaka za strukturu rasporeda web stranice: <html>,

<head>, <title> i <body>
<html> element definira cijeli dokument. To je korijenski element unutar kojeg se nalaze
svi ostali elementi. Kao i većina ostalih elemenata ima početni i završni tag <html> i
</html>. Kako većina elemenata ima završni tag, u priručniku se to neće posebno navoditi
za svaki element. Bit će napomenuto samo ukoliko neki element nema završni tag.
Preporuka je <html> tag koristiti za ubacivanje oznake jezika koju zatim koriste
pretraživači.
Za hrvatski jezik bi se tako definiralo <html lang= „hr“>.
<head> element se koristi za spremanje meta podataka o kojima je bilo riječi nešto ranije
u priručniku.
<title> element koristi se za definiranje naslova dokumenta. To je naslov koji se pojavljuje
kao naziv otvorene stranice pretraživača ili kada se stranica doda u Favorites.
<body> element definira tijelo dokumenta i u njemu se nalazi sav sadržaj kao što je tekst,
slike, tablice, liste itd.
Sukladno HTML5 standardu <html>, <body> i <head> tagovi nisu obavezni, ali je
svakako preporuka ih koristiti jer može doći do nepredviđenih rezultata u nekim
preglednicima. Problem je naime u tome što još uvijek ne postoji standard koji bi
vrijedio za sve preglednike i sve njihove verzije. Ulaže se veliki trud kako bi se
postigla unificiranost
izgleda stranica, i u tome se uspijeva za novije verzije preglednika, no starije verzije i dalje
mogu dovesti do problema nekompatibilnosti. Kod izrade web stranica valja uvijek imati
na umu da korisnici koriste razne preglednike i sukladno tome treba nastojati izraditi
stranicu koju će većina preglednika moći ispravno prikazati.

2.2.3. Korištenje markiranih oznaka za razvijanje raspored web stranice: <h1>, <p>
<br/>, <a href>, <img/>.
Oznake <h1> i <h2> se odnose na naslove unutar stranica. Raspon oznaka se kreće od
<h1> do <h6> i posložene su prema važnosti pri čemu <h1> označava naslov
najveće važnosti, a <h6> naslov najmanje važnosti. U većini slučajeva se najviše koriste
<h1> i <H2> za naslove i podnaslove.
Naslovi su važni jer ih tražilice koriste kako bi analizirale sadržaj stranice i po riječima u
naslovima analiziraju o čemu se radi na stranici. Ni u kom slučaju ne koristiti oznake za
naslove kako bi se isticao neki drugi tekst unutar stranice jer to može rezultirati
smanjivanjem ranga stranice na tražilicama.
Tražilice svoju popularnost temelje na tome koliko točne rezultate pretraživanja daju te
svaki pokušaj da se rang stranice podigne korištenjem metoda koje nisu u skladu sa
standardima se kažnjava na način da se stranica označi kao nepouzdana.
<p> je oznaka za odlomak i koristi se kako bi se odvojile pojedine cjeline teksta.
<br/> je oznaka za novi red. Spada u skupinu oznaka koje nemaju početnu i završnu
oznaku, pa je stoga njen izgled nešto drugačiji i sadrži znak / na kraju oznake.
<a href> element se sastoji od oznake a koja predstavlja hipervezu koja se koristi kao
poveznica na neku drugu stranicu ili neki element unutar stranice, a href oznaka sadrži
lokaciju na koju hiperveza pokazuje.
<img/> element se koristi za uključivanje slika u dokument.

Gornji kod bi u web pregledniku bio prikazan kako slijedi:

3. IZRADA WEB STRANICA

3.1. Dizajn

3.1.1. Prepoznati planiranje i tehnički dizajn, npr. evaluacija potrebe za ciljanu

publiku, kreiranje okvirne priče, organiziranje strukture stranice, kreiranje
predloška za raspored stranice, donošenje odluke za navigacijsku shemu.
Kao što je sa svim poslovima, tako je i prije početka izrade stranice potrebno izvršiti neka
planiranja i pripreme:
 Potrebno je odrediti koja će biti ciljana publika. Naime stranica koja sadrži
informacije o kuhanju će se vjerojatno bitno razlikovati od stranice sa dječjim
sadržajem
 Potrebno je kreirati nacrt okvirne priče, odnosno odrediti glavne smjernice onoga
što će stranica sadržavati
 Struktura stranice mora biti smislena i korisniku olakšati navigaciju stranicom
smislenim poveznicama
 Predložak rasporeda stranice vezan je za općeniti izgled stranici. Uključuje sve
informacije o dizajnu kao što je primjerice izgled tablica, pozadine, boja naslova i
slično
 Navigacijska shema omogućava korisnicima da pronađu ono što traže na
stranici na brz i jednostavan način.

3.1.2. Prepoznati dobar font. Korištenje fontova, npr. Arial, Courier, Helvetica
Obzirom da u većini slučajeva tekst zauzima veliki dio stranice, odabir fonta može imati
veliki utjecaj na dizajn. Generalno se razlikuju dva tipa fontova: Serif i Sans-serif. Njihova
razlika se može vidjeti na slijedećoj slici. Naime serif fontovi imaju dodatne ukrase na
slovima.

Zbog čitkosti teksta serif fontovi se ne preporučuju za duže tekstove već za naslove i
slično.
Arial, Courier i Helvetica su predstavnici sans serif fontova i kao takvi su pogodni za
sadržaj stranice. Njihova je odlika da izgledaju dobro u skoro svim veličinama.
 3.2. Korištenje aplikacije

3.2.1. Otvoriti, zatvoriti aplikaciju za izradu web stranica. Otvoriti, zatvoriti

web stranicu.
Aplikacija koja će se koristiti za praktični dio ovog priručnika je KompoZer i besplatno se
može skinuti sa stranice http://www.kompozer.net/download.php. Jednom skinuta
aplikacija ne zahtjeva nikakvu instalaciju, dovoljno je raspakirati sadržaj na mjesto po
izboru i za pokretanje dvaput kliknuti na kompozer.exe.

Za zatvaranje aplikacije kliknuti na X u gornjem desnom kutu aplikacije.

Za otvaranje web stranice odabrati File -> Open File te iz izbornika odabrati željenu
stranicu.
Za zatvaranje stranice kliknuti na X označen na slici niže.

3.2.2. Kreirati, pohraniti novu web stranicu na lokaciju na tvrdom disku

Za kreiranje nove stranice odabrati File -> New. Otvorit će se dijaloški okvir sa opcijama
kao na slijedećoj slici. Odabrati opciju „A blank document“ i kliknuti na Create.

Za spremanje stranice odabrati File -> Save. Ukoliko stranica još nema ima pojavit će se
dijaloški okvir u kojeg je potrebno unijeti ime stranice. Nakon unosa imena kliknuti na OK.
 U slijedećem koraku će se otvoriti dijaloški okvir u kojem je potrebno odabrati mjesto gdje
će se stranica spremiti te kao format odabrati HTML files.

3.2.3. Kreirati, pohraniti novu web stranicu baziranu na dostupnom predlošku

Odabrati File -> New te u dijaloškom okviru odabrati „A new document based on a
template“ te potom odabrati predložak i kliknuti na Create.

Za pohranu stranice koraci su isti kao u sekciji 3.2.2.

3.2.4. Dodati, promijeniti opisni naslov na stranici.

Odabrati Format -> Page Title and Properties. Otvorit će se dijaloški okvir kao na slici niže
u kojeg je potrebno unijeti naslov (Title) te kliknuti na OK.
Za provjeru kliknuti na gumb Browse nakon čega će se otvoriti web preglednik.

3.2.5. Primijetiti razliku iz pogleda izvornog koda u dizajnerski pogled.

U dnu aplikacije nalaze se opcije koje omogućavaju promjenu pregleda stranice. Klikom na
Source dobije se pregled koda stranice dok se klikom na gumb Preview može vidjeti
izgled stranice (dizajnerski pogled).
 3.3. Poboljšanje produktivnosti

3.3.1. Postaviti osnovne opcije u aplikaciji: zadani preglednik, zadani tip dokumenta,
kodiranje, fontovi
Zadani preglednik:
Otići na Tools -> Options -> Applications te sukladno slici niže postaviti željene parametre.
U ovom slučaju je kao zadani preglednik odabran Chrome.

Zadani tip dokumenta i kodiranje:

Otići na Tools -> Options -> Advanced te u Markup odjeljku definirati postavke po
želji/potrebi.
Fontovi:
Za definiranje fontova otići na Tools -> Options -> Fonts te odabrati željene postavke.

3.3.2. Korištenje dostupnih Help funkcija

Funkcije za pomoć su dostupne ukoliko se klikne na Help u glavnom izborniku. Nakon
toga se otvara novi dijaloški okvir u kojem se mogu pretraživati informacije po raznim
kriterijima.
 3.4. Unos teksta i oblikovanje

3.4.1. Umetnuti, izmijeniti, obrisati tekst

Za manipulaciju tekstom odabrati Preview u dnu aplikacije te zatim unositi tekst kao da se
radi o običnom uređivaču teksta.
 3.4.2. Razumjeti i upotrijebiti relativnu veličinu fonta
Veličina fonta se može postaviti relativno u odnosu na ostale elemente na stranici čime se
postiže bolja čitljivost. Postavljanje relativne veličine ujedno omogućava korisnicima da
sami mijenjaju veličinu teksta u preglednicima.
Za postavljanje relativne veličine odabrati tekst kojeg se želi formatirati te zatim otići na
Format -> Size i odabrati neku od ponuđenih veličina.

3.4.3. Primijeniti oblikovanje teksta: bold, italic, tip fonta i boju.

Oblikovanje teksta bold: označiti željeni tekst te odabrati Format -> Text Style -> Bold
Oblikovanje teksta italic: označiti željeni tekst te odabrati Format -> Text Style -> Italic
Promjena fonta: označiti željeni tekst te odabrati Format -> Font -> željeni font
Promjena boje: označiti željeni tekst te odabrati Format -> Text Color -> željena boja
 3.5. Oblikovanje odlomaka

3.5.1. Postaviti svojstva odlomka

Postavke odlomka se nalaze pod Format:
 Increase/Decrease Indent – povećavanje/smanjivanje uvlake
 Align – poravnanje
Za postavljanje svojstva odabrati paragraf te odabrati željene postavke.

3.5.2. Umetnuti, ukloniti pauzu u odlomku ili rečenici

Pauza u odlomku će biti prikazana kroz slijedeći primjer.
Unijeti 2 proizvoljne rečenice, označiti ih te ih definirati kao paragraf.

Postaviti se kursorom ispred druge rečenice te stisnuti ENTER. Rezultat toga je pauza
odlomka, odnosno dvije rečenice sada predstavljaju 2 odlomka.
Za uklanjanje pauze odlomka postaviti kursor ispred druge rečenice te kliknuti na
BACKSPACE na tipkovnici
Za pauzu u rečenici umjesto pritiska na ENTER istovremeno pritisnuti SHIFT + ENTER.
Rezultat toga je pauza rečenice. Za uklanjanje pauze rečenice postaviti kursor ispred
druge rečenice i pritisnuti BACKSPACE.
Pauza odlomka dakle znači kreiranje novog odlomka, dok pauza rečenice znači
preskakanje u novi red.

3.5.3. Kreirati, izmijeniti numeriranu (numbered), grafičku (bulleted) listu

Za izradu listi označiti elemente koji se žele staviti u listu te otići na Format -> List ->
Numbered/Bulleted.

Za izmjenu označiti listu te otići na Format -> List -> List properties.
Nakon toga će se otvoriti novi dijaloški okvir u kojem se može uređivati listu po želji –
promijeniti vrstu liste, promijeniti oznake, primijeniti izmjene nad cijelom listom ili samo
dijelom liste i slično.
 3.6. Oblikovanje stranica

3.6.1. Postaviti margine na stranici: gornja, donja, lijeva, desna.

Margine se postavljaju na način da se ode na File -> Page Setup te u dijaloškom okviru koji
se zatim otvori odabrati Margins & Header/Footer sekciju u kojoj je onda moguće
postaviti veličine margina.

3.6.2. Dodati, izmijeniti, ukloniti boju stranice ili slike

Otići na Format -> Page Colors and Background. U dijaloškom okviru koji će se tada
otvoriti označiti Use custom colors te kliknuti na polje pored riječi Background. Ukoliko se
želi učitati slika kao pozadina kliknuti na ikonu mape.
Ukoliko se odabere opcija definiranja pozadinske boje otvorit će se novi dijaloški okvir u
njemu se može odabrati boja.

Po odabiru boje kliknuti na OK.

U slučaju odabira slike za pozadinu, izabrati željenu sliku te kliknuti na Open.

3.6.3. Promijeniti boju hiperveze na stranici: visited, active, unvisited.

Otići na Format -> Page Colors and Background.
Klikom na kućice pored Link Text, Active Link Text i Visited Link Text može se definirati
željena boja.
 3.7. Hiperveze

3.7.1. Razumjeti termine apsolutna i relativna hiperveza

Termin hiperveza se koristi za tekst, sliku ili drugi element koji jednom kliknut vodi na
neku drugu lokaciju.
 Apsolutna hiperveza vodi na lokaciju izvan stranice u kojoj se korisnik trenutno
nalazi
 Relativna hiperveza vodi na stranicu unutar trenutne web stranice npr. veza
sa neke od stranica na naslovnu stranicu

3.7.2. Umetnuti, promijeniti, ukloniti hipervezu: tekst, slika.

Otvoriti stranicu u Preview mod-u te odabrati tekst kojeg se želi iskoristiti za hipervezu.

Nakon toga kliknuti na Link ikonu.

To do će dovesti do otvaranja dijaloškog okvira u kojeg zatim možete unijeti adresu druge
lokacije.

Za relativni link bi postupak bio isti samo što bi se klikom na sličicu mape trebalo pronaći
lokaciju.
Za rezultat ove operacije prvotno označeni tekst na stranici bit će obojan u plavo i
podcrtan kako bi se ukazivalo na to da se radi o hipervezi.

Ukoliko se želi iskoristiti slika kao hiperveza, postupak je potpuno isti samo što je
potrebno najprije uvesti sliku na stranicu tako što se ode na Insert -> Image te se odabere
željena slika.
Za uklanjanje veza, označiti tekst koji sadrži hipervezu te desni klik miša i odabrati opciju
Remove links.

3.7.3. Umetnuti, promijeniti, ukloniti e-mail hipervezu: tekst, slika.

Za unos e-mail hiperveze koraci su potpuno isti kao za unos obične hiperveze uz razliku
da se unosi e-mail adresa umjesto adrese stranice i potrebno je označiti kućicu „The
above is an email address“

3.7.4. Definirati cilj hiperveze: same window, new window

Kod otvaranja hiperveza postoje dvije opcije: da se nova stranica otvori umjesto već
postojeće što znači da se trenutno otvorena stranica zatvara, ili da se nova stranica otvori
u novom prozoru preglednika pri čemu trenutno otvorena stranica ostaje i dalje otvorena.
Početne upute su iste kao unos linkova, a opcija otvaranja u novom ili istom prozoru se
definira tako da se u sekciji Target označi „Link is to be opened“ te zatim iz padajućeg
izbornika odabere željena opcija.
 3.7.5. Postaviti polazišnu točku (anchor), umetnuti link do polazišne točke
Anchor je hiperveza koja premješta fokus sa jednog dijela teksta unutar stranice na drugi
tekst unutar stranice. Obično se koriste na stranicama koje su poprilično dugačke kako
korisnik ne bi trebao previše pomicati pomičnu traku sa strane. Na slici niže je prikazan
jedan od oblika implementacije anchor veza. Klikom na neku od poveznica fokus se
premješta na odabranu sekciju.

Kako bi se stvorila anchor veza potrebno je označiti podnaslov unutar teksta te kliknuti na
Anchor ikonu.

U dijaloškom okviru koji se zatim otvori potrebno je definirati ime anchor veze. To je ime
koje će biti prikazano korisniku.
Nakon što se postupak ponovi za sve željene anchor veze potrebno je kreirati tablicu
sadržaja koja će biti prikazana korisniku (kao na gornjem primjeru s Wikipedije).
Na početku stranice navesti sve odjeljke koje ste definirali kao anchor veze.
Odabrati prvi po redu (u ovom slučaju Uvod) te kliknuti na Link ikonu.
Na popisu lokacija se sada mogu vidjeti sve lokacije koje su ranije definirane za anchor.

Odabrati željenu lokaciju, kliknuti OK te postupak ponoviti za preostale.

Ovaj postupak u praksi nema prevelike koristi ukoliko se radi o kratkim tekstovima već se
preporučuje samo za stranice sa jako puno sadržaja.

3.8. Tablice

3.8.1. Umetnuti, obrisati tablicu

Za umetanje tablice kliknuti na Table ikonu u glavnoj izbornoj traci.

Kao rezultat toga otvorit će se dijaloški okvir u kojem je zatim moguće odabrati želje
postavke.
Po odabiru postavki unutar radnog prostora će biti iscrtana tablica u koju možete unositi
vrijednosti po želji.

Za brisanje tablice pozicionirati se unutar tablice te otići na Table -> Delete te zatim
odabrati Table. Kao što je vidljivo na slici moguće je brisati i samo određene dijelove
tablice kao što su kolone i stupci.

3.8.2. Umetnuti, promijeniti naslov tablice

Kliknuti bilo gdje unutar tablice te otići na Table -> Table properties.
U dijaloškom okviru definirati gdje se želi ubaciti naslov.
Sukladno odabiru u radnom prostoru će se stvoriti mjesto za unos naslova.

3.8.3 Poravnati tablicu: lijevo, desno, centar

Kliknuti bilo gdje unutar tablice te otići na Table -> Table properties te pod Table
Alignment odabrati željeno poravnanje.
 3.8.3. Umetnuti, obrisati stupce i retke
Za umetanje stupaca redaka otići na Table -> Insert i zatim odabrati željenu operaciju.

Za brisanje odabrati željeni stupac/kolonu kojeg želite obrisati te otići na Table -> Delete
te odabrati željenu opciju.

3.8.4. Izmijeniti širinu stupca, visinu retka

Otići na Format -> Table cell properties. Otvoriti Cells prozor te zatim u Selection dijelu
odabrati Row i definirati željene postavke.
 3.8.5. Spojiti, razdvojiti ćelije
Za spajanje ćelija odabrati ćelije koje se žele spojiti te na desni klik miša iz izbornika
odabrati „Join Selected Cells“.

Za razdvajanje odabrati željenu ćeliju te na desni klik miša odabrati Split cell.
 3.8.6. Izmijeniti širinu rubova tablice, širinu ćelije, razmak ćelije.
Kliknuti bilo gdje unutar tablice te otići na Table -> Table properties.
Za rubove tablice pozicionirati se u Table prozor te definirati postavke u Borders and
Spacing sekciji.

Za definiranje svojstava ćelije otvoriti Cells prozor u istom dijaloškom okviru.

 Cell Spacing -> definira razmak između ćelija u tablici
 Cell Padding -> definira razmak između sadržaja ćelije i rubova ćelije.

3.8.7. Promijeniti boju pozadine, sliku pozadine, slike unutar ćelije i cijele tablice
Promjena boja pojedine ćelije: odabrati željenu ćeliju te otići na Table -> Table or Cell
Background color te odabrati željenu boju.
Promjena boje tablice: odabrati tablicu te otići na Table -> Table or Cell Background color
te odabrati boju.
Slika unutar ćelije/tablice: kliknuti bilo gdje unutar tablice te zatim u dnu stranice odabrati
<table> oznaku
Na desni klik miša otvara se izbornik u kojem je potrebno odabrati Inline styles.

U dijaloškom okviru koji se zatim otvori odabrati sliku.

4. KORIŠTENJE OBJEKATA

4.1. Grafički objekti

4.1.1. Dodati, ukloniti sliku sa web stranice

Pozicionirati se unutar stranice na mjesto gdje se želi ubaciti slika te kliknuti na Image
ikonu

U dijaloškom okviru koji se zatim otvori pronaći željenu sliku.

Za brisanje slike dovoljno ju je označiti i kliknuti na BACKSPACE na tipkovnici.

4.1.2. Postaviti, izmijeniti atribute slike: size, border, alignment, alternative text.
Označiti sliku na stranici, desni klik mišem i odabrati Image properties.
Otvorit će se dijaloški okvir u kojem se onda mogu definirati željena svojstva.

U Location prozoru može se izmijeniti alternative text, to je tekst koji će biti prikazan kada
se na stranici pređe mišem preko slike.
U Dimension prozoru može se izmijeniti veličina slike.
U Appearance prozoru moguće je definirati vrstu obruba i poravnanje.
 4.2. Forme

4.2.1. Umetnuti formu na web stranicu.

Pozicionirati se unutar stranice na mjesto gdje se želi umetnuti kontakt forma te kliknuti
na Form ikonu.

Otvorit će se dijaloški okvir u kojeg je zatim potrebno unijeti određene vrijednosti:

 Ime forme
 U Action URL unijeti mail adresu s koje ćete po potrebi slati odgovore na pitanja
korisnika. Prije adrese upisati mailto:
 Za Method polje odabrati POST

Unutar stranice će se pojaviti plavo iscrtano polje koja pokazuje gdje forma počinje i
završava.

4.2.2. Dodati, ukloniti jednu liniju, više linija

Dodavanje jedne linije:
Unutar plavo iscrtanog polja unijeti primjerice Ime te zatim pod Form odabrati Form
Field.
U dijaloškom okviru koji se zatim otvori odabrati vrstu polja te definirati ime polja.

Rezultat bi trebao izgledati kao na slici niže.

Dodavanje više linija:

Koraci su načelno isti samo što je potrebno odabrati Form -> Text Area. U dijaloškom
okviru koji se zatim pojavi mogu se definirati željene postavke.
Ovisno o unesenim vrijednostima rezultat bi trebao otprilike izgledati:

4.2.3. Dodati, ukloniti polje forme (form field): drop-down, check box, radio button.
Drop-down: kliknuti na Form -> Form field -> Selection list. U dijaloškom okviru koji se
zatim otvorit definirati naziv liste (u ovom slučaju Interesi) te klikom na gumb dodavati
elemente.
Checkbox: kliknuti na Form -> Form field -> te u polju Field type odabrati Check Box i
definirati postavke po želji. Ukoliko je potrebno dodati više checkbox-eva ponoviti
postupak za svaki.

Radio button: odabrati Form -> Form field -> Radio button. Definirati svojstva te kliknuti
na OK. U slučaju da je potrebno dodati više radio button-a ponoviti postupak za svaki.
Odlika radio button-a, za razliku od check box-a je da samo jedan može biti označen u
određenom trenutku.
Primjer kontakt forme je dan na slici niže:
 4.2.4. Postaviti, izmijeniti postavke polja forme: text field, drop-down, check box,
radio button.
Za izmjenu postavki drop-down elementa označite ga odabrati Format -> Selection List
Properties.

Za izmjenu postavki text polja, check box-a i radio button-a odabrati željeni element te
otići na Format -> Form Field properties.

U oba slučaja se zatim otvara ista forma kao za dodavanje polja u kojoj se onda mogu
vršiti izmjene.
 4.2.5. Dodati, ukloniti tipke za predaju (submit), resetiranje (reset).
Otići na Form –> Form Field te pod Field type odabrati submit odnosno reset button.

Submit button je dugme koje je zaduženo za to da jednom kada ga se klikne proslijedi

unesene informacije.
Reset button poništava sve uneseno u elemente u formi.
Za uklanjanje navedenih polja ih je dovoljno označiti i kliknuti na DELETE.

4.2.6. Postaviti, izmijeniti postavke za tipke predati, resetirati.

Odabrati željenu tipku te na desni klik miša odabrati Form Field Properties.
4.2.7 Postaviti, izmijeniti akciju forme (form action) za slanje izlazne forme putem mail-a.
Ove postavke su definirane u prvom koraku izrade forme (ime forme, adresa ...). Ukoliko
se žele izmijeniti kliknuti bilo gdje unutar forme te na desni klik miša odabrati Form
Properties.
5. STILOVI

5.1. CSS koncepti

5.1.1. Razumjeti pojam Cascading Style Sheets (CSS), njihovu uporabu i korist.
CSS se koristi za uređivanje stila HTML dokumenta. Izgled elemenata je moguće definirati
i kroz sami HTML no preporuka je odvajati samu definiciju elemenata od definicije izgleda.
Glavna prednost CSS-a je što je njime moguće definirati na jednom mjestu stil za sve
elemente, primjerice na jednom mjestu je moguće definirati pozadinsku boju za sve
stranice web stranice, dok bi se u HTML-u to trebalo definirati za svaku stranicu posebno.
Još neke prednosti korištenja CSS-a su brze učitavanje, jednostavnije editiranje, brži razvoj
i veća kontrola nad izgledom.

5.1.2. Prepoznati glavne pristupe primjeni stilova: inline, internal, external.

External pristup: kod ovog pristupa CSS definicije se nalaze izvan samog HTML
dokumenta. To omogućava da se potpuno odvoji sadržaj stranice od samog izgleda. CSS
datoteke su datoteke koje sadrže samo CSS definicije i imaju nastavak „.css“, primjerice
mojaStranica.css.
Kako bi se stilovi navedeni u css datoteci primijenili na HTML dokument potrebno ih je
povezati, a to se radi tako da se css file uključi u <head> dijelu HTML dokumenta.
<head>
<title> Web dizajn </title>
<link rel="stylesheet" type="text/css" href="mojStil.css" />
</head>
Postupak je potrebno ponoviti za svaku stranicu unutar web stranice.
Internal pristup: u ovom slučaju se css definicije ne nalaze u drugoj datoteci već se nalaze
unutar same HTML datoteke. Na ovaj način se definira stil samo dotične stranice u koju su
dodane css definicije. Ovo se može primjerice koristiti kada se za samo jednu stranicu želi
specificirati neki posebni stil. Dakle, sve ostale stranice bi uključile vanjski css file, u
dotičnoj stranici bi se css definirao unutar nje same.
Kako bi se definirao interni stil, pravila stila se moraju ubaciti u <head> sekciju unutar
<style> oznaka.
<head>
<title>Web dizajn</title>
<style type="text/css">
body{ background-color: red;}
</style>
</head>
U gornjem primjeru je definirano da će za stranicu u koju je dodan ova definicija tijelo
dokumenta imati crvenu pozadinsku boju.
Inline: kod ovog pristupa se style atribut definira unutar same oznake elementa na kojeg
se želi primijeniti određeni stil.
<p style="color:red; ">This is a paragraph.</p>
U ovom slučaju bi boja samo ovog paragrafa bila crvena.
Ovaj pristup se ne preporučuje koristiti jer se gube prednosti navedene u prijašnjoj sekciji.
 5.1.3. Razumjeti strukturu CSS pravila: selector i declaration (property, value).
 Selector: to je html element na kojeg se želi primijeniti stil
 Declaration: to je stil kojeg se želi primijeniti nad određenim elementom.
Svaka se deklaracija sastoji od 2 dijela:
 Property: to je atribut kojem se želi dati neka vrijednost (npr. pozadinska boja)
 Value: vrijednost koja se dodjeljuje atributu.
Svaka deklaracija se mora nalaziti unutar vitičastih zagrada te mora završavati sa ;.
Pravilo koje bi dakle definiralo da pozadinska boja tijela html dokumenta mora biti zelena
bi izgledalo:
body { background-color: green; }

5.2. Korištenje CSS

5.2.1. Kreirati, pohraniti novu CSS datoteku.

Kliknuti na CSS ikonu na alatnoj traci

Otvorit će se dijaloški okvir u kojem je zatim potrebno napraviti slijedeće korake

 Kliknuti na „internal stylesheet“ u Sheets and rules odjeljku

 Nakon toga kliknuti na paletu u gornjem lijevom uglu i odabrati Linked stylesheet
 Klkinuti na Create stylesheet
 Kliknuti opet na „internal stylesheet“ u Sheets and rules odjeljku
 Kliknuti na Export stylesheet and switch to exported version.
 Dati ime datoteci te odbrati .css ekstenziju
 Kliknuti na Save.
 5.2.2. Kreirati, izmijeniti CSS pravila: boja, pozadina, font.
Kliknuti na CSS ikonu u alatnoj traci te zatim odabrati datoteku. Kao element za prikaz
funkcionalnosti odabran je body.

Kako bi se definirale postavke kliknuti na Create Style Rule.

Za odabir pozadinske boje kliknuti na Background te na kućicu pored Color nakon čega se
otvara izbornik boja.
Za definiranje fonta kliknuti na Text prozor u kojem se zatim mogu odabrati željene
postavke.

Nakon što su definirane sve postavke kliknuti na OK.

5.2.3. Staviti u privitak eksterni (vanjski) CCS na web stranici

Kako bi se definirani stilovi primijenili na HTML dokument potrebno je <head> elementu
definirati css datoteku u kojoj se nalaze definicije stilova.
<head>
<title></title>
<link rel="stylesheet" href="mojStil.css" type="text/css">
</head>
6. PRIPREMITI UČITAVANJE

6.1. Provjera

6.1.1. Identificirati i popraviti neispravne linkove na web stranici

Važan posao kojeg je potrebno obaviti jednom kada je stranica gotova je provjera svih
hiperveza na stranici kako se ne bi desilo da primjerice klik na neku hipervezu ne vodi
nikamo ili možda vodi na krivo mjesto.

6.1.2. Prepoznati pravilnu uporabu sadržaja na web stranici: uključujući datum

zadnjeg ažuriranja, detalji softvera potrebnog za otvaranje, gledanje
podataka, osiguravajući kompatibilnost sadržaja sa drugim web
pretraživačima.
Slijedeće što je potrebno napraviti prije no što se stranica objavi je provjeriti da li su
uključene sve bitne informacije kao što je informacija kada je zadnji puta stranica
ažurirana (korisnici imaju više povjerenja u stranice koje se redovito održavaju).
Za sve elemente na stranici za koje je primjerice potreban neki dodatan softver da bi ih se
moglo koristiti/otvoriti navesti što je potrebno imati (primjerice za pdf dokumente se
može navesti da je potrebno imati Adobe reader).
Svakako je važno provjeriti kako stranica izgleda u raznim preglednicima kako bi se
osiguralo da je izgled svugdje isti. Ukoliko iz nekog razloga niste u mogućnosti prilagoditi
stranicu nekom određenom pregledniku naglasiti na stranici da se preporuča koristiti
možda neki drugi preglednik kako bi korisničko iskustvo bilo potpuno. Već je ranije bilo
govora o tome da još uvijek svi preglednici ne podržavaju sve opcije koje su na
raspolaganju, pa se može desiti da se primjerice u nekom web pregledniku neki format ne
može prikazati.

6.1.3. Provjeriti pravopis web stranice i izvršiti potrebne ispravke.

Još nešto što je svakako bitno za napraviti je provjera pravopisa jer pravopisne greške
mogu negativno utjecati kod korisnika. KompoZer ima ugrađenu opciju za provjeru
pravopisa koju je moguće pokrenuti na Edit -> Check Spelling i dalje koristiti kao bilo koji
drugi alat za provjeru pravopisa.

6.2. Publikacija

6.2.1. Razumjeti proces učitavanja (upload), preuzimanja (download) web

stranice na web server i sa web servera
Jednom kada je stranica gotova potrebno ju je postaviti na neko mjesto s kojeg će biti
dostupna široj javnosti, odnosno potrebno ju je objaviti na Internetu.
Proces učitavanja (upload) web stranice na server se svodi na prebacivanje datoteka
stranice na web hosting server. U uvodu je bilo govora o odabiru domene i web hostinga.
Jednom kada se stranica učita na server ona se povezuje sa URL adresom i postaje vidljiva
na Internetu.
Kada korisnici pristupaju vašoj stranici najprije unesu URL. Nakon što kliknu na ENTER
kopija vaše stranice se preuzima sa servera na njihovo računalu kako bi mogli pregledavati
stranicu.

6.2.2. Ucitati (upload), preuzeti (download) web stranicu na server i sa servera.

Nakon što zakupite hosting prostor možete stranicu učitati na web server.
Otići na File -> Publish te zatim u dijaloški okvir unijeti potrebne podatke. Zahtijevane
podatke dobijete nakon što registrirate domenu i zakupite web prostor.