Web dizajn - tutorial

by Gost ned kol 22, 2010 6:51 pm

Ovo je mali tutorial za početnike koji se žele baviti web dizajnom kao hobi, izrada svoje vlastite stranice ili početak prema profesionalnom bavljenu web dizajnom. Kroz ovaj tutorial upoznat ćete se sa osnovama xHTML jezika i naučiti izrađivati osnovne elemente web stranice, spoznati od čega se sastoji xHTML datoteka i kako se pišu tagovi. Ovaj tutorial sastojat će se od osnovnih stvari i primjera, za vježbu možete koristiti notepad koji se koristi za potpuno običan unos teksta, što će vam poslužiti za izradu vaših prvih xHTML stranica.

Sadržaj tutoriala
1. Greške koje početnici rade u Web dizajnu
2. Što je xHTML - kratki uvod u xHTML jezik
3. Osnovni dijelovi Web stranice
4. Meta tagovi - koji su i čemu služe
5. Formatiranje teksta na stranici

1. Greške koje početnici rade u Web dizajnu
Greške koje mnogi početnici rade su kombinacija teksta i pozadine tako da se teško može čitati, tekst koji je premalen za čitanje, tekst koji se proteže od lijevog do desnog ruba web stranice, tekst koji je u cjelosti napisan velikim slovima, tekst napisan u Boldu i Italic načinu, podvučen tekst koji nije link, velike i zahtjevne slike, slike koje nemaju tekstualni opis ALT tag, slike koje su prevelike za prosječnu rezoluciju, pretjerano korištenje flas animacija bez ikakvog smisla, korištenje teksta koji bljeska, pretjerano korištenje gif animacija, nečista i nejasna navigacija, nemogućnost povratka na prethodnu stranicu, stranice koje ne označavaju jasno što sadrže.... To su samo neke greške koje mnogi početnici (ali ima i onih sa malo znanja) naprave u izradi stranica.

2. Što je xHTML?
xHTML – Extensible Hypetext Markup Language je opisni jezik za stvaranje web stranice. Pomoću njega određujemo slike na web stranici, način prikazivanja teksta, boje pozadine, boje tablice... xHTML je tekstualni dokument koji sadrži elemente pomoću kojih pretraživać prikazuje tekst, slike, multimedijske objekte i veze. U svrhu opisivanja web stranice koriste se xHTML tagovi koji se pišu unutar znakova "<" i ">". Da bi se postigl željeni vizualni i funkcionalni rezultati na web stranici, elemente moramo zatvarati, pisati početnu i završnu naredbu. HTML jezik ne zahtjeva toliku strogoću, pa pojedini tagovi ne trebaju zatvaranje.

xHTML dokumenti nisu ništa drugo osim obične tekstualne datoteke. Pri upisivanju adrese u pretraživače, pretraživač kontaktira server i traži da mu se isporuči tražena web stranica. Server isporučuje stranicu u obliku xHTML datoteke, a kada ju pretraživač dobije, tumačeći tagove formatira izgled web stranice koju vidimo na zaslonu ekrana. Za krajnjega korisnika opisani proces je potpuno nevidljiv, ali za veb dizajnera iznimno važan.

3. Osnovni dijelovi web stranice
Svaka stranica sadrži osnovne dijelove koji su potrebni kako bi ona pravilno funkcionirala. Prvi i osnovni element je tag HTML koji pokazuje da je dokument HTML datoteka namijenjena za web stranicu. Izrada web stranice započinje uporabom doctype deklaracije koja pokazuje koju vrstu HTML-a ili xHTML-a koristimo. Doctype omogućuje pretraživačima da točno znaju što treba očekivati. Svaka stranica započinje:

Kod:: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtmll/ DTD/xhtmll-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

a završit će sa:

Kod:: </html>

Svaka web stranica sadrži dva osnovna dijela, head koji označava osnovne postavke web stranice, kao naslov stranice, ključne riječi, različite JavaScripte....
Svi tekstualni dokumenti, pa uključujući i xHTML spremaju se u znakovnom kodu. Budući da ih ima puno, ideja je deklarirati znakovni kod što omogućuje pravilan prikaz stranice u pretraživačima s drugačijim podrazumjevanim prikazom znakovnog koda.Da biste deklarirali znakovni kod potrebno je upisati u head sekciju sljedeće:

Kod:: <head> <meta HTTP-EQUIV="Content-Type" content="text/html; CHARSET=utf-8"> <title>Template</title> </head>

Umjesto "utf-8" može se koristiti i "windows-1250" ukoliko se pojedini znakovi ne prikazuju ispravno.

Između head tagova upisujete i naslov trenutne stranice:

Kod:: <title>Moja stranica</title>

Body je dio web stranice boji označava glavni dio stranice, točnije onaj vidljivi dio stranice. Tekst, slike, animacije....

Gotovi template koji svaka xHTML stranica mora imati:

Kod:: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=windows-1250"> <title>Template</title> </head> <body> </body> </html>

4. Meta tagovi - koji su i čemu služe - preuzeto sa http://www.itm.hr/besplatno/marketing/meta-tagovi.asp
Mega tagovi su dijelovi HTML-a u stranici koje upotrebljavaju tražilice da bi zapisale informacije o vašoj stranici. Ovi tagovi sadrže ključne riječi, opis, informaciju o vlasništvu, naziv stranice itd. Oni su među mnogim stvarima koje ispituju tražilice kada "gledaju" vašu stranicu.
Iako ih nije nužno, vrlo ih je korisno upotrebljavati, pogotovo ako želite imati dobru poziciju na tražilicama (a tko ne želi?).
Ako napravite web stranicu i registrirate URL kod tražilica, one će posjetiti vašu stranicu i pokušati je indexirati. Svaka tražilica funkcionira malo drugačije, i svaka drukčije cijeni pojedine elemente web stranice. Npr. Altavista daje prednost opisnom tagu (description), a Inktomi indexira oboje, i tekst stranice, kao i meta tagove.

Drugi pretraživači poput Exactseek-a su pravi meta tag pretraživači, tako da ako vaša stranica ne sadrži naziv (title), i opisni meta tag (description).

Naravno, svi pretraživači ne rade na ovaj način. Neki daju prednost sadržaju. Pretraživači u obzir uzimaju više od 100 stvari kada razmatraju neku stranicu.

Najveći razlog zašto mnoge tražilice ne daju toliku važnost meta tagovima je zbog spama. Ljudi su se sjetili da na svoje stranice stave mnoge ključne riječi koje nemaju veze sa sadržajem stranice samo da bi dobili više posjeta. Nakon nekog vremena neke tražilice su prestale gledati meta tagove, služili su im uglavnom samo kao potvrda da bi bili sigurni da odgovaraju onome što se nalazi na stranici.
Kada su ključne riječi potpuno nevezane za sadržaj stranice neke tražilice će kazniti tu stranicu.

Ako je vaša stranica bogata slikama i grafikom, tada su vam meta tagovi jako važni. Kažu da slika govori tisuću riječi, ali slike su nažalost tražilicama bezvrijedne. Pogotovo ako stranica sadrži jako malo teksta. Tada je potrebno koristiti tag "alt" koji izgleda ovako:

Kod:: <img src="imeslike.jpg alt="Motorno ulje Ina Super">

To će reći tražilici što se nalazi na slici.

Kako upotrebljavati meta tagove?
Meta tagovi bi uvijek trebali biti smješteni u <head> područje HTML dokumenta. <head> tag se nalazi odmah nakon <html> taga, i završava prije <body> taga. Evo kako jednostavan primjer izgleda:

Kod:: <title>Ina</title> <meta name="description" content="Ina, motorna ulja, gorivo... "> <meta name="keywords" content="Ina - Hrvatska naftna kompanija..."> <meta name="robots" content="index,follow">

Uvijek budite sigurni da vaši meta tagovi nemaju nikakvih prelazaka u novi red u sebi, jer će ih u tom slučaju tražilice vidjeti kao neispravan kod i ignorirati. Također bi trebali izbjegavati upotrebu velikih slova (html5 standard), kao i ponavljanje izraza unutar taga ključne riječi.

Što Meta Tag sadrži?

Kod:: <meta name="description" content=opis web stranice">

Mnoge tražilice će prikazati ovaj tekst u rezultatima pretraživanja pokraj naziva stranice. Neka taj tekst ne bude pre dug, neka bude razumljiv i neka što bolje opiše sadržaj vaše stranice.

Kod:: <meta name="keywords" content="popis ključnih riječi vezanih za sadržaj stranice">

Ključne riječi predstavljaju ključne termine koje netko može upisati u tražilicu. Izaberite samo važne izraze. Ako ćete staviti te izraze pod tag ključne riječi, trebali biste ih spomenuti i na tekstu na stranici. Mnoge tražilice uspoređuju vaš meta sadržaj sa tekstualnim sadržajem stranice, i ako se to ne poklapa, vaša stranica može zaraditi kaznu, i biti na lošoj poziciji kod rezultata pretraživanja.

Kod:: <meta name="robots" content="index,follow">

Mnoge web stranice imaju ovaj tag neispravno napisan. Primjer neispravnog korištenja je: content="index, follow, all" - krivo jer neke tražilice ne mogu obraditi razmake između riječi. Većina tražilica po defaultu pretpostave da želite da vaša web stranica bude indeksirana i da linkovi budu praćeni, tako da korištenje neispravne sintakse može rezultirati time da tražilica jednostavno ignorira vašu stranicu. Ako zbog nekog razloga ne želite da vaša stranica bude indeksirana u pretraživačima, zamjenite u tagu riječ "index" sa "noindex", a ako želite da linkovi ne budu praćeni, zamjenite riječ "follow" sa "nofollow".

Prava vrijednost
Na internetu se svakodnevno pojavljuje više od 8 milijuna novih stranica, a tražilice indeksiraju samo jedan dio od toga. Meta Tagovi su uobičajen standard koji može osigurati pravilnu kategorizaciju vaše stranice. Uvijek upotrebljavajte Meta Tagove i u njima koristite samo najvažnije riječi vezane za sadržaj stranice. Pravilno korištenje Meta Tagova vam može samo pomoći kod pozicije na tražilici, što podrazumjeva i veću i kvalificiranu posjetu stranice.

5. Formatiranje teksta na stranici
Unesite u Notepad ovaj primjer koda:

Kod:: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd"> <HTML xmlns="http://www.w3.org/1999/xhtml"> <HEAD> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=windows-1250"> <TITLE>Template</TITLE> </HEAD> <BODY> Ovo je prvi red teksta. Ovo je drugi red teksta. </BODY> </HTML>

Ako pogledate rezultat ovoga primjera, primjetit ćete da ste u kodu tekst napisali u dva reda, ali on se u stvarnosti ispisao kao jedan red. Razlog toga je tekst koji se prikazuje u HTML datoteci treba jasno navest tag koji će prebaciti tekst u drugi red.

Svaki tekst koji pišemo na web stranici treba biti napisan u Paragraf tagu <p>Neki tekst</p>. Svaki put kad otvorite novi paragraf teksta, pretraživač će taj tekst postaviti u novi red.

HTML elementu možemo dodavati ime koje ga indentificira kao pripadnika određene klase, možemo primjeniti stil na sve elemente određenog imena. Da bi se imenovao jednostavni element iza početnog taga elementa upišite id="ime"

Da bi ste imenovali grupu elemenata iza početnog taga elementa upišite class="ime". Atributi Class i ID se mogu dodati većini xHTML elemenata, ali posebno su korisni kod elemenata DIV i SPAN. Atribut ID automatski se pretvara element u sidro na koje možete usmjeriti link.

Nastavak tutoriala uskoro belj