<HTML & CSS> Tutorial-I

•UVOD U TUTORIAL
-Dobrodošli na moj prvi tutorijal o HTML/CSS-u. .Pošto je to malo veća oblast ove TUT-ove ću podjeliti na nekoliko djelova, pa ću ih redom postavljati.

-Šta ćemo zapravo raditi/učiti? Prvo ćemo reći nešto o osnovnim pojmovima i tagovima a zatim preći na veće stvari poput, grafičkog dotjerivanja sajta pomoću Photoshopa ili kako to kažemo "Kodiranje nekog .psd dokumenta", ali naravno prije toga moramo znati neke osnove.

-U ovom prvom poglavlju govorit ćemo samo o HTML-u znači tom nekom sirovom dijelu osnovni tagovi, i početak kreiranja statičke. web prezentacije. Uvijek se nekako krenulo od elementarnih stvari pa tako ću i ja u ovom Tutorijalu. Slijedeći tutorial vezan je za CSS.

-Za početak rada sa Web-om i prezentacijama potreban vam je neki editor. Sav ovaj kod se može naravno kucati u notepadu i spremiti kao .html, ali ukoliko koristite neki text-editor imat ćete uvid u cijelu sintaxu ili tag i bit će vam puno lakše.


- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -


•OSNOVNI POJMOVI
-HTML je skraćenica od HyperText Markup Language, što bi u prijevodu značilo Jezik za kreiranje prezentacija pomocu "oznaka" ili stručnije Tagova.

-CSS. je skraćenica Cascading Style Sheets. To je stilski jezik pomoću kojeg uređivamo taj "Sirovi" HTML. HTML ima neke tagove pomoću kojih možete mjenjati neke boje i slično, ali kada HTML povežete sa CSS-om, možete napraviti jako, jako lijepu web prezentaciju, dok sa samim HTML-om je to jako teško.

-HTML Tag's(HTML Tagovi). su oznake ugnježdene u HTML pomoću kojih mi kreiramo neku prezentaciju, zato se i zove HTML jer se sastoji od raznih oznaka sa kojima radimo razne stvari. Tagovi se pišu unutar znakova "<" i ">".


- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -


•ELEMENTI HTML-a.
Prvo da vidimo kako izgleda neka HTML stranica a zatim ćemo objašnjavat tag po tag. Ja ću ove kodove stavljati ovako između ove dvije linije, pošto gamers nema BB Koda za skripte.
Kopirajte kod ispod i spremite ga pod nazivom"index.html".. Da odma i ovo kažem "index.html" se uvijek koristi za prvu stranicu, jer kada postavite na neki host, za početnu će on uzeti samo index.html .


______________________________________________________________________


Link od koda
______________________________________________________________________



Prvo što vidimo jeste :
________________________________.

________________________________.


-Doctipe je zapravo početni dio HTML-a koji dobiijete kada otvorite novi HTML dokument u vašem omiljenom editoru. Doctype služi da bi browser bolje generirao stranicu, i najbolje bi bilo da ga ne diramo.


Drugi tag je početak HTML koda.Njjednostavnije rečeno on označava gdje počinje HTML stranica a gdje završava.


________________________________.

________________________________.


-Slijedeće što imamo je <head> tag. Sadržaj u njemu browser ne ispisuje, ali nama je itekako potreban za neke stvari poput povezivanja sa css dokumentom(nešto ćemo kasnije o tome) itd..

-Dalje imamo Meta http-equiv[/b] tag koji opisuje koji charset(set slova) će se koristiti na stranici, u ovom primjeru to će biti zapadnoeuropski, ako hoćemo dobro prikazivati naša slova trebali bi upisati [b]charset=iso-8859-1.

-Ovaj tag završava samo sa kosom crtom i znakom ">". Znači imamo tagove koji završavaju kako i počnu ali sa "Slashom" ili kosom crtom npr. <p></p>, a imamo neke koji završavaju samo sa kosom crtom i zatvorenom "zagradom" npr. <a href="" />

-Što se tiče meta tagova oni se mogu i koristiti za SEO Optimizaciju(malo je drugačija sintaxa) sajta za lakše pronalaženje na google-u, ali o SEO-u više neki drugi put.

-Slijedeći tag je <title></title>znači on određuje ime stranice, koje vam se prikazuje u browserima.

-Slijedeća je jedna velika cjelina <body>. Taj tag je zapravo kostur ili tjelo našeg sajta, sve što se nalazi u njemu prikazuje se u browseru a mi tu imamo jedan <h1> tag koji služi za pisanje "naslova" a imamo i h2, h3, h4 koji su manjih dimenzija odnosno za podnaslove i slično, ali tu se nećemo zadržavati jer nam u osnovi i neće puno trebati jer ćemo sve moći raditi sa <p> tagovima i CSS-om.

Kad smo kod <p></p> tagova da kažemo da služi za određivanje početka i kraja pojedinog paragrafa, odnosno odlomak texta.
I posljednje što ćemo obraditi jeste <div></div>tag.
Njegova primjena vam najvjerovatnije neće biti baš najjasnija dok ne pređemo na drugu lekciju i počnemo učiti CSS pomoću kojega ćemo oblikovati ove tagove koje smo naučili. Uzmite za primjer ovako:


_______________________________
<div><p>Ovo je paragraf unutar diva</p></div>
_______________________________


Probajte pokrenuti dokumnet prva.html i vidjet ćete da nam se pojavio samo tekst “Ovo je paragraf unutar diva" i tu se ništa nije dogodilo. To je zato jer div opisuje blok, odnosno neku određenu cjelinu na stranici. Da bi smo ga razumjeli moramo se upoznati sa CSS-om i pomoću njega ćemo oblikovati jer ovako nećete ništa shvatiti.


- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -


•KOMENTARI
-Komentari nisu naravno obavezni, ali oni nam pomažu da se snađemo u kodu, jer kad imamo naprimjer više hiljada linija koda, moramo znat gdje smo počeli a gdje završili neke tagove, varijable ili slično.
Komentare pišemo na slijedeći način <!--Naš text-->


- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -


•KRAJ HTML & CSS - I
I to bi bilo to za ovaj prvi tutorial. Ovo iznad što sam naveo bit će vam sasvim dovoljno da napravite neku svoju Web stranicu, ali ona naravno neće imati nekog estetskog izgleda dok se ne počnemo baviti CSS-om a to ćemo raditi u slijedećem Tutorijalu, kojeg očekujte sutra, najkasnije prekosutra zavisno od obaveza. Ovo je bio jedan uvod odakle da počnete, možda ima dosta ovakvih stvari na netu, ali jednostavno morao sam početi od nekih osnova, a zatim u slijedećim tutovima počinjemo praviti naš neki web site jer su ovo u biti samo neke osnove. Tako ćemo korak po korak raditi da bi ste što bolje shvatili i do kraja ove serije tutorijala trebali bi ste da shvatite i naučite dosta stvari kako bi ste imali znanje da napravite jednu zadovoljavajuću web prezentaciju.
Pišite komentare, sugestije, a ako vam nešto nije jasno pitajte u temi kako bih vam bolje pojasnio a i da drugi vide jer možda i njima baš to nije bilo najjasnije.


Do slijedećeg HTML & CSS - 2 Tutoriala lijep pozdrav.



- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Svaka čast, predobro!

gj


Ali, ti stvarno misliš da će netko odavde to učiti? XD Mislim da nema 10 ljudi zainteresiranih za web dizajn općenito..

Potpisujem, onaj ko je kontao nešto naučiti o web programiranju i dizajnu sigurno to neće tražiti na gaming forumu

Pa normalno da neće naučiti kad nema tutorijala zato baš ovak'i tutorijali i fale (trebaju) na forumu

Postovi iznad, izvni molim te a sto to neko nebi potrazio ovdje taj tutorial nebitno da li pripada ovom forumu ili ne, to sto je gaming zajednica odvaja nesto ovaj dio od ostalog dijela foruma?
Neko i kad bude guglao za ovim stvarima to ga gugl ne moze dovesti na ovu poznatu adresu na balkanu i to bas ovdje da nauci ove osnove neke sto su mu potrebne, ja iskreno nisam zainteresovan bas toliko za web design i te stvari, al opet svi da jednom procitamo sta je momak napisao nece skoditi ni vama a ni meni.
Momak se potrudio pa vam omogucio i ovo sto je napisao, ipak je svog vremena ostavio pisajuci ovaj tutorial, a opet se nadje nezahvalnih ljudi koji osporavaju neciji trud i rad..

<3 Brata.

Hvala svima na komentarima, moram malo osvježiti ovaj podforum dugo vremena se ništa pametno nije napisalo.

Ovaj tutorial je samo uvod, teško da ćete šta naučiti ovo su samo neke osnove koje se moraju proći za dalje. Već se sprema drugi dio koji govori o CSS-u, a zatim idemo na kodiranje .psd template, koji će biti u Video formatu najvjerovatnije, tek tada ćete shvatiti dosta stvari, ko to želi naravno, a siguran sam da ima takvih

Još jedna stvar ako bi ovo iko od admina pogledao. Iskreno jako bi volio kada bi se uveo onaj [code][/code] BBC jer bi bilo puno lakše i preglednije postavljati ovakve stvari, a i može poslužiti za mnogo drugih stvari, eto vam posla administracijo c(:

Velika je razlika izmedju Web Dizajna[/I] i [I]Web Programiranja

@ontopic :
ako bude trebala pomoc oko nastavljanja pisanja TuToriala , racunaj na mene

Jesam ja igdje spomenuo programiranje? Pročitaj post prije nego što citiraš.

Pa ni u temi nigdje nije spomenuto dizajniranje , vec samo kodiranje

E pa varas se ja sam odlucio bas da pocnem s tim kad sam naletio na ovaj tutorijal

Vidjecemo koliko ce trajati