Your SlideShare is downloading. ×
Izradite Sami Svoju Prvu Web StranicuOva e-Knjiga je osnovni vodić za početnike koji žele sami            izraditi svoju p...
Stranica2 od 53          1. Uvod          2. Trebam li imati Vlastitu Web Stranicu?          3. Kako Započeti Izradu Web S...
Stranica3 od 53                                     1 DIO                                    UVODU ovoj knjizi želim objas...
Stranica4 od 53                            Pišem ovu knjigu iz još jednog razloga a to je da vas                          ...
Stranica5 od 53Zarada na Internetu Zarada na Internetu je moguča i ako želite imati web stranicu kako bi zaradilinemojte m...
Stranica6 od 53                                    2 DIO                    Trebam li imati Vlastitu Web Stranicu?Kao što ...
Stranica7 od 53Morate imati kontrolu nad vašom web stranicom, a ne stavljati svoju sudbinu uruke drugih. Razmislite o tome...
Stranica8 od 534. Ne izgleda pouzdano: na žalost, ako vaša web adresa glasimojabesplatnastranica/besplatanhosting.com, vaš...
Stranica9 od 53                                      3 DIO                      Kako Započeti Izradu Web Stranice?Izrada w...
Stranica10 od 532) Web HostingSljedeći korak je vaša on-line prisutnost a to pruža web hosting. To je u osnovitvrtka koja ...
Stranica11 od 53                                        4 DIO                                    Izaberite TemuKod izbora ...
Stranica12 od 53Kada izaberete temu o kojoj će te pisati možete zarađivati kao affiliate tj.ponuditi posjetiteljima razne ...
Stranica13 od 53                                            5 DIO                                    Izaberite Ključne Rij...
Stranica14 od 53Tekst koji pišete mora biti prirodan tj. pišite tekst za svoje posjetioce a ne zatražilice ali znajte da j...
Stranica15 od 53U <title> tagu koji se nalazi u html kodu je naslov koji obavezno mora sadržavatiključne riječi ali ih mor...
Stranica16 od 53* sastoji se od najmanje 2, a najviše 65 znakova* prvi i zadnji znak u nizu nesmije biti “-”.Da bi registr...
Stranica17 od 53Nakon što ste odabrali vašu domenu spremni ste da odaberete svog web domaćina.Web hosting vam daje prostor...
Stranica18 od 53* Besplatan site builder*SSL, FTP, CGI, Ruby (RoR), Perl, PHP, MYSQLHostMonster koristi unaprijeđenu verzi...
Stranica19 od 53__________________________________________________________________                                      8 ...
Stranica20 od 53Na vrhu prozora vidite važne upute (File, Edit, View, Insert, Format, itd.)Ispod toga vidite nekoliko redo...
Stranica21 od 53Na gornjoj slici vidite i veliki prozor na kojem piše “untitled“. Sada želim dasteknete jednu naviku koja ...
Stranica22 od 53U padajučem meniu kliknite na Page Title andPropertiesOtvorit če se ovakav prozor:U title upišite naziv va...
Stranica23 od 53Kopirao sam dio teksta sa svoje web stranice u Kompozer i to sad izgleda ovako                            ...
Stranica24 od 53Otvara se prozor:Što prikazuju brojevi od 1-4:    1. Prikazuje gdje će biti spremljena stranica koju smo i...
Stranica25 od 53    3. Prikazuje da je to html dokument pa će naša HOME stranica imati naziv       indeks.html    4. Sada ...
Stranica26 od 53Kliknite bilo gdje na Kompozeru da se vrati na nezatamnjeno i pogledajte tekst sanovim fontom (Comic Sans ...
Stranica27 od 53Na ovoj slici vidite da je moja mapa “moja web stranica“ izrađena na E: disku i unjoj je mapa “images“ gdj...
Stranica28 od 53Kliknite na Choose File ili na mapu kao na ovoj slici i otvorit će se novi prozorkao ovaj dole i u njemu d...
Stranica29 od 53Kliknite na OK i slika će se pojaviti ispod vašeg teksta u Kompozeru.Boja Pozadine i Boja TekstaKliknite n...
Stranica30 od 53Sada imate mogučnost izmjene boje teksta, boje link teksta, aktivnog link teksta,boju več posječenog linka...
Stranica31 od 53                                       11 DIO                                    Izrada LinkovaSada ću vam...
Stranica32 od 53Izradili smo linkove prema HOME i O Nama stranicama a vi možete izraditilinkova koliko želite.Link Prema D...
Stranica33 od 53                                       12 DIO                             Promjenite Veličinu StraniceOtvo...
Stranica34 od 53Upišite u Rows i Columns broj 1 a u Width (širina) možete odabrati po vašojželji između 650-800 pixels. Kl...
Stranica35 od 53Kliknite OK i sada ste dobili vaš pravokutnik u centru vaše stranice.Prilikom pisanja vašeg teksta i ubaci...
Stranica36 od 53Pojavljuje se ovakav prozor:Izaberite boju koju želite i kliknite OK.Odabrao sam tamno-sivu boju pozadine ...
Stranica37 od 53Otvorite svoj Kompozer, otvorena je nova stranica bez imena (untitled) pa jepotrebno izmjeniti title stran...
Stranica38 od 53Kliknite na Table, zatim na Precisely i upišite brojeve kao na slici:Rows: 4Columns: 1Width: 800Kliknite O...
Stranica39 od 53U mapi images morate imati jednu sliku (800X130 ili sl.) koju želite postaviti kaozaglavlje (Header).Klikn...
Stranica40 od 53Kliknite unutar drugog redka i upišite imena stranica za koje želite izraditinavigaciju (navigation bar).J...
Stranica41 od 53Sada stranica izgleda ovako:Kliknite unutar trečeg redka i upišite sadržaj vaše stranice i ubacite slike k...
Stranica42 od 53Ako vam se ne sviđa tekstualna, navigaciju možete izraditi sa slikama. Izaberuteslike koje želite koristit...
Stranica43 od 53                                      13 DIO                      Izrada Ostalih Stranica (Podstranica)Izr...
Stranica44 od 53Ovako sada izgleda moja Kontakt podstranica nakon izmjena koje sam opisao.Predložak je isti kao i kod Home...
Stranica45 od 53Na ovaj način možete izraditi sve vaše podstranice. Kada ih otvorite u vašempregledniku sve će imati isti ...
Stranica46 od 53                                     14 DIO                        Izaberite Besplatan Predložak (Template...
Stranica47 od 53                                       15 DIO                   Objavite svoju Web Stranicu pomoću FTP-a  ...
Stranica48 od 53    Navigacija na FileZilla:    1.   Alatna Traka    2.   Mjesto za upis vaših podataka    3.   Prikazuje ...
Stranica49 od 53    1. Nakon upisa vašeg poslužitelja, korisničkog imena, vaše lozinke i port-a       (ostaviti prazno ili...
Stranica50 od 53                                          16 DIO                                    Prijava na TražiliceSa...
Stranica51 od 53                                        17 DIO                                    SEO Optimizacija SEO opt...
Stranica52 od 53Što je više povratnih linkova prema vašoj stranici vaš PR će biti veči i pozicija natražilicama će biti vi...
Stranica53 od 53Ako vam se svidjela ova knjiga slobodno je podjelite s prijateljima iliponudite za download posjetiteljima...
Upcoming SlideShare
Loading in...5
×

Izradite sami svoju prvu web stranicu

18,254

Published on

Knjiga za početnike koji žele sami izraditi svoju prvu web stranicu.

Published in: Design, Business, Technology
1 Comment
7 Likes
Statistics
Notes
No Downloads
Views
Total Views
18,254
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
340
Comments
1
Likes
7
Embeds 0
No embeds

No notes for slide

Transcript of "Izradite sami svoju prvu web stranicu"

  1. 1. Izradite Sami Svoju Prvu Web StranicuOva e-Knjiga je osnovni vodić za početnike koji žele sami izraditi svoju prvu web stranicu By Kruno Kluković
  2. 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. 3. Stranica3 od 53 1 DIO UVODU ovoj knjizi želim objasniti koji su koraci potrebni za stvaranje vaše prve webstranice od samog početka (Planiranja) pa do samog kraja tj. SEO Optimizacijevaše web stranice kako bi došla među top 10 na tražilicama. Želim istaknuti da jevrlo 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 izraduweb stranice potrebno dugogodišnje iskustvo i znanje html i php kodiranja,javascript i ostalih kodova ali uz pomoć današnjih HTML editora sve je mnogojednostavnije i potrebna je samo upornost i dobra volja. Naravno ova knjiga čevam pomoći u izradi vaše prve web stranice za vaše potrebe a ne web stranicekao Facebook ili MySpace.Prije tri godine kada sam počeo sa izradom svoje prve web stranice nisam nisanjao da ću pisati ovu knjigu, imati nekoliko web stranica i blogova, zarađivatipristojan dodatni prihod od njih stavljajuči Google oglase i kao affiliate nudećirazne 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, FTPprogramima, SEO optimizaciji i Zaradi na Internetu ali nijedna nije bila na našemjeziku i za potpune početnike što me jako živciralo i to je največi razlog zaštosam počeo pisati ovu knjigu.http://izrada-web-stranice-hr.com
  4. 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 nazivima 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, 2ili 3 godine za SEO optimizaciju i jednog dana zaprepašteno ustanovite da više nepostoji 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 webstranice.Takav scenario sam osobno proživio i sav moj trud i uloženo vrijeme su bačeni ukoš za smeče. Iako sam nekoliko puta kontaktirao vlasnika i tražio beckup svojeweb stranice, odgovora nije bilo. Naravno u ugovoru na koji obično ne obračamopuno pažnje prilikom registracije i kliknemo kao da smo ga pročitali, lijepo jepisalo da naš account može biti ukinut i izbrisan bez razloga i bez ikakveobavjesti.Zbog takvog ili sličnog scenarija pročitajte ovu knjigu i na samom kraju imat će tesvoju prvu funkcionalnu web stranicu s mnogo podstranica i što je najvažnijeznat će te kako se izrađuje, dizajnira i objavljuje pa možete izrađivati nove webstranice koliko želite.http://izrada-web-stranice-hr.com
  5. 5. Stranica5 od 53Zarada na Internetu Zarada na Internetu je moguča i ako želite imati web stranicu kako bi zaradilinemojte misliti da će se to ostvariti na brz i jednostavan način kliknuvši mišemnekoliko puta i zaradili ste $5000. Na Internetu se može mnogo zaraditi i mnogimaje to primarna zarada jer su izgradili svoj online biznis ali večina ljudi ne zaradina internetu ni centa jer olako shvačaju ovu vrstu zarade i očekuju brzu zaradu bezimalo 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 radiokako treba i da bi vi počeli zarađivati. Naravno kao i u svaki drugi biznis morateuložiti i u ovaj jer bez ulaganja nema ni zarade pa računajte da nešto svog novcamorate uložiti i u svoju edukaciju.__________________________________________________________________http://izrada-web-stranice-hr.com
  6. 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 stranicabude online biti će dostupna cijelom svijetu 24/7, 365 dana u godini. To znači dasvi vaši proizvodi, informacije tj. sve što nudite na vašim stranicama, biti ćedostupno svima na ovom planetu.Ukoliko vas netko želi kontaktirati moći će to učiniti putem emaila i vi mu možeteodgovoriti kad to želite.Neograničene InformacijeNa vašoj web stranici nema ograničenja kao ograničeni broj riječi ili ograničenprostor. Internet vam daje neograničenu količinu online prostora za izlog vašegproizvoda ili usluge. Vaša web stranica može imati samo jednu stranicu ili 10.000stranica. To ovisi o vama i naravno o hostingu koji izaberete.http://izrada-web-stranice-hr.com
  7. 7. Stranica7 od 53Morate imati kontrolu nad vašom web stranicom, a ne stavljati svoju sudbinu uruke drugih. Razmislite o tome na minutu. Da li zaista želite tražiti pomoć (koja senaplaćuje) svaki put kad želite promijeniti tekst ili umetnuti novu sliku?Odaberite Pametno – Nemojte Koristiti Besplatan HostingNapravite vlastite web stranice mudro - ne padajte u ovu zamkuMnogi ljudi koji izrađuju svoje web stranice pokušavaju proći što jeftinije. Iako jeto 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 naovaj savjet:Ne koristite besplatni hosting!Većina ljudi ne prepoznaje velike nedostatke besplatnih web stranica. Ja samogovorim iz vlastitog iskustva jer želim da izbjegnete traumu nakon gubitka vašeweb stranice!Problemi povezani s korištenjem besplatnog hostinga:1. Ograničen web prostor2. Ne mogu se uključiti interaktivne funkcije (rasprave zajednice, video igre, chatsoba, i sl.)3. Nije search-engine friendly što će zauzvrat ograničiti vaš promethttp://izrada-web-stranice-hr.com
  8. 8. Stranica8 od 534. Ne izgleda pouzdano: na žalost, ako vaša web adresa glasimojabesplatnastranica/besplatanhosting.com, vaša stranica neće izgledativjerodostojno za većinu posjetitelja5. Možda se iritantni pop-up oglasi ili banneri na vašim stranicama neće svidjetivašim posjetiocima pa ju odluče odmah napustiti6. Podrška je vrlo slaba ili je nema7. Nemate mogučnost svoje e-pošte (vi@vašadomena.com)Koje su Prednosti Plačenog Hostinga:1. Lako je zapamtiti adresu web stranice2. Nemate tuđe bannere i pop-up prozore3. Stranica je bolje rangirana u tražilicama4. Imate više kontrole na izgled i dojam svoje stranice5. Vaša adresa e-pošte (vi@vašadomena.com)6. Mnogo prostora za vašu web stranicu7. Više fleksibilnosti za dizajn i funkcionalnost8. Dostupna pomoć 24/7http://izrada-web-stranice-hr.com
  9. 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 onlinebez da znate komplicirane kompjuterske kodove.Možete odabrati između 2 opcije. Izrada web stranica može biti vrlo jednostavanzadatak ili može uključivati ??i ovladavanje teških računalnih jezika i zatimpisanje 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 DomeneNaziv domene je adresa vaše web stranice koju ste vi odabrali. To je vaša “webadresa” ili “URL” ( npr. vašastranica.com). Izuzetno je važno da vam nazivdomene sadrži ključne riječi koje će ljudi koristiti kada traže vašu stranicu. Idealnoje 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. 10. Stranica10 od 532) Web HostingSljedeći korak je vaša on-line prisutnost a to pruža web hosting. To je u osnovitvrtka koja ima izuzetno snažna računala koja su trajno povezana na internet. Zamjesečnu naknadu, web hosting će vam iznajmiti određenu količinu onlineprostora za vaše web stranice. Nakon što se vaša web stranica nalazi na njihovomposlužitelju, korisnici interneta širom svijeta će biti u mogućnosti pristupiti vašojweb lokaciji.Web AlatiKada 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 najpoznatijihje Dreamweaver koji možete kupiti za $400. Na sreču postoje HTML editori kojisu 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 ukojem pregledniku će ju posjetitelj pregledavati. Pošto su preglednici različitimorate testirati web stranicu u svim preglednicima.Srećom u većini slučajeva varijacija od jednog do drugog preglednika će bitizanemariva, ali ponekad određeni preglednik može spriječiti posjetitelja da vidivašu web lokaciju. Jedini način da budete sigurni da vaše web stranice mogu bitipregledane u različitim preglednicima je temeljito testiranje.Internet Preglednici kao Explorer, Netscape and Mozilla Firefox mogu bitijednostavno instalirani na vaš PC da bi testirali vaše web stranice.http://izrada-web-stranice-hr.com
  11. 11. Stranica11 od 53 4 DIO Izaberite TemuKod izbora teme važno je da ne pišete o svemu što vam padne na pamet u tomtrenutku. Zašto je to toliko važno? Zato jer tražilice gledaju koja stranica ima kojutemu i ako ste ju dobro napisali i redovito ažurirali bolje će vas rangirati odstranica 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 ćetraž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šojweb stranici ili vašem blogu ima 20 ili više stranica o treniranju pasa tada će vašastranica 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 negoda 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 bilozarade, trebate imati dovoljno posjeta a da bi imali dovoljno posjeta morate bitimeđu prvih 10 na tražilicama za “ključne riječi” koje vode na vašu stranicu.http://izrada-web-stranice-hr.com
  12. 12. Stranica12 od 53Kada 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 stranicebrzo 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 dadođ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 nakonnekoliko mjeseci.__________________________________________________________________http://izrada-web-stranice-hr.com
  13. 13. Stranica13 od 53 5 DIO Izaberite Ključne RiječiTrebate znati da je prvi i najvažniji korak u optimizaciji da pronadete relevantneključne riječi za vašu stranicu. Ključna riječ je ona riječ koju korisnik upisuje utraž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 jakukonkurenciju jer je gotovo nemoguče da će vaša nova web stranica biti među prvih10 ako ostale stranice imaju PR 2-10.Analizirajte koliko je prosječno duga prva rečenica vaše konkurencije. Uzmite urazmatranje barem prvih pet rezultata.Vaša prva rečenica bi trebala imati otprilike isti broj riječi kao i visoko rangiranikonkurenti.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/KeywordToolExternalTamo će te moči vidjeti koliko se ti pojmovi zaista koriste, a i dobit će te i pregledsličnih pojmova koji se koriste.Prilikom pisanja pazite na koncetraciju ključnih riječi u vašem tekstu jer to takođeznatno utječe na poziciju vaše web stranice . Nemojte ponavljati jedne te iste riječiili koristiti ključne riječi i izraze koji se ne spomiju u vašem body tekstu, ovakavpostupak optimiziranja stranica je pogrešan i može vas dovesti do situacije dabudete banovani od strane Google pretraživača .http://izrada-web-stranice-hr.com
  14. 14. Stranica14 od 53Tekst koji pišete mora biti prirodan tj. pišite tekst za svoje posjetioce a ne zatražilice ali znajte da je najbolje da vam se ključne riječi obavezno nalaze u prvoj izadnjoj rečenici.Morate paziti i na broj riječi po stranici jer Google broji riječi i najbolje je da ihimate oko 400-500 po stranici a ako ih imate više pokušajte tu stranicu podijelitina dvije i povezati ih linkom.Naravno ako imate više podstranica morate za svaku posebno odabrati ključneriječi i opis koji se nalaze u meta tagovima.U slučaju da ne znate, meta tagovi su skriveni deskriptori koji se pojavljuju napočetku HTML koda, unutar vaše oznake. Oni mogu biti nevidljivi vašimposjetiteljima, ali tražilice ih mogu pročitati.Oni se obično sastoje od naslova, opisa i ključnih riječi i oni izgledaju otprilikeovako:<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 webstranici.http://izrada-web-stranice-hr.com
  15. 15. Stranica15 od 53U <title> tagu koji se nalazi u html kodu je naslov koji obavezno mora sadržavatiključne riječi ali ih morate imati i u naslovu i podnaslovima u samom tekstu koji uhtml 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 naslovOvo je podnaslov1Ovo je podnaslov2Koristite HTML naslove samo za “Naslove”. Nemojte ih nikada koristiti da bitekst bio veči ili podebljan jer tražilice koriste vaše naslove da indexira strukturuvaše web stranice.<h1> Naslov trebate koristiti kao glavni naslov, poslije njega dolazi <h2> kaopodnaslov zatim manje važan <h3> podnaslov itd._____________________________________________________________ 6 DIO Izaberite Domenu i HostingPostoje dva osnovna koraka da bi vaša web stranica bila na Internetu. Rezervacijanaziva domene je prvi jer čini adresu vašeg web sučelja. Domena se sastoji od dvaili više dijelova razdvojenih točkom, npr. www.moja-domena.comDrugi 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 engleskeabecede, znamenke “0”-”9” i znak “-”;http://izrada-web-stranice-hr.com
  16. 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žetezavršiti za nekoliko minuta. Cijena domena nije velika, kreče se oko $10 zagodinu dana.Odabir pravog naziva domene zna ponekad predstavljati tešku zadaću za sve noveInternet korisnike. Često se zna dogoditi da korisnici nazivaju svoje domene poimenu ljubimca, djetetu ili po nekoj drugoj dragoj osobi.Da bi se našli u glavnim tražilicama (Google, Yahoo, itd.) najbolje je registriratinaziv 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 naInternetu.Ako imate automehaničarsku radionu, naziv vaše domene bi mogao biti“www.automehanicar.com”, ako se bavite web dizajnom, moguća domena za vasbi 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šenaći vaše stranice, iako ne znaju točnu adresu, tzv. URL (Universal ResourceLocator). Osim toga kad bi netko od njih tražio na tražilici kao što je Google sriječima iz naziva domene postoji veća šansa da vas i tako nađu, podpretpostavkom da koristite prave riječi uz tematiku vaših stranica.Nakon što ste izabrali pravi naziv vaše domene, morate provjeriti da li je istaslobodna ili zauzeta.To možete provjeriti na ovoj web stranici: HostMonsterhttp://izrada-web-stranice-hr.com
  17. 17. Stranica17 od 53Nakon š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 ie-računa (vi@vašadomena.com). Ovdje ću vam dati uvid u osnovne značajke inadam se pomoći pri donošenju odluke.Odabir pravog hosting servisa neće biti težak jer ću vam preporučiti ovaj koji jakoristim 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 webstranice i blogovi.HostMonster pruža hosting rješenja za mnoge poslovne i osobne web stranice od1996. Njihovi internet hosting paketi pomažu poslovnim subjektima i pojedincimadobiti 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 praksaIznenađujuće je što sve dobijete za tako malu cijenu. Nema tvrtki na tržištu kojenude tako velik paket za tako malu cijenu!HostMonster pouzdanostiHostMonster stalno poboljšava stabilnost svojih servera i vrijeme neprekidnograda. Danas su već dodali toliko mogućnosti, da na njihovim poslužiteljima nikadane 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 suporthttp://izrada-web-stranice-hr.com
  18. 18. Stranica18 od 53* Besplatan site builder*SSL, FTP, CGI, Ruby (RoR), Perl, PHP, MYSQLHostMonster koristi unaprijeđenu verziju cPanel-a što nam govori da je to najboljicontrol 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 EditorZa izradu i dizajn vaših web stranica potreban vam je html editor. Jedan odnajpoznatijih i najboljih je Dreamweaver ali zbog svoje cijene ($400) nijepristupačan za početnike. Naravno mogu se koristiti i besplatni koji nisu mnogološiji od onih koje moramo plačati. U ovom slučaju sam odabrao KOMPOZERkoji 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 jekompresiran u .zip datoteku nakon skidanja (download) prvo ga morate raspakiratii nakon toga otvorite mapu, dvaput kliknete na ikonu kompozer.exe i možete gakoristiti.Editor će vam često trebati pa vam savjetujem da kad otvorite mapu kliknitedesnim 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. 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žetekrenuti tako da kliknete na svoju Kompozer ikonu i otvorite ga.Kada se Kompozer otvori, zatvorite mali prozor “Kompozer tips“ koji nam nijepotreban.Sada Kompozer izgleda ovako:http://izrada-web-stranice-hr.com
  20. 20. Stranica20 od 53Na 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” aliako ga nema možete ga paliti i gasiti tipkom F9 na vašoj tipkovnici.http://izrada-web-stranice-hr.com
  21. 21. Stranica21 od 53Na gornjoj slici vidite i veliki prozor na kojem piše “untitled“. Sada želim dasteknete 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 nasamom vrhu – lijevo na svakoj stranici kad ju otvorite u svom pregledniku. Taj diookvira se zove “Naslovna treka“ (title bar).Evo jedan primjer za Google:Naslovna traka (title bar) je jedan od najvažnijih faktora za bolje rangiranje utražilicama. Ono što vi upišete u title bar to će se na tražilicama pojaviti kaonaslov linku prema vašoj stranici.Sada trebamo izraditi tekst koji ide u title bar.Kliknite na Formathttp://izrada-web-stranice-hr.com
  22. 22. Stranica22 od 53U padajučem meniu kliknite na Page Title andPropertiesOtvorit č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 aCharacter 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 jerako to zaboravite u nazivnoj traci će pisati Untitled što baš ne izgledaprofesionalno.Sada je vrijeme da napišemo mnogo sadržaja ali se prvo uvjerite da vam je na dnustranice Kompozera namješteno na Normalhttp://izrada-web-stranice-hr.com
  23. 23. Stranica23 od 53Kopirao 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 važno da kod izrade webstranice spremate svoju prvu stranicu, sve podstranice, slike i sve ono štonamjeravate imati na web stranici u jednu mapu (folder) na svom kompjuteru.Prvo odredite mjesto gdje želite imati sve datoteke (npr. My Documents) i na tommjestu izradite Novu Mapu (New Folder) i nazovite ju kako želite (npr. moja webstranica ili sl.) i u njoj izradite još jednu mapu koju nazovite “images“ (mapa zaslike).Sada kad smo odredili mjesto gdje će se nalaziti sve datoteke možemo spremitinaš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. 24. Stranica24 od 53Otvara 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 indekshttp://izrada-web-stranice-hr.com
  25. 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 dokumentSada kad ste spremili još jednom pogledajte u Kompozerovu naslovnu traku (titlebar) gdje možete vidjeti da Moja prva stranica nije nestalo a stranica je sadaindeks.html tj. HOME.Vrlo je važno da zapamtite da vaša HOME stranica uvijek mora imati nazivindex.htmlAko ste odabrali nekoliko slika koje želite staviti na svoju web stranicu vrijeme jeda ih spremite u mapu. Otvorite mapu u kojoj će biti svi dokumenti i otvorite mapuimages koju ste izradili u njoj. Kopirajte sve slike koje želite imati na web stranicii spremite ih u tu mapu images. 10 DIO Slike, Veličina Slova I BojePromjena FontaVratimo 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 SansMS. Zatamnjeni tekst će se automatski promjeniti u drugi font.http://izrada-web-stranice-hr.com
  26. 26. Stranica26 od 53Kliknite bilo gdje na Kompozeru da se vrati na nezatamnjeno i pogledajte tekst sanovim fontom (Comic Sans MS). Ako želite možete isprobati još nekoliko vrstafonta.Sada ponovno zatamnite cijeli tekst i kliknite na Center u meniu na vrhu ipogledajte kako izgleda vaš tekst. Tekst je poravnat prema srediniUmetnite SlikeSada možemo početi sa postavljanjem jedne slike ispod napisanog teksta. Nadamse da ste pripremili nekoliko slika u mapi sa slikama (images) jer kao što samrekao sve što želimo imati na svojoj web stranici mora biti u jednoj mapi.http://izrada-web-stranice-hr.com
  27. 27. Stranica27 od 53Na ovoj slici vidite da je moja mapa “moja web stranica“ izrađena na E: disku i unjoj je mapa “images“ gdje se nalazi nekoliko slika a u njoj se nalazi i upravospremljena index datoteka.Sada u Kompozeru kliknite na ImageOtvorit će se ovakav prozorhttp://izrada-web-stranice-hr.com
  28. 28. Stranica28 od 53Kliknite na Choose File ili na mapu kao na ovoj slici i otvorit će se novi prozorkao ovaj dole i u njemu dva puta kliknite na mapu images, klikom na slikuoznač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 jedobro da to bude ključna riječ koju koristite za tu stranicu.http://izrada-web-stranice-hr.com
  29. 29. Stranica29 od 53Kliknite na OK i slika će se pojaviti ispod vašeg teksta u Kompozeru.Boja Pozadine i Boja TekstaKliknite na Format i u padajučem meniu kliknite na Page Colors andBackground. Otvorit će se ovakav prozor:Odaberite Use custom colors. Sada se pojavljuje prozor u kojem imamo pettekstualnih okvira.http://izrada-web-stranice-hr.com
  30. 30. Stranica30 od 53Sada 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š Kompozersa tekstom koji ste napisali i novom bojom pozadine.http://izrada-web-stranice-hr.com
  31. 31. Stranica31 od 53 11 DIO Izrada LinkovaSada ć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 stranicaHOME a sada će mo izraditi stranicu O Nama.Izrada je vrlo jednistavna. U Kompozeru kliknite ispid slike i zatim kliknite naInsert 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 adresuvaše prve stranice. Iako bi bilo dovoljno upisati samo “index.html“ bolje jeupisivati cijeli URL tj. “http://vasastranica.com/index.html“ (naravno beznavodnika). 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činizradite link za podstranicu O Nama. Stranice koje imaju više od jedne riječipišete na ova tri načina a vi odlučite koji želite:1. onama.html2. o-nama.html3. o_nama.htmlSada će vaš Kompozer tekst izgledati ovako:http://izrada-web-stranice-hr.com
  32. 32. Stranica32 od 53Izradili smo linkove prema HOME i O Nama stranicama a vi možete izraditilinkova koliko želite.Link Prema Drugoj Web StraniciIzrada linka prema drugoj web stranici je vrlo jednostavna. Napišite neki tekst izatamnite 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. 33. Stranica33 od 53 12 DIO Promjenite Veličinu StraniceOtvorite 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 nijeprihvatljiv. Potrebno je promjeniti veličinu kako bi bila ugodnija za oko i izgledalaviše profesionalno.To možemo promijeniti stvaranjem tablice unutar ekrana. U ovojtablici - 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. 34. Stranica34 od 53Upiš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 ucentru. Kliknemo li 2 puta unutar pravokutnika otvorit če se prozor TableProperties u kojem je potrebno kliknuti na Table i zatim u Table Alignment gdjeje namješteno na Left, odabrati Center.http://izrada-web-stranice-hr.com
  35. 35. Stranica35 od 53Kliknite 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, zatimPage 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 stranicemožete odabrati boju pozadine pravokutnika gdje se nalazi vaš tekst. Tomožete jednostavno učiniti kliknete li 2 puta mišem unutar pravokutnikai kliknete na Table a zatim na kvadratić kod Background Color.http://izrada-web-stranice-hr.com
  36. 36. Stranica36 od 53Pojavljuje 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žjemOpisat ću vam još jedan jednostavan način izrade vaše stranice ako želite imatineku sliku u zaglavlju (header), navigaciju vaše web stranice i podnožje (footer).http://izrada-web-stranice-hr.com
  37. 37. Stranica37 od 53Otvorite svoj Kompozer, otvorena je nova stranica bez imena (untitled) pa jepotrebno izmjeniti title stranice. Kliknite na Format i u padajučem izbornikukliknite 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) iCharacter set (UTF-8) je poželjno. U svom primjeru sam nazvao stranicu “Stranicasa Zaglavljem i Podnožjem“.Kliknite OK i spremite stranicu u određenu mapu (Folder) klikom na File i zatimodaberite Save As te upišite indeks.html ako želite da to bude vaša HOMEstranica ili odaberite neki drugi naziv. Možete upisivati bilo koje nazive jer je ovosamo vježba a kasnije nakon što pročitate cijelu ovu e-knjigu počnite izradu svojeprve web stranice.http://izrada-web-stranice-hr.com
  38. 38. Stranica38 od 53Kliknite na Table, zatim na Precisely i upišite brojeve kao na slici:Rows: 4Columns: 1Width: 800Kliknite OK i zatim spremite svoju stranicu klikom na Save.Sada če vaša stranica izgledati ovako:http://izrada-web-stranice-hr.com
  39. 39. Stranica39 od 53U mapi images morate imati jednu sliku (800X130 ili sl.) koju želite postaviti kaozaglavlje (Header).Kliknite unutar prvog redka i zatim kliknite Image nakon čega se otvara prozor ukojem 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 izgledamnogo bolje ;-)http://izrada-web-stranice-hr.com
  40. 40. Stranica40 od 53Kliknite unutar drugog redka i upišite imena stranica za koje želite izraditinavigaciju (navigation bar).Ja ču upisati: Home | Kontakt | O NamaNaravno potrebno je zatamniti Home i kliknuti na Link te upisati URL adresu zaHome (indeks.html), Kontakt (kontakt.html) i O Nama(o-nama.html). Prilikom izrade vaše web stranice je potrebno upisati u navigacijusve vaše podstranice kako bi se posjetitelji lakše snalazili.http://izrada-web-stranice-hr.com
  41. 41. Stranica41 od 53Sada 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 upodnož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. 42. Stranica42 od 53Ako vam se ne sviđa tekstualna, navigaciju možete izraditi sa slikama. Izaberuteslike koje želite koristiti i na njima u Photoshopu ili Paint-u (imate ga u svomkompjuteru) 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. 43. Stranica43 od 53 13 DIO Izrada Ostalih Stranica (Podstranica)Izrada vaših ostalih podstranica je vrlo jednostavna. Sve vaše stranice morajuimati isti predložak koji smo u ovoj e-knjizi izradili i sada je potrebno izraditipodstranice koje se razlikuju samo po sadržaju.Nakon što ste u Kompozeru izradili vašu Home (index.html) stranicu sada jepotrebno 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 pojavitidatoteka kontakt.html. U Kompozeru kliknite na Open, odaberite kontakt.html ikliknite Open.U Kompozeru se otvorila vaša kontakt.html stranica koja ima isti tekst i title kao iindex.html pa je sad potrebno to izmjeniti. Kliknite na Format i u padajučemmeniu kliknite Page Title and Properties. Napišite novi Title (u ovom slučaju“Kontakt”) i kliknite OK. Izmjenite tekst i kliknite Save kako bi spremilipromjene.http://izrada-web-stranice-hr.com
  44. 44. Stranica44 od 53Ovako 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 gotovahttp://izrada-web-stranice-hr.com
  45. 45. Stranica45 od 53Na ovaj način možete izraditi sve vaše podstranice. Kada ih otvorite u vašempregledniku sve će imati isti predložak, navigaciju i podnožje a razlika je usadržaju podstranice.Potreban je još jedan dodatak u HTML kodu koji je potrebno dodati na sljedečinačin:Prilikom izrade prve Home stranice i svake podstranice u Kompozeru potrebno jekliknuti na Source koji se nalazi na dnu s lijeve strane. Klikom na Source će seotvoriti HTML kod vaše stranice gdje je potrebno na vrhuizmeđu <head> i </head> dodati meta tagove o kojima sam več govorio u 5 dijelupod 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 ikeywords.Nakon upisa kratkog opisa web stranice i ključnih riječi za vašu stranicu ilipodstranicu 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. 46. Stranica46 od 53 14 DIO Izaberite Besplatan Predložak (Template)Za one kojima je potreban profesionalan predložak (template) a nemaju vremenaza izradu svog unikatnog predložka u jednom od HTML editora postoji jedan vrlojednostavan 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 mogubesplatno skinuti na svoj kompjuter i s malim izmjenama teksta, slika, navigacije isl. 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.comhttp://izrada-web-stranice-hr.com
  47. 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. 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. 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 toOrginalne 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. 50. Stranica50 od 53 16 DIO Prijava na TražiliceSada 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 procesako ih sami prijavimo ali prilikom prijavljivanja nije potrebno prijavljivati svepodstranice već samo upišite URL vaše stranice a ostale podstranice će tražiliceotkriti 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.aspxNapominjem da tražilicama treba određeno vrijeme kako bi procesuirale prijavu tevaša stranica neće biti odmah indeksirana. Budite strpljivi te s vremena na vrijemeprovjerite ima li promjena.http://izrada-web-stranice-hr.com
  51. 51. Stranica51 od 53 17 DIO SEO Optimizacija SEO optimizacija (Search Engine Optimization) je dio koji se bavipozicioniranjem web stranica na tražilicama za ključne riječi koje najvišeodgovaraju sadržaju stranica.90% internet korisnika koristi tražilice da pronađu ono što ih interesira nainternetu i ako je vaša web stranica ili blog kod traženja nekog pojma izlistana naprvoj stranici, dobra posjeta vam je zagarantirana.On-Site OptimizacijaKako bi nam SEO optimizacija bila uspješna vrlo je važno početi razmišljatio 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 kojuizaberete i naravno najvažnije je imati mnogo unikatnog sadržaja koji ste vinapisali.Off-Site OptimizacijaOff-site optimizacija je process koji nikada ne prestaje. U ovu vrstu SEOoptimizacije spadaju povratni linkovi koji upučuju na vašu web stranicu.http://izrada-web-stranice-hr.com
  52. 52. Stranica52 od 53Što je više povratnih linkova prema vašoj stranici vaš PR će biti veči i pozicija natraž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 saweb stranice koja ima istu temu i PR 3-10 od 10 linkova s web stranice koja imarazličitu temu i PR 0.Povratne linkove možete razmjenjivati, kupovati, zamoliti vlasnika nekog bloga danapiš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štetitivaš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šaomnoge knjige o izradi web stranice, seo optimizaciji i zaradi na internetu koje subile na Engleskom jeziku i uglavnom su pisane kako bi čitatelje uputili naodređene proizvode putem svog affiliate linka.Nisam pronašao knjigu gdje je objašnjeno kako početnik može izraditi svoju prvuweb stranicu od početka do kraja i upučuje ga na najčešće greške koje početnicirade prilikom izrade svojih prvih web stranica.Nadam se da sam bio donekle zanimljiv i da ću barem jednoj osobi pomoći uizradi 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 štoste pročitali ovu knjigu.http://izrada-web-stranice-hr.com
  53. 53. Stranica53 od 53Ako vam se svidjela ova knjiga slobodno je podjelite s prijateljima iliponudite za download posjetiteljima vaših web stranica.Moje Web Stranicehttp://izrada-web-stranice-hr.comhttp://website2beginners.comhttp://diet-and-weight-loss.infoMoji Blogovihttp://web-tutoriali.infohttp://diet-and-weight-loss.info/bloghttp://blueprint-project.infohttp://easyonline-money.infohttp://izrada-web-stranice-hr.com

×