Izrada Web Stranice za Početnike

Izradite Sami Svoju Prvu Web Stranicu

Ova e-Knjiga je osnovni vodi za poetnike 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 Zapoeti Izradu Web Stranice? 4. Izaberite Temu 5. Izaberite Kljune Rijei 6. Izaberite Domenu i Hosting 7. Preuzmite svoj Web Editor 8. Izrada Prve Stranice (index.html) 9. Ispravno Spremanje Datoteka 10. Slike, Veliina Slova i Boje 11. Izrada Linkova 12. Promjenite Veliinu Stranice 13. Izrada Ostalih Stranica (Podstranica) 14. Izaberite Besplatan Predloak (Template) 15. Objavite svoju Web Stranicu pomou FTP-a 16. Prijava na Trailice 17. SEO Optimizacija 18. Zavrna Rije

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

Stranica3 od 53

1 DIO UVODU ovoj knjizi elim objasniti koji su koraci potrebni za stvaranje vae prve web stranice od samog poetka (Planiranja) pa do samog kraja tj. SEO Optimizacije vae web stranice kako bi dola meu top 10 na trailicama. elim istaknuti da je vrlo vano slijediti sve ove tutoriale prilikom izrade vae prve web stranice.

Vjerojatno sada na samom poetku mislite da to neete uspjeti i da je za izradu web stranice potrebno dugogodinje iskustvo i znanje html i php kodiranja, javascript i ostalih kodova ali uz pomo dananjih HTML editora sve je mnogo jednostavnije i potrebna je samo upornost i dobra volja. Naravno ova knjiga e vam pomoi u izradi vae prve web stranice za vae potrebe a ne web stranice kao Facebook ili MySpace. Prije tri godine kada sam poeo sa izradom svoje prve web stranice nisam ni sanjao da u pisati ovu knjigu, imati nekoliko web stranica i blogova, zaraivati pristojan dodatni prihod od njih stavljajui Google oglase i kao affiliate nudei razne proizvode za koje mi vlasnici plaaju postotak od prodaje. Na samom poetku sam kao i vi traio po netu knjige o HTML kodiranju, FTP programima, SEO optimizaciji i Zaradi na Internetu ali nijedna nije bila na naem jeziku i za potpune poetnike to me jako ivciralo i to je najvei razlog zato sam poeo pisati ovu knjigu.


Stranica4 od 53

Piem ovu knjigu iz jo jednog razloga a to je da vas odmah na samom poetku usmjerim na pravi put i da ne radite iste greke kao mnogi poetnici i kasnije lupaju glavom u zid i kreu ispoetka a dragocijeno vrijeme koje su potroili u izradi svojih stranica nemogu vratiti. Mislim na poetnike koji izrauju 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 vae kljune rijei. Primjer jedne takve domene je: vaekorisnikoime.besplatnadomena.com ili besplatnadomena.com/vaastranica. Da li je to domena na kojoj ste spremni izraditi svoju web stranicu i potroiti 1, 2 ili 3 godine za SEO optimizaciju i jednog dana zaprepateno ustanovite da vie ne postoji i da je sav va trud bio uzaludan jer se vlasnik te besplatne domene vie ne eli zamarati i odustaje od svog hostinga a vi nemate spremljen beckup svoje web stranice. Takav scenario sam osobno proivio i sav moj trud i uloeno vrijeme su baeni u ko za smee. Iako sam nekoliko puta kontaktirao vlasnika i traio beckup svoje web stranice, odgovora nije bilo. Naravno u ugovoru na koji obino ne obraamo puno panje prilikom registracije i kliknemo kao da smo ga proitali, lijepo je pisalo da na account moe biti ukinut i izbrisan bez razloga i bez ikakve obavjesti. Zbog takvog ili slinog scenarija proitajte ovu knjigu i na samom kraju imat e te svoju prvu funkcionalnu web stranicu s mnogo podstranica i to je najvanije znat e te kako se izrauje, dizajnira i objavljuje pa moete izraivati nove web stranice koliko elite.


Stranica5 od 53

Zarada na Internetu Zarada na Internetu je mogua i ako elite imati web stranicu kako bi zaradili nemojte misliti da e se to ostvariti na brz i jednostavan nain kliknuvi miem nekoliko puta i zaradili ste $5000. Na Internetu se moe mnogo zaraditi i mnogima je to primarna zarada jer su izgradili svoj online biznis ali veina ljudi ne zaradi na internetu ni centa jer olako shvaaju ovu vrstu zarade i oekuju brzu zaradu bez imalo uloenog truda i vremena pa kad vide da od toga nema nita odustaju.

Morate znati da je potrebno dosta vremena i upornosti da bi va online biznis radio kako treba i da bi vi poeli zaraivati. Naravno kao i u svaki drugi biznis morate uloiti i u ovaj jer bez ulaganja nema ni zarade pa raunajte da neto svog novca morate uloiti i u svoju edukaciju.

__________________________________________________________________


Stranica6 od 53

2 DIOTrebam li imati Vlastitu Web Stranicu?

Kao to i sami znate Internet se nikada ne gasi. Kad jednom vaa web stranica bude online biti e dostupna cijelom svijetu 24/7, 365 dana u godini. To znai da svi vai proizvodi, informacije tj. sve to nudite na vaim stranicama, biti e dostupno svima na ovom planetu. Ukoliko vas netko eli kontaktirati moi e to uiniti putem emaila i vi mu moete odgovoriti kad to elite.

Neograniene InformacijeNa vaoj web stranici nema ogranienja kao ogranieni broj rijei ili ogranien prostor. Internet vam daje neogranienu koliinu online prostora za izlog vaeg proizvoda ili usluge. Vaa web stranica moe imati samo jednu stranicu ili 10.000 stranica. To ovisi o vama i naravno o hostingu koji izaberete.


Stranica7 od 53

Morate imati kontrolu nad vaom web stranicom, a ne stavljati svoju sudbinu u ruke drugih. Razmislite o tome na minutu. Da li zaista elite traiti pomo (koja se naplauje) svaki put kad elite promijeniti tekst ili umetnuti novu sliku?

Odaberite Pametno Nemojte Koristiti Besplatan HostingNapravite vlastite web stranice mudro - ne padajte u ovu zamku Mnogi ljudi koji izrauju svoje web stranice pokuavaju proi to jeftinije. Iako je to razumljivo, ne razmiljaju da to moe biti tetno za njihove web stranice. Ako ste ozbiljno razmiljali o izradi vlastite web stranice, obratite pozornost na ovaj savjet: Ne koristite besplatni hosting! Veina ljudi ne prepoznaje velike nedostatke besplatnih web stranica. Ja samo govorim iz vlastitog iskustva jer elim da izbjegnete traumu nakon gubitka vae web stranice!

Problemi povezani s koritenjem besplatnog hostinga: 1. Ogranien web prostor 2. Ne mogu se ukljuiti interaktivne funkcije (rasprave zajednice, video igre, chat soba, i sl.) 3. Nije search-engine friendly to e zauzvrat ograniiti va promethttp://izrada-web-stranice-hr.com

Stranica8 od 53

4. Ne izgleda pouzdano: na alost, ako vaa web adresa glasi mojabesplatnastranica/besplatanhosting.com, vaa stranica nee izgledati vjerodostojno za veinu posjetitelja 5. Moda se iritantni pop-up oglasi ili banneri na vaim stranicama nee svidjeti vaim posjetiocima pa ju odlue odmah napustiti 6. Podrka je vrlo slaba ili je nema 7. Nemate mogunost svoje e-pote ([email protected]) Koje su Prednosti Plaenog Hostinga: 1. Lako je zapamtiti adresu web stranice 2. Nemate tue bannere i pop-up prozore 3. Stranica je bolje rangirana u trailicama 4. Imate vie kontrole na izgled i dojam svoje stranice 5. Vaa adresa e-pote ([email protected]) 6. Mnogo prostora za vau web stranicu 7. Vie fleksibilnosti za dizajn i funkcionalnost8. Dostupna pomo 24/7


Stranica9 od 53

3 DIO Kako Zapoeti Izradu Web Stranice?

Izrada web stranica nije tako teka kao to moda mislite. Uskoro moe biti online bez da znate komplicirane kompjuterske kodove. Moete odabrati izmeu 2 opcije. Izrada web stranica moe biti vrlo jednostavan zadatak ili moe ukljuivati ??i ovladavanje tekih raunalnih jezika i zatim pisanje HTML koda od nule. Ja pretpostavljam da ste odabrati laku opciju i ne elite gubiti vrijeme na uenje dugakog HTML koda. Postoje dvije stvari koje morate imati da bi izradili svoju web stranicu: 1) Naziv Domene Naziv domene je adresa vae web stranice koju ste vi odabrali. To je vaa web adresa ili URL ( npr. vaastranica.com). Izuzetno je vano da vam naziv domene sadri kljune rijei koje e ljudi koristiti kada trae vau stranicu. Idealno je da vaa domena bude odraz vae stranice, vae usluge ili servisa. Nakon registracije domene ona je vaa onoliko koliko vi to elite.


Stranica10 od 53

2) Web Hosting Sljedei korak je vaa on-line prisutnost a to prua web hosting. To je u osnovi tvrtka koja ima izuzetno snana raunala koja su trajno povezana na internet. Za mjesenu naknadu, web hosting e vam iznajmiti odreenu koliinu online prostora za vae web stranice. Nakon to se vaa web stranica nalazi na njihovom posluitelju, korisnici interneta irom svijeta e biti u mogunosti pristupiti vaoj web lokaciji. Web Alati Kada odaberete svoju domenu i hosting sljedei korak je dizajn vae web stranice. Potoji mnogo HTML editora potrebnih za izradu stranica a jedan od najpoznatijih je Dreamweaver koji moete kupiti za $400. Na sreu postoje HTML editori koji su besplatni i moete ih skinuti sa Interneta. To su Komposer i CoffeeCup. Vrlo su funkcionalni i lagani za koritenje.

Testiranje Preglednika (Browsera)

Iako ste moda izradili efektivnu i funkcionalnu web stranicu, nemoete birati u kojem pregledniku e ju posjetitelj pregledavati. Poto su preglednici razliiti morate testirati web stranicu u svim preglednicima. Sreom u veini sluajeva varijacija od jednog do drugog preglednika e biti zanemariva, ali ponekad odreeni preglednik moe sprijeiti posjetitelja da vidi vau web lokaciju. Jedini nain da budete sigurni da vae web stranice mogu biti pregledane u razliitim preglednicima je temeljito testiranje. Internet Preglednici kao Explorer, Netscape and Mozilla Firefox mogu biti jednostavno instalirani na va PC da bi testirali vae web stranice.


Stranica11 od 53

4 DIO Izaberite Temu

Kod izbora teme vano je da ne piete o svemu to vam padne na pamet u tom trenutku. Zato je to toliko vano? Zato jer trailice gledaju koja stranica ima koju temu i ako ste ju dobro napisali i redovito aurirali bolje e vas rangirati od stranica koje imaju vie tema na nekoliko stranica i nisu redovito aurirane. Dakle najbitnije je imati to vie sadraja (texta) o jednoj odreenoj temi i tada e trailice izdvojiti vau web stranicu od ostalih i ponuditi ljudima koji su upisali kljune rijei. Dakle ako netko upie u trailicu kljune rijei kako trenirati svog psa a na vaoj web stranici ili vaem blogu ima 20 ili vie stranica o treniranju pasa tada e vaa 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 vie nego da piete o kolaima o kojima neznate nita vie ve pojesti ih. Veina ljudi izrauje svoje stranice kako bi imali dodatnu zaradu . Da bi bilo zarade, trebate imati dovoljno posjeta a da bi imali dovoljno posjeta morate biti meu prvih 10 na trailicama za kljune rijei koje vode na vau stranicu.


Stranica12 od 53

Kada izaberete temu o kojoj e te pisati moete zaraivati kao affiliate tj. ponuditi posjetiteljima razne proizvode i zaraditi na proviziji (ClickBank, Amazon, Ebay i dr.). Moete prodavati prostor za oglaavae (Google Adsense, Bidvertiser i dr.) i zaraivati kada posjetitelji kliknu na ponuenu reklamu. Dakle najbitnije je ne kopirati druge i ne kopirati njihov text jer takve stranice brzo zavre u smeu tj. trailice ih ignoriraju jer su kopije. Imajte to vie svog unikatnog sadraja i nemojte biti nestrpljivi dok ekate da doete meu prvih 10 jer je to dosta spor proces i potreban je dobro obavljen SEO (Search Engine Optimization). Prve prave rezultate moete oekivati tek nakon nekoliko mjeseci.

__________________________________________________________________


Stranica13 od 53

5 DIO Izaberite Kljune Rijei

Trebate znati da je prvi i najvaniji korak u optimizaciji da pronadete relevantne kljune rijei za vau stranicu. Kljuna rije je ona rije koju korisnik upisuje u trailicu. Ako pogrijeite, i odaberete one kljune rijei koje nitko ne trai, uzalud e vam biti svaka optimizacija. Nemojte optimizirati svoje stranice za kljune rijei koje imaju vrlo jaku konkurenciju jer je gotovo nemogue da e vaa nova web stranica biti meu prvih 10 ako ostale stranice imaju PR 2-10. Analizirajte koliko je prosjeno duga prva reenica vae konkurencije. Uzmite u razmatranje barem prvih pet rezultata. Vaa prva reenica bi trebala imati otprilike isti broj rijei kao i visoko rangirani konkurenti. Istu stvar napravite sa meta tagovima i meta description. Postoji Googleov besplatni servis na kojem to moete uciniti, npr. https://adwords.google.com/select/KeywordToolExternal Tamo e te moi vidjeti koliko se ti pojmovi zaista koriste, a i dobit e te i pregled slinih pojmova koji se koriste. Prilikom pisanja pazite na koncetraciju kljunih rijei u vaem tekstu jer to takoe znatno utjee na poziciju vae web stranice . Nemojte ponavljati jedne te iste rijei ili koristiti kljune rijei i izraze koji se ne spomiju u vaem body tekstu, ovakav postupak optimiziranja stranica je pogrean i moe vas dovesti do situacije da budete banovani od strane Google pretraivaa .


Stranica14 od 53

Tekst koji piete mora biti prirodan tj. piite tekst za svoje posjetioce a ne za trailice ali znajte da je najbolje da vam se kljune rijei obavezno nalaze u prvoj i zadnjoj reenici. Morate paziti i na broj rijei po stranici jer Google broji rijei i najbolje je da ih imate oko 400-500 po stranici a ako ih imate vie pokuajte tu stranicu podijeliti na dvije i povezati ih linkom. Naravno ako imate vie podstranica morate za svaku posebno odabrati kljune rijei i opis koji se nalaze u meta tagovima. U sluaju da ne znate, meta tagovi su skriveni deskriptori koji se pojavljuju na poetku HTML koda, unutar vae oznake. Oni mogu biti nevidljivi vaim posjetiteljima, ali trailice ih mogu proitati. Oni se obino sastoje od naslova, opisa i kljunih rijei i oni izgledaju otprilike ovako: Naslov vae stranice Zbog zlostavljanja, mnoge trailice ne koriste ove oznake za rangiranje stranice, ali trebali biste ih i dalje ukljuivati jer ih koristi za prikaz informacija o vaoj web stranici.


Stranica15 od 53

U tagu koji se nalazi u html kodu je naslov koji obavezno mora sadravati kljune rijei ali ih morate imati i u naslovu i podnaslovima u samom tekstu koji u html kodu izgledaju ovako: Ovo je naslov Ovo je podnaslov1 Ovo je podnaslov2 Rezultat koji je vidljiv na vaoj stranici:

Ovo je naslovOvo je podnaslov1Ovo je podnaslov2

Koristite HTML naslove samo za Naslove. Nemojte ih nikada koristiti da bi tekst bio vei ili podebljan jer trailice koriste vae naslove da indexira strukturu vae web stranice. Naslov trebate koristiti kao glavni naslov, poslije njega dolazi kao podnaslov zatim manje vaan podnaslov itd.

_____________________________________________________________

6 DIO Izaberite Domenu i HostingPostoje dva osnovna koraka da bi vaa web stranica bila na Internetu. Rezervacija naziva domene je prvi jer ini adresu vaeg web suelja. Domena se sastoji od dva ili vie dijelova razdvojenih tokom, 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 -;


Stranica16 od 53

* sastoji se od najmanje 2, a najvie 65 znakova * prvi i zadnji znak u nizu nesmije biti -. Da bi registrirali domenu potrebna vam je kreditna kartica i itav posao moete zavriti za nekoliko minuta. Cijena domena nije velika, kree se oko $10 za godinu dana. Odabir pravog naziva domene zna ponekad predstavljati teku zadau 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 nali u glavnim trailicama (Google, Yahoo, itd.) najbolje je registrirati naziv domene tako da odaberete glavne kljune rijei tj. sadraj vae stranice. U osnovnim crtama reeno, domena ili naziv domene je naziv vaeg poduzea na Internetu. Ako imate automehaniarsku radionu, naziv vae domene bi mogao biti www.automehanicar.com, ako se bavite web dizajnom, mogua domena za vas bi bila www.webdizajn.com, ako popravljate kompjutere npr. www.popravak-kompjutera.com. S upotrebom pravih rijei u nazivu domene, potencijalnim klijentima e biti lake nai vae stranice, iako ne znaju tonu adresu, tzv. URL (Universal Resource Locator). Osim toga kad bi netko od njih traio na trailici kao to je Google s rijeima iz naziva domene postoji vea ansa da vas i tako nau, pod pretpostavkom da koristite prave rijei uz tematiku vaih stranica. Nakon to ste izabrali pravi naziv vae domene, morate provjeriti da li je ista slobodna ili zauzeta. To moete provjeriti na ovoj web stranici: HostMonster


Stranica17 od 53

Nakon to ste odabrali vau domenu spremni ste da odaberete svog web domaina. Web hosting vam daje prostor, razne alate i podrku za izradu vaih web stranica i e-rauna ([email protected]). Ovdje u vam dati uvid u osnovne znaajke i nadam se pomoi pri donoenju odluke. Odabir pravog hosting servisa nee biti teak jer u vam preporuiti 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 smjetene sve moje web stranice i blogovi. HostMonster prua hosting rjeenja za mnoge poslovne i osobne web stranice od 1996. Njihovi internet hosting paketi pomau poslovnim subjektima i pojedincima dobiti najbolju uslugu uz najmanje trokova. Sa HostMonsterom dobijete: * Najbolju slubu za korisnike * Kvalitetnu opremu * Maksimalan zajamen online status * Visoko funkcionalni alati za administraciju * Sigurne i pouzdane sigurnosne kopije * vrsta i potena poslovna praksa Iznenaujue je to sve dobijete za tako malu cijenu. Nema tvrtki na tritu koje nude tako velik paket za tako malu cijenu! HostMonster pouzdanosti HostMonster stalno poboljava stabilnost svojih servera i vrijeme neprekidnog rada. Danas su ve dodali toliko mogunosti, da na njihovim posluiteljima nikada ne pada sustav. to dobijete za $5.95/mj. * Besplatnu domenu (zauvijek) * Neogranien prostor * Neogranien transfer * Hosting za neogranien broj domena * Neogranien broj email adresa * Najbolji 24/7 suport


Stranica18 od 53

* Besplatan site builder *SSL, FTP, CGI, Ruby (RoR), Perl, PHP, MYSQL HostMonster koristi unaprijeenu verziju cPanel-a to nam govori da je to najbolji control panel softver koji je dostupan na dananjem tritu. HostMonster je vrlo dobar izbor za sve vrste web stranica.KLIKNITE OVDJE ZA PRIJAVU NA HOSTMONSTER.COM

7 DIO Preuzmite svoj HTML EditorZa izradu i dizajn vaih web stranica potreban vam je html editor. Jedan od najpoznatijih i najboljih je Dreamweaver ali zbog svoje cijene ($400) nije pristupaan za poetnike. Naravno mogu se koristiti i besplatni koji nisu mnogo loiji od onih koje moramo plaati. U ovom sluaju sam odabrao KOMPOZER koji je jedan od boljih besplatnih editora iako vi moete izabrati editor po vaoj elji. Posjetite njihovu stranicu i besplatno ga skinite na svoj kompjuter. Poto je kompresiran u .zip datoteku nakon skidanja (download) prvo ga morate raspakirati i nakon toga otvorite mapu, dvaput kliknete na ikonu kompozer.exe i moete 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 povrini) imali preac do njega i na taj nain skratili esto traenje gdje se nalazi.


Stranica19 od 53

__________________________________________________________________

8 DIO Izrada Prve Stranice (index.html)

Sad imate sve to vam je potrebno za izradu vae prve web stranice pa moete 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:


Stranica20 od 53

Na vrhu prozora vidite vane 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 vaeg zaslona s naslovom Site Manager ali ako ga nema moete ga paliti i gasiti tipkom F9 na vaoj tipkovnici.


Stranica21 od 53

Na gornjoj slici vidite i veliki prozor na kojem pie untitled. Sada elim da steknete jednu naviku koja je vrlo vana kod izrade vae 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 najvanijih faktora za bolje rangiranje u trailicama. Ono to vi upiete u title bar to e se na trailicama pojaviti kao naslov linku prema vaoj stranici. Sada trebamo izraditi tekst koji ide u title bar. Kliknite na Format


Stranica22 od 53

U padajuem meniu kliknite na Page Title and Properties Otvorit e se ovakav prozor:

U title upiite naziv vae stranice, ja sam u ovom sluaju 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 pie naziv vae stranice:

Prilikom izrade vae web stranice obavezno upiite naziv svake podstranice jer ako to zaboravite u nazivnoj traci e pisati Untitled to ba ne izgleda profesionalno. Sada je vrijeme da napiemo mnogo sadraja ali se prvo uvjerite da vam je na dnu stranice Kompozera namjeteno na Normal


Stranica23 od 53

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

9 DIO Ispravno Spremanje DatotekaSada je potrebno ispravno spremiti prvu stranicu. Vrlo je vano 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 moemo spremiti nau prvu stranicu koju smo izradili. U Kompozeru kliknite na File i u padajuem izborniku kliknite na Save As.


Stranica24 od 53

Otvara se prozor:

to prikazuju brojevi od 1-4: 1. Prikazuje gdje e biti spremljena stranica koju smo izradili, u mom sluaju 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 sluaju 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 nee biti ispravno. Zbog toga briemo postojei naziv Moja prva stranica i upisujemo indeks


Stranica25 od 53

3. Prikazuje da je to html dokument pa e naa HOME stranica imati naziv indeks.html 4. Sada moete kliknuti na Save i spremiti dokument Sada kad ste spremili jo jednom pogledajte u Kompozerovu naslovnu traku (title bar) gdje moete vidjeti da Moja prva stranica nije nestalo a stranica je sada indeks.html tj. HOME.

Vrlo je vano da zapamtite da vaa 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, Veliina Slova I Boje

Promjena FontaVratimo se na Kompozer i zatamnite cijeli tekst koji ste u njemu napisali. Kliknite na Format u menu baru na vrhu, u padajuem meniu kliknite na Font, pojaviti e se jo jedan padajui menu i u njemu odaberite font npr. Comic Sans MS. Zatamnjeni tekst e se automatski promjeniti u drugi font.


Stranica26 od 53

Kliknite bilo gdje na Kompozeru da se vrati na nezatamnjeno i pogledajte tekst sa novim fontom (Comic Sans MS). Ako elite moete 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 SlikeSada moemo poeti 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.


Stranica27 od 53

Na ovoj slici vidite da je moja mapa moja web stranica izraena 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


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 oznaite sliku koju elite i kliknite na Open.

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

Poeljno je u polje Alternate text upisati opis slike a za SEO optimizaciju je dobro da to bude kljuna rije koju koristite za tu stranicu.


Stranica29 od 53

Kliknite na OK i slika e se pojaviti ispod vaeg teksta u Kompozeru.

Boja Pozadine i Boja TekstaKliknite na Format i u padajuem 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.


Stranica30 od 53

Sada imate mogunost izmjene boje teksta, boje link teksta, aktivnog link teksta, boju ve posjeenog linka i boju pozadine. Pokuajte 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.


Stranica31 od 53

11 DIO Izrada LinkovaSada u vam pokazati kako se izrauju linkovi prema ostalim stranicama (podstranicama) koje su na vaoj 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 padajuem izborniku kliknite na Link. Otvorit e se ovakav prozor:

U polje Link Text upiite HOME a u polje Link Location upiite URL adresu vae 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 moete kliknuti. Sada napravite razmak tako da na tastaturi stisnete space (razmak) i na isti nain izradite link za podstranicu O Nama. Stranice koje imaju vie od jedne rijei piete na ova tri naina a vi odluite koji elite: 1. onama.html 2. o-nama.html 3. o_nama.html Sada e va Kompozer tekst izgledati ovako:


Stranica32 od 53

Izradili smo linkove prema HOME i O Nama stranicama a vi moete izraditi linkova koliko elite. Link Prema Drugoj Web Stranici Izrada linka prema drugoj web stranici je vrlo jednostavna. Napiite neki tekst i zatamnite rijei na koje elite da posjetioci kliknu da bi doli na tu web stranicu. Kliknite na Link i upiite URL te stranice. Klikni OK.


Stranica33 od 53

12 DIO Promjenite Veliinu StraniceOtvorite li svoju index.html (HOME) stranicu u vaem pregledniku (Mozilla, Opera, Explorer itd.) vidjet e te da je vaa stranica preko cijelog ekrana (monitora). Sloit e te se da je to preiroko i takav izgled vae stranice nije prihvatljiv. Potrebno je promjeniti veliinu kako bi bila ugodnija za oko i izgledala vie profesionalno. To moemo promijeniti stvaranjem 'tablice' unutar ekrana. U ovoj tablici - mi e mo umetnuti sve sadraje vae web stranice. Na Kompozeru kliknite na New. Otvorit e se nova stranica (untitled). Kliknite na Insert i zatim u padajuem meniu odaberite Table. Otvorit e se novi prozor:

Kliknite na Precisely i pojavljuje se ovaj prozor:


Stranica34 od 53

Upiite u Rows i Columns broj 1 a u Width (irina) moete odabrati po vaoj elji izmeu 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 namjeteno na Left, odabrati Center.


Stranica35 od 53

Kliknite OK i sada ste dobili va pravokutnik u centru vae stranice. Prilikom pisanja vaeg teksta i ubacivanjem slika pravokutnik e se poveavati. 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 vaoj elji a to je ve opisano u Boja Pozadine i Boja Teksta. Nakon to odaberete boju cijele stranice

moete odabrati boju pozadine pravokutnika gdje se nalazi va tekst. To moete jednostavno uiniti kliknete li 2 puta miem 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-podruja:

Nakon odabira boje pozadine moete poeti pisati tekst i stavljati slike koje elite.

Web Stranica Sa Zaglavljem i PodnojemOpisat u vam jo jedan jednostavan nain izrade vae stranice ako elite imati neku sliku u zaglavlju (header), navigaciju vae web stranice i podnoje (footer).


Stranica37 od 53

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

Otvara se sljedei 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 poeljno. U svom primjeru sam nazvao stranicu Stranica sa Zaglavljem i Podnojem. Kliknite OK i spremite stranicu u odreenu mapu (Folder) klikom na File i zatim odaberite Save As te upiite indeks.html ako elite da to bude vaa HOME stranica ili odaberite neki drugi naziv. Moete upisivati bilo koje nazive jer je ovo samo vjeba a kasnije nakon to proitate cijelu ovu e-knjigu ponite izradu svoje prve web stranice.


Stranica38 od 53

Kliknite na Table, zatim na Precisely i upiite brojeve kao na slici:

Rows: 4 Columns: 1 Width: 800 Kliknite OK i zatim spremite svoju stranicu klikom na Save. Sada e vaa stranica izgledati ovako:


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 vaa stranica izgleda mnogo bolje ;-)


Stranica40 od 53

Kliknite unutar drugog redka i upiite 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 vae web stranice je potrebno upisati u navigaciju sve vae podstranice kako bi se posjetitelji lake snalazili.


Stranica41 od 53

Sada stranica izgleda ovako:

Kliknite unutar treeg redka i upiite sadraj vae stranice i ubacite slike koje elite. Ostao nam je jo etvrti redak u koji upisujemo to elimo ali najee se u podnoje upisuje sljedee: Copyright 2011 vaastranica.com Jo malo izmjene boje teksta, boje poleine i ovo je konaan rezultat:


Stranica42 od 53

Ako vam se ne svia tekstualna, navigaciju moete izraditi sa slikama. Izaberute slike koje elite koristiti i na njima u Photoshopu ili Paint-u (imate ga u svom kompjuteru) napiite tekst koji elite. Evo primjer kako e navigacija izgledati na ovaj nain:

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


Stranica43 od 53

13 DIO Izrada Ostalih Stranica (Podstranica)Izrada vaih ostalih podstranica je vrlo jednostavna. Sve vae stranice moraju imati isti predloak koji smo u ovoj e-knjizi izradili i sada je potrebno izraditi podstranice koje se razlikuju samo po sadraju.

Nakon to ste u Kompozeru izradili vau Home (index.html) stranicu sada je potrebno da kliknete na File i u padajuem izborniku kliknite na Save As. Otvara se prozor u kojem je pod File Name potrebno upisati naziv podstranice (npr. kontakt.html). U vaoj 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 vaa kontakt.html stranica koja ima isti tekst i title kao i index.html pa je sad potrebno to izmjeniti. Kliknite na Format i u padajuem meniu kliknite Page Title and Properties. Napiite novi Title (u ovom sluaju Kontakt) i kliknite OK. Izmjenite tekst i kliknite Save kako bi spremili promjene.


Stranica44 od 53

Ovako sada izgleda moja Kontakt podstranica nakon izmjena koje sam opisao. Predloak 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 upiite u File Name o-nama.html (bez navodnika) 2. Kliknite Open, oznaite stranicu o-nama.html i kliknite Open 3. Kliknite Format, Page Title and Properties i izmjenite Title (upiite O Nama) 4. Izmjenite tekst i kliknite Save 5. Podstranica O Nama je gotova


Stranica45 od 53

Na ovaj nain moete izraditi sve vae podstranice. Kada ih otvorite u vaem pregledniku sve e imati isti predloak, navigaciju i podnoje a razlika je u sadraju podstranice. Potreban je jo jedan dodatak u HTML kodu koji je potrebno dodati na sljedei nain: 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 vae stranice gdje je potrebno na vrhu izmeu i dodati meta tagove o kojima sam ve govorio u 5 dijelu pod naslovom Izaberite Kljune Rijei. Meta tagovi izgledaju ovako: Naslov vae stranice Meta tag ve postoji a ispod njega moramo staviti meta tagove description i keywords. Nakon upisa kratkog opisa web stranice i kljunih rijei za vau stranicu ili podstranicu u meta tagove spremite nove izmjene klikom na Save. Upisani meta tagovi u vaem HTML kodu izgledaju ovako:


Stranica46 od 53

14 DIO Izaberite Besplatan Predloak (Template)Za one kojima je potreban profesionalan predloak (template) a nemaju vremena za izradu svog unikatnog predloka u jednom od HTML editora postoji jedan vrlo jednostavan nain kako da izrade svoju web stranicu bez mnogo muke. Na Internetu se moe nai na stotine vrlo dobro dizajniranih predloaka 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 doi do jedne takve web stranice: 1. Pronaite i skinite jedan besplatan predloak na svoj kompjuter 2. Predloci su obino u zip ili rar datoteci pa ih je potrebno raspakirati 3. Nakon to ste datoteku raspakirali moete 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 sadraj stavljajui svoj tekst i svoje slike 6. Izmjenite navigaciju tako da upiete 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 nain kako sam ve opisao u ovoj e-knjizi 10. Ne zaboravite izmjeniti meta tagove (title, kratak opis stranice i kljune rijei) u HTML kodu 11. Postavite svoju web stranicu na svoj server putem FTP programa Vaa web stranica je gotova i spremna za posjetitelje. Imate li nekih pitanja ili vam je potrebna pomo slobodno me kontaktirajte putem e-maila: mailto:[email protected]


Stranica47 od 53

15 DIO Objavite svoju Web Stranicu pomou FTP-aZavrili 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 vae web stranice), hosting (smjetaj svih datoteka) i FTP program (File Transfer Protocol - protokol za prijenos datoteka). Ve sam napomenuo da sve vae datoteke i slike koje elite imati na vaoj web stranici moraju biti smjetene u jednu mapu na vaem kompjuteru. Osim to se lake snalazite, razlog tome je i mnogo laki prijenos podataka putem FTP programa sa vaeg kompjutera na va server i obratno. Za prijenos datoteka i slika u vam predloiti jedan vrlo dobar, lagan za koritenje i naravno besplatan FTP program a to je FileZilla. FileZillu moete 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 moete odabrati Hrvatski jezik zbog lakeg snalaenja. Nakon instalacije ste spremni za prijenos svih datoteka, mapa, slika i dr. sa vaeg kompjutera na server. Nakon instalacije i otvaranja FileZilla izgleda ovako:


Stranica48 od 53

Navigacija na FileZilla:1. 2. 3. 4. 5. 6. Alatna Traka Mjesto za upis vaih podataka Prikazuje se prijenos i povezivanje sa posluiteljem Lijevi stupac prikazuje datoteke i direktorije na vaem kompjuteru Desni stupac prikazuje datoteke i direktorije na vaem posluitelju esti prozor prikazuje datoteke koje se trenutno prenose s vaeg kompjutera na posluitelj i obratno

Povezivanje s Posluiteljem (serverom)Da bi se uspjeno povezali s posluiteljem morate upisati svoje podatke koje ste dobili u emailu od svoje hosting kompanije. Na slici se vide mjesta gdje se upisuju vai podaci:


Stranica49 od 53

1. Nakon upisa vaeg posluitelja, korisnikog imena, vae lozinke i port-a (ostaviti prazno ili upisati 21) kliknite na Povezati i Filezilla e se povezati s vaim posluiteljem 2. Ako je povezivanje uspjeno u desnom prozoru (prozor 5) e se pojaviti mape koje su na vaem posluitelju 3. U lijevom prozoru pronaite mapu na vaem kompjuteru u kojoj se nalaze sve datoteke, slike i dr. potrebno za vau web stranicu 4. U desnom prozoru kliknite 2 puta na mapu public_html u koju je potrebno uploudati sve vae html datoteke (index.html, kontakt.html, mapu sa slikama images, itd.) 5. U lijevom prozoru kliknite desnim miem na svaku datoteku koju elite prenijeti s vaeg kompjutera na va posluitelj i u padajuem meniu kliknite na Isporuiti. 6. U prozoru 6 moete vidjeti datoteke koje se prenose i vrijeme koje je potrebno za to Orginalne postavke na FileZilla nije potrebno mijenjati. Nakon to je prijenos zavren vaa web stranica je online i spremna za posjetitelje.


Stranica50 od 53

16 DIO Prijava na Trailice

Sada kad je vaa web stranica online moramo ju prijaviti na najpoznatije trailice (Google, Yahoo, Bing). Iako bi trailice same pronale vau web stranicu mi moemo ubrzati taj proces ako ih sami prijavimo ali prilikom prijavljivanja nije potrebno prijavljivati sve podstranice ve samo upiite URL vae stranice a ostale podstranice e trailice otkriti same. 1. Prijava na Google trailicu: http://www.google.com/addurl/?continue=/addurl 2. Prijava na Yahoo trailicu: http://siteexplorer.search.yahoo.com/submit 3. Prijava na Bing trailicu: http://www.bing.com/webmaster/SubmitSitePage.aspx Napominjem da trailicama treba odreeno vrijeme kako bi procesuirale prijavu te vaa stranica nee biti odmah indeksirana. Budite strpljivi te s vremena na vrijeme provjerite ima li promjena.


Stranica51 od 53

17 DIO SEO Optimizacija

SEO optimizacija (Search Engine Optimization) je dio koji se bavi pozicioniranjem web stranica na trailicama za kljune rijei koje najvie odgovaraju sadraju stranica. 90% internet korisnika koristi trailice da pronau ono to ih interesira na internetu i ako je vaa web stranica ili blog kod traenja nekog pojma izlistana na prvoj stranici, dobra posjeta vam je zagarantirana.

On-Site OptimizacijaKako bi nam SEO optimizacija bila uspjena vrlo je vano poeti razmiljati o tome ve pri samoj izradi web stranice (on-site optimizacija) o emu sam ve pisao u Izaberite Kljune Rijei. Poeljno je imati kljune rijei i u domeni koju izaberete i naravno najvanije je imati mnogo unikatnog sadraja koji ste vi napisali.

Off-Site OptimizacijaOff-site optimizacija je process koji nikada ne prestaje. U ovu vrstu SEO optimizacije spadaju povratni linkovi koji upuuju na vau web stranicu.


Stranica52 od 53

to je vie povratnih linkova prema vaoj stranici va PR e biti vei i pozicija na trailicama e biti via. 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 razliitu temu i PR 0. Povratne linkove moete razmjenjivati, kupovati, zamoliti vlasnika nekog bloga da napie post i stavi link prema vaoj web stranici itd. Linkovi s web stranica kojima je tema klaenje, pornografija i dr. mogu natetiti vaem PR pa nemojte razmjenjivati linkove s takvim stranicama. Vie o SEO optimizaciji

18 DIO Zavrna RijeNa samim poecima prilikom izrade svoje prve web stranice na netu sam pronaao 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 odreene proizvode putem svog affiliate linka. Nisam pronaao knjigu gdje je objanjeno kako poetnik moe izraditi svoju prvu web stranicu od poetka do kraja i upuuje ga na najee greke koje poetnici rade prilikom izrade svojih prvih web stranica. Nadam se da sam bio donekle zanimljiv i da u barem jednoj osobi pomoi u izradi svoje prve web stranice i ako sam to uspio, ja sam zadovoljan jer to znai da e taj jedan imati posla i da e web imati uspjenu prodaju. elim vam mnogo uspjeha u izradi vae prve web stranice i zahvaljujem vam to ste proitali 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 vaih web stranica.

Moje Web Stranicehttp://izrada-web-stranice-hr.com http://website2beginners.com

Moj Bloghttp://web-tutoriali.info
