HTML prvi koraci - lekcija 8 - Univerzalni atributi tagova

Već smo govorili da različiti tagovi imaju svoje atribute. Sada ćemo govoriti o tome da različiti tagovi takođe imaju zajedničke atribute. Pogledaćemo najpopularnije među njima.

Atribut id

Atribut id predstavlja jedinstveno ime taga, takva imena ne smeju se ponavljati jer to može izazvati probleme u radu sa jQuery ili Javascript-om. Evo nekoliko primera korišćenja id atributa:

...
<ul id="menu1">
  <li id="item1">lorem</li>
  <li id="item2">ipsum</li>
  <li id="item3">zdravo</li>
  <li id="item4">sve</li>
</ul>
...
<div id="header"></div>

Atribut id može se koristiti za dodeljivanje CSS stilova pojedinačno za svaki blok, meni, stavku menija ili druge tagove. Takođe, id se koristi u Javascript-u (jQuery).

Atribut class

Atribut class označava pripadnost grupi tagova, slično kao id, class može da se koristi za dodeljivanje CSS stilova svim tagovima te klase odjednom. Za razliku od id-ja, klasa može biti ista za više tagova:

<ul id="menu1">
  <li class="item">lorem</li>
  <li class="item">ipsum</li>
  <li class="item">zdravo</li>
  <li class="item">sve</li>
</ul>

Atribut style

Atribut style služi za pisanje CSS stilova direktno u tagu. Ne morate još sada duboko ulaziti u ovaj atribut, biće detaljno obrađen u priručniku CSS. Evo nekoliko jednostavnih primera:

...
<div style="width: 200px; height: 100px; background: #dddddd">
Blok
</div>
...
<p style="font-size: 14px; color: #333333">
Tekst
</p>

Prvi primer prikazuje blok širine 200 piksela i visine 100 piksela, sa pozadinom #dddddd (nešto sivo). Drugi primer je paragraf sa veličinom fonta 14 piksela i bojom #333333 (blizu crne, ali nije potpuno crna).

Atribut title

Koristi se za iskakajuću pomoć (tooltip), kada mišem pređemo preko elementa na stranici:

...
<img src="./images/image.jpg" alt="foto" title="to sam ja" />
...
<a href="html2.html" title="moja stranica">Link</a>
...
<h2 title="naslov">Zdravo, Svet!</h2>

Naravno, postoje i drugi univerzalni atributi: accesskey, contenteditable, contextmenu, dir, hidden, lang, spellcheck, tabindex. Mislim da ćete se sa njima susretati kasnije kada budete radili na višelingvalnim sajtovima. Za sada je dovoljno da znate o osnovnim univerzalnim atributima.