HTML (HyperText Markup Language, jezik za označavanje hiperteksta) je opisni jezik specijalno namenjen opisu web stranica. Pomoću njega se jednostavno mogu odvojiti elementi kao što su naslovi, pasusi, citati i slično. Pored toga, u HTML standard su ugrađeni elementi koji detaljnije opisuju sam dokument kao što su kratak opis dokumenta, ključne reči i slično. Ovi podaci su poznati kao meta podaci i jasno su odvojeni od sadržaja dokumenta. Sam standard održava W3C konzorcijum (World Wide Web Consortium).
Naredna tema je namenjena onima koji su tek počeli da se bave razvojem Web-a. Ako imate do jedne godine iskustva ili manje, neki od narednih saveta vezanih za HTML Vam mogu pomoći da unapredite svoja znanja iz ove oblasti.
1. Uvek zatvarajte tagove
Ranije nije bilo neobično videti delove koda kao što je ovaj:
<li>Text 1.
<li>Text 2.
<li>Text 3.
Možete primetiti da je izostavljeno zaokruživanje <ul> ili <ol> tagovima. Osim toga, mnogi su se odlučivali za opciju da <li> tagove takođe ostavljaju otvorenim. Po današnjim standardima, ovo se jednostavno smatra lošom praksom i trebalo bi je izbeći u 100% slučajeva. Dakle, uvek zatvarajte tagove u okviru HTML koda. U suprotnom, nailazićete na probleme sa validacijom i greške u učitavanju stranice na svakom koraku.
Preporuka
<ul>
<li>Text 1. </li>
<li>Text 2. </li>
<li>Text 3. </li>
</ul>
2. Prikažite ispravan DocType
DOCTYPE (Document Type Declaration) ide ispred HTML taga u vrhu stranice i govori pretraživaču da li stranica sadrži HTML ili XHTML specifikaciju, odnosno govori validatoru koju verziju HTML-a ili XHTML-a da koristi za proveru sintakse dokumenta.
HTML 4.01 Strict – Sadrži sve HTML elemente i atribute, ali ne uključuje prezentacione i prevaziđene elemente (kao što su fontovi). Okviri (frameset) nisu dozvoljeni.
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>
HTML 4.01 Transitional – Sadrži sve HTML elemente i atribute, uključujući prezentacione i prevaziđene elemente (kao što je font). Okviri (frameset) nisu dozvoljeni.
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>
XHTML 1.0 Transitional – Sadrži sve HTML elemente i atribute, uključujući prezentacione i prevaziđene elemente (kao što je font). Okviri (frameset) nisu dozvoljeni. Takođe, kod mora sadržati ispravnu XML sintaksu.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
XHTML 1.0 Strict – Sadrži sve HTML elemente i atribute, ali ne uključuje prezentacione i prevaziđene elemente (kao što su fontovi). Okviri (frameset) nisu dozvoljeni. Kod mora sadržati ispravnu XML sintaksu.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
Postoje različita mišljenja po pitanju pravilnog izbora DocType deklaracije dokumenta. Jedno mišljenje je da je najbolja praksa koristiti XHTML Strict verziju. Međutim, posle nekih istraživanja, zaključeno je da većina pretraživača, prilikom interpretacije stranice, ovaj DocType vraćaju na običan HTML. Iz tog razloga, većina je odabrala da koristi HTML 4.01 Strict deklaraciju. Za bilo koju opciju da se odlučite, biće potrebno da testirate funkcionalnost stranice za različite Internet pretraživače.
3. Izbegavajte definisanje stilova unutar HTML elemenata
Tokom dužeg rada na pisanju stranice možete biti u iskušenju da u hodu dodate i poneki stil.
<p style= “ color: blue;”>Tekst</p>
Naravno, ovo izgleda bezopasno, ali ukazuje na grešku u Vašoj praksi pisanja HTML koda.
Kada kreirate HTML stranicu, nemojte još ni razmiljati o stilovima. Umesto toga, počnite da dodajete stilove onda kada je HTML stanica u potpunosti kodirana. Završite kreiranje HTML dokumenta, a zatim pozovite taj tag iz eksterne stranice sa stilovima.
Preporuka:
#element-1 p {
color: blue;
}
<p id=“element-1”>
</p>
4. Smestite sve eksterne CSS fajlove u okviru <head> taga
Tehnički, stranice sa stilovima možete smestiti gde god to želite. Pa ipak, HTML specifikacija preporučuje da oni budu smešteni na početku dokumenta, u okviru <head> taga. Primarna korist od ovakve prakse jeste da će se vaše stranice naizgled brže učitavati.
<head>
<title> HTML – Praktični saveti za početnike</title>
<link rel=“stylesheet” type=“text/css” media=“screen” href=“css/style.css” />
<link rel=“stylesheet” type=“text/css” media=“screen” href=“css/layout.css” />
</head>
5. Razmislite o smeštanju Javascript fajlova na kraj HTML dokumenta
Zapamtite da je prioritet da se posetiocima Vašeg sajta stranica učita što je brže moguće. Pretraživač ne može nastaviti sa učitavanjem ostalog sadržaja stranice dok učitava skriptu. Iz tog razloga korisnik mora da čeka duže pre nego što vidi neki napredak.
Ako Vaš sajt sadrži Javascript fajlove čija je jedina svrha dodavanje funkcionalnosti stranice – na primer, nakon što posetilac klikne na dugme – slobodno smestite ovakve fajlove na kraj dokumenta, pre zatvaranja <body> taga.
Preporuka:
</div><!– end container –>
<script type=“text/javascript” src=“path/to/file.js”></script>
<script type=“text/javascript” src=“path/to/anotherFile.js”></script>
</body>
</html>
6. Validacija HTML i CSS koda
Preporučujemo svima, posebno početnicima, korišćenje Web Developer plugin-a namenjenog Firefox-u i dve veoma korisne opcije “Validate HTML” i “Validate CSS”. Iako je CSS relativno jednostavan za učenje, ima dosta stvari koje će vam zadavati muke dok se ne uhodate. Kao što ćete i sami zaključiti, obično su “rupe” u CSS sintaksi te koje uzrokuju čudne probleme sa elementima Vaše web prezentacije. Validacija koda većinu tih problema može rešiti.
Kao razloge za validaciju W3C navodi sledeće:
- Test validacije možemo shvatiti kao alat za debbuging. Iako sami pretraživači u novije vreme izuzetno dobro parsiraju čak i najlošije napisan HTML dokument, neke greške nije moguće prevazići. Poštovanje standarda Vam osigurava da će posetioci videti Vašu internet prezentaciju upravo onako kao Vi želite da izgleda, bez obzira koji browser koriste.
- Osiguravamo da se stranica ispravno prikazuje i u budućim verzijama pretraživača
- Olakašava održavanje
- Znak je profesionalnosti
Web sajt ne mora biti savršeno kodiran za dobijanje dobrog mesta u rezultatima pretraga, ali ispravan kod može Vam garantovati da će se stranica korektno prikazati i da će pretraživači ispravno indeksirati i zapamtiti sadržaj Vaših stranica. Takođe, validacijom možete otkriti suvišan i nepotreban kod, kao i onaj koji se ne prikazuje ispravno u svim browser-ima.
7. Firebug
Firebug je, bez sumnje, najbolji Firefox plugin koji ćete ikada koristiti prilikom kreiranja web sajtova. Ne samo da je od velike pomoći za otklanjanje grešaka u Javascript-u, već sa velikom lakoćom možete pregledati CSS, HTML i JavaScript kodom bilo koje stranice na Internetu, utvrditi kako su elementi stranice povezani i proveriti kako pojedine izmene u kodu utiču na izgled stranice.
8. Koristite H1-H6 tagove
Najbolja praksa je korišćenje svih šest <h> tagova, iako su u najvećem broju slučajeva u upotrebi samo prva četiri. Iz semantičkih i SEO razloga, naterajte sebe da zamenite <p> tagove <h6> tagovima kada je to moguće.
Kao i za sve ostalo, opredelite se za ono što najviše odgovara Vašem web sajtu. Međutim, ako pravite blog preporučujemo da sačuvate <h1> tagove za naslove vesti.
9. Navigacija u okviru liste
Svaki sajt ima deo sa navigacijom neke vrste. Iako definitivno možete izaći na kraj sa ovako definisanim menijem:
<div>
<a href=”#”>Home </a>
<a href=”#”>About </a>
<a href=”#”>Contact </a>
</div>
Ispravno je koristiti <ul> tag, s obzirom da mu je namena upravo kreiranje lista.
Preporuka
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About</a></li>
<li><a href=”#”>Contact</a></li>
</ul>
10. Dodajte svim slikama ALT atribut
<IMG SRC=”image274.jpg” />
Iako je jednostavije ignorisati potrebu za definisanjem alt atributa u okviru <img> tagova, veoma je značajno, kako zbog dostupnosti, tako i zbog validacije stranice, da odvojite vreme i definišete ove parametre.
Preporuka
<img title=”alvihost – hosting, internet marketing i web design usluge” alt=”alvihost logo” src=”images/logo.gif”/>
11. Učite od boljih
Ako ste tek počeli da učite HTML, razumljivo je da ne možete odmah sve sami znati, kao i da niste sasvim sigurni odakle da počnete. Za početak, isprobajte naše savete i pronađite na Internetu stranice koje vam se sviđaju i otkrijte kako su kodirani elementi tih stranica. Vremenom ćete početi da razvijate svoje sopstvene stilove i metode.
Primetili ste neke Javascript efekte koje biste želeli da naučite? Veoma je verovatno da je dizajner stranice koristio neki plugin koji proizvodi taj efekat. Pogledajte Source i potražite u kodu naziv skripte (obično na početku ili pri kraju HTML dokumenta). Zatim naziv potražite na Google-u i implementirajte novi plugin u Vaš sajt.
