A HTML jelölők szerkezete

A tagek legnagyobb része ún. páros tag, azaz létezik egy nyitó és egy záró eleme. Ezek ugyanazok a kulcsszavak kisebb-nagyobb jelek között írva, csak a záró tag különbözik a nyitótól abban, hogy a záró kisebbjel után, közvetlen a kulcsszó előtt van egy perjel (angolul slash: „/”).Egy tartalom elejét és végét jelölheti a páros tag, például egy címet, vagy bekezdést a szövegben, vagy egy táblázat elejét és végét stb.

Szintaxisa általános leírásban és egy példán keresztül látható az alábbiak-ban, a jelölők felépítését általánosan leíró keretezett részben szereplő „˽” jel a space-nek, magyarul a szóköznek felel meg.

<jelölő˽attribútumnév1=„érték1”˽attribútumnév2=„érték2”…>

…

</jelölő>



<p>Részt vettem egy gyorsolvasó-tanfolyamon. A <em>Háború és békét</em> nem egészen 20 perc alatt olvastam el. Az oroszok-

A HTML alapjai 53

ról szól. (Woody Allen)

</p> .

A példában lévő <p> tagpár a bekezdés elejét és végét jelöli, az <em> pár pedig a kiemelés kezdetét és végét. A példában az is látható, hogy a HTML ele-mek egymásba ágyazhatóak. Amire ügyelni kell a tagek egymásbaágyazása ese-tén az az, hogy mindig az újonnan megnyitott tageket zárjuk le először, s csak azután a korábban megnyitottakat.



Jó példa: <p><em>Alma</em></p>, Rossz példa: <p><em>Alma</p></em>.

A párosak mellett néhány páratlan tag, más nevén üres tag is létezik. Az XHTML leírónyelv megköveteli az üres jelölők használata esetén, hogy azokat önmagukban lezárjuk, korábbi HTML verzióknál erre nem volt szükség, és a HTM5 sem követeli meg ezt a szigorítást. Nézzünk példát üres jelölőkre! Párat-lan tag a HTML5-ben például a <br> (XHTML-ben: <br˽/>), amely soremelést és a <hr> (XHTML-ben: <hr˽/>), amely vízszintes vonalhúzást eredményez. Látha-tó, hogy ezen tagek értelmetlenek is volnának párosan, hiszen nincs milyen tartalmat közrefogniuk. Az XHTML-es verziókban a space („˽”, magyarul szóköz) használata kötelező a perjel előtt. Tipikus üres elem a képek beszúrására hasz-nált jelölő, lássunk ennek szintaxisát általános leírással, majd egy példával.

HTML5:

<jelölő˽attribútumnév1=„érték1”˽attribútumnév2=„érték2”…>

XHTML:

<jelölő˽attribútumnév1=„érték1”˽attribútumnév2=„érték2”…˽/>



<img src=„/portrek/woody_allen.jpg” alt=„Woody Allen portréja”> és példa XHTML-ben:

<img src=„/portrek/woody_allen.jpg” alt=„Woody Allen portréja” />.

A példáról jól leolvasható, hogy az elemekhez tartozó attribútumokat a címkenévtől és a többi attribútumtól szóközzel elválasztva kell megadni, az attribútumok nevei kisbetűsek, s minden attribútumnevet egy egyenlőségjel („=„) követ, amely után közvetlenül következik, feső idézőjelek között („ „) az attribútum értékének a megadása! A példában az <img> jelölőnek láthatóan két attribútuma van, az egyik az „src”, melynek jelentése source (magyarul forrás), ennek értéke a weboldalon megjelenítendő kép elérési útja (angolul PATH-ja) relatívan megadva az aktuális HTML-hez. Az „alt” attribútum pedig az alternatív

szöveget jelöli (alternative text), melyet akadálymentességi szempontból fon-tos, hogy minden esetben kitöltsünk.

Páratlan/üres tagek is párosak közé ágyazhatóak, tipikus példa erre, mikor egy képre klikkelve töltődik be egy weboldal.



<a href=„http://www.ektf.hu”>

<img src=„ekf.png” alt=„Az Eszeterházy Károly Főiskola logója”>

</a>

A példában lévő kódban <a> jelölőpárok fognak közre egy <img> taget, en-nek eredményeképpen a weboldalon egy kép jelenik meg, amelyre rákattintva betöltődik az Eszterházy Károly Főiskola weboldala. A példában jól látható a kódrész strukturáltsága. Helyes, ha a kódunkat úgy rendezzük, hogy az alacso-nyabb hierarchia szinten lévő elemeket függőlegesen két szóközzel beljebb kezdjük az előző szinthez viszonyítva. A beágyazott elemeket is beljebb szokás írni két szóközzel, mint az azt közrefogó elemeket, ennek köszönhetően lesz a kód jól átlátható. Az átláthatóságnak köszönhetően pedig könnyebben érthető és javítható is, ezért ügyeljünk, hogy HTML kódjainkat ennek megfelelően struk-turáljuk. A strukturáltságot jól szemlélteti a HTML dokumentumok szerkezetét bemutató 16. ábra is.

A weblapon megjelenő szövegeken, tageken, attribútumokon és attribú-tum-értékeken felül még néhány általános szöveges információ szerepel a do-kumentum első részében, a fejrészben, s még az előtt, az ún. DOCTYPE bejegy-zésben információ található a dokumentum típusáról. Fontos kiemelni, hogy a HTML dokumentumok nem tartalmaznak képeket, hang-, vagy video-állományokat, vagy bármi féle egyéb kiterjesztésű fájlt nem foglalnak maguk-ban, csakis a megjelenítendő kép vagy egyéb állomány linkjét, másnéven elérési útját a munkakönyvtáron belül, s azt relatívan megadva. Tehát ha egy sok ké-pet, videót és hangot tartalmazó weboldalt látunk, akkor nem azt kell elképzel-ni, hogy az egy nagyméretű .html kiterjesztésű állomány, mely mindent magá-ban foglal, hanem tudnunk kell, hogy az ilyen weblapok is csak szövegeket tartalmaznak, s a rajtuk megjelenő kép hang vagy videoállomány külön fájlként valahol a .html dokumentumunk mellett helyezkedik el a munkakönyvtárban. A böngészők azok a programok, amelyek képesek a képeket jelölő tagek helyén a source attribútumban meghatározott elérésen lévő képet betölteni. Tehát csak a böngészőkben jelennek meg a képek hangok videók úgy, mintha azok a HTML dokumentumunk részei lennének.

A HTML alapjai 55