Alati Za Izradu Web Stranica

Alati za izradu Web stranica
Alati za izradu web stranica olakati e Vam posao. Pokazati emo vam besplatan
program koji nudi gotovo jednake mogunosti kao i profesionalni alati za izradu web
stranica koji znaju biti vrlo skupi.
Za pisanje HTML koda preporuujemo va besplatni alat za izradu Web
stranica: CoffeeCup HTML Editor. Preuzmite ga na svoje raunalo i instalirajte.
Profesionalci inae koriste Adobe Dreamweaver ali njegova cijena je oko 1600kn.
Izrada strukture Web stranice
Izrada Web stranica zapoinje kreiranjem najobinijeg praznog foldera na vaem

raunalu (desni klik na pozadinu > New > Folder) unutar kojega ete spremati sve
kreirane datoteke koje su potrebne da bi ova Web stranica funkcionirala. Mi emo
folder nazvati WEB DIZAJN.
Sljedei korak je kreitanje HTML datoteke. Nakon to instalirate HTML editor

(CoffeeCup HTML Editor ili neki drugi) otvorite novi dokument, inae se otvara klikom
na File > New ili File > New HTML Page. Nakon to otvorite novi dokument on e
vjerovatno biti popunjen poetnim kodom kojega ete izbrisati. Sada va HTML
dokument mora biti prazan.
Pritiskom na File > Save va HTML dokument ete spremiti na vae raunalo
unutar WEB DIZAJN foldera i nazvat ete ga index.html (malim slovima).
Sada kada imate praznu stranicu u vaem HTML editoru zapoet emo pisanjem
naeg vlastitog HTML koda. Prvo moramo navesti da se radi o HTML dokumentu, a
to se radi jednostvano pisanjem sljedee linije koda:
<!DOCTYPE html>
Sada smo dali svima do znanja da se radi o HTML dokumentu. Nakon toga tagovima
emo kreirati podruje unutar kojega se mora pisati sav HTML kod.
<!DOCTYPE html>
<html>
</html>
<!DOCTYPE html>
<html lang="hr">
</html>
Na primjer kada bismo radili Web stranicu na engleskom jeziku dodali bismo
atribut lang="en" a kada bi stranica bila na njemakom lang="de". Nakon to
smo kreirali glavno podruje za pisanje koda unutar njega kreirat emo dva razliita
podruja <head> i <body>.
<!DOCTYPE html>
<html lang="hr">
<head>
</head>
<body>
</body>
</html>
Unutar <head> taga piu se informacije o Web stranici koje nama nisu vidljive. Te
informacije slue da bi browseri ispravnije prikazivali sadraj Web stranice i da bi
trailice (Google, Yahoo!, Bing...) dobile informacije o naoj Web stranici kao to su
naslov, i kratak opis. Uz pomo takvih informacija korisnici e lake pronai nau
Webstranicu koristei trailice.
Sada emo popuniti <head> tag sa odgovarajuim informacijama koje se inae

nazivaju meta tagovi.
Radi lakeg snalaenja od sada emo koristiti razliite boje za oznaavenje

postojeeg koda i novoga koda.
Postojei kod biti e sive boje: , Novi kod biti e bijele boje:
<!DOCTYPE html>
<html lang="hr">
<head>
<meta charset="utf-8">
<title>Naslov</title>
<meta name="description" content="Ovdje e bit kratak opis">
</head>
<body>
</body>
</html>
Head smo popunili sa svim informacijama koje su nam za sada potrebne, redom e
vam biti objanjeno zato svaki meta tag slui.
<meta charset="utf-8"> ovaj meta tag dozvoljava nam koritenje svih
znakova u hrvatskom pismu (ukljuujui: , , , , ). Ovaj standard (utf-8) isto
tako sadri veinu europskih i bliskoistonih pisama.
<title>Naslov</title> ovaj meta tag prikazuje naslov Web stranice.
Kada koristite neku trailicu (npr. Google) rezultati koji su prikazani formatirani
su na nain da je prvo prikazan naslov a zatim kratak opis te Web stranice.
Naslov je isto tako prikazan i na vrhu browsera.
<meta name="description" content="Ovdje e bit kratak

opis"> ovaj meta tag koriste trailice a slui da bi prikazao kratak opis nae
Web stranice. Taj kratak opis upravo se pie unutar ovoga taga koji ima
ogranienje duine na oko 160 znakova da nebi bio pre dug.
Prikazano je kako meta tagovi funkcioniraju kod trailica.
U primjeru je prikazano kako webstranica izgleda kada joj se pristupi iz trailice, meta
tagovi te iste Web stranice izgledali bi ovako:
<title>Adobe Hrvatska</title>
<meta name="description" content="Adobe mijenja svijet kroz
digitalna iskustva. Svojim klijentima omoguujemo stvaranje,
isporuku te optimizaciju sadraja i aplikacija">
Naslov Web stranice nije samo vidljiv kod trailica, vidljiv je isto i na vrhu browsera
Sada kada smo naveli potrebne informacije u <head> tag moemo krenuti
na <body> tag unutar kojega se definira izgled Web stranice.
Kao to je prikazano na slici naa Web stranica na vrhu e imati glavni izbornik,
ispod njega biti e prikazana slika sa naslovom. Ispod slike biti e uvod sa osnovnim
informacijama nakon eka slijedi glavni sadraj web stranice. Na dnu e se nalaziti
podnoje.
Sada emo unutar <body> taga stvoriti razliita podruja koja e sadravati djelove
Web stranice. Ta podruja kreirat emo uzpomo <div> taga. Nama je potrebno 6
podruja za:
Glavni menu
Sliku
Naslov
Uvod
Glavni sadraj
Podnoje
Podruja (<div> tagovi) e biti rasporeena istim redosljedom kao i na slici, od

Glavnog menua na vrhu sve do Podnoja koje e se nalaziti na dnu nae Web
stranice.
<!DOCTYPE html>
<html lang="hr">
<head>
</head>
<body>
<div>Podruje za glavni menu</div>
<div>Podruje za sliku</div>
<div>Podruje za naslov</div>
<div>Podruje za uvod</div>
<div>Podruje za glavni sadraj</div>
<div>Podruje za podnoje</div>
</body>
</html>
Izrada osnovne strukture Web stranice je gotova. Dodali smo informacije o Web
stranici unutar <head> taga i stvorili odgovarajua podruja unutar <body> taga.
Sljedee to moramo napraviti je popuniti svko kreirano podruje sa odgovarajuim
kodom. Krenut emo od vrha prema dnu, znai prvi na redu biti e glavni izbornik.
Glavni izbornik Web stranice
Glavni izbornik biti e lista linkova. Lista se u HTML-u radi vrlo jednostavno to
moete vidjeti i u primjeru.
Ovako se pie obina lista (npr. u Word dokumentu):

Prvi u listi
Drugi u listi
Trei u listi
Ovako se radi lista u HTML-u:

<ul>
<li>Prvi u listi</li>
<li>Drugi u listi</li>
<li>Trei u listi</li>
</ul>
Kao to je prikazano lista se sastoji od 2 taga. Zapoinje sa <ul> tagom koji daje do
znanja da se radi o listi a nakon toga svaka stavka unutar liste se nalazi
unutar <li> taga.
Inae se Web stranice sastoje od vie stranica na primjer: Poetna, Kako do nas,
Kontakt... To se radi da bi sadraj bio pregledniji i da bi korisnici Web stranice lake
mogli pronai eljene informacije. Te stranice meusobno su povezane linkovima koji
se inae nalaze u glavnom izborniku. Nama je to bitno jer e se i naa Web stranica
sastojat od 3 razliite stranice koje e biti povezane linkovima. Ti linkovi nalazit e se
u glavnom izborniku unutar liste koju smo prethodno kreirali.
Za poetak pokazati emo vam kako izgleda obian HTML link koji e vas
preusmjerit na Google trailicu kada kliknete na njega: Google
HTML kod ovoga linka izgleda ovako: <a

href="http://www.google.hr">Google</a>
Svaki link sastoji se od dva djela: adresa i anchor text. U naem primjeru adresa
je http://www.google.hr a anchor text je Google.
Ako upiete ovu adresu u va browser doi ete na Google trailicu zato jer svaka
Web stranica ima svoju adresu, npr. adresa od Facebook-a
je http://www.facebook.com
Za razliku od Google-a i Facebook-a, naa Web stranica je jouvijek u izradi i zato

nema vlastitu adresu. Pokazati emo vam kako kreirati linkove za Web stranice koje
su tek u izradi, inae se to radi relativnim linkovima.
Naa Poetna stranica imat e sljedei link: <a

href="index.html">Poetna</a>
Sljedea stranica biti e Kako do nas a njen link izgledat e ovako: <a
href="kako-do-nas.html">Kako do nas</a>
Naa zadnja stranica biti e Kontakt: <a href="kontakt.html">Kontakt</a>
Kao to vidite adresa nesmje imati razmak, to se rjeava stavljanjem povlaka umjesto
razmaka (kako-do-nas.html) ili uklanjanjem razmaka i spajanjem svih djelova
(kakodonas.html). Mi smo se odluili na stavljanje povlaka jer je preglednije.
Sada kad smo kreirali sva tri lnika integrirat emo ih unutar liste koju smo prethodno
kreirali.
Naa lista:
<ul>
<li>Prvi u listi</li>
<li>Drugi u listi</li>
<li>Trei u listi</li>
</ul>
Naa lista sa linkovima:

<ul>
<li><a href="index.html">Poetna</a></li>
<li><a href="kako-do-nas.html">Kako do nas</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
</ul>
Na glavni izbornik je gotov. Glavni izbornik nije nita vie nego lista linkova koji
povezuju sve stranice. Mi smo se odluili kreirati 3 stranice ali vi moete dodavati ili
uklanjati stranice po vaoj potrebi.
Sad kada smo zavrili sa izradom glavnog izbornika moramo ga staviti na

odgovarajue mjesto unutar koda Web stranice koji smo izradili.
<!DOCTYPE html>
<html lang="hr">
<head>
</head>
<body>
<div>
<ul>
</ul>
</div>
<div>Podruje za sliku</div>
</body>
</html>
Slika
Slika e se nalaziti u gornjem djelu nae Web stranice ispod glavnog izbornika i iznad
uvoda.
Da vas podsjetimo, u treem djelu Izrada strukture Web stranice morali ste kreirati
folder na vaem raunalu pod nazivom WEB DIZAJN unutar kojega ste spremili
HTML dokument pod nazivom index.html
Sada ete unutar istog WEB DIZAJN foldera spremiti bilo kakvu sliku koja vam
najvie odgovara.
Na kod za dodavanje slike izgledati e ovako: <img src="slika1.jpg">
Sada ete kod slike uvrstiti unutar naeg HTMLK koda.
<!DOCTYPE html>
<html lang="hr">
<head>
</head>
<body>
<div>
<ul>
</ul>
</div>
<div>
<img src="slika1.jpg">
</div>
</body>
</html>
Nakon to smo dodali sliku kreemo dalje sa naslovom.
Naslov Web stranice
HTML naslov se pie unutar sljedeih tagova: <h1>Naslov</h1>
h1 skraenica je za heading 1, to na Hrvatskom znai naslov 1. Naslov (eng.

heading) se oznaava sa brojem zato jer postoji vie vrsta naslova. Naslov s brojem
1 je glavni i inae se stavlja na sami vrh Web stranice. Sve ostalo su podnaslovi, evo
primjera:
<h1>Naslov</h1>
<h2>Podnaslov</h2>
<h3>Podnaslov</h3>
<h4>Podnaslov</h4>
itd...
Kao to je prikazano <h1> je glvani naslov, a to se ide nie to naslovi imaju manje
znaenje. Isti nain formatiranja naslova nai ete u bilo kakvoj knjizi, glavni naslov
uvjek je na poetku i uvjek je najvei, nakon toga sljede naslovi poglavlja koji su
neto manje veliine i manje vanosti, nakon njih sljede naslovi odjeljaka koji su jo
manje veliine i manje vanosti itd.
Sada emo naslov uvrstit u podruje za naslov u naem HTML kodu:

<!DOCTYPE html>
<html lang="hr">
<head>
</head>
<body>
<div>
<ul>
</ul>
</div>
<div>
</div>
<div>
<h1>Naslov</h1>
</div>
</body>
</html>
Uvod
Uvod se nalazi ispod naslova i sadravat e par najosnovnijih informacija o naoj

Web stranici. Npr. ako radite Web stranicu za apartmane u uvod ete napisati
adresu, broj telefona i email ako ga imate. Ako radite Web stranicu za neku trgovinu
napisat ete adresu, radno vrijeme, fax i broj telefona.
Mi za primjer radimo Web stranicu za Web dizajn stoga emo u uvod napisati email,
adresu i broj telefona.
Uvod e biti obian tekst stoga se pie unutar <p> taga. To je skraenica za paragraf
to na hrvatski znai odlomak teksta.
<p>info@izrada-webstranica.com Trg bana Josipa Jelaia,

Zagreb Tel.:(01)123-4567</p>
Uvod emo dodati unutar naeg koda

<!DOCTYPE html>
<html lang="hr">
<head>
</head>
<body>
<div>
<ul>
</ul>
</div>
<div>
</div>
<div>
<h1>Naslov</h1>
</div>
<div>
<p>info@izrada-webstranica.com | Trg bana Josipa Jelaia,
Zagreb | Tel.:(01)123-4567</p>
</div>
</body>
</html>
Sadraj Web stranice
Samostalna izrada Web stranica uvelike ovisi o sadraju. Sadraj je najvaniji dio
svake Web stranice, o njemu e ovisiti uspjeh. Svaka Web stranica ima svoj vlastiti
jedinstveni sadraj koji mora biti pregledan, razumljiv i kvalitetan za korisnika. Web
stranice se mogu na neki nain usporedit sa knjigama u ovom sluaju. Ako knjiga ima
privlane i dobro dizajnirane vanjske korice to joj nee znait nita ako je sadraj te
knjige nezanimljiv i nekvalitetan. Isto vrijedi i za Web stranicu, ako je dobro
dizajnirana i ugodna za oko, to joj nee znaiti puno ako je sadraj lo.
Ako npr. radite Web stranicu za va obrt, kreirajte sadraj koji e pomoi korisnicima
da shvate ime se bavite, gdje se nalazite i kakve proizvode ili usluge nudite. Nekada
je samo 5 reenica dovoljno da kreirate kvalitetan sadraj koji e pomoi korisnicima.
Na svoju Web stranicu nikada nemojte kopirati sadraj ili djelove sadraja neke druge
Web stranice jer to je strogo zabranjeno.
Vrijeme je da napiete svoj sadraj koji e biti unikatan i koristan za korisnike koji e
posjeivati vau Web stranicu.
Samo radi primjera dodati emo tekst koji e vam moda izgledati udno. To je tekst
koji se inae dodaje samo da bi mogli vidjeti kako e naa Web stranica izgledati.
Naravno Vi ete napisati svoj vlastiti tekst.
Tekst emo sada dodati u na HTML kod unutar glavnog saraja:

<!DOCTYPE html>
<html lang="hr">
<head>
</head>
<body>
<div>
<ul>
</ul>
</div>
<div>
</div>
<div>
<h1>Naslov</h1>
</div>
<div>
Zagreb | Tel.:(01)123-4567</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.</p>
</div>
</body>
</html>
Podnoje
U podnoje emo uvrstiti neke korisne informacije o naoj Web stranici koje bi mogle
zanimati korisnike. Samostalna izrada web stranica takoer obuhvaa i zatitu svoga
rada, Copyright informacije se moraju staviti u podnoje jer daju svima do znanja da
se sadraj web stranice nesmije kopirati. Uz copyright inae se jo dodaje email, broj
telefona (opcionalno), link od kuda izrada Web stranica potjee i dali prolazi W3C
validaciju.
Sve to strukturirat emo u dva paragrafa, prvi e sadravat korisne informacije o

naoj Web stranici (Email, telefon i izvor) a drugi copyright informacije. Copyright
informacije piu se na nain da sadravaju i godinu. Da nebi svake godine morali
unositi novu godinu pokazati emo vam jedan PHP trik. PHP je vrlo koristan
programski jezik uz pomo kojega e se naa godina automatski mjenjati svake nove
godine. To emo postii dodavanjem sljedee linije koda:
<?php echo date("Y"); ?>
Prvi paragraf:
<p>info@izrada-webstranica.com | Tel.:(01) 123-4567 | <a
href="http://www.izrada-webstranica.com/">Izrada Web
stranica</a></p>
Drugi parafraf:
<p>© <?php echo date("Y"); ?> copyright</p>
Ispred PHP linije koda primjetili ste ovaj set znakova: ©
Ti znakovi slue za prikaz copyright znaka koji izgleda ovako:
Sada emo oba paragrafa uvrstiti u na kod

<!DOCTYPE html>
<html lang="hr">
<head>
</head>
<body>
<div>
<ul>
</ul>
</div>
<div>
</div>
<div>
<h1>Naslov</h1>
</div>
<div>
Zagreb | Tel.:(01)123-4567</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.</p>
</div>
<div>
<p>info@izrada-webstranica.com | Tel.:(01) 123-4567 | <a
href="http://www.izrada-webstranica.com/">Izrada Web
stranica</a></p>
<p>© <?php echo date("Y"); ?> copyright</p>
</div>
</body>
</html>
CSS

Alati Za Izradu Web Stranica

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Alati Za Izradu Web Stranica

Uploaded by

Copyright:

Available Formats

Alati za izradu Web stranica

Izrada strukture Web stranice

Izrada Web stranica zapoinje kreiranjem najobinijeg praznog foldera na vaem

Sljedei korak je kreitanje HTML datoteke. Nakon to instalirate HTML editor

Sada emo popuniti <head> tag sa odgovarajuim informacijama koje se inae

Radi lakeg snalaenja od sada emo koristiti razliite boje za oznaavenje

<meta name="description" content="Ovdje e bit kratak

Prikazano je kako meta tagovi funkcioniraju kod trailica.

Podruja (<div> tagovi) e biti rasporeena istim redosljedom kao i na slici, od

Glavni izbornik Web stranice

Ovako se pie obina lista (npr. u Word dokumentu):

Ovako se radi lista u HTML-u:

HTML kod ovoga linka izgleda ovako: <a

Za razliku od Google-a i Facebook-a, naa Web stranica je jouvijek u izradi i zato

Naa Poetna stranica imat e sljedei link: <a

Naa lista sa linkovima:

Sad kada smo zavrili sa izradom glavnog izbornika moramo ga staviti na

Sada ete kod slike uvrstiti unutar naeg HTMLK koda.

Nakon to smo dodali sliku kreemo dalje sa naslovom.

Naslov Web stranice

HTML naslov se pie unutar sljedeih tagova: <h1>Naslov</h1>

h1 skraenica je za heading 1, to na Hrvatskom znai naslov 1. Naslov (eng.

Sada emo naslov uvrstit u podruje za naslov u naem HTML kodu:

Uvod se nalazi ispod naslova i sadravat e par najosnovnijih informacija o naoj

<p>info@izrada-webstranica.com Trg bana Josipa Jelaia,

Uvod emo dodati unutar naeg koda

Sadraj Web stranice

Tekst emo sada dodati u na HTML kod unutar glavnog saraja:

Sve to strukturirat emo u dva paragrafa, prvi e sadravat korisne informacije o

Sada emo oba paragrafa uvrstiti u na kod

You might also like