SlideShare una empresa de Scribd logo
1 de 53
Descargar para leer sin conexión
Izradite Sami Svoju Prvu Web Stranicu



Ova e-Knjiga je osnovni vodić za početnike koji žele sami
            izraditi svoju prvu web stranicu




                    By Kruno Kluković
Stranica2 od 53




          1. Uvod
          2. Trebam li imati Vlastitu Web Stranicu?
          3. Kako Započeti Izradu Web Stranice?
          4. Izaberite Temu
          5. Izaberite Ključne Riječi
          6. Izaberite Domenu i Hosting
          7. Preuzmite svoj Web Editor
          8. Izrada Prve Stranice (index.html)
          9. Ispravno Spremanje Datoteka
          10. Slike, Veličina Slova i Boje
          11. Izrada Linkova
          12. Promjenite Veličinu Stranice
          13. Izrada Ostalih Stranica (Podstranica)
          14. Izaberite Besplatan Predložak (Template)
          15. Objavite svoju Web Stranicu pomoću FTP-a
          16. Prijava na Tražilice
          17. SEO Optimizacija
          18. Završna Riječ




http://izrada-web-stranice-hr.com
Stranica3 od 53




                                     1 DIO

                                    UVOD

U ovoj knjizi želim objasniti koji su koraci potrebni za stvaranje vaše prve web
stranice od samog početka (Planiranja) pa do samog kraja tj. SEO Optimizacije
vaše web stranice kako bi došla među top 10 na tražilicama. Želim istaknuti da je
vrlo važno slijediti sve ove tutoriale prilikom izrade vaše prve web stranice.




Vjerojatno sada na samom početku mislite da to nečete uspjeti i da je za izradu
web stranice potrebno dugogodišnje iskustvo i znanje html i php kodiranja,
javascript i ostalih kodova ali uz pomoć današnjih HTML editora sve je mnogo
jednostavnije i potrebna je samo upornost i dobra volja. Naravno ova knjiga če
vam pomoći u izradi vaše prve web stranice za vaše potrebe a ne web stranice
kao Facebook ili MySpace.

Prije tri godine kada sam počeo sa izradom svoje prve web stranice nisam ni
sanjao da ću pisati ovu knjigu, imati nekoliko web stranica i blogova, zarađivati
pristojan dodatni prihod od njih stavljajuči Google oglase i kao affiliate nudeći
razne proizvode za koje mi vlasnici plačaju postotak od prodaje.

Na samom početku sam kao i vi tražio po netu knjige o HTML kodiranju, FTP
programima, SEO optimizaciji i Zaradi na Internetu ali nijedna nije bila na našem
jeziku i za potpune početnike što me jako živciralo i to je največi razlog zašto
sam počeo pisati ovu knjigu.


http://izrada-web-stranice-hr.com
Stranica4 od 53



                            Pišem ovu knjigu iz još jednog razloga a to je da vas
                            odmah na samom početku usmjerim na pravi put i
                            da ne radite iste greške kao mnogi početnici i kasnije
                            lupaju glavom u zid i kreču ispočetka a dragocijeno
                            vrijeme koje su potrošili u izradi svojih stranica
                            nemogu vratiti. Mislim na početnike koji izrađuju web
                            stranicu na besplatnom hostingu i nakon nekog
                            vremena shvate da ta web stranica nije njihova.
                            Vjerojatno se pitate kako to mislim “nije njihova”.
                            Pogledajte naziv domene kod takvih besplatnih
                            hostinga, da li je to naziv koji vi želite i da li taj naziv
ima vaše ključne riječi. Primjer jedne takve domene je:

vašekorisničkoime.besplatnadomena.com ili besplatnadomena.com/vašastranica.

Da li je to domena na kojoj ste spremni izraditi svoju web stranicu i potrošiti 1, 2
ili 3 godine za SEO optimizaciju i jednog dana zaprepašteno ustanovite da više ne
postoji i da je sav vaš trud bio uzaludan jer se vlasnik te besplatne domene više ne
želi zamarati i odustaje od svog hostinga a vi nemate spremljen beckup svoje web
stranice.

Takav scenario sam osobno proživio i sav moj trud i uloženo vrijeme su bačeni u
koš za smeče. Iako sam nekoliko puta kontaktirao vlasnika i tražio beckup svoje
web stranice, odgovora nije bilo. Naravno u ugovoru na koji obično ne obračamo
puno pažnje prilikom registracije i kliknemo kao da smo ga pročitali, lijepo je
pisalo da naš account može biti ukinut i izbrisan bez razloga i bez ikakve
obavjesti.

Zbog takvog ili sličnog scenarija pročitajte ovu knjigu i na samom kraju imat će te
svoju prvu funkcionalnu web stranicu s mnogo podstranica i što je najvažnije
znat će te kako se izrađuje, dizajnira i objavljuje pa možete izrađivati nove web
stranice koliko želite.




http://izrada-web-stranice-hr.com
Stranica5 od 53




Zarada na Internetu

 Zarada na Internetu je moguča i ako želite imati web stranicu kako bi zaradili
nemojte misliti da će se to ostvariti na brz i jednostavan način kliknuvši mišem
nekoliko puta i zaradili ste $5000. Na Internetu se može mnogo zaraditi i mnogima
je to primarna zarada jer su izgradili svoj online biznis ali večina ljudi ne zaradi
na internetu ni centa jer olako shvačaju ovu vrstu zarade i očekuju brzu zaradu bez
imalo uloženog truda i vremena pa kad vide da od toga nema ništa – odustaju.




Morate znati da je potrebno dosta vremena i upornosti da bi vaš online biznis radio
kako treba i da bi vi počeli zarađivati. Naravno kao i u svaki drugi biznis morate
uložiti i u ovaj jer bez ulaganja nema ni zarade pa računajte da nešto svog novca
morate uložiti i u svoju edukaciju.



__________________________________________________________________




http://izrada-web-stranice-hr.com
Stranica6 od 53




                                    2 DIO


                    Trebam li imati Vlastitu Web Stranicu?




Kao što i sami znate Internet se nikada ne gasi. Kad jednom vaša web stranica
bude online biti će dostupna cijelom svijetu 24/7, 365 dana u godini. To znači da
svi vaši proizvodi, informacije tj. sve što nudite na vašim stranicama, biti će
dostupno svima na ovom planetu.

Ukoliko vas netko želi kontaktirati moći će to učiniti putem emaila i vi mu možete
odgovoriti kad to želite.

Neograničene Informacije

Na vašoj web stranici nema ograničenja kao ograničeni broj riječi ili ograničen
prostor. Internet vam daje neograničenu količinu online prostora za izlog vašeg
proizvoda ili usluge. Vaša web stranica može imati samo jednu stranicu ili 10.000
stranica. To ovisi o vama i naravno o hostingu koji izaberete.




http://izrada-web-stranice-hr.com
Stranica7 od 53



Morate imati kontrolu nad vašom web stranicom, a ne stavljati svoju sudbinu u
ruke drugih. Razmislite o tome na minutu. Da li zaista želite tražiti pomoć (koja se
naplaćuje) svaki put kad želite promijeniti tekst ili umetnuti novu sliku?


Odaberite Pametno – Nemojte Koristiti Besplatan Hosting

Napravite vlastite web stranice mudro - ne padajte u ovu zamku

Mnogi ljudi koji izrađuju svoje web stranice pokušavaju proći što jeftinije. Iako je
to razumljivo, ne razmišljaju da to može biti štetno za njihove web stranice.

Ako ste ozbiljno razmišljali o izradi vlastite web stranice, obratite pozornost na
ovaj savjet:

Ne koristite besplatni hosting!

Većina ljudi ne prepoznaje velike nedostatke besplatnih web stranica. Ja samo
govorim iz vlastitog iskustva jer želim da izbjegnete traumu nakon gubitka vaše
web stranice!




Problemi povezani s korištenjem besplatnog hostinga:

1. Ograničen web prostor

2. Ne mogu se uključiti interaktivne funkcije (rasprave zajednice, video igre, chat
soba, i sl.)

3. Nije search-engine friendly što će zauzvrat ograničiti vaš promet


http://izrada-web-stranice-hr.com
Stranica8 od 53




4. Ne izgleda pouzdano: na žalost, ako vaša web adresa glasi
mojabesplatnastranica/besplatanhosting.com, vaša stranica neće izgledati
vjerodostojno za većinu posjetitelja

5. Možda se iritantni pop-up oglasi ili banneri na vašim stranicama neće svidjeti
vašim posjetiocima pa ju odluče odmah napustiti

6. Podrška je vrlo slaba ili je nema

7. Nemate mogučnost svoje e-pošte (vi@vašadomena.com)

Koje su Prednosti Plačenog Hostinga:

1. Lako je zapamtiti adresu web stranice
2. Nemate tuđe bannere i pop-up prozore
3. Stranica je bolje rangirana u tražilicama
4. Imate više kontrole na izgled i dojam svoje stranice
5. Vaša adresa e-pošte (vi@vašadomena.com)
6. Mnogo prostora za vašu web stranicu
7. Više fleksibilnosti za dizajn i funkcionalnost
8. Dostupna pomoć 24/7




http://izrada-web-stranice-hr.com
Stranica9 od 53




                                      3 DIO


                      Kako Započeti Izradu Web Stranice?




Izrada web stranica nije tako teška kao što možda mislite. Uskoro može biti online
bez da znate komplicirane kompjuterske kodove.

Možete odabrati između 2 opcije. Izrada web stranica može biti vrlo jednostavan
zadatak ili može uključivati ??i ovladavanje teških računalnih jezika i zatim
pisanje HTML koda od nule. Ja pretpostavljam da ste odabrati lakšu opciju i ne
želite gubiti vrijeme na učenje dugačkog HTML koda.

Postoje dvije stvari koje morate imati da bi izradili svoju web stranicu:

1) Naziv Domene

Naziv domene je adresa vaše web stranice koju ste vi odabrali. To je vaša “web
adresa” ili “URL” ( npr. vašastranica.com). Izuzetno je važno da vam naziv
domene sadrži ključne riječi koje će ljudi koristiti kada traže vašu stranicu. Idealno
je da vaša domena bude odraz vaše stranice, vaše usluge ili servisa.

Nakon registracije domene ona je vaša onoliko koliko vi to želite.



http://izrada-web-stranice-hr.com
Stranica10 od 53




2) Web Hosting

Sljedeći korak je vaša on-line prisutnost a to pruža web hosting. To je u osnovi
tvrtka koja ima izuzetno snažna računala koja su trajno povezana na internet. Za
mjesečnu naknadu, web hosting će vam iznajmiti određenu količinu online
prostora za vaše web stranice. Nakon što se vaša web stranica nalazi na njihovom
poslužitelju, korisnici interneta širom svijeta će biti u mogućnosti pristupiti vašoj
web lokaciji.

Web Alati

Kada odaberete svoju domenu i hosting sljedeči korak je dizajn vaše web stranice.
Potoji mnogo HTML editora potrebnih za izradu stranica a jedan od najpoznatijih
je Dreamweaver koji možete kupiti za $400. Na sreču postoje HTML editori koji
su besplatni i možete ih skinuti sa Interneta.

To su Komposer i CoffeeCup. Vrlo su funkcionalni i lagani za korištenje.


Testiranje Preglednika (Browsera)




Iako ste možda izradili efektivnu i funkcionalnu web stranicu, nemožete birati u
kojem pregledniku će ju posjetitelj pregledavati. Pošto su preglednici različiti
morate testirati web stranicu u svim preglednicima.

Srećom u većini slučajeva varijacija od jednog do drugog preglednika će biti
zanemariva, ali ponekad određeni preglednik može spriječiti posjetitelja da vidi
vašu web lokaciju. Jedini način da budete sigurni da vaše web stranice mogu biti
pregledane u različitim preglednicima je temeljito testiranje.

Internet Preglednici kao Explorer, Netscape and Mozilla Firefox mogu biti
jednostavno instalirani na vaš PC da bi testirali vaše web stranice.


http://izrada-web-stranice-hr.com
Stranica11 od 53




                                        4 DIO


                                    Izaberite Temu




Kod izbora teme važno je da ne pišete o svemu što vam padne na pamet u tom
trenutku. Zašto je to toliko važno? Zato jer tražilice gledaju koja stranica ima koju
temu i ako ste ju dobro napisali i redovito ažurirali bolje će vas rangirati od
stranica koje imaju više tema na nekoliko stranica i nisu redovito ažurirane.
Dakle najbitnije je imati što više sadržaja (texta) o jednoj određenoj temi i tada će
tražilice izdvojiti vašu web stranicu od ostalih i ponuditi ljudima koji su upisali
“ključne riječi”.
Dakle ako netko upiše u tražilicu ključne riječi “kako trenirati svog psa” a na vašoj
web stranici ili vašem blogu ima 20 ili više stranica o treniranju pasa tada će vaša
stranica biti ispred onih koje imaju samo 1 ili 5 stranica o toj temi.
Ako se bavite treniranjem pasa i znate sve o tome, teksta će biti mnogo više nego
da pišete o kolačima o kojima neznate ništa više već pojesti ih.
Večina ljudi izrađuje svoje stranice kako bi imali dodatnu zaradu . Da bi bilo
zarade, trebate imati dovoljno posjeta a da bi imali dovoljno posjeta morate biti
među prvih 10 na tražilicama za “ključne riječi” koje vode na vašu stranicu.




http://izrada-web-stranice-hr.com
Stranica12 od 53




Kada izaberete temu o kojoj će te pisati možete zarađivati kao affiliate tj.
ponuditi posjetiteljima razne proizvode i zaraditi na proviziji (ClickBank,
Amazon, Ebay i dr.). Možete prodavati prostor za oglašavače (Google Adsense,
Bidvertiser i dr.) i zarađivati kada posjetitelji kliknu na ponuđenu reklamu.
Dakle najbitnije je ne kopirati druge i ne kopirati njihov text jer takve stranice
brzo završe u smeču tj. tražilice ih ignoriraju jer su kopije.
Imajte što više svog unikatnog sadržaja i nemojte biti nestrpljivi dok čekate da
dođete među prvih 10 jer je to dosta spor proces i potreban je dobro obavljen SEO
(Search Engine Optimization). Prve prave rezultate možete očekivati tek nakon
nekoliko mjeseci.




__________________________________________________________________




http://izrada-web-stranice-hr.com
Stranica13 od 53




                                            5 DIO
                                    Izaberite Ključne Riječi




Trebate znati da je prvi i najvažniji korak u optimizaciji da pronadete relevantne
ključne riječi za vašu stranicu. Ključna riječ je ona riječ koju korisnik upisuje u
tražilicu. Ako pogriješite, i odaberete one ključne riječi koje nitko ne traži, uzalud
će vam biti svaka optimizacija.
Nemojte optimizirati svoje stranice za ključne riječi koje imaju vrlo jaku
konkurenciju jer je gotovo nemoguče da će vaša nova web stranica biti među prvih
10 ako ostale stranice imaju PR 2-10.
Analizirajte koliko je prosječno duga prva rečenica vaše konkurencije. Uzmite u
razmatranje barem prvih pet rezultata.
Vaša prva rečenica bi trebala imati otprilike isti broj riječi kao i visoko rangirani
konkurenti.
Istu stvar napravite sa “meta tagovima” i “meta description”.
Postoji Googleov besplatni servis na kojem to možete uciniti, npr.
https://adwords.google.com/select/KeywordToolExternal
Tamo će te moči vidjeti koliko se ti pojmovi zaista koriste, a i dobit će te i pregled
sličnih pojmova koji se koriste.
Prilikom pisanja pazite na koncetraciju ključnih riječi u vašem tekstu jer to takođe
znatno utječe na poziciju vaše web stranice . Nemojte ponavljati jedne te iste riječi
ili koristiti ključne riječi i izraze koji se ne spomiju u vašem body tekstu, ovakav
postupak optimiziranja stranica je pogrešan i može vas dovesti do situacije da
budete banovani od strane Google pretraživača .




http://izrada-web-stranice-hr.com
Stranica14 od 53




Tekst koji pišete mora biti prirodan tj. pišite tekst za svoje posjetioce a ne za
tražilice ali znajte da je najbolje da vam se ključne riječi obavezno nalaze u prvoj i
zadnjoj rečenici.
Morate paziti i na broj riječi po stranici jer Google broji riječi i najbolje je da ih
imate oko 400-500 po stranici a ako ih imate više pokušajte tu stranicu podijeliti
na dvije i povezati ih linkom.
Naravno ako imate više podstranica morate za svaku posebno odabrati ključne
riječi i opis koji se nalaze u meta tagovima.
U slučaju da ne znate, meta tagovi su skriveni deskriptori koji se pojavljuju na
početku HTML koda, unutar vaše oznake. Oni mogu biti nevidljivi vašim
posjetiteljima, ali tražilice ih mogu pročitati.
Oni se obično sastoje od naslova, opisa i ključnih riječi i oni izgledaju otprilike
ovako:
<head>
<title>Naslov vaše stranice</title>
<meta name="description" content="Kratak opis web stranice.">
<meta name="keywords" content="ključne riječi razdvojene zarezom">
</head>
Zbog zlostavljanja, mnoge tražilice ne koriste ove oznake za rangiranje stranice,
ali trebali biste ih i dalje uključivati jer ih koristi za prikaz informacija o vašoj web
stranici.




http://izrada-web-stranice-hr.com
Stranica15 od 53




U <title> tagu koji se nalazi u html kodu je naslov koji obavezno mora sadržavati
ključne riječi ali ih morate imati i u naslovu i podnaslovima u samom tekstu koji u
html kodu izgledaju ovako:
<h1>Ovo je naslov</h1>
<h2>Ovo je podnaslov1</h2>
<h3>Ovo je podnaslov2</h3>
Rezultat koji je vidljiv na vašoj stranici:

Ovo je naslov
Ovo je podnaslov1
Ovo je podnaslov2
Koristite HTML naslove samo za “Naslove”. Nemojte ih nikada koristiti da bi
tekst bio veči ili podebljan jer tražilice koriste vaše naslove da indexira strukturu
vaše web stranice.
<h1> Naslov trebate koristiti kao glavni naslov, poslije njega dolazi <h2> kao
podnaslov zatim manje važan <h3> podnaslov itd.



_____________________________________________________________

                                         6 DIO
                              Izaberite Domenu i Hosting

Postoje dva osnovna koraka da bi vaša web stranica bila na Internetu. Rezervacija
naziva domene je prvi jer čini adresu vašeg web sučelja. Domena se sastoji od dva
ili više dijelova razdvojenih točkom, npr. www.moja-domena.com
Drugi dio domene je oznaka grupe kojoj domena pripada. Najpopularnije grupe su
.com, .info, .net, .org, .gov, .edu.
Pravila o imenima domena:
* Ime domene sastoji se samo od znakova iz skupa koji čine: 26 slova engleske
abecede, znamenke “0”-”9” i znak “-”;


http://izrada-web-stranice-hr.com
Stranica16 od 53



* sastoji se od najmanje 2, a najviše 65 znakova
* prvi i zadnji znak u nizu nesmije biti “-”.
Da bi registrirali domenu potrebna vam je kreditna kartica i čitav posao možete
završiti za nekoliko minuta. Cijena domena nije velika, kreče se oko $10 za
godinu dana.
Odabir pravog naziva domene zna ponekad predstavljati tešku zadaću za sve nove
Internet korisnike. Često se zna dogoditi da korisnici nazivaju svoje domene po
imenu ljubimca, djetetu ili po nekoj drugoj dragoj osobi.
Da bi se našli u glavnim tražilicama (Google, Yahoo, itd.) najbolje je registrirati
naziv domene tako da odaberete glavne kljućne riječi tj. sadržaj vaše stranice.
U osnovnim crtama rečeno, domena ili naziv domene je naziv vašeg poduzeća na
Internetu.
Ako imate automehaničarsku radionu, naziv vaše domene bi mogao biti
“www.automehanicar.com”, ako se bavite web dizajnom, moguća domena za vas
bi bila “www.webdizajn.com”, ako popravljate kompjutere npr.
“www.popravak-kompjutera.com”.
S upotrebom pravih riječi u nazivu domene, potencijalnim klijentima će biti lakše
naći vaše stranice, iako ne znaju točnu adresu, tzv. URL (Universal Resource
Locator). Osim toga kad bi netko od njih tražio na tražilici kao što je Google s
riječima iz naziva domene postoji veća šansa da vas i tako nađu, pod
pretpostavkom da koristite prave riječi uz tematiku vaših stranica.
Nakon što ste izabrali pravi naziv vaše domene, morate provjeriti da li je ista
slobodna ili zauzeta.
To možete provjeriti na ovoj web stranici: HostMonster




http://izrada-web-stranice-hr.com
Stranica17 od 53




Nakon što ste odabrali vašu domenu spremni ste da odaberete svog web domaćina.
Web hosting vam daje prostor, razne alate i podršku za izradu vaših web stranica i
e-računa (vi@vašadomena.com). Ovdje ću vam dati uvid u osnovne značajke i
nadam se pomoći pri donošenju odluke.
Odabir pravog hosting servisa neće biti težak jer ću vam preporučiti ovaj koji ja
koristim i potpuno sam zadovoljan kao i vlasnici ostalih 1.700.000 domena.
Koristim njihove usluge već 2 godine i na njemu su smještene sve moje web
stranice i blogovi.

HostMonster pruža hosting rješenja za mnoge poslovne i osobne web stranice od
1996. Njihovi internet hosting paketi pomažu poslovnim subjektima i pojedincima
dobiti najbolju uslugu uz najmanje troškova.
Sa HostMonsterom dobijete:
* Najbolju službu za korisnike
* Kvalitetnu opremu
* Maksimalan zajamčen online status
* Visoko funkcionalni alati za administraciju
* Sigurne i pouzdane sigurnosne kopije
* Čvrsta i poštena poslovna praksa
Iznenađujuće je što sve dobijete za tako malu cijenu. Nema tvrtki na tržištu koje
nude tako velik paket za tako malu cijenu!
HostMonster pouzdanosti
HostMonster stalno poboljšava stabilnost svojih servera i vrijeme neprekidnog
rada. Danas su već dodali toliko mogućnosti, da na njihovim poslužiteljima nikada
ne pada sustav.
Što dobijete za $5.95/mj.
* Besplatnu domenu (zauvijek)
* Neograničen prostor
* Neograničen transfer
* Hosting za neograničen broj domena
* Neograničen broj email adresa
* Najbolji 24/7 suport


http://izrada-web-stranice-hr.com
Stranica18 od 53



* Besplatan site builder
*SSL, FTP, CGI, Ruby (RoR), Perl, PHP, MYSQL
HostMonster koristi unaprijeđenu verziju cPanel-a što nam govori da je to najbolji
control panel softver koji je dostupan na današnjem tržištu.
HostMonster je vrlo dobar izbor za sve vrste web stranica.
KLIKNITE OVDJE ZA PRIJAVU NA HOSTMONSTER.COM




                                        7 DIO
                             Preuzmite svoj HTML Editor

Za izradu i dizajn vaših web stranica potreban vam je html editor. Jedan od
najpoznatijih i najboljih je Dreamweaver ali zbog svoje cijene ($400) nije
pristupačan za početnike. Naravno mogu se koristiti i besplatni koji nisu mnogo
lošiji od onih koje moramo plačati. U ovom slučaju sam odabrao KOMPOZER
koji je jedan od boljih besplatnih editora iako vi možete izabrati editor po vašoj
želji.

Posjetite njihovu stranicu i besplatno ga skinite na svoj kompjuter. Pošto je
kompresiran u .zip datoteku nakon skidanja (download) prvo ga morate raspakirati
i nakon toga otvorite mapu, dvaput kliknete na ikonu kompozer.exe i možete ga
koristiti.

Editor će vam često trebati pa vam savjetujem da kad otvorite mapu kliknite
desnim klikom na kompozer.exe i odaberite Send to – Desktop (create shortcut)
kako bi na Desktopu (Radnoj površini) imali prečac do njega i na taj način skratili
često traženje gdje se nalazi.




http://izrada-web-stranice-hr.com
Stranica19 od 53




__________________________________________________________________




                                      8 DIO


                         Izrada Prve Stranice (index.html)


Sad imate sve što vam je potrebno za izradu vaše prve web stranice pa možete
krenuti tako da kliknete na svoju Kompozer ikonu i otvorite ga.
Kada se Kompozer otvori, zatvorite mali prozor “Kompozer tips“ koji nam nije
potreban.


Sada Kompozer izgleda ovako:




http://izrada-web-stranice-hr.com
Stranica20 od 53




Na vrhu prozora vidite važne upute (File, Edit, View, Insert, Format, itd.)
Ispod toga vidite nekoliko redova alatne trake (New, Open, Save, Publish itd.)

Treba biti i panel na lijevoj strani vašeg zaslona s naslovom “Site Manager” ali
ako ga nema možete ga paliti i gasiti tipkom F9 na vašoj tipkovnici.




http://izrada-web-stranice-hr.com
Stranica21 od 53




Na gornjoj slici vidite i veliki prozor na kojem piše “untitled“. Sada želim da
steknete jednu naviku koja je vrlo važna kod izrade vaše prve stranice
(indeks.html) i podstranica a to je da odmah upisujete naziv koje se pojavljuje na
samom vrhu – lijevo na svakoj stranici kad ju otvorite u svom pregledniku. Taj dio
okvira se zove “Naslovna treka“ (title bar).

Evo jedan primjer za Google:




Naslovna traka (title bar) je jedan od najvažnijih faktora za bolje rangiranje u
tražilicama. Ono što vi upišete u title bar to će se na tražilicama pojaviti kao
naslov linku prema vašoj stranici.

Sada trebamo izraditi tekst koji ide u title bar.
Kliknite na Format




http://izrada-web-stranice-hr.com
Stranica22 od 53



U padajučem meniu kliknite na Page Title and
Properties

Otvorit če se ovakav prozor:




U title upišite naziv vaše stranice, ja sam u ovom slučaju nazvao stranicu
“Moja prva stranica“ i pod jezik (Choose language) sam odabrao Hrvatski a
Character set odaberite UTF-8.

Kliknite OK i pogledajte nazivnu traku od Kompozera.
Sada piše naziv vaše stranice:




Prilikom izrade vaše web stranice obavezno upišite naziv svake podstranice jer
ako to zaboravite u nazivnoj traci će pisati Untitled što baš ne izgleda
profesionalno.

Sada je vrijeme da napišemo mnogo sadržaja ali se prvo uvjerite da vam je na dnu
stranice Kompozera namješteno na Normal




http://izrada-web-stranice-hr.com
Stranica23 od 53




Kopirao sam dio teksta sa svoje web stranice u Kompozer i to sad izgleda ovako




                                      9 DIO

                            Ispravno Spremanje Datoteka

Sada je potrebno ispravno spremiti prvu stranicu. Vrlo je važno da kod izrade web
stranice spremate svoju prvu stranicu, sve podstranice, slike i sve ono što
namjeravate imati na web stranici u jednu mapu (folder) na svom kompjuteru.

Prvo odredite mjesto gdje želite imati sve datoteke (npr. My Documents) i na tom
mjestu izradite Novu Mapu (New Folder) i nazovite ju kako želite (npr. moja web
stranica ili sl.) i u njoj izradite još jednu mapu koju nazovite “images“ (mapa za
slike).

Sada kad smo odredili mjesto gdje će se nalaziti sve datoteke možemo spremiti
našu prvu stranicu koju smo izradili.

U Kompozeru kliknite na File i u padajučem izborniku kliknite na Save As.




http://izrada-web-stranice-hr.com
Stranica24 od 53



Otvara se prozor:




Što prikazuju brojevi od 1-4:

    1. Prikazuje gdje će biti spremljena stranica koju smo izradili, u mom slučaju
       je to Disk E: i u njemu je nova prazna mapa po imenu “moja web stranica“
    2. Prikazuje naziv html dokumenta koji smo upisali prilikom izrade ove prve
       stranice (u mom slučaju Moja prva stranica) kao title ali taj naziv moramo
       promijeniti u index jer stranica koja se prva otvara je kao što vjerojatno
       znate HOME stranica (HOME page) a naziv za HOME stranicu UVIJEK
       mora biti indeks.html. Ovo morate zapamtiti jer ako ju nazovete drugim
       nazivom neče biti ispravno. Zbog toga brišemo postoječi naziv Moja prva
       stranica i upisujemo indeks




http://izrada-web-stranice-hr.com
Stranica25 od 53



    3. Prikazuje da je to html dokument pa će naša HOME stranica imati naziv
       indeks.html
    4. Sada možete kliknuti na Save i spremiti dokument

Sada kad ste spremili još jednom pogledajte u Kompozerovu naslovnu traku (title
bar) gdje možete vidjeti da Moja prva stranica nije nestalo a stranica je sada
indeks.html tj. HOME.




Vrlo je važno da zapamtite da vaša HOME stranica uvijek mora imati naziv
index.html

Ako ste odabrali nekoliko slika koje želite staviti na svoju web stranicu vrijeme je
da ih spremite u mapu. Otvorite mapu u kojoj će biti svi dokumenti i otvorite mapu
images koju ste izradili u njoj. Kopirajte sve slike koje želite imati na web stranici
i spremite ih u tu mapu images.


                                        10 DIO


                              Slike, Veličina Slova I Boje



Promjena Fonta

Vratimo se na Kompozer i zatamnite cijeli tekst koji ste u njemu napisali.
Kliknite na Format u menu baru na vrhu, u padajučem meniu kliknite na Font,
pojaviti će se još jedan padajuči menu i u njemu odaberite font npr. Comic Sans
MS. Zatamnjeni tekst će se automatski promjeniti u drugi font.



http://izrada-web-stranice-hr.com
Stranica26 od 53




Kliknite bilo gdje na Kompozeru da se vrati na nezatamnjeno i pogledajte tekst sa
novim fontom (Comic Sans MS). Ako želite možete isprobati još nekoliko vrsta
fonta.
Sada ponovno zatamnite cijeli tekst i kliknite na Center u meniu na vrhu i
pogledajte kako izgleda vaš tekst. Tekst je poravnat prema sredini




Umetnite Slike

Sada možemo početi sa postavljanjem jedne slike ispod napisanog teksta. Nadam
se da ste pripremili nekoliko slika u mapi sa slikama (images) jer kao što sam
rekao sve što želimo imati na svojoj web stranici mora biti u jednoj mapi.




http://izrada-web-stranice-hr.com
Stranica27 od 53



Na ovoj slici vidite da je moja mapa “moja web stranica“ izrađena na E: disku i u
njoj je mapa “images“ gdje se nalazi nekoliko slika a u njoj se nalazi i upravo
spremljena index datoteka.

Sada u Kompozeru kliknite na Image




Otvorit će se ovakav prozor




http://izrada-web-stranice-hr.com
Stranica28 od 53




Kliknite na Choose File ili na mapu kao na ovoj slici i otvorit će se novi prozor
kao ovaj dole i u njemu dva puta kliknite na mapu images, klikom na sliku
označite sliku koju želite i kliknite na Open.




Sada vam se ponovno pojavljuje ovaj prozor ali s podacima o slici.




Poželjno je u polje “Alternate text“ upisati opis slike a za SEO optimizaciju je
dobro da to bude ključna riječ koju koristite za tu stranicu.



http://izrada-web-stranice-hr.com
Stranica29 od 53



Kliknite na OK i slika će se pojaviti ispod vašeg teksta u Kompozeru.




Boja Pozadine i Boja Teksta


Kliknite na Format i u padajučem meniu kliknite na Page Colors and
Background. Otvorit će se ovakav prozor:




Odaberite Use custom colors. Sada se pojavljuje prozor u kojem imamo pet
tekstualnih okvira.



http://izrada-web-stranice-hr.com
Stranica30 od 53




Sada imate mogučnost izmjene boje teksta, boje link teksta, aktivnog link teksta,
boju več posječenog linka i boju pozadine.

Pokušajte promjeniti boju pozadine klikom na Background i odaberite boju koju
želite kao pozadinu. Kliknite OK i ponovno OK i sada opet vidite vaš Kompozer
sa tekstom koji ste napisali i novom bojom pozadine.




http://izrada-web-stranice-hr.com
Stranica31 od 53




                                       11 DIO

                                    Izrada Linkova

Sada ću vam pokazati kako se izrađuju linkovi prema ostalim stranicama
(podstranicama) koje su na vašoj web lokaciji. Več sam govorio da je prva stranica
HOME a sada će mo izraditi stranicu O Nama.

Izrada je vrlo jednistavna. U Kompozeru kliknite ispid slike i zatim kliknite na
Insert i u padajučem izborniku kliknite na Link. Otvorit će se ovakav prozor:




U polje Link Text upišite HOME a u polje Link Location upišite URL adresu
vaše prve stranice. Iako bi bilo dovoljno upisati samo “index.html“ bolje je
upisivati cijeli URL tj. “http://vasastranica.com/index.html“ (naravno bez
navodnika). Sada se u Kompozeru pojavio tekst HOME na kojeg možete kliknuti.
Sada napravite razmak tako da na tastaturi stisnete space (razmak) i na isti način
izradite link za podstranicu O Nama. Stranice koje imaju više od jedne riječi
pišete na ova tri načina a vi odlučite koji želite:
1. onama.html
2. o-nama.html
3. o_nama.html

Sada će vaš Kompozer tekst izgledati ovako:




http://izrada-web-stranice-hr.com
Stranica32 od 53




Izradili smo linkove prema HOME i O Nama stranicama a vi možete izraditi
linkova koliko želite.

Link Prema Drugoj Web Stranici

Izrada linka prema drugoj web stranici je vrlo jednostavna. Napišite neki tekst i
zatamnite riječi na koje želite da posjetioci kliknu da bi došli na tu web stranicu.
Kliknite na “Link“ i upišite URL te stranice. Klikni “OK“.




http://izrada-web-stranice-hr.com
Stranica33 od 53




                                       12 DIO

                             Promjenite Veličinu Stranice
Otvorite li svoju index.html (HOME) stranicu u vašem pregledniku (Mozilla,
Opera, Explorer itd.) vidjet će te da je vaša stranica preko cijelog ekrana
(monitora). Složit će te se da je to preširoko i takav izgled vaše stranice nije
prihvatljiv. Potrebno je promjeniti veličinu kako bi bila ugodnija za oko i izgledala
više profesionalno.

To možemo promijeniti stvaranjem 'tablice' unutar ekrana. U ovoj
tablici - mi će mo umetnuti sve sadržaje vaše web stranice.

Na Kompozeru kliknite na New. Otvorit če se nova stranica (untitled).
Kliknite na Insert i zatim u padajučem meniu odaberite Table.
Otvorit če se novi prozor:




Kliknite na Precisely i pojavljuje se ovaj prozor:




http://izrada-web-stranice-hr.com
Stranica34 od 53




Upišite u Rows i Columns broj 1 a u Width (širina) možete odabrati po vašoj
želji između 650-800 pixels. Kliknite na OK.

U Kompozeru se pojavljuje pravokutnik:




Taj pravokutnik se nalazi s lijeve strane a mi ga moramo namjestiti da bude u
centru. Kliknemo li 2 puta unutar pravokutnika otvorit če se prozor Table
Properties u kojem je potrebno kliknuti na Table i zatim u Table Alignment gdje
je namješteno na Left, odabrati Center.


http://izrada-web-stranice-hr.com
Stranica35 od 53




Kliknite OK i sada ste dobili vaš pravokutnik u centru vaše stranice.

Prilikom pisanja vašeg teksta i ubacivanjem slika pravokutnik če se povečavati.

Da bi promjenili boju pozadine potrebno je kliknuti na Format, zatim
Page Colors and Background a zatim na Custom Color.




Ovdje promjenite boju pozadine cijele stranice po vašoj želji a to je več opisano u
“Boja Pozadine i Boja Teksta“. Nakon što odaberete boju cijele stranice
možete odabrati boju pozadine pravokutnika gdje se nalazi vaš tekst. To
možete jednostavno učiniti kliknete li 2 puta mišem unutar pravokutnika
i kliknete na Table a zatim na kvadratić kod Background Color.

http://izrada-web-stranice-hr.com
Stranica36 od 53




Pojavljuje se ovakav prozor:




Izaberite boju koju želite i kliknite OK.

Odabrao sam tamno-sivu boju pozadine i svjetlo-sivu pozadinu tekst-područja:




Nakon odabira boje pozadine možete početi pisati tekst i stavljati slike koje želite.

Web Stranica Sa Zaglavljem i Podnožjem

Opisat ću vam još jedan jednostavan način izrade vaše stranice ako želite imati
neku sliku u zaglavlju (header), navigaciju vaše web stranice i podnožje (footer).




http://izrada-web-stranice-hr.com
Stranica37 od 53



Otvorite svoj Kompozer, otvorena je nova stranica bez imena (untitled) pa je
potrebno izmjeniti title stranice. Kliknite na Format i u padajučem izborniku
kliknite na Page Title and Properties.




Otvara se sljedeči prozor u kojem je potrebno upisati novi naziv stranice i ako
želite autor (Author), kratak opis (Description). Jezik stranice (Language) i
Character set (UTF-8) je poželjno. U svom primjeru sam nazvao stranicu “Stranica
sa Zaglavljem i Podnožjem“.

Kliknite OK i spremite stranicu u određenu mapu (Folder) klikom na File i zatim
odaberite Save As te upišite indeks.html ako želite da to bude vaša HOME
stranica ili odaberite neki drugi naziv. Možete upisivati bilo koje nazive jer je ovo
samo vježba a kasnije nakon što pročitate cijelu ovu e-knjigu počnite izradu svoje
prve web stranice.




http://izrada-web-stranice-hr.com
Stranica38 od 53




Kliknite na Table, zatim na Precisely i upišite brojeve kao na slici:




Rows: 4
Columns: 1
Width: 800
Kliknite OK i zatim spremite svoju stranicu klikom na Save.

Sada če vaša stranica izgledati ovako:


http://izrada-web-stranice-hr.com
Stranica39 od 53




U mapi images morate imati jednu sliku (800X130 ili sl.) koju želite postaviti kao
zaglavlje (Header).
Kliknite unutar prvog redka i zatim kliknite Image nakon čega se otvara prozor u
kojem je potrebno upisati mjesto gdje se ta slika nalazi a to je mapa images:




Na stranici u Kompozeru se pojavljuje slika kao zaglavlje i vaša stranica izgleda
mnogo bolje ;-)



http://izrada-web-stranice-hr.com
Stranica40 od 53




Kliknite unutar drugog redka i upišite imena stranica za koje želite izraditi
navigaciju (navigation bar).

Ja ču upisati: Home | Kontakt | O Nama
Naravno potrebno je zatamniti Home i kliknuti na Link te upisati URL adresu za
Home (indeks.html), Kontakt (kontakt.html) i O Nama
(o-nama.html). Prilikom izrade vaše web stranice je potrebno upisati u navigaciju
sve vaše podstranice kako bi se posjetitelji lakše snalazili.




http://izrada-web-stranice-hr.com
Stranica41 od 53




Sada stranica izgleda ovako:




Kliknite unutar trečeg redka i upišite sadržaj vaše stranice i ubacite slike koje
želite.

Ostao nam je još četvrti redak u koji upisujemo što želimo ali najčešće se u
podnožje upisuje sljedeće:

“Copyright © 2011 vašastranica.com”

Još malo izmjene boje teksta, boje poleđine i ovo je konačan rezultat:




http://izrada-web-stranice-hr.com
Stranica42 od 53




Ako vam se ne sviđa tekstualna, navigaciju možete izraditi sa slikama. Izaberute
slike koje želite koristiti i na njima u Photoshopu ili Paint-u (imate ga u svom
kompjuteru) napišite tekst koji želite.

Evo primjer kako će navigacija izgledati na ovaj način:




Za ovaj primjer nisam pisao tekst na slikama koje sam koristio.




http://izrada-web-stranice-hr.com
Stranica43 od 53




                                      13 DIO

                      Izrada Ostalih Stranica (Podstranica)

Izrada vaših ostalih podstranica je vrlo jednostavna. Sve vaše stranice moraju
imati isti predložak koji smo u ovoj e-knjizi izradili i sada je potrebno izraditi
podstranice koje se razlikuju samo po sadržaju.




Nakon što ste u Kompozeru izradili vašu Home (index.html) stranicu sada je
potrebno da kliknete na File i u padajučem izborniku kliknite na Save As.

Otvara se prozor u kojem je pod File Name potrebno upisati naziv podstranice
(npr. kontakt.html). U vašoj mapi gdje se nalaze sve datoteke će se pojaviti
datoteka kontakt.html. U Kompozeru kliknite na Open, odaberite kontakt.html i
kliknite Open.

U Kompozeru se otvorila vaša kontakt.html stranica koja ima isti tekst i title kao i
index.html pa je sad potrebno to izmjeniti. Kliknite na Format i u padajučem
meniu kliknite Page Title and Properties. Napišite novi Title (u ovom slučaju
“Kontakt”) i kliknite OK. Izmjenite tekst i kliknite Save kako bi spremili
promjene.




http://izrada-web-stranice-hr.com
Stranica44 od 53



Ovako sada izgleda moja Kontakt podstranica nakon izmjena koje sam opisao.
Predložak je isti kao i kod Home stranice a razlikuje se u tekstu:




Izradimo još O nama podstranicu koja se nalazi u navigaciji.

Isti postupak:

    1. Kliknite File, Save As i upišite u File Name “o-nama.html” (bez
       navodnika)
    2. Kliknite Open, označite stranicu „o-nama.html“ i kliknite Open
    3. Kliknite Format, Page Title and Properties i izmjenite Title (upišite “O
       Nama”)
    4. Izmjenite tekst i kliknite Save
    5. Podstranica O Nama je gotova




http://izrada-web-stranice-hr.com
Stranica45 od 53




Na ovaj način možete izraditi sve vaše podstranice. Kada ih otvorite u vašem
pregledniku sve će imati isti predložak, navigaciju i podnožje a razlika je u
sadržaju podstranice.

Potreban je još jedan dodatak u HTML kodu koji je potrebno dodati na sljedeči
način:

Prilikom izrade prve Home stranice i svake podstranice u Kompozeru potrebno je
kliknuti na Source koji se nalazi na dnu s lijeve strane. Klikom na Source će se
otvoriti HTML kod vaše stranice gdje je potrebno na vrhu
između <head> i </head> dodati meta tagove o kojima sam več govorio u 5 dijelu
pod naslovom “Izaberite Ključne Riječi“.

Meta tagovi izgledaju ovako:

<head>
<title>Naslov vaše stranice</title>
<meta name="description" content="Kratak opis web stranice.">
<meta name="keywords" content="ključne riječi razdvojene zarezom">
</head>

Meta tag <title> več postoji a ispod njega moramo staviti meta tagove description i
keywords.

Nakon upisa kratkog opisa web stranice i ključnih riječi za vašu stranicu ili
podstranicu u meta tagove spremite nove izmjene klikom na Save.

Upisani meta tagovi u vašem HTML kodu izgledaju ovako:




http://izrada-web-stranice-hr.com
Stranica46 od 53




                                     14 DIO

                        Izaberite Besplatan Predložak (Template)

Za one kojima je potreban profesionalan predložak (template) a nemaju vremena
za izradu svog unikatnog predložka u jednom od HTML editora postoji jedan vrlo
jednostavan način kako da izrade svoju web stranicu bez mnogo muke.

Na Internetu se može nači na stotine vrlo dobro dizajniranih predložaka koje mogu
besplatno skinuti na svoj kompjuter i s malim izmjenama teksta, slika, navigacije i
sl. mogu imati vrlo lijepu i profesionalnu web stranicu.

Evo kratak tutorial kako doči do jedne takve web stranice:

    1. Pronađite i skinite jedan besplatan predložak na svoj kompjuter
    2. Predlošci su obično u zip ili rar datoteci pa ih je potrebno raspakirati
    3. Nakon što ste datoteku raspakirali možete vidjeti sve što je potrebno za tu
       web stranicu (index.html, style.css dokument, images mapu sa slikama i dr.)
    4. Otvorite indeks.html datoteku u Kompozeru ili nekom drugom editoru
    5. Izmjenite sadržaj stavljajuči svoj tekst i svoje slike
    6. Izmjenite navigaciju tako da upišete svoju “Home“ stranicu i svoje
       podstranice
    7. Ne zaboravite spremiti sve svoje izmjene klikom na “Save“
    8. Nakon svih izmjena imate gotovu index.html stranicu po svom ukusu
    9. Izradite sve podstranice koje želite na isti način kako sam već opisao u ovoj
       e-knjizi
    10. Ne zaboravite izmjeniti meta tagove (title, kratak opis stranice i ključne
       riječi) u HTML kodu
    11. Postavite svoju web stranicu na svoj server putem FTP programa

    Vaša web stranica je gotova i spremna za posjetitelje.

    Imate li nekih pitanja ili vam je potrebna pomoć slobodno me kontaktirajte
    putem e-maila: mailto:info@izrada-web-stranice-hr.com




http://izrada-web-stranice-hr.com
Stranica47 od 53




                                       15 DIO

                   Objavite svoju Web Stranicu pomoću FTP-a

    Završili ste svoju prvu web stranicu i spremni ste ju podijeliti s ostatkom
    svijeta? Kao što sam vam to već opisao u ovoj e-knjizi za to vam je potrebna
    domena (ime vaše web stranice), hosting (smještaj svih datoteka) i FTP
    program (File Transfer Protocol - protokol za prijenos datoteka).

    Več sam napomenuo da sve vaše datoteke i slike koje želite imati na vašoj web
    stranici moraju biti smještene u jednu mapu na vašem kompjuteru.

    Osim što se lakše snalazite, razlog tome je i mnogo lakši prijenos podataka
    putem FTP programa sa vašeg kompjutera na vaš server i obratno.

    Za prijenos datoteka i slika ću vam predložiti jedan vrlo dobar, lagan za
    korištenje i naravno besplatan FTP program a to je FileZilla. FileZillu možete
    besplatno skinuti na svoj kompjuter na ovoj web stranici:

     http://filezilla-project.org/download.php?type=client




    Nakon skidanja FileZille na vaš kompjuter potrebno ju je instalirati.
    Prilikom instalacije možete odabrati Hrvatski jezik zbog lakšeg snalaženja.

    Nakon instalacije ste spremni za prijenos svih datoteka, mapa, slika
    i dr. sa vašeg kompjutera na server.

    Nakon instalacije i otvaranja FileZilla izgleda ovako:




http://izrada-web-stranice-hr.com
Stranica48 od 53




    Navigacija na FileZilla:

    1.   Alatna Traka
    2.   Mjesto za upis vaših podataka
    3.   Prikazuje se prijenos i povezivanje sa poslužiteljem
    4.   Lijevi stupac prikazuje datoteke i direktorije na vašem kompjuteru
    5.   Desni stupac prikazuje datoteke i direktorije na vašem poslužitelju
    6.   Šesti prozor prikazuje datoteke koje se trenutno prenose s vašeg kompjutera
         na poslužitelj i obratno

    Povezivanje s Poslužiteljem (serverom)

    Da bi se uspješno povezali s poslužiteljem morate upisati svoje podatke koje
    ste dobili u emailu od svoje hosting kompanije.

    Na slici se vide mjesta gdje se upisuju vaši podaci:




http://izrada-web-stranice-hr.com
Stranica49 od 53




    1. Nakon upisa vašeg poslužitelja, korisničkog imena, vaše lozinke i port-a
       (ostaviti prazno ili upisati 21) kliknite na Povezati i Filezilla će se povezati
       s vašim poslužiteljem
    2. Ako je povezivanje uspješno u desnom prozoru (prozor 5) će se pojaviti
       mape koje su na vašem poslužitelju
    3. U lijevom prozoru pronađite mapu na vašem kompjuteru u kojoj se nalaze
       sve datoteke, slike i dr. potrebno za vašu web stranicu
    4. U desnom prozoru kliknite 2 puta na mapu public_html u koju je potrebno
       uploudati sve vaše html datoteke (index.html, kontakt.html, mapu sa
       slikama – images, itd.)
    5. U lijevom prozoru kliknite desnim mišem na svaku datoteku koju želite
       prenijeti s vašeg kompjutera na vaš poslužitelj i u padajučem meniu kliknite
       na Isporučiti.
    6. U prozoru 6 možete vidjeti datoteke koje se prenose i vrijeme koje je
       potrebno za to

Orginalne postavke na FileZilla nije potrebno mijenjati.

Nakon što je prijenos završen vaša web stranica je online i spremna za posjetitelje.




http://izrada-web-stranice-hr.com
Stranica50 od 53




                                          16 DIO

                                    Prijava na Tražilice




Sada kad je vaša web stranica online moramo ju prijaviti na najpoznatije tražilice
(Google, Yahoo, Bing).

Iako bi tražilice same pronašle vašu web stranicu mi možemo ubrzati taj proces
ako ih sami prijavimo ali prilikom prijavljivanja nije potrebno prijavljivati sve
podstranice već samo upišite URL vaše stranice a ostale podstranice će tražilice
otkriti same.

    1. Prijava na Google tražilicu:
       http://www.google.com/addurl/?continue=/addurl
    2. Prijava na Yahoo tražilicu: http://siteexplorer.search.yahoo.com/submit
    3. Prijava na Bing tražilicu:
       http://www.bing.com/webmaster/SubmitSitePage.aspx

Napominjem da tražilicama treba određeno vrijeme kako bi procesuirale prijavu te
vaša stranica neće biti odmah indeksirana. Budite strpljivi te s vremena na vrijeme
provjerite ima li promjena.




http://izrada-web-stranice-hr.com
Stranica51 od 53




                                        17 DIO


                                    SEO Optimizacija




 SEO optimizacija (Search Engine Optimization) je dio koji se bavi
pozicioniranjem web stranica na tražilicama za ključne riječi koje najviše
odgovaraju sadržaju stranica.

90% internet korisnika koristi tražilice da pronađu ono što ih interesira na
internetu i ako je vaša web stranica ili blog kod traženja nekog pojma izlistana na
prvoj stranici, dobra posjeta vam je zagarantirana.

On-Site Optimizacija

Kako bi nam SEO optimizacija bila uspješna vrlo je važno početi razmišljati
o tome već pri samoj izradi web stranice (on-site optimizacija) o čemu sam već
pisao u “Izaberite Ključne Riječi”. Poželjno je imati ključne riječi i u domeni koju
izaberete i naravno najvažnije je imati mnogo unikatnog sadržaja koji ste vi
napisali.

Off-Site Optimizacija

Off-site optimizacija je process koji nikada ne prestaje. U ovu vrstu SEO
optimizacije spadaju povratni linkovi koji upučuju na vašu web stranicu.




http://izrada-web-stranice-hr.com
Stranica52 od 53



Što je više povratnih linkova prema vašoj stranici vaš PR će biti veči i pozicija na
tražilicama će biti viša. Povratni linkovi mogu dolaziti s drugih web stranica,
blogova, foruma itd.

Svaki link se broji ali nije svaki link iste vrijednosti tj. mnogo je vrijedniji link sa
web stranice koja ima istu temu i PR 3-10 od 10 linkova s web stranice koja ima
različitu temu i PR 0.

Povratne linkove možete razmjenjivati, kupovati, zamoliti vlasnika nekog bloga da
napiše post i stavi link prema vašoj web stranici itd.

Linkovi s web stranica kojima je tema klađenje, pornografija i dr. mogu naštetiti
vašem PR pa nemojte razmjenjivati linkove s takvim stranicama.

Više o SEO optimizaciji




                                       18 DIO

                                    Završna Riječ

Na samim počecima prilikom izrade svoje prve web stranice na netu sam pronašao
mnoge knjige o izradi web stranice, seo optimizaciji i zaradi na internetu koje su
bile na Engleskom jeziku i uglavnom su pisane kako bi čitatelje uputili na
određene proizvode putem svog affiliate linka.

Nisam pronašao knjigu gdje je objašnjeno kako početnik može izraditi svoju prvu
web stranicu od početka do kraja i upučuje ga na najčešće greške koje početnici
rade prilikom izrade svojih prvih web stranica.

Nadam se da sam bio donekle zanimljiv i da ću barem jednoj osobi pomoći u
izradi svoje prve web stranice i ako sam to uspio, ja sam zadovoljan jer to znači da
će taj jedan imati posla i da će web imati uspješnu prodaju.

Želim vam mnogo uspjeha u izradi vaše prve web stranice i zahvaljujem vam što
ste pročitali ovu knjigu.


http://izrada-web-stranice-hr.com
Stranica53 od 53




Ako vam se svidjela ova knjiga slobodno je podjelite s prijateljima ili
ponudite za download posjetiteljima vaših web stranica.

Moje Web Stranice

http://izrada-web-stranice-hr.com
http://website2beginners.com
http://diet-and-weight-loss.info

Moji Blogovi

http://web-tutoriali.info
http://diet-and-weight-loss.info/blog
http://blueprint-project.info
http://easyonline-money.info




http://izrada-web-stranice-hr.com

Más contenido relacionado

La actualidad más candente

CSS na Prática - Webdesign 2022
CSS na Prática - Webdesign 2022CSS na Prática - Webdesign 2022
CSS na Prática - Webdesign 2022Renato Melo
 
Trinity Integrated Skills in English (ISE) II writing guidance with genres
Trinity Integrated Skills in English (ISE) II writing guidance with genresTrinity Integrated Skills in English (ISE) II writing guidance with genres
Trinity Integrated Skills in English (ISE) II writing guidance with genresLimerick English TV
 
Урок 30 для 7 класу - Підготовка презентаційних матеріалів проекту та звіту.
Урок 30 для 7 класу - Підготовка презентаційних матеріалів проекту та звіту.Урок 30 для 7 класу - Підготовка презентаційних матеріалів проекту та звіту.
Урок 30 для 7 класу - Підготовка презентаційних матеріалів проекту та звіту.VsimPPT
 
Introduction to Wordpress
Introduction to WordpressIntroduction to Wordpress
Introduction to WordpressSandy Ratliff
 
Motor 4 cilindros ( Mecânica Ford Maverick )
Motor 4 cilindros ( Mecânica Ford  Maverick )Motor 4 cilindros ( Mecânica Ford  Maverick )
Motor 4 cilindros ( Mecânica Ford Maverick )Ricardo Akerman
 
Вивчаємо мову програмування Lazarus
Вивчаємо мову програмування LazarusВивчаємо мову програмування Lazarus
Вивчаємо мову програмування LazarusЮлія Артюх
 
Esquema de ligação do platinado transformado para controle eletrônico
Esquema de ligação do platinado transformado para controle eletrônicoEsquema de ligação do platinado transformado para controle eletrônico
Esquema de ligação do platinado transformado para controle eletrônicoSergio Favaro
 
Tabela de Ponto de Ignição - Todas as Montadoras
Tabela de Ponto de Ignição - Todas as MontadorasTabela de Ponto de Ignição - Todas as Montadoras
Tabela de Ponto de Ignição - Todas as MontadorasDharma Initiative
 
Atego 2425 6x2
Atego 2425 6x2Atego 2425 6x2
Atego 2425 6x2LAGOANO
 
Basic WordPress Workshop Presentation
Basic WordPress Workshop PresentationBasic WordPress Workshop Presentation
Basic WordPress Workshop PresentationFelix Albutra
 
Презентація Бази даних Урок 1.pptx
Презентація Бази даних Урок 1.pptxПрезентація Бази даних Урок 1.pptx
Презентація Бази даних Урок 1.pptxssuserceb60a
 
6 клас 23 урок. Вставлення графічних зображень у текстовий документ
6 клас 23 урок. Вставлення графічних зображень у текстовий документ6 клас 23 урок. Вставлення графічних зображень у текстовий документ
6 клас 23 урок. Вставлення графічних зображень у текстовий документStAlKeRoV
 
Практична робота 9
Практична робота 9Практична робота 9
Практична робота 9Andrey Podgayko
 
презентація сервіси розміщення відео та аудіо
презентація   сервіси розміщення відео та аудіопрезентація   сервіси розміщення відео та аудіо
презентація сервіси розміщення відео та аудіоСергій Каляфіцький
 
Apostila motores-de-combustao-interna
Apostila motores-de-combustao-internaApostila motores-de-combustao-interna
Apostila motores-de-combustao-internatabVlae
 

La actualidad más candente (20)

Raivaru maanakurun
Raivaru maanakurunRaivaru maanakurun
Raivaru maanakurun
 
урок 26 текстові і графічні об'єкти на слайдах
урок 26 текстові і графічні об'єкти на слайдахурок 26 текстові і графічні об'єкти на слайдах
урок 26 текстові і графічні об'єкти на слайдах
 
CSS na Prática - Webdesign 2022
CSS na Prática - Webdesign 2022CSS na Prática - Webdesign 2022
CSS na Prática - Webdesign 2022
 
Trinity Integrated Skills in English (ISE) II writing guidance with genres
Trinity Integrated Skills in English (ISE) II writing guidance with genresTrinity Integrated Skills in English (ISE) II writing guidance with genres
Trinity Integrated Skills in English (ISE) II writing guidance with genres
 
Урок 30 для 7 класу - Підготовка презентаційних матеріалів проекту та звіту.
Урок 30 для 7 класу - Підготовка презентаційних матеріалів проекту та звіту.Урок 30 для 7 класу - Підготовка презентаційних матеріалів проекту та звіту.
Урок 30 для 7 класу - Підготовка презентаційних матеріалів проекту та звіту.
 
Introduction to Wordpress
Introduction to WordpressIntroduction to Wordpress
Introduction to Wordpress
 
3D
3D3D
3D
 
Motor 4 cilindros ( Mecânica Ford Maverick )
Motor 4 cilindros ( Mecânica Ford  Maverick )Motor 4 cilindros ( Mecânica Ford  Maverick )
Motor 4 cilindros ( Mecânica Ford Maverick )
 
Вивчаємо мову програмування Lazarus
Вивчаємо мову програмування LazarusВивчаємо мову програмування Lazarus
Вивчаємо мову програмування Lazarus
 
Esquema de ligação do platinado transformado para controle eletrônico
Esquema de ligação do platinado transformado para controle eletrônicoEsquema de ligação do platinado transformado para controle eletrônico
Esquema de ligação do platinado transformado para controle eletrônico
 
Tabela de Ponto de Ignição - Todas as Montadoras
Tabela de Ponto de Ignição - Todas as MontadorasTabela de Ponto de Ignição - Todas as Montadoras
Tabela de Ponto de Ignição - Todas as Montadoras
 
Atego 2425 6x2
Atego 2425 6x2Atego 2425 6x2
Atego 2425 6x2
 
Basic WordPress Workshop Presentation
Basic WordPress Workshop PresentationBasic WordPress Workshop Presentation
Basic WordPress Workshop Presentation
 
8 клас урок 41
8 клас урок 418 клас урок 41
8 клас урок 41
 
Презентація Бази даних Урок 1.pptx
Презентація Бази даних Урок 1.pptxПрезентація Бази даних Урок 1.pptx
Презентація Бази даних Урок 1.pptx
 
6 клас 23 урок. Вставлення графічних зображень у текстовий документ
6 клас 23 урок. Вставлення графічних зображень у текстовий документ6 клас 23 урок. Вставлення графічних зображень у текстовий документ
6 клас 23 урок. Вставлення графічних зображень у текстовий документ
 
Практична робота 9
Практична робота 9Практична робота 9
Практична робота 9
 
Vincent van gogh
Vincent van goghVincent van gogh
Vincent van gogh
 
презентація сервіси розміщення відео та аудіо
презентація   сервіси розміщення відео та аудіопрезентація   сервіси розміщення відео та аудіо
презентація сервіси розміщення відео та аудіо
 
Apostila motores-de-combustao-interna
Apostila motores-de-combustao-internaApostila motores-de-combustao-interna
Apostila motores-de-combustao-interna
 

Similar a Izradite sami svoju prvu web stranicu

Instalacija i podešavanje word press bloga
Instalacija i podešavanje word press blogaInstalacija i podešavanje word press bloga
Instalacija i podešavanje word press blogaKruno Klukovic
 
Samo zato sto je na internetu ne cini Tocan
Samo zato sto je na internetu ne cini Tocan
Samo zato sto je na internetu ne cini Tocan
Samo zato sto je na internetu ne cini Tocan sanjajosipovic
 
Kako napraviti blog - Kompletan WordPress Vodič
Kako napraviti blog - Kompletan WordPress VodičKako napraviti blog - Kompletan WordPress Vodič
Kako napraviti blog - Kompletan WordPress VodičKrešimir Olijan
 
Alati zakreiranjewebstranice
Alati zakreiranjewebstraniceAlati zakreiranjewebstranice
Alati zakreiranjewebstraniceseminarski1234
 
Izgradnja Poslovni Clanak Marketing
Izgradnja Poslovni Clanak Marketing
Izgradnja Poslovni Clanak Marketing
Izgradnja Poslovni Clanak Marketing najjaceizsrbije2
 
Kako da napravite plan za uspješan web sajt?
Kako da napravite plan za uspješan web sajt?Kako da napravite plan za uspješan web sajt?
Kako da napravite plan za uspješan web sajt?Ivan Kukic
 
Kako da budete kvalitetan (i zadovoljan) web dizajner
Kako da budete kvalitetan (i zadovoljan) web dizajnerKako da budete kvalitetan (i zadovoljan) web dizajner
Kako da budete kvalitetan (i zadovoljan) web dizajneremanuelblagonic
 
Zašto je web upotrebljivost važan faktor pri izradi web stranica?
Zašto je web upotrebljivost važan faktor pri izradi web stranica?Zašto je web upotrebljivost važan faktor pri izradi web stranica?
Zašto je web upotrebljivost važan faktor pri izradi web stranica?Dario Suveljak
 
SEO Basics - Nedim Sabic at Webfest.me
SEO Basics - Nedim Sabic at Webfest.meSEO Basics - Nedim Sabic at Webfest.me
SEO Basics - Nedim Sabic at Webfest.meNedim Sabic
 
Site Talk Cro 1 0 1
Site Talk Cro 1 0 1Site Talk Cro 1 0 1
Site Talk Cro 1 0 1larex
 
Jedan dan u Web Agenciji
Jedan dan u Web Agenciji Jedan dan u Web Agenciji
Jedan dan u Web Agenciji Jurica Vuković
 
Site Talk Croatian
Site Talk CroatianSite Talk Croatian
Site Talk Croatianguest6d2562c
 
Dragicevic jasarevic lakoseljac_wix
Dragicevic jasarevic lakoseljac_wixDragicevic jasarevic lakoseljac_wix
Dragicevic jasarevic lakoseljac_wixVedranDragievi
 

Similar a Izradite sami svoju prvu web stranicu (18)

Instalacija i podešavanje word press bloga
Instalacija i podešavanje word press blogaInstalacija i podešavanje word press bloga
Instalacija i podešavanje word press bloga
 
Samo zato sto je na internetu ne cini Tocan
Samo zato sto je na internetu ne cini Tocan
Samo zato sto je na internetu ne cini Tocan
Samo zato sto je na internetu ne cini Tocan
 
Kako napraviti blog - Kompletan WordPress Vodič
Kako napraviti blog - Kompletan WordPress VodičKako napraviti blog - Kompletan WordPress Vodič
Kako napraviti blog - Kompletan WordPress Vodič
 
Web Promocija
Web PromocijaWeb Promocija
Web Promocija
 
Alati zakreiranjewebstranice
Alati zakreiranjewebstraniceAlati zakreiranjewebstranice
Alati zakreiranjewebstranice
 
Izgradnja Poslovni Clanak Marketing
Izgradnja Poslovni Clanak Marketing
Izgradnja Poslovni Clanak Marketing
Izgradnja Poslovni Clanak Marketing
 
Kako da napravite plan za uspješan web sajt?
Kako da napravite plan za uspješan web sajt?Kako da napravite plan za uspješan web sajt?
Kako da napravite plan za uspješan web sajt?
 
Kako da budete kvalitetan (i zadovoljan) web dizajner
Kako da budete kvalitetan (i zadovoljan) web dizajnerKako da budete kvalitetan (i zadovoljan) web dizajner
Kako da budete kvalitetan (i zadovoljan) web dizajner
 
Zašto je web upotrebljivost važan faktor pri izradi web stranica?
Zašto je web upotrebljivost važan faktor pri izradi web stranica?Zašto je web upotrebljivost važan faktor pri izradi web stranica?
Zašto je web upotrebljivost važan faktor pri izradi web stranica?
 
SEO Basics - Nedim Sabic at Webfest.me
SEO Basics - Nedim Sabic at Webfest.meSEO Basics - Nedim Sabic at Webfest.me
SEO Basics - Nedim Sabic at Webfest.me
 
Google plus-sinisa-gavrilovic
Google plus-sinisa-gavrilovicGoogle plus-sinisa-gavrilovic
Google plus-sinisa-gavrilovic
 
Site Talk Cro 1 0 1
Site Talk Cro 1 0 1Site Talk Cro 1 0 1
Site Talk Cro 1 0 1
 
Web marketing
Web marketingWeb marketing
Web marketing
 
Plakat „UltaBrowser“
Plakat „UltaBrowser“Plakat „UltaBrowser“
Plakat „UltaBrowser“
 
Jedan dan u Web Agenciji
Jedan dan u Web Agenciji Jedan dan u Web Agenciji
Jedan dan u Web Agenciji
 
Site Talk Croatian
Site Talk CroatianSite Talk Croatian
Site Talk Croatian
 
Dragicevic jasarevic lakoseljac_wix
Dragicevic jasarevic lakoseljac_wixDragicevic jasarevic lakoseljac_wix
Dragicevic jasarevic lakoseljac_wix
 
Type pad
Type padType pad
Type pad
 

Izradite sami svoju prvu web stranicu

  • 1. Izradite Sami Svoju Prvu Web Stranicu Ova e-Knjiga je osnovni vodić za početnike koji žele sami izraditi svoju prvu web stranicu By Kruno Kluković
  • 2. Stranica2 od 53 1. Uvod 2. Trebam li imati Vlastitu Web Stranicu? 3. Kako Započeti Izradu Web Stranice? 4. Izaberite Temu 5. Izaberite Ključne Riječi 6. Izaberite Domenu i Hosting 7. Preuzmite svoj Web Editor 8. Izrada Prve Stranice (index.html) 9. Ispravno Spremanje Datoteka 10. Slike, Veličina Slova i Boje 11. Izrada Linkova 12. Promjenite Veličinu Stranice 13. Izrada Ostalih Stranica (Podstranica) 14. Izaberite Besplatan Predložak (Template) 15. Objavite svoju Web Stranicu pomoću FTP-a 16. Prijava na Tražilice 17. SEO Optimizacija 18. Završna Riječ http://izrada-web-stranice-hr.com
  • 3. Stranica3 od 53 1 DIO UVOD U ovoj knjizi želim objasniti koji su koraci potrebni za stvaranje vaše prve web stranice od samog početka (Planiranja) pa do samog kraja tj. SEO Optimizacije vaše web stranice kako bi došla među top 10 na tražilicama. Želim istaknuti da je vrlo važno slijediti sve ove tutoriale prilikom izrade vaše prve web stranice. Vjerojatno sada na samom početku mislite da to nečete uspjeti i da je za izradu web stranice potrebno dugogodišnje iskustvo i znanje html i php kodiranja, javascript i ostalih kodova ali uz pomoć današnjih HTML editora sve je mnogo jednostavnije i potrebna je samo upornost i dobra volja. Naravno ova knjiga če vam pomoći u izradi vaše prve web stranice za vaše potrebe a ne web stranice kao Facebook ili MySpace. Prije tri godine kada sam počeo sa izradom svoje prve web stranice nisam ni sanjao da ću pisati ovu knjigu, imati nekoliko web stranica i blogova, zarađivati pristojan dodatni prihod od njih stavljajuči Google oglase i kao affiliate nudeći razne proizvode za koje mi vlasnici plačaju postotak od prodaje. Na samom početku sam kao i vi tražio po netu knjige o HTML kodiranju, FTP programima, SEO optimizaciji i Zaradi na Internetu ali nijedna nije bila na našem jeziku i za potpune početnike što me jako živciralo i to je največi razlog zašto sam počeo pisati ovu knjigu. http://izrada-web-stranice-hr.com
  • 4. Stranica4 od 53 Pišem ovu knjigu iz još jednog razloga a to je da vas odmah na samom početku usmjerim na pravi put i da ne radite iste greške kao mnogi početnici i kasnije lupaju glavom u zid i kreču ispočetka a dragocijeno vrijeme koje su potrošili u izradi svojih stranica nemogu vratiti. Mislim na početnike koji izrađuju web stranicu na besplatnom hostingu i nakon nekog vremena shvate da ta web stranica nije njihova. Vjerojatno se pitate kako to mislim “nije njihova”. Pogledajte naziv domene kod takvih besplatnih hostinga, da li je to naziv koji vi želite i da li taj naziv ima vaše ključne riječi. Primjer jedne takve domene je: vašekorisničkoime.besplatnadomena.com ili besplatnadomena.com/vašastranica. Da li je to domena na kojoj ste spremni izraditi svoju web stranicu i potrošiti 1, 2 ili 3 godine za SEO optimizaciju i jednog dana zaprepašteno ustanovite da više ne postoji i da je sav vaš trud bio uzaludan jer se vlasnik te besplatne domene više ne želi zamarati i odustaje od svog hostinga a vi nemate spremljen beckup svoje web stranice. Takav scenario sam osobno proživio i sav moj trud i uloženo vrijeme su bačeni u koš za smeče. Iako sam nekoliko puta kontaktirao vlasnika i tražio beckup svoje web stranice, odgovora nije bilo. Naravno u ugovoru na koji obično ne obračamo puno pažnje prilikom registracije i kliknemo kao da smo ga pročitali, lijepo je pisalo da naš account može biti ukinut i izbrisan bez razloga i bez ikakve obavjesti. Zbog takvog ili sličnog scenarija pročitajte ovu knjigu i na samom kraju imat će te svoju prvu funkcionalnu web stranicu s mnogo podstranica i što je najvažnije znat će te kako se izrađuje, dizajnira i objavljuje pa možete izrađivati nove web stranice koliko želite. http://izrada-web-stranice-hr.com
  • 5. Stranica5 od 53 Zarada na Internetu Zarada na Internetu je moguča i ako želite imati web stranicu kako bi zaradili nemojte misliti da će se to ostvariti na brz i jednostavan način kliknuvši mišem nekoliko puta i zaradili ste $5000. Na Internetu se može mnogo zaraditi i mnogima je to primarna zarada jer su izgradili svoj online biznis ali večina ljudi ne zaradi na internetu ni centa jer olako shvačaju ovu vrstu zarade i očekuju brzu zaradu bez imalo uloženog truda i vremena pa kad vide da od toga nema ništa – odustaju. Morate znati da je potrebno dosta vremena i upornosti da bi vaš online biznis radio kako treba i da bi vi počeli zarađivati. Naravno kao i u svaki drugi biznis morate uložiti i u ovaj jer bez ulaganja nema ni zarade pa računajte da nešto svog novca morate uložiti i u svoju edukaciju. __________________________________________________________________ http://izrada-web-stranice-hr.com
  • 6. Stranica6 od 53 2 DIO Trebam li imati Vlastitu Web Stranicu? Kao što i sami znate Internet se nikada ne gasi. Kad jednom vaša web stranica bude online biti će dostupna cijelom svijetu 24/7, 365 dana u godini. To znači da svi vaši proizvodi, informacije tj. sve što nudite na vašim stranicama, biti će dostupno svima na ovom planetu. Ukoliko vas netko želi kontaktirati moći će to učiniti putem emaila i vi mu možete odgovoriti kad to želite. Neograničene Informacije Na vašoj web stranici nema ograničenja kao ograničeni broj riječi ili ograničen prostor. Internet vam daje neograničenu količinu online prostora za izlog vašeg proizvoda ili usluge. Vaša web stranica može imati samo jednu stranicu ili 10.000 stranica. To ovisi o vama i naravno o hostingu koji izaberete. http://izrada-web-stranice-hr.com
  • 7. Stranica7 od 53 Morate imati kontrolu nad vašom web stranicom, a ne stavljati svoju sudbinu u ruke drugih. Razmislite o tome na minutu. Da li zaista želite tražiti pomoć (koja se naplaćuje) svaki put kad želite promijeniti tekst ili umetnuti novu sliku? Odaberite Pametno – Nemojte Koristiti Besplatan Hosting Napravite vlastite web stranice mudro - ne padajte u ovu zamku Mnogi ljudi koji izrađuju svoje web stranice pokušavaju proći što jeftinije. Iako je to razumljivo, ne razmišljaju da to može biti štetno za njihove web stranice. Ako ste ozbiljno razmišljali o izradi vlastite web stranice, obratite pozornost na ovaj savjet: Ne koristite besplatni hosting! Većina ljudi ne prepoznaje velike nedostatke besplatnih web stranica. Ja samo govorim iz vlastitog iskustva jer želim da izbjegnete traumu nakon gubitka vaše web stranice! Problemi povezani s korištenjem besplatnog hostinga: 1. Ograničen web prostor 2. Ne mogu se uključiti interaktivne funkcije (rasprave zajednice, video igre, chat soba, i sl.) 3. Nije search-engine friendly što će zauzvrat ograničiti vaš promet http://izrada-web-stranice-hr.com
  • 8. Stranica8 od 53 4. Ne izgleda pouzdano: na žalost, ako vaša web adresa glasi mojabesplatnastranica/besplatanhosting.com, vaša stranica neće izgledati vjerodostojno za većinu posjetitelja 5. Možda se iritantni pop-up oglasi ili banneri na vašim stranicama neće svidjeti vašim posjetiocima pa ju odluče odmah napustiti 6. Podrška je vrlo slaba ili je nema 7. Nemate mogučnost svoje e-pošte (vi@vašadomena.com) Koje su Prednosti Plačenog Hostinga: 1. Lako je zapamtiti adresu web stranice 2. Nemate tuđe bannere i pop-up prozore 3. Stranica je bolje rangirana u tražilicama 4. Imate više kontrole na izgled i dojam svoje stranice 5. Vaša adresa e-pošte (vi@vašadomena.com) 6. Mnogo prostora za vašu web stranicu 7. Više fleksibilnosti za dizajn i funkcionalnost 8. Dostupna pomoć 24/7 http://izrada-web-stranice-hr.com
  • 9. Stranica9 od 53 3 DIO Kako Započeti Izradu Web Stranice? Izrada web stranica nije tako teška kao što možda mislite. Uskoro može biti online bez da znate komplicirane kompjuterske kodove. Možete odabrati između 2 opcije. Izrada web stranica može biti vrlo jednostavan zadatak ili može uključivati ??i ovladavanje teških računalnih jezika i zatim pisanje HTML koda od nule. Ja pretpostavljam da ste odabrati lakšu opciju i ne želite gubiti vrijeme na učenje dugačkog HTML koda. Postoje dvije stvari koje morate imati da bi izradili svoju web stranicu: 1) Naziv Domene Naziv domene je adresa vaše web stranice koju ste vi odabrali. To je vaša “web adresa” ili “URL” ( npr. vašastranica.com). Izuzetno je važno da vam naziv domene sadrži ključne riječi koje će ljudi koristiti kada traže vašu stranicu. Idealno je da vaša domena bude odraz vaše stranice, vaše usluge ili servisa. Nakon registracije domene ona je vaša onoliko koliko vi to želite. http://izrada-web-stranice-hr.com
  • 10. Stranica10 od 53 2) Web Hosting Sljedeći korak je vaša on-line prisutnost a to pruža web hosting. To je u osnovi tvrtka koja ima izuzetno snažna računala koja su trajno povezana na internet. Za mjesečnu naknadu, web hosting će vam iznajmiti određenu količinu online prostora za vaše web stranice. Nakon što se vaša web stranica nalazi na njihovom poslužitelju, korisnici interneta širom svijeta će biti u mogućnosti pristupiti vašoj web lokaciji. Web Alati Kada odaberete svoju domenu i hosting sljedeči korak je dizajn vaše web stranice. Potoji mnogo HTML editora potrebnih za izradu stranica a jedan od najpoznatijih je Dreamweaver koji možete kupiti za $400. Na sreču postoje HTML editori koji su besplatni i možete ih skinuti sa Interneta. To su Komposer i CoffeeCup. Vrlo su funkcionalni i lagani za korištenje. Testiranje Preglednika (Browsera) Iako ste možda izradili efektivnu i funkcionalnu web stranicu, nemožete birati u kojem pregledniku će ju posjetitelj pregledavati. Pošto su preglednici različiti morate testirati web stranicu u svim preglednicima. Srećom u većini slučajeva varijacija od jednog do drugog preglednika će biti zanemariva, ali ponekad određeni preglednik može spriječiti posjetitelja da vidi vašu web lokaciju. Jedini način da budete sigurni da vaše web stranice mogu biti pregledane u različitim preglednicima je temeljito testiranje. Internet Preglednici kao Explorer, Netscape and Mozilla Firefox mogu biti jednostavno instalirani na vaš PC da bi testirali vaše web stranice. http://izrada-web-stranice-hr.com
  • 11. Stranica11 od 53 4 DIO Izaberite Temu Kod izbora teme važno je da ne pišete o svemu što vam padne na pamet u tom trenutku. Zašto je to toliko važno? Zato jer tražilice gledaju koja stranica ima koju temu i ako ste ju dobro napisali i redovito ažurirali bolje će vas rangirati od stranica koje imaju više tema na nekoliko stranica i nisu redovito ažurirane. Dakle najbitnije je imati što više sadržaja (texta) o jednoj određenoj temi i tada će tražilice izdvojiti vašu web stranicu od ostalih i ponuditi ljudima koji su upisali “ključne riječi”. Dakle ako netko upiše u tražilicu ključne riječi “kako trenirati svog psa” a na vašoj web stranici ili vašem blogu ima 20 ili više stranica o treniranju pasa tada će vaša stranica biti ispred onih koje imaju samo 1 ili 5 stranica o toj temi. Ako se bavite treniranjem pasa i znate sve o tome, teksta će biti mnogo više nego da pišete o kolačima o kojima neznate ništa više već pojesti ih. Večina ljudi izrađuje svoje stranice kako bi imali dodatnu zaradu . Da bi bilo zarade, trebate imati dovoljno posjeta a da bi imali dovoljno posjeta morate biti među prvih 10 na tražilicama za “ključne riječi” koje vode na vašu stranicu. http://izrada-web-stranice-hr.com
  • 12. Stranica12 od 53 Kada izaberete temu o kojoj će te pisati možete zarađivati kao affiliate tj. ponuditi posjetiteljima razne proizvode i zaraditi na proviziji (ClickBank, Amazon, Ebay i dr.). Možete prodavati prostor za oglašavače (Google Adsense, Bidvertiser i dr.) i zarađivati kada posjetitelji kliknu na ponuđenu reklamu. Dakle najbitnije je ne kopirati druge i ne kopirati njihov text jer takve stranice brzo završe u smeču tj. tražilice ih ignoriraju jer su kopije. Imajte što više svog unikatnog sadržaja i nemojte biti nestrpljivi dok čekate da dođete među prvih 10 jer je to dosta spor proces i potreban je dobro obavljen SEO (Search Engine Optimization). Prve prave rezultate možete očekivati tek nakon nekoliko mjeseci. __________________________________________________________________ http://izrada-web-stranice-hr.com
  • 13. Stranica13 od 53 5 DIO Izaberite Ključne Riječi Trebate znati da je prvi i najvažniji korak u optimizaciji da pronadete relevantne ključne riječi za vašu stranicu. Ključna riječ je ona riječ koju korisnik upisuje u tražilicu. Ako pogriješite, i odaberete one ključne riječi koje nitko ne traži, uzalud će vam biti svaka optimizacija. Nemojte optimizirati svoje stranice za ključne riječi koje imaju vrlo jaku konkurenciju jer je gotovo nemoguče da će vaša nova web stranica biti među prvih 10 ako ostale stranice imaju PR 2-10. Analizirajte koliko je prosječno duga prva rečenica vaše konkurencije. Uzmite u razmatranje barem prvih pet rezultata. Vaša prva rečenica bi trebala imati otprilike isti broj riječi kao i visoko rangirani konkurenti. Istu stvar napravite sa “meta tagovima” i “meta description”. Postoji Googleov besplatni servis na kojem to možete uciniti, npr. https://adwords.google.com/select/KeywordToolExternal Tamo će te moči vidjeti koliko se ti pojmovi zaista koriste, a i dobit će te i pregled sličnih pojmova koji se koriste. Prilikom pisanja pazite na koncetraciju ključnih riječi u vašem tekstu jer to takođe znatno utječe na poziciju vaše web stranice . Nemojte ponavljati jedne te iste riječi ili koristiti ključne riječi i izraze koji se ne spomiju u vašem body tekstu, ovakav postupak optimiziranja stranica je pogrešan i može vas dovesti do situacije da budete banovani od strane Google pretraživača . http://izrada-web-stranice-hr.com
  • 14. Stranica14 od 53 Tekst koji pišete mora biti prirodan tj. pišite tekst za svoje posjetioce a ne za tražilice ali znajte da je najbolje da vam se ključne riječi obavezno nalaze u prvoj i zadnjoj rečenici. Morate paziti i na broj riječi po stranici jer Google broji riječi i najbolje je da ih imate oko 400-500 po stranici a ako ih imate više pokušajte tu stranicu podijeliti na dvije i povezati ih linkom. Naravno ako imate više podstranica morate za svaku posebno odabrati ključne riječi i opis koji se nalaze u meta tagovima. U slučaju da ne znate, meta tagovi su skriveni deskriptori koji se pojavljuju na početku HTML koda, unutar vaše oznake. Oni mogu biti nevidljivi vašim posjetiteljima, ali tražilice ih mogu pročitati. Oni se obično sastoje od naslova, opisa i ključnih riječi i oni izgledaju otprilike ovako: <head> <title>Naslov vaše stranice</title> <meta name="description" content="Kratak opis web stranice."> <meta name="keywords" content="ključne riječi razdvojene zarezom"> </head> Zbog zlostavljanja, mnoge tražilice ne koriste ove oznake za rangiranje stranice, ali trebali biste ih i dalje uključivati jer ih koristi za prikaz informacija o vašoj web stranici. http://izrada-web-stranice-hr.com
  • 15. Stranica15 od 53 U <title> tagu koji se nalazi u html kodu je naslov koji obavezno mora sadržavati ključne riječi ali ih morate imati i u naslovu i podnaslovima u samom tekstu koji u html kodu izgledaju ovako: <h1>Ovo je naslov</h1> <h2>Ovo je podnaslov1</h2> <h3>Ovo je podnaslov2</h3> Rezultat koji je vidljiv na vašoj stranici: Ovo je naslov Ovo je podnaslov1 Ovo je podnaslov2 Koristite HTML naslove samo za “Naslove”. Nemojte ih nikada koristiti da bi tekst bio veči ili podebljan jer tražilice koriste vaše naslove da indexira strukturu vaše web stranice. <h1> Naslov trebate koristiti kao glavni naslov, poslije njega dolazi <h2> kao podnaslov zatim manje važan <h3> podnaslov itd. _____________________________________________________________ 6 DIO Izaberite Domenu i Hosting Postoje dva osnovna koraka da bi vaša web stranica bila na Internetu. Rezervacija naziva domene je prvi jer čini adresu vašeg web sučelja. Domena se sastoji od dva ili više dijelova razdvojenih točkom, npr. www.moja-domena.com Drugi dio domene je oznaka grupe kojoj domena pripada. Najpopularnije grupe su .com, .info, .net, .org, .gov, .edu. Pravila o imenima domena: * Ime domene sastoji se samo od znakova iz skupa koji čine: 26 slova engleske abecede, znamenke “0”-”9” i znak “-”; http://izrada-web-stranice-hr.com
  • 16. Stranica16 od 53 * sastoji se od najmanje 2, a najviše 65 znakova * prvi i zadnji znak u nizu nesmije biti “-”. Da bi registrirali domenu potrebna vam je kreditna kartica i čitav posao možete završiti za nekoliko minuta. Cijena domena nije velika, kreče se oko $10 za godinu dana. Odabir pravog naziva domene zna ponekad predstavljati tešku zadaću za sve nove Internet korisnike. Često se zna dogoditi da korisnici nazivaju svoje domene po imenu ljubimca, djetetu ili po nekoj drugoj dragoj osobi. Da bi se našli u glavnim tražilicama (Google, Yahoo, itd.) najbolje je registrirati naziv domene tako da odaberete glavne kljućne riječi tj. sadržaj vaše stranice. U osnovnim crtama rečeno, domena ili naziv domene je naziv vašeg poduzeća na Internetu. Ako imate automehaničarsku radionu, naziv vaše domene bi mogao biti “www.automehanicar.com”, ako se bavite web dizajnom, moguća domena za vas bi bila “www.webdizajn.com”, ako popravljate kompjutere npr. “www.popravak-kompjutera.com”. S upotrebom pravih riječi u nazivu domene, potencijalnim klijentima će biti lakše naći vaše stranice, iako ne znaju točnu adresu, tzv. URL (Universal Resource Locator). Osim toga kad bi netko od njih tražio na tražilici kao što je Google s riječima iz naziva domene postoji veća šansa da vas i tako nađu, pod pretpostavkom da koristite prave riječi uz tematiku vaših stranica. Nakon što ste izabrali pravi naziv vaše domene, morate provjeriti da li je ista slobodna ili zauzeta. To možete provjeriti na ovoj web stranici: HostMonster http://izrada-web-stranice-hr.com
  • 17. Stranica17 od 53 Nakon što ste odabrali vašu domenu spremni ste da odaberete svog web domaćina. Web hosting vam daje prostor, razne alate i podršku za izradu vaših web stranica i e-računa (vi@vašadomena.com). Ovdje ću vam dati uvid u osnovne značajke i nadam se pomoći pri donošenju odluke. Odabir pravog hosting servisa neće biti težak jer ću vam preporučiti ovaj koji ja koristim i potpuno sam zadovoljan kao i vlasnici ostalih 1.700.000 domena. Koristim njihove usluge već 2 godine i na njemu su smještene sve moje web stranice i blogovi. HostMonster pruža hosting rješenja za mnoge poslovne i osobne web stranice od 1996. Njihovi internet hosting paketi pomažu poslovnim subjektima i pojedincima dobiti najbolju uslugu uz najmanje troškova. Sa HostMonsterom dobijete: * Najbolju službu za korisnike * Kvalitetnu opremu * Maksimalan zajamčen online status * Visoko funkcionalni alati za administraciju * Sigurne i pouzdane sigurnosne kopije * Čvrsta i poštena poslovna praksa Iznenađujuće je što sve dobijete za tako malu cijenu. Nema tvrtki na tržištu koje nude tako velik paket za tako malu cijenu! HostMonster pouzdanosti HostMonster stalno poboljšava stabilnost svojih servera i vrijeme neprekidnog rada. Danas su već dodali toliko mogućnosti, da na njihovim poslužiteljima nikada ne pada sustav. Što dobijete za $5.95/mj. * Besplatnu domenu (zauvijek) * Neograničen prostor * Neograničen transfer * Hosting za neograničen broj domena * Neograničen broj email adresa * Najbolji 24/7 suport http://izrada-web-stranice-hr.com
  • 18. Stranica18 od 53 * Besplatan site builder *SSL, FTP, CGI, Ruby (RoR), Perl, PHP, MYSQL HostMonster koristi unaprijeđenu verziju cPanel-a što nam govori da je to najbolji control panel softver koji je dostupan na današnjem tržištu. HostMonster je vrlo dobar izbor za sve vrste web stranica. KLIKNITE OVDJE ZA PRIJAVU NA HOSTMONSTER.COM 7 DIO Preuzmite svoj HTML Editor Za izradu i dizajn vaših web stranica potreban vam je html editor. Jedan od najpoznatijih i najboljih je Dreamweaver ali zbog svoje cijene ($400) nije pristupačan za početnike. Naravno mogu se koristiti i besplatni koji nisu mnogo lošiji od onih koje moramo plačati. U ovom slučaju sam odabrao KOMPOZER koji je jedan od boljih besplatnih editora iako vi možete izabrati editor po vašoj želji. Posjetite njihovu stranicu i besplatno ga skinite na svoj kompjuter. Pošto je kompresiran u .zip datoteku nakon skidanja (download) prvo ga morate raspakirati i nakon toga otvorite mapu, dvaput kliknete na ikonu kompozer.exe i možete ga koristiti. Editor će vam često trebati pa vam savjetujem da kad otvorite mapu kliknite desnim klikom na kompozer.exe i odaberite Send to – Desktop (create shortcut) kako bi na Desktopu (Radnoj površini) imali prečac do njega i na taj način skratili često traženje gdje se nalazi. http://izrada-web-stranice-hr.com
  • 19. Stranica19 od 53 __________________________________________________________________ 8 DIO Izrada Prve Stranice (index.html) Sad imate sve što vam je potrebno za izradu vaše prve web stranice pa možete krenuti tako da kliknete na svoju Kompozer ikonu i otvorite ga. Kada se Kompozer otvori, zatvorite mali prozor “Kompozer tips“ koji nam nije potreban. Sada Kompozer izgleda ovako: http://izrada-web-stranice-hr.com
  • 20. Stranica20 od 53 Na vrhu prozora vidite važne upute (File, Edit, View, Insert, Format, itd.) Ispod toga vidite nekoliko redova alatne trake (New, Open, Save, Publish itd.) Treba biti i panel na lijevoj strani vašeg zaslona s naslovom “Site Manager” ali ako ga nema možete ga paliti i gasiti tipkom F9 na vašoj tipkovnici. http://izrada-web-stranice-hr.com
  • 21. Stranica21 od 53 Na gornjoj slici vidite i veliki prozor na kojem piše “untitled“. Sada želim da steknete jednu naviku koja je vrlo važna kod izrade vaše prve stranice (indeks.html) i podstranica a to je da odmah upisujete naziv koje se pojavljuje na samom vrhu – lijevo na svakoj stranici kad ju otvorite u svom pregledniku. Taj dio okvira se zove “Naslovna treka“ (title bar). Evo jedan primjer za Google: Naslovna traka (title bar) je jedan od najvažnijih faktora za bolje rangiranje u tražilicama. Ono što vi upišete u title bar to će se na tražilicama pojaviti kao naslov linku prema vašoj stranici. Sada trebamo izraditi tekst koji ide u title bar. Kliknite na Format http://izrada-web-stranice-hr.com
  • 22. Stranica22 od 53 U padajučem meniu kliknite na Page Title and Properties Otvorit če se ovakav prozor: U title upišite naziv vaše stranice, ja sam u ovom slučaju nazvao stranicu “Moja prva stranica“ i pod jezik (Choose language) sam odabrao Hrvatski a Character set odaberite UTF-8. Kliknite OK i pogledajte nazivnu traku od Kompozera. Sada piše naziv vaše stranice: Prilikom izrade vaše web stranice obavezno upišite naziv svake podstranice jer ako to zaboravite u nazivnoj traci će pisati Untitled što baš ne izgleda profesionalno. Sada je vrijeme da napišemo mnogo sadržaja ali se prvo uvjerite da vam je na dnu stranice Kompozera namješteno na Normal http://izrada-web-stranice-hr.com
  • 23. Stranica23 od 53 Kopirao sam dio teksta sa svoje web stranice u Kompozer i to sad izgleda ovako 9 DIO Ispravno Spremanje Datoteka Sada je potrebno ispravno spremiti prvu stranicu. Vrlo je važno da kod izrade web stranice spremate svoju prvu stranicu, sve podstranice, slike i sve ono što namjeravate imati na web stranici u jednu mapu (folder) na svom kompjuteru. Prvo odredite mjesto gdje želite imati sve datoteke (npr. My Documents) i na tom mjestu izradite Novu Mapu (New Folder) i nazovite ju kako želite (npr. moja web stranica ili sl.) i u njoj izradite još jednu mapu koju nazovite “images“ (mapa za slike). Sada kad smo odredili mjesto gdje će se nalaziti sve datoteke možemo spremiti našu prvu stranicu koju smo izradili. U Kompozeru kliknite na File i u padajučem izborniku kliknite na Save As. http://izrada-web-stranice-hr.com
  • 24. Stranica24 od 53 Otvara se prozor: Što prikazuju brojevi od 1-4: 1. Prikazuje gdje će biti spremljena stranica koju smo izradili, u mom slučaju je to Disk E: i u njemu je nova prazna mapa po imenu “moja web stranica“ 2. Prikazuje naziv html dokumenta koji smo upisali prilikom izrade ove prve stranice (u mom slučaju Moja prva stranica) kao title ali taj naziv moramo promijeniti u index jer stranica koja se prva otvara je kao što vjerojatno znate HOME stranica (HOME page) a naziv za HOME stranicu UVIJEK mora biti indeks.html. Ovo morate zapamtiti jer ako ju nazovete drugim nazivom neče biti ispravno. Zbog toga brišemo postoječi naziv Moja prva stranica i upisujemo indeks http://izrada-web-stranice-hr.com
  • 25. Stranica25 od 53 3. Prikazuje da je to html dokument pa će naša HOME stranica imati naziv indeks.html 4. Sada možete kliknuti na Save i spremiti dokument Sada kad ste spremili još jednom pogledajte u Kompozerovu naslovnu traku (title bar) gdje možete vidjeti da Moja prva stranica nije nestalo a stranica je sada indeks.html tj. HOME. Vrlo je važno da zapamtite da vaša HOME stranica uvijek mora imati naziv index.html Ako ste odabrali nekoliko slika koje želite staviti na svoju web stranicu vrijeme je da ih spremite u mapu. Otvorite mapu u kojoj će biti svi dokumenti i otvorite mapu images koju ste izradili u njoj. Kopirajte sve slike koje želite imati na web stranici i spremite ih u tu mapu images. 10 DIO Slike, Veličina Slova I Boje Promjena Fonta Vratimo se na Kompozer i zatamnite cijeli tekst koji ste u njemu napisali. Kliknite na Format u menu baru na vrhu, u padajučem meniu kliknite na Font, pojaviti će se još jedan padajuči menu i u njemu odaberite font npr. Comic Sans MS. Zatamnjeni tekst će se automatski promjeniti u drugi font. http://izrada-web-stranice-hr.com
  • 26. Stranica26 od 53 Kliknite bilo gdje na Kompozeru da se vrati na nezatamnjeno i pogledajte tekst sa novim fontom (Comic Sans MS). Ako želite možete isprobati još nekoliko vrsta fonta. Sada ponovno zatamnite cijeli tekst i kliknite na Center u meniu na vrhu i pogledajte kako izgleda vaš tekst. Tekst je poravnat prema sredini Umetnite Slike Sada možemo početi sa postavljanjem jedne slike ispod napisanog teksta. Nadam se da ste pripremili nekoliko slika u mapi sa slikama (images) jer kao što sam rekao sve što želimo imati na svojoj web stranici mora biti u jednoj mapi. http://izrada-web-stranice-hr.com
  • 27. Stranica27 od 53 Na ovoj slici vidite da je moja mapa “moja web stranica“ izrađena na E: disku i u njoj je mapa “images“ gdje se nalazi nekoliko slika a u njoj se nalazi i upravo spremljena index datoteka. Sada u Kompozeru kliknite na Image Otvorit će se ovakav prozor http://izrada-web-stranice-hr.com
  • 28. Stranica28 od 53 Kliknite na Choose File ili na mapu kao na ovoj slici i otvorit će se novi prozor kao ovaj dole i u njemu dva puta kliknite na mapu images, klikom na sliku označite sliku koju želite i kliknite na Open. Sada vam se ponovno pojavljuje ovaj prozor ali s podacima o slici. Poželjno je u polje “Alternate text“ upisati opis slike a za SEO optimizaciju je dobro da to bude ključna riječ koju koristite za tu stranicu. http://izrada-web-stranice-hr.com
  • 29. Stranica29 od 53 Kliknite na OK i slika će se pojaviti ispod vašeg teksta u Kompozeru. Boja Pozadine i Boja Teksta Kliknite na Format i u padajučem meniu kliknite na Page Colors and Background. Otvorit će se ovakav prozor: Odaberite Use custom colors. Sada se pojavljuje prozor u kojem imamo pet tekstualnih okvira. http://izrada-web-stranice-hr.com
  • 30. Stranica30 od 53 Sada imate mogučnost izmjene boje teksta, boje link teksta, aktivnog link teksta, boju več posječenog linka i boju pozadine. Pokušajte promjeniti boju pozadine klikom na Background i odaberite boju koju želite kao pozadinu. Kliknite OK i ponovno OK i sada opet vidite vaš Kompozer sa tekstom koji ste napisali i novom bojom pozadine. http://izrada-web-stranice-hr.com
  • 31. Stranica31 od 53 11 DIO Izrada Linkova Sada ću vam pokazati kako se izrađuju linkovi prema ostalim stranicama (podstranicama) koje su na vašoj web lokaciji. Več sam govorio da je prva stranica HOME a sada će mo izraditi stranicu O Nama. Izrada je vrlo jednistavna. U Kompozeru kliknite ispid slike i zatim kliknite na Insert i u padajučem izborniku kliknite na Link. Otvorit će se ovakav prozor: U polje Link Text upišite HOME a u polje Link Location upišite URL adresu vaše prve stranice. Iako bi bilo dovoljno upisati samo “index.html“ bolje je upisivati cijeli URL tj. “http://vasastranica.com/index.html“ (naravno bez navodnika). Sada se u Kompozeru pojavio tekst HOME na kojeg možete kliknuti. Sada napravite razmak tako da na tastaturi stisnete space (razmak) i na isti način izradite link za podstranicu O Nama. Stranice koje imaju više od jedne riječi pišete na ova tri načina a vi odlučite koji želite: 1. onama.html 2. o-nama.html 3. o_nama.html Sada će vaš Kompozer tekst izgledati ovako: http://izrada-web-stranice-hr.com
  • 32. Stranica32 od 53 Izradili smo linkove prema HOME i O Nama stranicama a vi možete izraditi linkova koliko želite. Link Prema Drugoj Web Stranici Izrada linka prema drugoj web stranici je vrlo jednostavna. Napišite neki tekst i zatamnite riječi na koje želite da posjetioci kliknu da bi došli na tu web stranicu. Kliknite na “Link“ i upišite URL te stranice. Klikni “OK“. http://izrada-web-stranice-hr.com
  • 33. Stranica33 od 53 12 DIO Promjenite Veličinu Stranice Otvorite li svoju index.html (HOME) stranicu u vašem pregledniku (Mozilla, Opera, Explorer itd.) vidjet će te da je vaša stranica preko cijelog ekrana (monitora). Složit će te se da je to preširoko i takav izgled vaše stranice nije prihvatljiv. Potrebno je promjeniti veličinu kako bi bila ugodnija za oko i izgledala više profesionalno. To možemo promijeniti stvaranjem 'tablice' unutar ekrana. U ovoj tablici - mi će mo umetnuti sve sadržaje vaše web stranice. Na Kompozeru kliknite na New. Otvorit če se nova stranica (untitled). Kliknite na Insert i zatim u padajučem meniu odaberite Table. Otvorit če se novi prozor: Kliknite na Precisely i pojavljuje se ovaj prozor: http://izrada-web-stranice-hr.com
  • 34. Stranica34 od 53 Upišite u Rows i Columns broj 1 a u Width (širina) možete odabrati po vašoj želji između 650-800 pixels. Kliknite na OK. U Kompozeru se pojavljuje pravokutnik: Taj pravokutnik se nalazi s lijeve strane a mi ga moramo namjestiti da bude u centru. Kliknemo li 2 puta unutar pravokutnika otvorit če se prozor Table Properties u kojem je potrebno kliknuti na Table i zatim u Table Alignment gdje je namješteno na Left, odabrati Center. http://izrada-web-stranice-hr.com
  • 35. Stranica35 od 53 Kliknite OK i sada ste dobili vaš pravokutnik u centru vaše stranice. Prilikom pisanja vašeg teksta i ubacivanjem slika pravokutnik če se povečavati. Da bi promjenili boju pozadine potrebno je kliknuti na Format, zatim Page Colors and Background a zatim na Custom Color. Ovdje promjenite boju pozadine cijele stranice po vašoj želji a to je več opisano u “Boja Pozadine i Boja Teksta“. Nakon što odaberete boju cijele stranice možete odabrati boju pozadine pravokutnika gdje se nalazi vaš tekst. To možete jednostavno učiniti kliknete li 2 puta mišem unutar pravokutnika i kliknete na Table a zatim na kvadratić kod Background Color. http://izrada-web-stranice-hr.com
  • 36. Stranica36 od 53 Pojavljuje se ovakav prozor: Izaberite boju koju želite i kliknite OK. Odabrao sam tamno-sivu boju pozadine i svjetlo-sivu pozadinu tekst-područja: Nakon odabira boje pozadine možete početi pisati tekst i stavljati slike koje želite. Web Stranica Sa Zaglavljem i Podnožjem Opisat ću vam još jedan jednostavan način izrade vaše stranice ako želite imati neku sliku u zaglavlju (header), navigaciju vaše web stranice i podnožje (footer). http://izrada-web-stranice-hr.com
  • 37. Stranica37 od 53 Otvorite svoj Kompozer, otvorena je nova stranica bez imena (untitled) pa je potrebno izmjeniti title stranice. Kliknite na Format i u padajučem izborniku kliknite na Page Title and Properties. Otvara se sljedeči prozor u kojem je potrebno upisati novi naziv stranice i ako želite autor (Author), kratak opis (Description). Jezik stranice (Language) i Character set (UTF-8) je poželjno. U svom primjeru sam nazvao stranicu “Stranica sa Zaglavljem i Podnožjem“. Kliknite OK i spremite stranicu u određenu mapu (Folder) klikom na File i zatim odaberite Save As te upišite indeks.html ako želite da to bude vaša HOME stranica ili odaberite neki drugi naziv. Možete upisivati bilo koje nazive jer je ovo samo vježba a kasnije nakon što pročitate cijelu ovu e-knjigu počnite izradu svoje prve web stranice. http://izrada-web-stranice-hr.com
  • 38. Stranica38 od 53 Kliknite na Table, zatim na Precisely i upišite brojeve kao na slici: Rows: 4 Columns: 1 Width: 800 Kliknite OK i zatim spremite svoju stranicu klikom na Save. Sada če vaša stranica izgledati ovako: http://izrada-web-stranice-hr.com
  • 39. Stranica39 od 53 U mapi images morate imati jednu sliku (800X130 ili sl.) koju želite postaviti kao zaglavlje (Header). Kliknite unutar prvog redka i zatim kliknite Image nakon čega se otvara prozor u kojem je potrebno upisati mjesto gdje se ta slika nalazi a to je mapa images: Na stranici u Kompozeru se pojavljuje slika kao zaglavlje i vaša stranica izgleda mnogo bolje ;-) http://izrada-web-stranice-hr.com
  • 40. Stranica40 od 53 Kliknite unutar drugog redka i upišite imena stranica za koje želite izraditi navigaciju (navigation bar). Ja ču upisati: Home | Kontakt | O Nama Naravno potrebno je zatamniti Home i kliknuti na Link te upisati URL adresu za Home (indeks.html), Kontakt (kontakt.html) i O Nama (o-nama.html). Prilikom izrade vaše web stranice je potrebno upisati u navigaciju sve vaše podstranice kako bi se posjetitelji lakše snalazili. http://izrada-web-stranice-hr.com
  • 41. Stranica41 od 53 Sada stranica izgleda ovako: Kliknite unutar trečeg redka i upišite sadržaj vaše stranice i ubacite slike koje želite. Ostao nam je još četvrti redak u koji upisujemo što želimo ali najčešće se u podnožje upisuje sljedeće: “Copyright © 2011 vašastranica.com” Još malo izmjene boje teksta, boje poleđine i ovo je konačan rezultat: http://izrada-web-stranice-hr.com
  • 42. Stranica42 od 53 Ako vam se ne sviđa tekstualna, navigaciju možete izraditi sa slikama. Izaberute slike koje želite koristiti i na njima u Photoshopu ili Paint-u (imate ga u svom kompjuteru) napišite tekst koji želite. Evo primjer kako će navigacija izgledati na ovaj način: Za ovaj primjer nisam pisao tekst na slikama koje sam koristio. http://izrada-web-stranice-hr.com
  • 43. Stranica43 od 53 13 DIO Izrada Ostalih Stranica (Podstranica) Izrada vaših ostalih podstranica je vrlo jednostavna. Sve vaše stranice moraju imati isti predložak koji smo u ovoj e-knjizi izradili i sada je potrebno izraditi podstranice koje se razlikuju samo po sadržaju. Nakon što ste u Kompozeru izradili vašu Home (index.html) stranicu sada je potrebno da kliknete na File i u padajučem izborniku kliknite na Save As. Otvara se prozor u kojem je pod File Name potrebno upisati naziv podstranice (npr. kontakt.html). U vašoj mapi gdje se nalaze sve datoteke će se pojaviti datoteka kontakt.html. U Kompozeru kliknite na Open, odaberite kontakt.html i kliknite Open. U Kompozeru se otvorila vaša kontakt.html stranica koja ima isti tekst i title kao i index.html pa je sad potrebno to izmjeniti. Kliknite na Format i u padajučem meniu kliknite Page Title and Properties. Napišite novi Title (u ovom slučaju “Kontakt”) i kliknite OK. Izmjenite tekst i kliknite Save kako bi spremili promjene. http://izrada-web-stranice-hr.com
  • 44. Stranica44 od 53 Ovako sada izgleda moja Kontakt podstranica nakon izmjena koje sam opisao. Predložak je isti kao i kod Home stranice a razlikuje se u tekstu: Izradimo još O nama podstranicu koja se nalazi u navigaciji. Isti postupak: 1. Kliknite File, Save As i upišite u File Name “o-nama.html” (bez navodnika) 2. Kliknite Open, označite stranicu „o-nama.html“ i kliknite Open 3. Kliknite Format, Page Title and Properties i izmjenite Title (upišite “O Nama”) 4. Izmjenite tekst i kliknite Save 5. Podstranica O Nama je gotova http://izrada-web-stranice-hr.com
  • 45. Stranica45 od 53 Na ovaj način možete izraditi sve vaše podstranice. Kada ih otvorite u vašem pregledniku sve će imati isti predložak, navigaciju i podnožje a razlika je u sadržaju podstranice. Potreban je još jedan dodatak u HTML kodu koji je potrebno dodati na sljedeči način: Prilikom izrade prve Home stranice i svake podstranice u Kompozeru potrebno je kliknuti na Source koji se nalazi na dnu s lijeve strane. Klikom na Source će se otvoriti HTML kod vaše stranice gdje je potrebno na vrhu između <head> i </head> dodati meta tagove o kojima sam več govorio u 5 dijelu pod naslovom “Izaberite Ključne Riječi“. Meta tagovi izgledaju ovako: <head> <title>Naslov vaše stranice</title> <meta name="description" content="Kratak opis web stranice."> <meta name="keywords" content="ključne riječi razdvojene zarezom"> </head> Meta tag <title> več postoji a ispod njega moramo staviti meta tagove description i keywords. Nakon upisa kratkog opisa web stranice i ključnih riječi za vašu stranicu ili podstranicu u meta tagove spremite nove izmjene klikom na Save. Upisani meta tagovi u vašem HTML kodu izgledaju ovako: http://izrada-web-stranice-hr.com
  • 46. Stranica46 od 53 14 DIO Izaberite Besplatan Predložak (Template) Za one kojima je potreban profesionalan predložak (template) a nemaju vremena za izradu svog unikatnog predložka u jednom od HTML editora postoji jedan vrlo jednostavan način kako da izrade svoju web stranicu bez mnogo muke. Na Internetu se može nači na stotine vrlo dobro dizajniranih predložaka koje mogu besplatno skinuti na svoj kompjuter i s malim izmjenama teksta, slika, navigacije i sl. mogu imati vrlo lijepu i profesionalnu web stranicu. Evo kratak tutorial kako doči do jedne takve web stranice: 1. Pronađite i skinite jedan besplatan predložak na svoj kompjuter 2. Predlošci su obično u zip ili rar datoteci pa ih je potrebno raspakirati 3. Nakon što ste datoteku raspakirali možete vidjeti sve što je potrebno za tu web stranicu (index.html, style.css dokument, images mapu sa slikama i dr.) 4. Otvorite indeks.html datoteku u Kompozeru ili nekom drugom editoru 5. Izmjenite sadržaj stavljajuči svoj tekst i svoje slike 6. Izmjenite navigaciju tako da upišete svoju “Home“ stranicu i svoje podstranice 7. Ne zaboravite spremiti sve svoje izmjene klikom na “Save“ 8. Nakon svih izmjena imate gotovu index.html stranicu po svom ukusu 9. Izradite sve podstranice koje želite na isti način kako sam već opisao u ovoj e-knjizi 10. Ne zaboravite izmjeniti meta tagove (title, kratak opis stranice i ključne riječi) u HTML kodu 11. Postavite svoju web stranicu na svoj server putem FTP programa Vaša web stranica je gotova i spremna za posjetitelje. Imate li nekih pitanja ili vam je potrebna pomoć slobodno me kontaktirajte putem e-maila: mailto:info@izrada-web-stranice-hr.com http://izrada-web-stranice-hr.com
  • 47. Stranica47 od 53 15 DIO Objavite svoju Web Stranicu pomoću FTP-a Završili ste svoju prvu web stranicu i spremni ste ju podijeliti s ostatkom svijeta? Kao što sam vam to već opisao u ovoj e-knjizi za to vam je potrebna domena (ime vaše web stranice), hosting (smještaj svih datoteka) i FTP program (File Transfer Protocol - protokol za prijenos datoteka). Več sam napomenuo da sve vaše datoteke i slike koje želite imati na vašoj web stranici moraju biti smještene u jednu mapu na vašem kompjuteru. Osim što se lakše snalazite, razlog tome je i mnogo lakši prijenos podataka putem FTP programa sa vašeg kompjutera na vaš server i obratno. Za prijenos datoteka i slika ću vam predložiti jedan vrlo dobar, lagan za korištenje i naravno besplatan FTP program a to je FileZilla. FileZillu možete besplatno skinuti na svoj kompjuter na ovoj web stranici: http://filezilla-project.org/download.php?type=client Nakon skidanja FileZille na vaš kompjuter potrebno ju je instalirati. Prilikom instalacije možete odabrati Hrvatski jezik zbog lakšeg snalaženja. Nakon instalacije ste spremni za prijenos svih datoteka, mapa, slika i dr. sa vašeg kompjutera na server. Nakon instalacije i otvaranja FileZilla izgleda ovako: http://izrada-web-stranice-hr.com
  • 48. Stranica48 od 53 Navigacija na FileZilla: 1. Alatna Traka 2. Mjesto za upis vaših podataka 3. Prikazuje se prijenos i povezivanje sa poslužiteljem 4. Lijevi stupac prikazuje datoteke i direktorije na vašem kompjuteru 5. Desni stupac prikazuje datoteke i direktorije na vašem poslužitelju 6. Šesti prozor prikazuje datoteke koje se trenutno prenose s vašeg kompjutera na poslužitelj i obratno Povezivanje s Poslužiteljem (serverom) Da bi se uspješno povezali s poslužiteljem morate upisati svoje podatke koje ste dobili u emailu od svoje hosting kompanije. Na slici se vide mjesta gdje se upisuju vaši podaci: http://izrada-web-stranice-hr.com
  • 49. Stranica49 od 53 1. Nakon upisa vašeg poslužitelja, korisničkog imena, vaše lozinke i port-a (ostaviti prazno ili upisati 21) kliknite na Povezati i Filezilla će se povezati s vašim poslužiteljem 2. Ako je povezivanje uspješno u desnom prozoru (prozor 5) će se pojaviti mape koje su na vašem poslužitelju 3. U lijevom prozoru pronađite mapu na vašem kompjuteru u kojoj se nalaze sve datoteke, slike i dr. potrebno za vašu web stranicu 4. U desnom prozoru kliknite 2 puta na mapu public_html u koju je potrebno uploudati sve vaše html datoteke (index.html, kontakt.html, mapu sa slikama – images, itd.) 5. U lijevom prozoru kliknite desnim mišem na svaku datoteku koju želite prenijeti s vašeg kompjutera na vaš poslužitelj i u padajučem meniu kliknite na Isporučiti. 6. U prozoru 6 možete vidjeti datoteke koje se prenose i vrijeme koje je potrebno za to Orginalne postavke na FileZilla nije potrebno mijenjati. Nakon što je prijenos završen vaša web stranica je online i spremna za posjetitelje. http://izrada-web-stranice-hr.com
  • 50. Stranica50 od 53 16 DIO Prijava na Tražilice Sada kad je vaša web stranica online moramo ju prijaviti na najpoznatije tražilice (Google, Yahoo, Bing). Iako bi tražilice same pronašle vašu web stranicu mi možemo ubrzati taj proces ako ih sami prijavimo ali prilikom prijavljivanja nije potrebno prijavljivati sve podstranice već samo upišite URL vaše stranice a ostale podstranice će tražilice otkriti same. 1. Prijava na Google tražilicu: http://www.google.com/addurl/?continue=/addurl 2. Prijava na Yahoo tražilicu: http://siteexplorer.search.yahoo.com/submit 3. Prijava na Bing tražilicu: http://www.bing.com/webmaster/SubmitSitePage.aspx Napominjem da tražilicama treba određeno vrijeme kako bi procesuirale prijavu te vaša stranica neće biti odmah indeksirana. Budite strpljivi te s vremena na vrijeme provjerite ima li promjena. http://izrada-web-stranice-hr.com
  • 51. Stranica51 od 53 17 DIO SEO Optimizacija SEO optimizacija (Search Engine Optimization) je dio koji se bavi pozicioniranjem web stranica na tražilicama za ključne riječi koje najviše odgovaraju sadržaju stranica. 90% internet korisnika koristi tražilice da pronađu ono što ih interesira na internetu i ako je vaša web stranica ili blog kod traženja nekog pojma izlistana na prvoj stranici, dobra posjeta vam je zagarantirana. On-Site Optimizacija Kako bi nam SEO optimizacija bila uspješna vrlo je važno početi razmišljati o tome već pri samoj izradi web stranice (on-site optimizacija) o čemu sam već pisao u “Izaberite Ključne Riječi”. Poželjno je imati ključne riječi i u domeni koju izaberete i naravno najvažnije je imati mnogo unikatnog sadržaja koji ste vi napisali. Off-Site Optimizacija Off-site optimizacija je process koji nikada ne prestaje. U ovu vrstu SEO optimizacije spadaju povratni linkovi koji upučuju na vašu web stranicu. http://izrada-web-stranice-hr.com
  • 52. Stranica52 od 53 Što je više povratnih linkova prema vašoj stranici vaš PR će biti veči i pozicija na tražilicama će biti viša. Povratni linkovi mogu dolaziti s drugih web stranica, blogova, foruma itd. Svaki link se broji ali nije svaki link iste vrijednosti tj. mnogo je vrijedniji link sa web stranice koja ima istu temu i PR 3-10 od 10 linkova s web stranice koja ima različitu temu i PR 0. Povratne linkove možete razmjenjivati, kupovati, zamoliti vlasnika nekog bloga da napiše post i stavi link prema vašoj web stranici itd. Linkovi s web stranica kojima je tema klađenje, pornografija i dr. mogu naštetiti vašem PR pa nemojte razmjenjivati linkove s takvim stranicama. Više o SEO optimizaciji 18 DIO Završna Riječ Na samim počecima prilikom izrade svoje prve web stranice na netu sam pronašao mnoge knjige o izradi web stranice, seo optimizaciji i zaradi na internetu koje su bile na Engleskom jeziku i uglavnom su pisane kako bi čitatelje uputili na određene proizvode putem svog affiliate linka. Nisam pronašao knjigu gdje je objašnjeno kako početnik može izraditi svoju prvu web stranicu od početka do kraja i upučuje ga na najčešće greške koje početnici rade prilikom izrade svojih prvih web stranica. Nadam se da sam bio donekle zanimljiv i da ću barem jednoj osobi pomoći u izradi svoje prve web stranice i ako sam to uspio, ja sam zadovoljan jer to znači da će taj jedan imati posla i da će web imati uspješnu prodaju. Želim vam mnogo uspjeha u izradi vaše prve web stranice i zahvaljujem vam što ste pročitali ovu knjigu. http://izrada-web-stranice-hr.com
  • 53. Stranica53 od 53 Ako vam se svidjela ova knjiga slobodno je podjelite s prijateljima ili ponudite za download posjetiteljima vaših web stranica. Moje Web Stranice http://izrada-web-stranice-hr.com http://website2beginners.com http://diet-and-weight-loss.info Moji Blogovi http://web-tutoriali.info http://diet-and-weight-loss.info/blog http://blueprint-project.info http://easyonline-money.info http://izrada-web-stranice-hr.com