U ovom tutorijalu trudiću se da Vam pomognem da savladate HTML i CSS, pomoću kojih možete početi da radite neke jednostavne statičke sajtove.

Šta je potrebno da počnem sa radom u HTML i CSS?

Kako bismo započeli sa radom i mogli dalje da pratimo ovaj tutoraijal potreban nam je neki od programa. Ja Vam savetujem upotrebu Notepad++, ali možete koristiti i Notepad ako ste Windows korisnici, ili Geany ukoliko imate Linux sistem.

Sve ono što ćemo raditi u gore navedenim programima biće vidljivo putem internet pretraživača tako da su nam potrebni Mozilla firefox i Google Chrome. Ja volim da koristim ova dva browser-a iz razloga jer smatram da ukoliko Vam je u njima sve kako treba nećete imati problema sa bilo kojim drugim. Naime, browser-i mogu isti sadržaj koji pišemo u našem notepad ili notepad++ programu da prikažu na različiti način. tj. to se neće suštiniski razlikovati ali primetićete da sitne razlike postoje, te se one mogu i odnositi na Vaše buduće korisnike sajta.

Sve ono što ćemo raditi biće u lokalu, tj. izrada sajta neće biti vidljiva na web-u iz razloga jer nam je za postavljanje na internet potreban hosting i domen.

Pa da krenemo…

Prvo ćemo otvoriti našu notepad ili notepad++ stranicu i sačuvati je kao index.html ( File -> Save As… -> u polju file name upisati index.html -> Save ). Bitno je da se ova stranica zove baš ovako jer se kasnije prilikom postavljanja našeg sajta ova stranica tretiraće se kao početna, tj. na nju će se nadovezivati sve ostale.

Nakon toga još jednom ćemo ponoviti proces ali ovoga puta našu stranicu čuvamo pod nazivom style.css ( File -> Save As… -> u polju file name upisati style.css -> Save)

Bilo bi dobro da oba ova fajla sačuvate u jednom istom folderu koji ćete kreirati samo za ovaj sajt.

Sada otvorite index.html stranicu (desni klik na ikonicu -> Edit with notepad++) kako bismo napravili prve korake i počeli da kucamo naše prve kodove.

Kako da pišem HTML tagove (oznake)?

Šta god da pišemo mora biti unutar tagova ( npr. „<p>Ovo je neki paragraf</p>“ – ovo je tag za pisanje paragrafa). Kao što vidite ovaj paragraf ima svoj otvarajući tag <p> i zatvarajući </p>, a ono što se nalazi izmedju njih je zapravo tekst pisan u paragrafu koji će biti prikazan na sajtu.

Primer:

<p> Ovo je neki paragraf </p>

Kao što već rekoh ovo je tag za paragraf, a neki od onih koji se najčešće koriste su <div></div>, <span> </span>, naslovi <h1></h1> <h2></h2> … <h6></h6>, kao i mnogi drugi.

Sada kada se vratimo na našu ikonicu index.html i otvorimo je u browseru videćemo prvi tekst koji smo napisali.

Ono sa čime ćete se sigurno susretati je tag unutar taga. Recimo:

<div><p> Ovo je neki paragraf </p></div>

Ovo je pravilan način za upisivanje i on nam govori da se kompletan tag <p></p> nalazi unutar taga <div></div>, tako da nemojte koristiti nepravile varijante kao što su:

<div><p> Ovo je neki paragraf </div></p> ili

<p><div> Ovo je neki paragraf </p></div>

Tagovi <p> i </p> ne moraju da stoje u istom redu i to nema nikakvog uticaja na tag, tj. možete ih pisati onako kako smatrate da je Vama preglednije. Recimo:

<p>

Ovo je neki paragraf

</p>

Imam i jednu napomenu koju bih želeo da pomenem dok smo još na samom početku. Uvek čuvajte sve ono što promenite u vašim dokumentima, iz razloga jer browser-i neće prikazati rezultate promene koju ste vršili ukoliko nije sačuvana. Trudite se da Vam u naviku predje korišćenje prečica ukoliko želite da Vam izrada sajtova kasnije bude lakša. Prečice na tastaturi su: save -> ctrl+s, copy -> ctrl + c, paste -> ctrl+v, cut -> ctrl+x, undo ->ctrl + z, bold -> ctrl + b, find -> ctrl +f…

Da rezimiramo:

U ovom delu tutorijala napravili smo osnovu kada je u pitanju izrada sajta, razmotrili šta nam je potrebno da započnemo sa radom u ovim programskim jezicima i kako se pišu HTML tagovi.

Idemo na sledeću lekciju.