Ovaj tutorijal govoriće o samim osnovama HTML-a. Kratko ću vam opisati od čega se mora sastojati jedna html stranica. Za početak radićemo sa verzijom koji je za sada standard, a to je HTML4. Pre nekog vremena izašla je i verzija HTML5. Ona polako postaje standard, tako da ću vam pokazati i kako sve ovo da napišete u ovoj verziji. Podrška pretraživača za ovu verziju još nije potpuna ali sasvim dovoljna za osnove. To ću raditi kako bi uočili neke razlike. Pa da počnemo.
Osnovna struktura HTML stranice
Možda ste već do sada videli sledeći kod:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <body> </body> </html>
Ovo što vidite ovde je osnovna struktura jedne HTML stranice. Kad god u nekom od editora, želite da napravite novu html stranicu, taj editor će vam dati neku predloženu strukturu HTML stranice sa kojom počinjete. Konkretno ovo je iz editora Adobe Dreamviewer. U sledećem delu ovog teksta ću razdeliti ovo i objasniti deo po deo.
HTML tagovi – osnova svake stranice
Kao što vidite ovaj kod se sastoji iz određenih reči uokvirenih zagradama oblika <>. Ovo predstavlja HTML kod ili kako se češće naziva – HTML tag. Svaka rezervisana reč uokvirena sa zagradama oblika <> predstavlja HTML tag. HTML se sastoji od velikog broja ovih tagova gde svaki od njih ima svoju strukturu, svoje atribute i način korišćenja. Atributi taga se pišu u okviru samog taga i sastoje se od para: ključ-vrednost. Primer jednog taga sa atributima bio bi:
<div class="nekaKlasa" style="width: 300px;">SuperCica, haj ja ninja</div>
Ovde vidimo jedan tag <div> sa dva atributa: atribut style sa vrednošću width:300px i atribut class sa vrednošću nekaKlasa
O atributima i samim tagovima pričaćemo u nekom drugom članku. Nastaviću sada o strukturi stranice.
!DOCTYPE – sam početak stranice
Svaka stranica bi po standardima trebala da počne ovim elementom. Ovaj element nam govori o kojem standardu HTML stranice se radi. Takođe daje link ka korišćenom standardu. To se vidi is samog taga sa atributima:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Atribut html označava da se radi o html stranici, PUBLIC nam govori da će stranica biti objavljena. Ako pogledate videćete da u ovom atributu imamo još neke vrednosti ispisane:
– W3C – označava standard koji određuje strukturu
– DTD XHTML 1.0 Transitional – predstavlja element kojim govorimo koliko ćemo strogi biti prema našem strukturnom kodu. Ovo znači da ako neko proverava validnost našeg koda postoje određene stvari koje se mogu progledati ili ne, zavisno od korišćenog standarda. On može biti Strict – koji određuje strogo pridržavanje standarda, ili kao u ovom slučaju Transitional – koji određuje ne tako strogo pridržavanje. Može imati i vrednost Frameset – ukoliko koristite okvire
– EN – označava jezik, po defaultu je engleski
Pored ovog stavljen je i link ka stranici na kojem je definisan standard XHTML.
E sad ono što sam vam obećala na početku. Rekla sam da se sve više koristi HTML5 za stranice. Ovde ćete videti prvu razliku. HTML5 na svojim stranicama ne piše ovoliki doctype. u ovom slučaju dovoljno je navesti samo sledeće:
<!DOCTYPE html >
Ne samo da se ovako počinje HTML5 stranica, nego sad možete i svaku stranicu početi na ovaj način. To je iz razloga što se gore pomenute stvari sada već podrazumevaju, pa ih nije potrebno navoditi. Zato i ne morate u detalje znati čemu oni služe.
Zaglavlje stranice
OK počeli ste vašu stranicu, napisali doctype i sad prelazite na sam html. Prvo sledeće što vidite su tag <html> sa navedenim namespace-om. Ovo neću objašnjavati zato što se u principu više i ne koristi i dovoljno je samo da stavite <html> bez namespace.
Sledećih nekoliko tagova predstavlja zaglavlje stranice. Da ovde ne bude zabune, ovo zaglavlje stranice nije ono koje će videti vaši posetioci na sajtu, već ono koje je bitno za sam pretraživač. Ovde vi svakom pretraživaču koji učita vašu stranicu dajete osnovne podatke o toj stranici. Takođe, a jako je bitno, nemojte ovaj tag mešati sa <header> tagom ili sa hederom iz MS WORD ili nekog drugog tekst editora. Ovaj deo nema veze sa tekstom koji se pojavljuje na vašoj stranici.
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head>
Ajde da pogledamo koji su to tagovi. Prvi i osnovni je tag <head>. Ovaj tag označava sam početak zaglavlja. U okviru njega imate navedena, bar u ovom primeru, dva taga. Tag <title> označava naslov stranice. To je onaj naslov koji će se u pretraživaču pojaviti na samom tabu stranice ili naslovnoj liniji pretraživača. Veoma je bitno da ovaj deo popunite. Nije problem i neće vam srušiti stranicu, ali zbog nečega što se zove Search Engine Optimisation, o čemu će biti reči u nekom od narednih članaka, bitno je da ovaj elemenat navedete.
Tag <meta> je u ovom slučaju prikazan samo kao elemenat koji sadrži informaciju o samom tipu stranice: text/html i o charset jeziku koji će biti korišćen. Ovaj tag se još koristi i još neke stvari, koje u ovom momentu nisu bitne, pa ih neću navoditi.
Pored ovih tagova, videćete na nekim stranicama da se pojavljuju tagovi i oblika <script >
i <style>. Ovi tagovi, iako se najčešće ovde pojavljuju, mogu se postaviti i na drugim mestima na stranici. Tag <script > označava učitavanje nekog JavaScript koda, dok tag <style> označava pisanje nekog CSS stila na stranici. O njima ću detaljno pričati u člancima koji se bave JavaScriptom i CSS stilovima.
Što se tiče HTML5 u ovom delu jedina razlika je da kada se koristi meta tag za prikaz informacije o sadržaju i charset-u, on je ovde pojednostavljen. Nema više potrebe da se govori da se radi o text/html sadržaju. Dovoljno je samo navesti da se koristi charset. Takođe po standardu charset koji se koristi je UTF-8.
U HTML5 vaše zaglavlje bi izgledalo ovako
<html> <head> <meta "charset=utf-8" /> <title>Untitled Document</title> </head>
Vaš sadržaj
Završili ste sa vašim zaglavljem, rekli pretraživaču neke stvari o vašoj stranici. Sada ostaje da popunite vašu stranicu. Kompletan sadržaj vaše stranice, sve ono što želite vašim posetiocima da prikažete, smešta se u okviru <body> taga. Ovo je drugi osnovni deo vaše stranice. Tu ćete ispisati sve. Ovaj tag ima nekoliko svojih atributa ali ih neću navoditi, jer se vrlo često on ostavlja ovako sam bez atributa. Možda ćete negde videti nešto oblika:
<body> </body> . . . . . . <body id="nekiID"></body> . . . . . . <body class="nekaKlasa"></body>
U prvom slučaju ovom elementu se zadaje id ili jedinstveno ime. U drugom slučaju se zadaje klasa, i to sa razlogom što se želi pridodati neki stil i pristupiti elementu, ali o ovome ću detaljno pričati u člancima koji se bave stilizaciji stranice i JavaScript-om.
SuperCica haj ja!
Ovo je otprilike sve sto vam treba da formirate svoju prvu html stranicu. Uglavnom će Vam vaši editori ovu strukturu davati sami, a vaš deo će biti da unesete svoj sadržaj. Pa ipak nije na odmet da znate bar malko šta vam ovi delovi znače i čemu u principu služe. Moj savet je da izbegnete sve suvišne stvari. Napravite sebi neki šablon koji ćete uvek koristiti i raditi sa njim. Moja predložena verzija za vas je:
<!DOCTYPE html > <html> <head> <meta charset="utf-8" /> <title>Untitled Document</title> </head> <body> </body> </html>
Poigrajte se malo. Napravite jednu html stranicu, dodajte neki tekst u body delu i pogledajte šta će Vam pretraživač pokazati.
Mi se vidimo (čitamo) u sledećem članku. Ostavljajte komentare i postavite pitanja.
Supercica haaaj ja!
