Osnovni HTML elementi tutorijal

Kako da napravite svoju prvu HTML stranicu sam vam već objasnila u prvom članku napisanom na blogu. Već sam Vam i objasnila šta su to HTML tagovi ili elementi i na koje stvari da obratite pažnju. U ovom članku nabrojaću Vam najosnovnije HTML elemente i u osnovi čemu oni služe. Navešću i par atributa koji su karakteristični za sve html elemente. Elementi(tagovi) se mogu podeliti u neke podgrupe, pa će tako i biti struktuiran ovaj članak.

Komentari u HTML-u

Sintaksa komentara u HTML-u je sledeća

<!-- Ovo je komentar. Videće se u source kodu dokumenta, ali ga nećete videti na stranici -->

Kao što ovde vidite komentar pišete u okviru znakova: <!– –>

Osnovni element html dokumenta

O njima sam Vam već pričala kada sam navodila osnovnu strukturu dokumenta. Nije na odmet da ih ovde ponovimo. To su:

• html
• head
• title
• link – koristi se za učitavanje spoljnih CSS dokumenata za stilizaciju stranice
• meta
• script – koristi se za učitavanja JavaScript kodova ili dokumenata
• style – koristi se za pisanje CSS stilova u okviru stranice
• body

Osnovni elementi sadržaja stranice

Ovo su elementi kojim ćete definisati sadržaj i postavljanje sadržaja na vašim stranicama. Sa ovim elementima, unutar body elementa određivaćete naslove, tekstove, nove paragrafe, novi red … i ostalo. Da pogledamo koji su to elementi:

• h1-h6 – naslovi (headings)
• p – paragraf u tekstu
• br – novi red u tekstu (break line)
• div – ovaj element se ne tiče toliko teksta, koliko određuje određeni deo u kojem će biti smešten sadržaj. On predstavlja svojevrstan “panel” u kojem stavljate šta god mislite da treba
• hr – horizontalna linija, koristi se za razdvajanje sadržaja.U većini slučajeva se ne koristi više, uglavnom zato što se to razdvajanje sada definiše CSS stilovima ili nekim slikama
• blockquote – koristi se za citiranje nekog dela teksta, sa navođenjem autora

Elementi za formatiranje teksta

Sada kada imate neki sadržaj na svojoj stranici i postavili ste ga na određeni način, želite da ga formatirate. Formatiranje teksta predstavlja obeležavanje određeneog dela teksta na neki od načina: zadebljano, iskrivljena slova, podvučene rečenice…
Elementi koji se u tu svrhu koriste su:

• strong ili b – zadebljanje teksta (bold)
• em ili i – iskrivljenje teksta (italic)
• u – podvučen tekst (underline)
• sub – podtekst
• sup – nadtekst

Linkovi i slike na stranici

Linkovi se u HTML pišu elementom:

• a – anchor

Slike se postavljaju korišćenjem elementa:

• img – ovaj element nema tag za zatvaranje nego se zatvara sa znacima />

Liste

Kao što znate u pisanju tekstova postoje dve vrste listi: sređene i nesređene liste. HTML podržava obe vrte elementima:

• ul – predstavlja početak nesređene liste – svaki element liste započinje nekim znakom
• ol – predstavlja sređenu listu – svaki element liste započinje brojem ili slovima sortirano rastuće

Svaki deo liste se obeležava zasebno i u tu svrhu koristi se element: li

Tabele

Za pisanje tabela na html stranici treba nekoliko elemenata. Ispisaću Vam ovde sve elemente a onda ću na jednom primeru da vam pokažem kako to možete iskoristiti:

• table – početak tabele
• tbody – telo tabele
• thead – telo zaglavlja tebele
• tr – red tabele
• td – ćelija tabele
• th – ćelija tabele u zaglavlju

Način na koji ćete, sa ovim elementima formirati tabelu sa zaglavljem, jednim redom i tri kolone je sledeći:

</pre>
<table><!-- početak tabele -->
<thead><!-- početak zaglavlja tabele -->
<tr><!-- red u zaglavlju --> 
<!-- ćelije u zaglavlju - za svaku kolonu po jedna, ukupno 3 -->
<th>Zaglavlje kolone 1</th>
<th>Zaglavlje kolone 2</th>
<th>Zaglavlje kolone 3</th>
</tr>
</thead>
<tbody><!-- početak tela tabele -->
<tr><!-- red u tabeli --> 
<!-- obične ćelije u tabeli, za svaku kolonu po jedna, ukupno tri -->
<td>Ćelija 1</td>
<td>Ćelija 2</td>
<td>Ćelija 3</td>
</tr>
</tbody>
</table>
<pre>

Evo kako ova tabela izgleda:

Zaglavlje kolone 1Zaglavlje kolone 2Zaglavlje kolone 3

Ćelija 1Ćelija 2Ćelija 3

Sa malo stilizacije ovu tabelu možete srediti da lepo izgleda, ali o tome ćemo kasnije. Ukoliko imate neki od starijih tutorijala za html, videćete da se preporučuje da se tabele koriste za strukturu stranice. To više nije validno u HTML-u pa zato nikako to nemojte raditi. Za tu svrhu danas se koriti element div i uz ,alo stilizacije CSS-om možete postići jako lepe izglede stranica.

HTML forme

Elemente forme ćete često koristiti pri pravljenju nekih formi za unos podataka. Najčešće korišćenje su forme za slanje mejla ili pisanje komentara, što možete videti pri dnu ove stranice.
Elementi forme su:

• form – označava početak neke forme
• fieldset – označava deo sa nekim elementima
• legend – naslov za element fieldset
• label – tekst pored nekog elementa forme (labela)
• input – polje unosa. Zavisno od tipa polja može se unositi tekst, šifra, može biti dugme, radio dugme ili check polje
• button – noviji element, koristi se za dugmiće
• textarea – element u kojem se unosi tekst sa više linija
• select – predstavlja listu elemenata, od koje se bira jedna ili više opcija, zavisno od podešavanja. Svaki element u ovoj listi obeležava se posebnim html tagom: option

Neki od osnovnih atributa

Već sam napomenula da svi HTML elementi imaju svoje atribute. Neki su karakteristični samo za te elemente a neki se ponavljaju kod svih. Bez nekog većeg objašnjavanja ovde ću vam navesti atribute koji su prisutni kod svih elemenata:

• id – označava jedinstveno ime elemenata, kako smo ga mi nazvali
• style – koristi se za pisanje stila elementa
• class – definiše CSS klasu, uglavnom se koristi za definiciju stila, a u poslednje vreme i radi pristupa elementu putem nekog script jezika

Pored ovih atributa navela bih atribute koji su specifični za elemente za linkovanje i slike:

• href – koristi se kod linka, predstavlja link ka stranici
• src – koristi se kod slike. Predstavlja putanju ka slici
• alt – predstavlja vrednost koja će se prikazivati na ekranu, ukoliko iz nekog razloga, slika nije mogla biti učitana
• title – naslov koji će se pojaviti kada pređete preko elementa mišem

SuperCica haj ja!

Ovo je samo mala lista elemenata, ali ove elemente ćete najčešće koristiti u radu. Gledajte na ovo kao na kratku referencu osnova svakog html-a. O svakoj grupi elemenata pisaću Vam posebno uz dosta primera, koji će, nadam se, dosta razjasniti neke stvari.
Toliko za ovaj put. Pišite mi ukoliko imate pitanja, ili još bolje, ostavite komentar. Dajte svoj predlog ili kritiku.
SuperCica haj aj zdravo!