Professional Documents
Culture Documents
Alati Za Izradu Web Stranica
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.
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.
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
<html lang="hr">
<head>
<meta charset="utf-8">
<title>Naslov</title>
<meta name="description" content="Ovdje e bit kratak opis">
</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.
Drugi u listi
Trei u listi
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>
<meta charset="utf-8">
<title>Naslov</title>
<meta name="description" content="Ovdje e bit kratak opis">
</head>
<body>
<div>
<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>
</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>
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>
<meta charset="utf-8">
<title>Naslov</title>
<meta name="description" content="Ovdje e bit kratak opis">
</head>
<body>
<div>
<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>
</div>
<div>
<img src="slika1.jpg">
</div>
<div>Podruje za naslov</div>
<div>Podruje za uvod</div>
<div>Podruje za glavni sadraj</div>
<div>Podruje za podnoje</div>
</body>
</html>
Nakon to smo dodali sliku kreemo dalje sa naslovom.
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>
<meta charset="utf-8">
<title>Naslov</title>
<meta name="description" content="Ovdje e bit kratak opis">
</head>
<body>
<div>
<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>
</div>
<div>
<img src="slika1.jpg">
</div>
<div>
<h1>Naslov</h1>
</div>
<div>Podruje za uvod</div>
<div>Podruje za glavni sadraj</div>
<div>Podruje za podnoje</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>
<meta charset="utf-8">
<title>Naslov</title>
<meta name="description" content="Ovdje e bit kratak opis">
</head>
<body>
<div>
<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>
</div>
<div>
<img src="slika1.jpg">
</div>
<div>
<h1>Naslov</h1>
</div>
<div>
<p>info@izrada-webstranica.com | Trg bana Josipa Jelaia,
Zagreb | Tel.:(01)123-4567</p>
</div>
<div>Podruje za glavni sadraj</div>
<div>Podruje za podnoje</div>
</body>
</html>
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>
<meta charset="utf-8">
<title>Naslov</title>
<meta name="description" content="Ovdje e bit kratak opis">
</head>
<body>
<div>
<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>
</div>
<div>
<img src="slika1.jpg">
</div>
<div>
<h1>Naslov</h1>
</div>
<div>
<p>info@izrada-webstranica.com | Trg bana Josipa Jelaia,
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>Podruje za podnoje</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:
CSS