4.10. Minden taghez használható attribútumok

Default book

Eddig csak szigorúan a HTML legfontosabb elemeit néztük át, azonban, ha a CSS-sel és a javascripttel is akaurnk foglalkozni, akkor az alábbi rendszert is meg kell értenünk és a megfelelő helyen használnunk.

Az oldal HTML tag-jeit két féle módon is meg lehet jelölni:

Egyedi azonosító = ID attribútum

Egyrészt minden TAG az oldalon kaphat egyedi azonosítót, amely megkülönbözteti minden más TAG-től. Ez nem összetévesztendő az űrlapok name attribútumával, mert az egyedi azonosítás bármilyen TAg-re érvényes lehet. A szintaktika egyszerű, a TAG kap egy ID="érték" attribútumot (id="érték" is jó lesz).

<a href="http://www.fzolee.hu" id="fooldal">Ez a link a főoldalra visz</a>

Az ID értékének egyedinek kell lennie, szóköz nem lehet benne. Célszerűen csak az angol abc értékeit használjuk, illetve a számokat, esetleg néhány írásjelet.

Name attribútum - adatbeviteli mezőknél

Az adatbeviteli mezőknél használhatjuk a name attributumot. ezt elsősorban űrlapok elemeinél használhatjuk, ezért itt csak megjegyzem, de nem fejtem ki részletesebben

<form>
  <input type="text" name="elnevezes">
  <input type="submit" name="elküld" value="küld">
</form>

Osztály, class attribútum

Ha van több olyan TAG, amelyet ugyalyan módon szeretnénk megjelelölni (például ugyanazt a formázást akarjuk neki adni), akkor használhatjuk az class attribútumot: class="osztalynév" formában valahogy így:

<style type="text/css">
 .fooldal_link{
   color: red;
 }
</style>
<p>
<a class="fooldal_link" href="http://www.fzolee.hu">Főoldalra visz</a> <a class="fooldal_link" href="http://index.hu">Indexre visz</a><br />
<a class="fooldal_link" href="http://facebook.com">Facebookra visz</a><br />
<a class="fooldal_link" href="http://www.google.com">Google-ra visz</a><br />
<a class="aloldal_link" href="http://http://www.fzolee.hu/fw/3_segedprogramok_a_webfejleszteshez">Nem főoldalra visz</a>
</p>

A fenti példában az A TAG 4 példánya ugyanazt az osztály attribútumot kapta, de az 5. nem, így annak más a formázása. Ilyen:

Főoldalra visz Indexre visz
Facebookra visz
Google-ra visz
Nem főoldalra visz

Itt láthatunk a példában egy egyszerű stílusdeklarációt. A szöveg színe a fooldal_link osztály esetén pirosra változik, az alap kék helyett.