Izrada Veb Sajta

You might also like

You are on page 1of 6

Izrada veb sajta

Poetak rada
Da bismo poeli izgraivati nau stranicu moramo imati odreeni alat. Svakako temeljni alat bi bio HTML editor i neki grafiki program za obradu slika. HTML dokumente mogue je unositi pomou bilo kojeg programa za unos teksta. Pri tome neki autori idu tako daleko da koriste iskljuivo Noutped(Notepad), jednostavan program za unos teksta koji dolazi s Windouz operativnim sistemom. Postoje mnogi editori koji olakavaju unos HTML dokumenata. Pri tome editore za unos dokumenata moemo podeliti na dve velike kategorije: editori koji se temelje na unosu teksta i editori koji se temelje na vizualnom dizajnu stranice. Vizuelni editori imaju mnoge prednosti koje e ih initi pogodnima za poetnike. Naime, nain korienja tih alata je vrlo slian nainu korienja programa tipa Word i slinih, s kojima su mnogi korisnici ve dobro upoznati. S druge strane taj pristup ima i mnoge mane. Kao prvo, princip razdvajanja sadraja od prezentacije dokumenta je vrlo teko postii. Stranice koje se generiu vizuelno esto su znatno vee nego to je to potrebno, a dobijeni HTML kod je esto vrlo nepregledan. Takoe, pomou programa za vizuelan unos stranice teko je uneti skripte u dokument. Vizuelni alat koji se dosta koristi za unos HTML stranica je Microsoft FrontPage. No taj program je vrlo velik i sloen za korienje, a takoe trai vrlo velike resurse raunara. Pri tome dobijeni genersani HTML kod je dosta loe struktuiran i pun nepotrebnih oznaka. Od grafikih programa koriste se najee Adobe Photoshop, COREL i Paint Shop Pro.

Doctype
U izradi veb strane definisanje tipa dokumenta je jedna od najvanijih stvari. Iz tih razloga tip dokumenta upisuje se na poetku veb strane. Pretraiva, prema tipu dokumenta, uitava sadraj koji moe da obradi i prikae klijentu ili publikuje izvetaj klijentu da traena strana ne postoji. U aktuelnoj HTML 4.01 verziji postoje postoje tri razliita standarda: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" Ovaj standard sadri sve HTLM elemente i atribute, ali iskljuuje korienje prezentacionih elemenata da bi se to bolje odvojila prezentacija od sadraja. Takodje je zabranjeno korienje

frejmova(korienjem frejmova moemo predstaviti vie od jednog HTML dokumenta u okviru istog prozora). <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" Doputa korienje prezentacionih elemenata ali ne I frejmova. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" Doputa korienje i prezenetacionih elemenata i frejmova.

Html
Element html sadri kompletan dokument. Njega moemo shvatiti kao element svih elemenata te je celi sadraj veb stranice smeten unutar tog elementa. Taj element slui za objedinjavanje svih ostalih delova dokumenta te oznaava da sledi HTML dokument. Svi HTML dokumenti sastoje se od zaglavlja (<head>) i tela (<body>). Zaglavlje veb strane predstavlja njen najvaniji deo ako podjemo od predpostavke da nau stranu treba da pronadju i upiu veb pretraivai i da je lako nalaze korisnici. Posao prilagodjavanja sajta prema standardima pretraivaa naziva se SEO(Search Engine Optimization) optimizacija. Telo dokumenta je deo koji objedinjuje kompletan sadraj dokumenta (celokupni tekst i grafiku). Glava dokumenta navodi se unutar elementa <head>, dok se telo dokumenta navodi unutar elementa <body>. Element <body> ima niz atributa kojima je mogue blie odrediti nain prikaza stranice. <HTML> </HTML> Kreiranje HTML dokumenta <HEAD> </HEAD> Kreira zaglavlje u koje se upisuju delovi HTML-a koji se ne pojavljuju na Web stranici <BODY> </BODY> Kreira vidljivi deo HTML dokumenta

Naslov dokumenta
Svaki HTML dokument ima odreeni naslov. Prilikom prikaza tekst naslova e se pojaviti u naslovnoj traci prozora pretraivaa. Naslov se navodi unutar <title> elementa. esto se na Internetu mogu primetiti veb stranice koje nemaju naslov ili kojima je naslov nepovezan te ne opisuje sadraj veb stranice. Smatramo da je takvo reenje vrlo loe - razumljiv naslov svake stranice je "pravilo lepog ponaanja na Internetu". Moze da ima do 15 rei, odnosno 255 karaktera. Pored unicode prihvata i lokalna pisma.

esto se deava da autori izrade ablon stranice kojeg potom koriste za izradu drugih stranica. No prilikom izrade stranica autori se koncentriu na izgled i na sadraj stranice te vrlo esto zaborave promeniti naslov iz ablona, te se esto dogaa da stranice s pomonim tekstom kao naslovom budu postavljene na server, to se moe shvatiti samo kao sramota onoga koji stranice radi.

Odreivanje kodne stranice za prikaz lokalnih slova


U svetu postoji mnogo razliitih jezika s razliitim znakovima koji se koriste za pisani tekst. Da bi se tekst ispravno prikazao u pretraivau potrebno je izabrati odgovarajui font, odnosno potrebno je izabrati kodnu stranicu. To se moe uiniti pomou sledeeg meta elementa: <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Language" content="sr". Ubacivanje tog elementa u glavu trebalo bi biti obavezno za sve srpske dokumente. Jo uvek moemo pronai domae stranice koje su pisane bez tog meta taga, te autori stranica pribegavaju pisanju teksta bez slova (, , , ). Valja jo napomenuti da je ovaj element obavezno uneti tano onako kako je gore navedeno, s istim velikim i malim slovima. To se posebno obnosi na Content-Type re koja mora biti unesena tano tako (s C i T velikim, a sve ostalo malim slovima).

Odabir pozadine background


Svaka stranica mora imati pozadinu - background, za to se koristi samo boja ili neka slika. Na internetu se moe pronai veliki izbor besplatnih pozadina. Primer koda za pozadinu: <BODY BACKGROUND="slike/oldpaper.gif"> - ovo je primer koda kada za pozadinu koristimo sliku. <BODY BGCOLOR="#3300FF"> - ovo je primjer koda kada za pozadinu koristimo boju. Za pozadinu treba odabrati sliku koja nije velika i koja se ne uitava dugo.

Odabir boja
Postoje dva osnovna naina za prikaz boja. Prvi nain je odabir boja prema njenom imenu. HTML standard define nekoliko standardnih boja i njihovih imena koja stoje na raspolaganju autorima HTML stranica. Ta standardna imena su: Black, Silver, Gray, White,

Maroon, Red, Purple, Fuchsia, Aqua, Green, Lime, Olive, Yellow, Navy, Blue i Teal. Drugi nain je zadavanje boja pomou tri komponente RGB vrednosti, odnosno procenta crvene, zelene i plave. Boja se zadaje u sledeem obliku: #rrggbb gdje rr predstavlja iznos crvene komponente, gg iznos zelene komponente, dok bb predstavlja iznos plave komponente. Pri tome sve te tri vrednosti mogu imati iznos od 0 do 255, s time da se one predstavljaju u heksadecimalnom brojevnom sistemu, te da se vrednostima koje imaju jednu cifru obavezno dodaje nula ispred. To znai da su dozvoljene vrednosti za svaku komponentu od 00 do FF. Na primer, boja Yellow(uta) ima sledee vrednosti: #FFFF00 Dakle, FF za crvenu, FF za zelenu i 00 za plavu komponentu. Dosta je teko napamet odrediti RGB komponente boja, no editori koje sam gore naveo nude korisniku pomo tako da prikau paletu boja na ekranu te omoguavaju vizualno menjanje parametara te odmah pokazuju dobijenu boju. Na kraju, kad je korisnik zadovoljan s odabranom bojom alat e sam generirati RGB vrijednosti i ubaciti je na mesto u dokument.

Odabir slova fonta


Vrlo vana stvar kod izrade veb stranice je i odabir fonta s kojime emo raditi, najee su to fontovi kao to su Times New Roman, Arial i Verdana, ali nikako neki egzotini fontovi, jer ih stariji pretraivai nee moi oitati. Primer koda za odabir slova: <I><FONT FACE="TIMES NEW ROMAN" COLOR="#3300FF" SIZE="3">Primjer fonta plave boje veliine slova 3 i stil Italic</FONT></I>

Primer koda: <B> Ovaj tekst je boldovan </B> <I> Ovaj tekst je italic </I> <U> Ovaj tekst je podvuen </U>

Izgled na pretraivau: Ovaj tekst je boldovan Ovaj tekst je italic Ovaj tekst je podvuen

Primer koda i fonta

Ubacivanje naslova
Ponekad je potrebno istaknuti pojedine delove dokumenta kao naslove. To se moe uiniti pomou elemenata za logiko formatiranje h1, h2, h3, h4, h5 i h6 (elementi vuku koren engleskog naziva za naslov - heading). Ti elementi imaju uvek poetnu i zavrnu oznaku, a sadraj unutar elementa e biti prikazan tipino masnijim i veim slovima te s razmakom prije i poslije elementa. Takoe, svaki element e se obavezno prikazati zasebno na liniji. Pri tome mogue je uvesti hijerarhiju naslova. Element h1 oznaava naslov najvee razine te se ispisuje najveim slovima, potom h2 oznaava prvi podnaslov te se ispisuje neto manjim slovima, i tako redom sve do h6. Vano je imati na umu da vrsta slova kojom se pojedini naslovi prikazuju nije propisana standardom, ve zavisi o svakom pojedinom pretraivau.

Ubacivanje slika
Da bismo sliku (fotografiju) ubacili u nau stranicu moramo je najpre pripremiti jer na internetu su podrana dva osnovna formata gif i jpg, a to moemo uiniti s nekim od ve spomenutih grafikih programa. Vano je za istai da uvek trebamo voditi rauna o kvalitetu I veliini slike. gif format najee se koristi za prikaz animacija i grafikih detalja (strelica, oznaka i manjih sliica), dok se jpg format koristi za prikaz fotografija. Osnovni kod za umetanje slika izgleda ovako: <img src="vaaslika.gif"> Slike moemo koristiti i za linkovanje drugih stranica, a kod izgleda ovako: <a href="vaastranica.html"><img src="vaaslika.jpg"></a> Na internetu je uvreen nain prikazivanja slika na principu thumbnaila, to znai da na jednoj stranici moemo imati vie manjih sliica obino u gif formatu, a ako neko eli videti puni format slike klikom na manju sliicu otvara mu se slika u punom formatu, kod za taj prikaz slika izgleda ovako: <a href="velikaslika.jpg"><img src="malaslika.gif"></a>

Ubacivanje hiperveza

Velika prednosti veb stranica nad statinim papirnatim dokumentima je mogunost povezivanja dokumenata pomou sistema hiperveza. Hipervezu moemo shvatiti kao pokaziva na neki drugi dokument na Internetu. Korisnik pritiskom mia moe slediti vezu, odnosno zatraiti dokument na koji veza pokazuje. Time postupak pretraivanja Interneta dobiva novu dimenziju. Hiperveze se koriste za povezivanje stranica unutar jedne stranice (npr. za skok na vrh stranice), za povezivanje unutar grupe stranica (na primer, za povezivanje sadraja s pojedinim stranicama) i za povezivanje sa sasvim drugim stranicama na drugim uredjajima. Takoe, hiperveze mogu pokazivati na Internet resurse koji uopte nisu stranice (na primjer, na e-mail adrese, arhive datoteka i slino). Hiperveza se postavlja preko URL adrese objekta na koji hiperveza pokazuje. Zbog toga je osnovno razumeti kako funkcionie sistem identifikacije Internet objekata putem URL-a. Svi veb resursi (stranice, slike, zvukovi, programi i slino) moraju imati svoju adresu na Internetu kako bi se mogli identifikovati i pozvati. Na primer, veb pretraiva se moe usmeriti na odreenu adresu tako to mu se u liniju za adresu upie URL stranice koja nas interesuje.

Postavljanje stranice na server


Besplatni hosting koristi veliki broj poetnika. On se lako pronalazi preko veb pretraivaa. Medjutim ovakav hosting nije pouzdan i ne preporuuje se za postavljanje komercijalnih sajtova. Mnogo pouzdaniji ali i skuplji nain objavljivanja stranice je zakupljivanjem hostinga. Zakup se vri po pravilu na odredjeno vreme. Takodje se dobije prostor izraen u gigabajtima i pratei servisi.

You might also like