HTML-bevezető

A tagek szemantikai jelentése, paraméterek

Amikor szövegszerkesztő programmal dolgozunk, a szöveget bekezdésekre szoktuk tagolni, illetve címsorokkal jelezzük az egyes fejezetek és alfejezetek címét is. A címsorok alapján pedig egyszerűen létrehozhatjuk a dokumentum tartalomjegyzékét is. Ha viszont a dokumentum létrehozásakor nem használtunk címsorokat, hanem mondjuk csak nagyobb betűvel, félkövér stílussal írtuk a fejezetek címét, akkor bár a dokumentum kinézete nem feltétlenül változik, mégsem lesz ugyanolyan jól kezelhető, hiszen például tartalomjegyzéket sem tudunk automatikusan készíteni. Azáltal, hogy nem címsor stílust használtunk, hanem csak egyszerűen nagyobb betűméretű szöveget, nem jeleztük a szöveg speciális szerepét, jelentését (más néven szemantikáját), mégpedig azt, hogy egy címsorral van dolgunk.

Ugyanez a helyzet a HTML-dokumentumok esetén is. Nagyon fontos, hogy ne a kinézet alapján készítsük el az oldalunkat, hanem az egyes elemek által hordozott jelentés (szerep) alapján! A szövegnek olyan, több mondatból álló egységét helyezzük el egy bekezdésbe, amely önálló gondolatot fejez ki. A megfelelő elemet használjuk a fejezetek (címsorok) megadására! Ha idézünk egy forrást, akkor már a kódban is idézetként jelöljük, ne egyszerűen dőlt betűvel jelenítsük meg! Ha rövidítést használunk, akkor ezt megfelelő tagek között helyezzük el!

Nézzünk egy egyszerű példát! Ha például egy betűszót szerepeltetünk a szövegben, akkor ezt külön taggel jelölhetjük, megadva azt, hogy mi az adott betűszó kifejtése.

Gondolom, az Olvasók között kevesen vannak, akik fejből tudják, hogy minek a rövidítése az FNNKIK. Ezért is érdemes jelölni ezt a HTML-kódban, mégpedig az <abbr> taggel. A tag helyes használatával elérhetjük, hogy hozzáférhető legyen az a szöveg is, amely érthetővé teszi a rövidítést. Ha a rövidítés fölé visszük az egeret, akkor kiderül, hogy pontosan hol jelent meg ez a publikáció.

A fenti bekezdés HTML kódja:

<p>A szerző ebben a témában írt publikációja megjelent az
<abbr title="Fertődi Növénynemesítési és Növénytermesztési
Kutató Intézet Közleményei">FNNKIK</abbr>-ban.</p>

Paraméterek használata

Láthatjuk, hogy a fenti példában nem csak az <abbr> taget használatuk, hanem kiegészítettük azt egy paraméterrel (más néven attribútummal). Jelen esetben a title paramétert kellett használnunk (nem keverendő össze a <title> taggel), amellyel az adott rövidítés kifejtését adhattuk meg. A paraméter hatására jelenik meg a szöveg akkor, ha az elem fölé visszük az egeret, illetve a képernyőolvasó programok ezt a szöveget fel tudják olvasni.

Általánosan elmondhatjuk, hogy paraméterek csak a tagek nyitóutasításaiban szerepelhetnek, a záróban nem. A paraméterek előtt üres helyet (space) kell hagynunk, a paraméter értéket pedig egyenlőségjel után kell írnunk, és idézőjelek, vagy aposztrófok közé kell zárnunk.

Vagyis az általános alak:

<tag paraméter1="érték1" paraméter2="érték2"></tag>

Látni fogjuk, hogy vannak logikai paraméterek is, amikor elég csak az adott paramétert szerepeltetni, értéket sem kell adnunk.

<tag paraméter1="érték1" logikaiparaméter></tag>

Nézzünk egy példát erre is:

<p hidden>Ez egy rejtett bekezdés</p>

Egy tagnek tehát több paramétere is lehet. Erre mutat példát az alábbi kód, ahol a title paraméter mellett a lang attribútumot is használtuk az <abbr> tag esetén. Erre azért volt szükség, mert jelölni szerettük volna, hogy az adott rövidítés (TMCS) angol nyelvű.

<p>A szerző ebben a témában írt publikációja megjelent az
<abbr title="Teaching Mathematics and Computer Science" lang="en">TMCS</abbr> szaklapban.</p>

Globális paraméterek

Vannak olyan paraméterek, amelyeket minden tag esetén használhatunk. Ezeket globális paramétereknek (globális attribútumoknak) hívjuk. Ezek közé tartozik a már ismertetett lang és title attribútum is. A szabvány jelenlegi állapota alapján az alábbi globális attribútumok használhatók, amelyekhez most csak egy rövid magyarázatot helyeztünk el, de ezek közül a legfontosabbakat konkrét példákon keresztül részletesebben is bemutatjuk a tananyag hátralévő részében.

• accesskey: gyorsbillentyű megadására szolgál. Bármilyen (1 karakter hosszú) karaktert megadhatunk. A kis- és nagybetűk különböznek.
• class: az elemhez CSS-osztályt társíthatunk.
• contenteditable: true (igaz) és false (hamis) értéket vehet fel. Ezzel jelezhetjük, hogy az adott elem szerkeszthető-e.
• contextmenu: helyi menü létrehozására szolgál. Értéke egy menü elem egyedi azonosítója kell, hogy legyen.
• dir: arra szolgál, hogy megadhassuk, az adott nyelvet balról jobbra (ltr), vagy jobbról balra kell-e olvasni (rtl). "auto" érték esetén automatikusan kerül meghatározásra.
• draggable: true (igaz), false (hamis) és auto (automatikus) értéket vehet fel. Ezzel jelezhetjük, hogy az adott elem vonszolható-e. Az "auto" megadás esetén a böngésző alapértelmezett beállítása szerint történik a működés.
• dropzone: az adott elemet olyan területté alakíthatjuk, amely képes vonszolt elemeket kezelni. Ha "copy" az értéke (vagyis másolás), akkor a vonszolt elem másolásra kerül. Ez egyébként az alap beállítás is. Ha "move" az értéke, akkor a vonszolt elem az új helyre lesz áthelyezve. A "link" érték esetén a vonszolt elemre történő hivatkozás lesz feldolgozva. Ezen kívül stringet (karakterláncot) is megadhatunk, ami a string: vagy file: karakterlánccal kezdődhet. Ezzel befolyásolhatjuk, hogy a területre milyen elemeket lehet ráhúzni. Pl. dropzone="copy file:image/png file:image/jpeg"
• hidden: logikai attribútum. Ha szerepel, akkor az adott elem rejtetté válik.
• id: az elemet egyedi azonosítóval láthatjuk el.
• inert: logikai attribútum. Ezzel jelezhetjük, hogy az adott terület érzéketlen, ami azt jelenti, hogy a böngésző ugyan megjeleníti, de a tartalmára nem lehet rákeresni a lapon belül, nem lehet kijelölni a tartalmát, nem működnek rajta az interakciót támogató események sem (pl. mouseover – amikor az egeret a terület fölé visszük.)
• lang: segítségével megadhatjuk az adott elem nyelvét. (pl. hu, en, en-us, stb.)
• spellcheck: azt adhatjuk meg, hogy az elem tartalmát ellenőrizze-e helyesírási szempontból a böngésző, vagy sem. True (igaz) esetén megtörténik az ellenőrzés, false (hamis) esetén nem.
• style: az elemhez beágyazott stílust rendelhetünk.
• tabindex: megadhatjuk, hogy a tab billentyű hatására milyen sorrendben kapjanak fókuszt az elemek. Nullát és pozitív egész számokat adhatunk meg:0,1,2,3.
• title: az elemhez tartozó feliratot adhatjuk meg, amely legtöbbször akkor jelenik meg, ha az elem fölé visszük az egeret, de speciális jelentése is lehet.
• translate: logikai attribútum, yes (igen) illetve no (nem) értékkel. Azt jelezhetjük vele, hogy az elemet szükséges-e lefordítani, ha más nyelvre fordítjuk az oldalt, vagy sem.

Vissza a tartalomjegyzékhez