Za izradu web stranica sve više se koriste CMS sustavi i pametni WYSWYG editori i mogli biste pretpostaviti da vam više i ne treba poznavanje osnovnih HTML oznaka, no to nije točno. Čak i pri radu s najsofisticiranijim sustavima često ćete morati promijeniti nešto u HTML kodu kako biste dobili željeni efekt. Isto tako, gotovo da je nemoguće ispravno zadati CSS stilove bez poznavanja HTML oznaka koje njima oblikujete. Ako odete još korak dalje i počnete programirati web aplikacije, tad morate vješto uklopiti kod aplikacije u HTML oznake. Dakle, morate ih naučiti, barem one osnovne. Slijedi pregled najvažnijih HTML oznaka.
html, head, body
Te tri oznake određuju strukturu dokumenta. Svaki dokument započinje i završava oznakom <html>, sastoji se od zaglavlja <head> i tijela dokumenta <body>. Oznake su parne i u svakom dokumentu bit će organizirane na slijedeći način:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Osnovna struktura</title>
</head>
<body>
<p>Ovdje ide sve što je vidljivo na stranici...</p>
</body>
</html>
Oznake za rad s tekstom
<p> - odlomak. Gotovo sav tekst bi trebao biti unutar odlomaka.
<br /> - prelazak u novi red. Koristite ako želite prijeći u novi red teksta bez pravljenja novog odlomka
<h1>, <h2>, <h3> - naslovi različitih veličina. h1 je naslov najveće veličine, u pravilu takav bi trebao biti jedan na stranici. Moguće je raditi i s naslovima h4, h5 i h6, ali tri razine naslova su vam gotovo uvijek dovoljne.
<strong> - služi za podebljavanje teksta
<em> - ukošeni tekst
Rad s listama
U HTMLu se najčešće koriste dvije vrste lista: lista s grafičkim oznakama i lista s brojevima
<ul> i <li> su oznake pomoći kojih kreiramo listu s grafičkim oznakama. ul kreira listu, a li oznake pojedine stavke u listi.
Primjer liste s grafičkim oznakama:
- kupus
- kelj
- šparoge
Gornja lista ima slijedeći html kod:
<ol> i <li> su nam potrebni za kreiranje liste s brojevima.
Primjer liste s brojevima:
- Varaždin
- Zadar
- Rijeka
Gornja lista ima slijedeći kod:
Iako se čini da te liste i nisu bogznakako zanimljive, liste su važne i treba ih koristiti za sva moguća nabrajanja. Uz malo znanja CSSa moguće je liste oblikovati u raznolike horizontalne i vertikalne izbornike.
Slike na stranici
Na stranice je moguće postaviti slike različitih formata. Najčešće korišteni formati su jpg (jpeg), gif i png. Slika se na stranicu uključuje pomoću oznake <img /> kao u slijedećem primjeru:
Argument src određuje put od dokumenta do slike, width i height širinu i visinu slikeu pikselima, a alt natpis koji se prikazuje ukoliko slika ne može biti prikazana ili služi kao opis slike.
Poveznice (linkovi)
<a> je oznaka kojom kreiramo poveznicu. Sve ono što se nađe unutar parnih oznaka <a> i </a> funkcionirat će kao poveznica, najčešće je to dio teksta ili slika. Da bismo odredili prema čemu "vodi" poveznica potrebno je zadati i argument href koji treba sadržavati adresu. Adresa može biti relativna ili apsolutna. Kad god je moguće (unutar istog sajta) treba koristiti relativne poveznice. Evo primjera:
<a href="http://www.google.hrl">hrvatski gugl</a>
Tablice
Za izradu tablice potrebne su oznake:
<table> - započinje i završava tablicu
<tr> - započinje i završava jedan red u tablici
<td> - započinje i završava jedno polje u tablici
Kod jedne jednostavne tablice od dva reda i tri stupca koja sadrži brojeve 1 do 6 izgledao bi ovakao:
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
Pri zadavanju tablice često se još zadaju argumenti cellpadding (odmak sadržaja polja od ruba polja u pikselima), cellspacing (razmak između polja tablice u pikselima), border (debljina linija tablice u pikselima).
Kod spajanja pojednih polja unutar <td> oznake koriste se argumenti rowspan (preko koliko redova se proteže polje) i colspan (preko koliko stupaca se proteže polje).
Za pojedina polja <td> kao i za cijelu tablicu <table> mogu se zadati argumenti width i height kojima zadajemo širinu ili visinu u pikselima ili postotcima.
Oznake za strukturiranje dokumenta
Da bismo rasporedili sadržaj na stranici i napravili atraktivan design koristimo se slijedećim oznakama
<div> kreira pravokutno područje u koje možemo staviti druge elemente stranice. Pomoću tih oznaka najčešće raspoređujemo i oblikujemo elemente stranice.
<span> omogućava da dio teksta stavimo unutar elementa na kojeg možemo primjeniti neko oblikovanje.
Unutar tih elemenata možemo staviti sve ostale elemente, praktično bilo što. Oba elementa se najčešće oblikuju css stilovima pomoću kojih im možemo odrediti veličinu, položaj na stranici kao i izgled.
Napomena za kraj
Ovo, naravno, nisu sve HTML oznake već samo pregled najvažnijih i najčešće korištenih. Isto tako, poneke od navedenih oznaka mogu imati i još neke dodatne argumente. Puno kompletnije preglede HTML oznaka možete pronaći na webu, predlažemo htmldog ili web-source.net. Naravno, Google je vaš prijatelj...
