Nakon dužeg vremenskog perioda od dana kada je objavljena najava za serijal, vrijeme je za prvi tutorijal koji će vas uvesti u svijet HTMLa i CSSa. Prije nego što krenemo dalje, uputio bih riječi izvinjenja svima onima koji su htjeli da nastave učiti web programiranje na ovoj stranici, a nisu mogli zato što nisam mogao pronaći vremena zbog silnih obaveza koje su me snašle.

Morate znati da ne postoji ekspert u HTML-u i CSS-u. Na primjer odete na razgovor za posao (web dizajnera naravno, ne mislim na komunalije) i neko vam postavi pitanje: „Da li poznajete CSS i HTML?“ – taj scenario sigurno nećete doživjeti. HTML je jako jednostavan, a kada vam sa praksom u memoriju uđe nešto od CSS sintakse, onda ćete bez problema baratati sa izradom jednostavnih web stranica koje će vam na početku izgledati super, a kasnije ćete vidjeti da je to bezveze i da niste u fazonu.

Nakon što se ukratko upoznate sa osnovama, ja ću vam konkretno dati web lokacije pomoću kojih možete proširiti svoje znanje o programskom jeziku kojeg obrađujemo. Ne znam kakav mi je auditorij, ali oni koji se do sada nisu susretali sa programskim jezicima trebali bi znati da oni zaista imaju obilnu sintaksu i da ćete jednostavno morati koristiti Google da se podsjetite sl.

Lično poznajem dosta profesionalnih developera ispred kojih su stalno knjige. Ako ne znate da koristite Google i da tražite literaturu koja se tiče vaše oblasti, vjerujte, džaba vam svi tutorijali jer oni od vas nikada neće napraviti profesionalca.

I da … zašto ne znam kakav mi je auditorij?! Zato što su komentari na prošlom članku bili nevezani za njega, ali ono baš – totalno. Nadam se da će ovaj put komentari sadržavati vaša iskustva, probleme, primjedbe itd. a ne vaša neispravna tumačenja stihova/ajeta iz tamo neke svete knjige. Čast izuzecima kojima se ovim putem zahvaljujem. Mir vama! (ovo nema veze sa papom Franjom)

HTML

Koga interesuje historija HTMLa ili možda od čega je ovo akronim itd. neka ukuca samo „HTML history“ ili eventualno „kursevi engleskog“ ako se sa prethodnim upitom teško snalazi. U osnovi, HTML je kostur stranice koji sadrži sve podatke. Ono što radite sa CSSom jeste da samo te podatke oblikujete.

U HTMLu vi definišete da će na vašoj web stranici pisati BANANA, ali putem CSSa vi dajete toj riječi boju (žuta, crna, zelena; kakvu već jedete), a zatim povećate font itd. Razumjeli? Ako niste, evo još bolji i slikovitiji primjer od banane. Zamislite da je Darko ovaj blog napravio samo u HTMLu. Kako bi stranica izgledala?

TRENUTNO: http://i.imgur.com/DTkeFRv.png

BEZ STILOVA (samo HTML): http://i.imgur.com/wrIFduz.png

TAGOVI

Vrijeme je da se fokusiramo na kod i napravimo kostur za stranicu koju ćemo oblikovati putem CSSa u narednom tutorijalu.

Ono što čini osnovu HTML koda su tagovi, a u tagovima se piše određeni tekst. Kako uočiti tag? Jednostavno – on se sastoji od < i >. Banalni tag za boldiranje teksta je <b>, odnosno <b> i </b>. Svaki ovaj tag se sastoji od 3 dijela. Prvi dio taga je samo njegovo otvaranje npr. <b>, zatim drugi dio taga je tekst što je konkretno u našem slučaju tekst kojeg želimo boldirati, a zatim nakon što sve završimo napišemo </b> gdje ova kosa crta označava završetak taga. Kada ne bi nju stavili onda bi se taj tag prenio na cijeli ostatak koda.

KOD PRIKAZ UŽIVO
Želio bih ovo podebljati Želio bih ovo podebljati
Želio bih <b> ovo podebljati Želio bih ovo podebljati
Želio bih <b> ovo </b> podebljati Želio bih ovo podebljati
Imaju izuzeci, npr. <hr> tag koji služi da prikaže horizontalnu liniju. Ima logike? Gore imate tag koji se otvori, pa se potom zatvori jer u sebi obuhvata dio teksta na koji se odnosi. Da li vam je potrebno isto to i za linije? Ne! Linija je linija, dovoljno je napisati <hr> i pojavit ce se, nema potrebe za </hr> pa da u nju ide neki tekst. Isto važi za <br> tag koji će učiniti da se tekst prebaci u red ispod.

Kasnije ćemo spomenuti ove tagove + tagove kojima se mogu dodijeliti određena svojstva (atributi).

IZRADA PRVE WEB STRANICE

Vi možete napisati u vašem text editoru kod iz gore navedene tabele i on će funkcionisati kada ga spremite kao .html datoteku. Ali, ako ja želim da promijenim naziv stranice koji će se prikazivati u tabu browsera ili ako želim da uključim neku datoteku u sami index.html, eh tu već nastaje problem. Preciznije rečeno, mi moramo koristiti kod koji će browseru reći koji dio da prikaže korisniku, a koji dio da vrti ‘ispod haube’.

Kada otvorimo naš text editor (ko nema instaliran neka koristi http://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic) prvo što ćemo uraditi jeste da napisati HTML tag na način da ga otvorimo i zatvorimo. Na ovaj način mi smo počeli našu stranicu, a ujedno je i završili sa </html> tagom.

Unutar <html> i </html> tagova idu sada svi drugi tagovi jer smo rekli da se HTML sastoji od tagova i teksta. Konkretno, stavićemo <head> i </head> unutar <html> i </html>.

Trebalo bi ovako izgledati:

Da li mora biti baš ovako napisano? Što se tiče sintakse – DA, ali što se tiče odvajanja u redove itd. – NE. Jednostavno vi možete čitav kod napisati u jednoj liniji:

Ali to nije pregledno, teško se snalazi u ovome kodu pa zato se koristi indentacija, odnosno uvlačenje redova tako da tvore logičku cjelinu. Dovoljno je da u editoru selektirate tekst i stisnete tipku TAB.

Da detaljno analiziramo prije nego što pređemo dalje: HTML je osnovni tag koji sadržava čitavu stranicu. Sa unošenjem <html> mi započinjemo stranicu, a sa </html> mi je završavamo. Jednostavno! Sada želimo da ubacimo <head> u kojem će biti informacije koje browser neće prikazivati korisniku, ali taj <head> je sastavni dio stranice, a rekli smo da čitava stranica mora ići u <html> tagove pa ga jednostavno ubacimo unutar <html>, odnosno otvorimo ga, a zatim zatvorimo.

I napokon, zadnji tag kojeg ćemo uključiti u osnovu naše web stranice je <body>. Pogodite čemu on služi! Samo ime govori da on čini tijelo stranice, odnosno sve tagove, a samim tim i slike, tekstove, forme, tabele itd. – sve to ide u body. Sve što se nađe između <body> i </body> će biti vidljivo korisniku, a sve ono unutar <head> i </head> će slati browseru informacije koje se neće rezultirati na <body> (osim u slučaju kada uključite .CSS koji će davati oblik podacima u bodyu, ali to se ponovo ne tiče samog mijenjanja sadržaja bodya nego njegovog oblikovanja).

Možete li već sada pretpostaviti gdje će se nalaziti <body> i </body>? Nalazit će se unutar HTML taga, ali van HEAD taga.

Ako ovo pokrenete – neće se ništa dešavati jer unutar ovih tagova koji se otvaraju i zatvaraju ne stoji ništa. Ove tagove nazivamo STRUKTURNIM TAGOVIMA. Unutar ovih strukturnih tagova će biti ostali tekustalni tagovi i sl.

Spomenuli smo gore naslov stranice u tabu browsera. Za to koristimo <title> i </title> (u daljnjem tekstu: title tag). S obzirom da se to ne prikazuje na našoj stranici odnosno u tom ‘bijelom prostoru’ onda ćemo title tag smjestiti unutar head taga. Kao što smo gore rekli, unutar taga ide neki tekst na koji će taj tag biti primijenjen pa ćemo u ovom slučaju unutar title taga napisati naziv naše stranice.

Unutar body taga napisat ćemo par rečenica koje želimo da prikažemo.

Sada je samo poenta stavljati što više tagova i na taj način prilagođavati strukturu web stranice.

S obzirom da već pretpostavljam da ste sve ovo lijepo usvojili, odmah ćemo nabacati par tagova i rasporediti ih na stranici bez objašnjavanja kako-zašto jer smo to već par puta objasnili. Sve tagove koje budem navodio odnosiće se na BODY, odnosno tijelo stranice.

<hX> Naslov/podnaslov </hX> gdje X označava broj od 1 do 6. Kod ovog taga, broj 1 označava najveću vrijednost, dok broj 6 označava najmanju.

<p> Paragraf </p> označava paragraf. Jednostavno, ako želite vaš tekst da podijelite u cjeline – koristite za svaki paragraf <p> i </p>. Za oni koji ne znaju šta je paragraf, ovo se može predstaviti kao tekst koji će za 2 linije biti odvojen od ostalog teksta.

Postavlja se sada pitanje, kako rasporediti tagove unutar tagova? Npr. Ako imate paragraf, a u paragrafu želite da boldirate tekst. Nekima je to jako jednostavno za shvatiti, a neki imaju problem. Upravo zbog toga trebaju se igrati kodom i stalno nešto novo pokušavati. U ovom našem slučaju, p tag će stvoriti paragraf, a bolidranje dijela paragrafa je ponovo unutar paragrafa, sto znaci da je paragraf prioritet nad <b>. Koristeći sve tagove koje smo do sada naučiči, napisaću kod neke jednostavne web stranice i s tim završiti ovaj tutorijal.

JOŠ NEKE SITNICE

Nekad se često početnici zapitaju: „Zašto koristim H1 tag ako mogu napisati normalno tekst kojeg ću povećati i boldirati u CSSu?“. Odgovor će sam doći kada krenete raditi veće web stranice koristeći samo HTML i CSS. Kada vaša stranica bude imala podstranice (npr. NASLOVNA, O NAMA – na to mislim) i kada na svakoj toj stranici bude bio naslov, a vi hoćete da promijenite naslov u crvenu boju – onda ćete shvatiti da ćete korištenjem h1 taga moći preko samo jedne linije odrediti da svi naslovi budu crveni, ali i da kasnije u 2 sekunde promijenite tu boju u neku drugu umjesto da idete mijenjati svaki dio koda posebno itd. Učite se od početka sve lijepo slagati u cjeline. Kada budemo obradili klase i Idove puno toga će biti jasnije i moći ćete ući u srž HTMLa.

KRAJ!

To je to! Nadam se da je tutorijal bio jasan, praktičan i zanimljiv. Volio bih da me sve što vas interesuje upitate u komentarima pa makar pitanje bilo „Kako si izvukao HTML sa Darkove stranice?“ itd. Sa vašim prijedlozima možete samo poboljšati kvalitet tutorijala.