U prošlom članku pisala sam Vam o osnovnoj strukturi HTML stranice i od čega se sastoji. Pomenula sam Vam da se svaka stranica sastoji od HTML elemenata nazvanih HTML tagovi. Pa ipak ostala sam vam dužna detaljnijeg objašnjenja tagova. Ovaj članak neće biti dugačak. Samo ću vam detaljno reći neke stvari o tagovima i kako ih danas možete pisati korišćenjem HTML5 standarda.
Šta je to HTML tag?
HTML tag ili HTML element je osnovni element svake stranice. To su specijalne rezervisane reči uokvirene zagradama <>. Svaki od tih tagova ima svoje značenje. Neki od njih su usko specijalizovani i odnose se samo na određene stvari dok druge možete koristiti u razne svrhe. Svaki od tagova ima svoje atribute. Atribut HTML elemenata se sastoji od para ključ-vrednost. U radu ćete uočiti da se pojedini atributi ponavljaju kod tagova.
Kompletnu listu elemenata možete naći na raznim web stranicama. Ja ću vam detaljno opisaati neke elemente u narednim člancima koje budem objavljivala. Do tada, ako ste radoznali, pogledajte neki od ovih sajtova:
http://www.htmldog.com/reference/htmltags/
http://www.w3schools.com/tags/default.asp
<VELIKA SLOVA> ili <mala slova> u tagovima?
Možda ste nekada primetili da su elementi na nekim stranicama napisani velikim slovima. Na primer, tag možete napisati na jedan od dva načina ( koristiću tag koji vam je poznat iz prošlog članka ):
<BODY></BODY> <body></body>
U početku kada su se pravile HTML stranice, kako bi ove tagove razlikovali od ostalih stvari na stranici, pisalo se velikim slovima. Od uvođenja standarda HTML 4 ovo je postalo nepravilno. To znači da ako bi za takvu stranicu proveravali validnost ovo bi se pojavljivalo kao upozorenje. Iako nije velika greška pisati na ovaj način, opšte je prihvaćeno da se HTML tagovi pišu malim slovima. Možda vam kao početniku bude lakše da radite sa velikim slovima, ipak savet je da to ne radite. Navikavajte se od početka da sve pišete pravilno, ma koliko vam bilo to teže.
Danas imate editore gde je urađeno naglašavanje koda (Syntax highlighting), gde se kod na stranici obeležava nekom bojom i/ili fontom, zavisno od jezika kojem pripadaju. Na taj način možete lako razlikovati svoje HTML tagove od ostalog dela koda na stranici. Tako vam neće biti teško da se snađete posle u svom pisanom kodu. Takođe vam editori dozvoljavaju i da menjate boje koda pa onda možete sami izbrati boju vaših html tagova. Evo primera iz dva editora: Adobe Dreamviewer i Sublime Text 2, da uočite razliku
Zatvaranje HTML tagova
Možda ste primetili u prošlom članku da se neki tagovi pišu drugačije. Da vidimo to na konkretnom primeru:
<meta charset="utf-8" /> <title>Untitled document</title>
Kao što možete videti tag <title> ima svoj tag zatvaranja tj, završava se sa </title>, dok <meta> nema taj deo, već se sve nalazi u jednom tagu u obliku: /> . Videćete kada kasnije budem još pričala o html-u kako će neki tagovi biti ovakvi, a neki ne. Nemojte se plašiti toga, brzo ćete zapamtiti kako se koji tag zatvara. U novijim pretraživačima čak nije obavezno zatvaranje tagova, to sam pretraživač radi za nas. Ali savet je da obavezno zatvarate tagove koji treba da se zatvore, i obavezno stavite /> kod onih kod kojih nema zatvornog taga. Jeste malko teže za pisanje, duže traje, ali je dobra praksa za vas i pravilnije je.
Atributi HTML tagova
Nemam puno u ovom mometnu da vam kažem za atribute. Želela sam samo da vam naglasim njihovo pisanje. Rekla sam vam da je to par koji se sastoji od ključa i njegove vrednosti. Taj par se pise na sledeći način (primer atribut ID koji je kod većine tagova prisutan):
id="nekiID"
Atributi, kao što vidite se pišu navođenjem ključa i zatim vrednosti ključa pod navodnicama. U današnjim pretraživačima je dozvoljeno da se ne koriste navodnici ali napominjam da je dobra praksa koristiti ih. Kod će biti pregledniji i neće doći do zabune kod velikih stranica.
SuperCica haj ja!
Na kraju samo mali zaključak u vidu saveta:
– pišite tagove malim slovima
– zatvarajte tagove koji to traže, na način na koji traže
– pišite atribute sa navodnicama, biće vam preglednije kasnije
To je to o tagovima. Nadam se da su vam sada malo jasniji. Ukoliko još imate nekih nedoumica pitajte me ili pošaljite komentar.
SuperCica haaaj aj zdravo!
