Izrada Web stranica

Smostalna izrada Web stranica

Izrada Web stranica zahtjeva barem osnovne vještine korištenja računala i interneta. Ovaj vodič prikazati će vam kako samostalno napraviti Web stranicu a namjenjen početnicima koji nemaju iskustva u izradi Web stranica ali i malo naprednijim korisnicima koji se žele podsjetiti osnova. Ispod je prikazana slika osnovne HTML strukture Web stranice koju ćemo koristiti u ovom vodiču.

Potrebno je definirati čemu će Web stranica biti namjenjena da bi sukladno tome mogli kreirati vlastiti sadržaj Web stranice. Npr. može biti namjenjena za apartmane, firmu, obrt, zabavu, prodaju, promociju... Mi ćemo u ovom primjeru napraviti HTML strukturu Web stranice a Vi ćete naravno sami odlučiti koja će biti svrha vaše Web stranice. Kod će biti izrađen po najvišim standardima i prolazit će W3C Validaciju

samostalna izrada web stranice

Sadržaj tutoriala

Uvod u HTML

Što je HTML? HTML je skrćenica od HyperText Markup Language. Razvio ga je Tim Berners-Lee 1990 godine. HTML je kod kojime se kreira struktura Web stranice i vrlo je jednostavan za učenje. HTML kod sastoji se od takozvanih tagova (eng. tags) koji browserima (Firefox, Explorer, Chrome, Opera, Safari...) pokazuju kako bi se djelovi Web stranice trebali prikazivati.


Ovako se piše običan tekst:
Naslov
Ovdje se nalazi nekakv tekst
Ovako se piše HTML kod:
<ḥ1>Naslov</ḥ1>
<p>Ovdje se nalazi nekakav tekst</p>

Browseri ne prikazuju tagove, oni samo prikazuju tekst unutar tagova a tagovi im služe samo da bi znali kako bi se tekst i ostali sadržaj trebao prikazivati. Stoga kada biste napisali HTML kod identičan ovome u primjeru s desne strane on bi se u browseru prikazao kao običan tekst u primjeru s lijeve strane.

Kao što vidite u ovom primjeru HTML kod se sastoji od tagova <ḥ> i <p> koji browseru kažu da sav tekst koji se nalazi unutar <ḥ> taga je zapravno naslov, a sav tekst koji se nalazi unutar <p> taga je najobičniji odlomak teksta.

Možete vidjeti da postoje dvije vrste tagova, početni i završni tag. Početni tag piše se unutar zagrada <p> a završni tag piše se isto kao i početni samo sa dodatkom kose crte koja označava zatvaranje taga </p>. U HTML-u je pravilo da se sve mora pisati unutar tagova.

  • <ḥ1> je skraćenica od riječi heading1 što se na hrvatski može prevesti kao naslov1
  • <p> je skraćenica od paragraf što znači odlomak teksta.

Alati za izradu Web stranica

Alati za izradu web stranica olakšati će Vam posao. Pokazati ćemo vam besplatan program koji nudi gotovo jednake mogućnosti kao i profesionalni alati za izradu web stranica koji znaju biti vrlo skupi.

Za pisanje HTML koda preporučujemo va besplatni alat za izradu Web stranica: CoffeeCup HTML Editor. Preuzmite ga na svoje računalo i instalirajte. Profesionalci inače koriste Adobe Dreamweaver ali njegova cijena je oko 1600kn.

Izrada strukture Web stranice

Izrada Web stranica započinje kreiranjem najobičnijeg praznog foldera na vašem računalu (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.

Sljedeći korak je kreitanje HTML datoteke. Nakon što instalirate HTML editor (CoffeeCup HTML Editor ili neki drugi) otvorite novi dokument, inače se otvara klikom na File > New ili File > New HTML Page. Nakon što otvorite novi dokument on će vjerovatno biti popunjen početnim kodom kojega ćete izbrisati. Sada vaš HTML dokument mora biti prazan.

Pritiskom na File > Save vaš HTML dokument ćete spremiti na vaše računalo unutar WEB DIZAJN foldera i nazvat ćete ga index.html (malim slovima).

Sada kada imate praznu stranicu u vašem HTML editoru započet ćemo pisanjem našeg vlastitog HTML koda. Prvo moramo navesti da se radi o HTML dokumentu, a to se radi jednostvano pisanjem sljedeće linije koda:

<!DOCTYPE html>
Sada smo dali svima do znanja da se radi o HTML dokumentu. Nakon toga tagovima ćemo kreirati područje unutar kojega se mora pisati sav HTML kod.
<!DOCTYPE html>
<html>

</html>
Pošto će naša Web stranica biti na hrvatskom jeziku i to moramo uvrstiti u kod dodavanjem lang="hr" atributa.
<!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 njemačkom lang="de". Nakon što smo kreirali glavno područje za pisanje koda unutar njega kreirat ćemo dva različita područja <head> i <body>.

<!DOCTYPE html>
<html lang="hr">
<head>

</head>
<body>

</body>
</html>

Unutar <head> taga pišu se informacije o Web stranici koje nama nisu vidljive. Te informacije služe da bi browseri ispravnije prikazivali sadržaj Web stranice i da bi tražilice (Google, Yahoo!, Bing...) dobile informacije o našoj Web stranici kao što su naslov, i kratak opis. Uz pomoć takvih informacija korisnici će lakše pronaći našu Webstranicu koristeći tražilice.

Sada ćemo popuniti <head> tag sa odgovarajućim informacijama koje se inače nazivaju meta tagovi.

Radi lakšeg snalaženja od sada ćemo koristiti različite boje za označavenje postojećeg koda i novoga koda.
Postojeći 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 objašnjeno zašto svaki meta tag služi.

  • <meta charset="utf-8"> ovaj meta tag dozvoljava nam korištenje svih znakova u hrvatskom pismu (uključujući: ž, š, đ, č, ć). Ovaj standard (utf-8) isto tako sadrži većinu europskih i bliskoistočnih pisama.
  • <title>Naslov</title> ovaj meta tag prikazuje naslov Web stranice. Kada koristite neku tražilicu (npr. Google) rezultati koji su prikazani formatirani su na način 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 tražilice a služi da bi prikazao kratak opis naše Web stranice. Taj kratak opis upravo se piše unutar ovoga taga koji ima ograničenje dužine na oko 160 znakova da nebi bio pre dug.

Prikazano je kako meta tagovi funkcioniraju kod tražilica.
rezultati pretrage

U primjeru je prikazano kako webstranica izgleda kada joj se pristupi iz tražilice, 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 omogućujemo stvaranje, isporuku te optimizaciju sadržaja i aplikacija">

Naslov Web stranice nije samo vidljiv kod tražilica, vidljiv je isto i na vrhu browsera
rezultati pretrage


Sada kada smo naveli potrebne informacije u <head> tag možemo krenuti na <body> tag unutar kojega se definira izgled Web stranice.

Kao što je prikazano na slici naša 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 sadržaj web stranice. Na dnu će se nalaziti podnožje.



izrada strukture web stranice

Sada ćemo unutar <body> taga stvoriti različita područja koja će sadržavati djelove Web stranice. Ta područja kreirat ćemo uzpomoć <div> taga. Nama je potrebno 6 područja za:

  • Glavni menu
  • Sliku
  • Naslov
  • Uvod
  • Glavni sadržaj
  • Podnožje

Područja (<div> tagovi) će biti raspoređena istim redosljedom kao i na slici, od Glavnog menua na vrhu sve do Podnožja koje će se nalaziti na dnu naše Web stranice.

<!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>Područje za glavni menu</div>
<div>Područje za sliku</div>
<div>Područje za naslov</div>
<div>Područje za uvod</div>
<div>Područje za glavni sadržaj</div>
<div>Područje za podnožje</div>
</body>
</html>

Izrada osnovne strukture Web stranice je gotova. Dodali smo informacije o Web stranici unutar <head> taga i stvorili odgovarajuća područja unutar <body> taga. Sljedeće što moramo napraviti je popuniti svko kreirano područje sa odgovarajućim kodom. Krenut ćemo od vrha prema dnu, znači 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 možete vidjeti i u primjeru.


Ovako se piše obična lista (npr. u Word dokumentu):

  • Prvi u listi
  • Drugi u listi
  • Treći u listi

Ovako se radi lista u HTML-u:

<ul>
<li>Prvi u listi</li>
<li>Drugi u listi</li>
<li>Treći u listi</li>
</ul>

Kao što je prikazano lista se sastoji od 2 taga. Započinje sa <ul> tagom koji daje do znanja da se radi o listi a nakon toga svaka stavka unutar liste se nalazi unutar <li> taga.

Inače se Web stranice sastoje od više stranica na primjer: Početna, Kako do nas, Kontakt... To se radi da bi sadržaj bio pregledniji i da bi korisnici Web stranice lakše mogli pronaći željene informacije. Te stranice međusobno su povezane linkovima koji se inače nalaze u glavnom izborniku. Nama je to bitno jer će se i naša Web stranica sastojat od 3 različite stranice koje će biti povezane linkovima. Ti linkovi nalazit će se u glavnom izborniku unutar liste koju smo prethodno kreirali.

Za početak pokazati ćemo vam kako izgleda običan HTML link koji će vas preusmjerit na Google tražilicu 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 našem primjeru adresa je http://www.google.hr a anchor text je Google.

Ako upišete ovu adresu u vaš browser doći ćete na Google tražilicu 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, naša Web stranica je jošuvijek u izradi i zato nema vlastitu adresu. Pokazati ćemo vam kako kreirati linkove za Web stranice koje su tek u izradi, inače se to radi relativnim linkovima.

Naša Početna stranica imat će sljedeći link: <a href="index.html">Početna</a>
Sljedeća stranica biti će Kako do nas a njen link izgledat će ovako: <a href="kako-do-nas.html">Kako do nas</a>
Naša zadnja stranica biti će Kontakt: <a href="kontakt.html">Kontakt</a>

Kao što vidite adresa nesmje imati razmak, to se rješava stavljanjem povlaka umjesto razmaka (kako-do-nas.html) ili uklanjanjem razmaka i spajanjem svih djelova (kakodonas.html). Mi smo se odlučili na stavljanje povlaka jer je preglednije.

Sada kad smo kreirali sva tri lnika integrirat ćemo ih unutar liste koju smo prethodno kreirali.



Naša lista:

<ul>
<li>Prvi u listi</li>
<li>Drugi u listi</li>
<li>Treći u listi</li>
</ul>

Naša lista sa linkovima:

<ul>
<li><a href="index.html">Početna</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 ništa više nego lista linkova koji povezuju sve stranice. Mi smo se odlučili kreirati 3 stranice ali vi možete dodavati ili uklanjati stranice po vašoj potrebi.

Sad kada smo završili sa izradom glavnog izbornika moramo ga staviti na odgovarajuće 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">Početna</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>Područje za sliku</div>
<div>Područje za naslov</div>
<div>Područje za uvod</div>
<div>Područje za glavni sadržaj</div>
<div>Područje za podnožje</div>
</body>
</html>

Slika

Slika će se nalaziti u gornjem djelu naše Web stranice ispod glavnog izbornika i iznad uvoda.

Da vas podsjetimo, u trećem djelu Izrada strukture Web stranice morali ste kreirati folder na vašem računalu 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 najviše odgovara.
Naš kod za dodavanje slike izgledati će ovako: <img src="slika1.jpg">

Sada ćete kod slike uvrstiti unutar našeg 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">Početna</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>Područje za naslov</div>
<div>Područje za uvod</div>
<div>Područje za glavni sadržaj</div>
<div>Područje za podnožje</div>
</body>
</html>

Nakon što smo dodali sliku krećemo dalje sa naslovom.

Naslov Web stranice

HTML naslov se piše unutar sljedećih tagova: <h1>Naslov</h1>

h1 skraćenica je za heading 1, što na Hrvatskom znači naslov 1. Naslov (eng. heading) se označava sa brojem zato jer postoji više vrsta naslova. Naslov s brojem 1 je glavni i inače 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 niže to naslovi imaju manje značenje. Isti način formatiranja naslova naći ćete u bilo kakvoj knjizi, glavni naslov uvjek je na početku i uvjek je najveći, nakon toga sljede naslovi poglavlja koji su nešto manje veličine i manje važnosti, nakon njih sljede naslovi odjeljaka koji su još manje veličine i manje važnosti itd.

Sada ćemo naslov uvrstit u područje za naslov u našem 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">Početna</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>Područje za uvod</div>
<div>Područje za glavni sadržaj</div>
<div>Područje za podnožje</div>
</body>
</html>

Uvod

Uvod se nalazi ispod naslova i sadržavat će par najosnovnijih informacija o našoj 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 običan tekst stoga se piše unutar <p> taga. To je skraćenica za paragraf što na hrvatski znači odlomak teksta.

<p>info@izrada-webstranica.com Trg bana Josipa Jelačića, Zagreb Tel.:(01)123-4567</p>

Uvod ćemo dodati unutar našeg 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">Početna</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 Jelačića, Zagreb | Tel.:(01)123-4567</p>
</div>
<div>Područje za glavni sadržaj</div>
<div>Područje za podnožje</div>
</body>
</html>

Sadržaj Web stranice

Samostalna izrada Web stranica uvelike ovisi o sadržaju. Sadržaj je najvažniji dio svake Web stranice, o njemu će ovisiti uspjeh. Svaka Web stranica ima svoj vlastiti jedinstveni sadržaj koji mora biti pregledan, razumljiv i kvalitetan za korisnika. Web stranice se mogu na neki način usporedit sa knjigama u ovom slučaju. Ako knjiga ima privlačne i dobro dizajnirane vanjske korice to joj neće značit ništa ako je sadržaj te knjige nezanimljiv i nekvalitetan. Isto vrijedi i za Web stranicu, ako je dobro dizajnirana i ugodna za oko, to joj neće značiti puno ako je sadržaj loš.

Ako npr. radite Web stranicu za vaš obrt, kreirajte sadržaj koji će pomoći korisnicima da shvate čime se bavite, gdje se nalazite i kakve proizvode ili usluge nudite. Nekada je samo 5 rečenica dovoljno da kreirate kvalitetan sadržaj koji će pomoći korisnicima.

Na svoju Web stranicu nikada nemojte kopirati sadržaj ili djelove sadržaja neke druge Web stranice jer to je strogo zabranjeno.

Vrijeme je da napišete svoj sadržaj koji će biti unikatan i koristan za korisnike koji će posjećivati vašu Web stranicu.


Samo radi primjera dodati ćemo tekst koji će vam možda izgledati čudno. To je tekst koji se inače dodaje samo da bi mogli vidjeti kako će naša Web stranica izgledati. Naravno Vi ćete napisati svoj vlastiti tekst.

Tekst ćemo sada dodati u naš HTML kod unutar glavnog saržaja:

<!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">Početna</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 Jelačića, 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>Područje za podnožje</div>
</body>
</html>

Podnožje

U podnožje ćemo uvrstiti neke korisne informacije o našoj Web stranici koje bi mogle zanimati korisnike. Samostalna izrada web stranica također obuhvaća i zaštitu svoga rada, Copyright informacije se moraju staviti u podnožje jer daju svima do znanja da se sadržaj web stranice nesmije kopirati. Uz copyright inače se još dodaje email, broj telefona (opcionalno), link od kuda izrada Web stranica potječe i dali prolazi W3C validaciju.

Sve to strukturirat ćemo u dva paragrafa, prvi će sadržavat korisne informacije o našoj Web stranici (Email, telefon i izvor) a drugi copyright informacije. Copyright informacije pišu se na način da sadržavaju 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 naša godina automatski mjenjati svake nove godine. To ćemo postići dodavanjem sljedeće 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>&copy; <?php echo date("Y"); ?> copyright</p>
Ispred PHP linije koda primjetili ste ovaj set znakova: &copy;

Ti znakovi služe za prikaz copyright znaka koji izgleda ovako: ©

Sada ćemo oba paragrafa uvrstiti u naš kod

<!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">Početna</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 Jelačića, 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>&copy; <?php echo date("Y"); ?> copyright</p>
</div>
</body>
</html>

CSS

HTML dio razvoja je gotov, izradili smo strukturu Web stranice a sada slijedi CSS dio kojime ćemo kreirati izgled naše Web stranice, dodavati željene boje i oblike. CSS je vrlo važan dio jer bez njega imamo samo HTML strukturu Web stranice koja nema dorađene nikakve vizualne elemente.
Nastavite na sljedeći dio >>> CSS Tutorial