Asz attribútumokról már volt szó a korábbi jegyzetekben is. Néhányat használtunk is a gyakorlatok során. Az attribútumok feladata a HTML kódolás során az, hogy kiegészítő információval lássák el a HTML elemeket. Minden HTML elemnek lehet attribútuma, de az attribútumokat mindig a kezdőcímkében kell megadni. Az attribútumokat általában név-érték párban szoktuk megadni.
attribútumnév=”érték„
A href attribútum
Az egyik leggyakrabban használt elem-attribútum pár az <a href=”… „>hivatkozás szövege</a>
A href attribútum értéke egy URL, amely meghatározza azt, hogy hova mutatnak a hivatkozások.
- Ez lehet egy abszolút URL, amely pontosan meghatározza a hivatkozás célját (pl.: href=”http://dongopc.atw.hu/zene.html”),
- lehet relatív URL, valamihez viszonyítva adjuk meg az elérhetőségét ez esetben az aktuális könyvtárhoz képest (pl.: a fenti oldalon elhelyezett linkben href=”zene.html”),
- de mutathat egy oldalon belüli elemre is, ha az megfelelően azonosítható (pl.: href=”#azonosito”),
- vagy egy másik protokollra (pl: https://, mailto:, ftp://… stb.),
- vagy akár egy script is lehet az értéke.
Fájlok forrása
Amikor egy fájl forrását szeretnénk meghatározni egy HTML elemben az src attribútumot használjuk. A korábban bemutatott példákban az src értékét állítottuk be amikor egy audio fájlt hívtunk be a böngészőbe, alább pedig egy kép forrását határoztuk meg vele.
<img src=„viragok.jpg” width=„250” height=„300” alt=„viragos rét”>
Méretező attribútumok
A képek forrása mellett meg kell említeni a méretezés attribútumait is melyekkel a képek és videók szélességét (width) és magasságát (height) állíthatjuk be. A modern weboldalaknak különböző felbontású kijelzőkön is jól kell megjelennie. Másrészt célszerű takarékoskodni a kódolással, egy adott formázási beállítást többször is felhasználhatunk egy webhelyen. Ezért ritka, hogy pl. a képek méretezését a HTML elemekben végezzük el. A dokumentumok formázását a jövőben stíluslapokon fogjuk elvégezni, ám most még a könnyebb érthetőség miatt az elemcímkékben is kísérletezhetünk ennek az értékeivel.
<img src=„viragok.jpg”width=”250” height=”300” alt=”viragos rét„>
Alternatíva – alt
Ahogy már korábbi példákban szerepelt az <img> elem nélkülözhetetlen attribútuma az alt attribútum. Abban az esetben jelenik meg a tartalma, amikor a weblapon elhelyezett kép valamilyen oknál fogva nem jeleníthető meg. Ez leggyakrabban e-mailben érkező weboldalaknál fordul elő, ugyanis a legtöbb levelezőprogram alapértelmezetten biztonsági okokból letiltja a képek megjelenítését. Gondolnunk kell azokra a látogatókra is, akik valamilyen kisegítő lehetőségként felolvasó szoftvert használnak az internet böngészésére. Számukra az egyetlen információ az oldalon elhelyezett képek tartalmáról az amit az alt értékeként megadtunk.
<img src=„viragok.jpg” width=„250” height=„300” alt=„viragos rét”>
Style – stílus mint attribútum
Egy elem megjelenését azaz stílusát módosíthatjuk ennek az értékével soron belül is. A dokumentum további részére nem hat ki. Értéke lehet szín, méretezés, szövegrendezés és még sok lehetőség, de ezeket a CSS résznél bőségesen fogjuk tárgyalni. Soron belüli használat során felülír minden globálisan meghatározott formázást.
<p style=„color:blue;font-size:46px;”>
Nagy kék <strong>vastag</strong> szöveg
</p>
Lang – nyelv beállítása
Ez egy fontos érték, a segítségével közölhetjük a böngészővel, hogy az adott elem milyen nyelven íródott. A nyelvi beállítás nem azonos a betűkódolás beállításával.
<!DOCTYPE html>
<html lang=”en-US„>
<body>…
</body>
</html>
Helyes szintaxisa: <elemcímke lang=„nyelvi kód”>. HTML5-ben már bármelyik elemhez hozzáadhatjuk, a régebbi verziókban még voltak kivételek. A fenti példában globálisan adtuk meg az attribútumot, tehát az egész HTML dokumentumra vonatkozni fog. Az értéke „en-US” a kisbetűvel szedett rész a nyelvi kód, a nagybetűs rész pedig a dialektusra utal, ha van ilyen. Jelen esetben amerikai angol. A nyelvi kódokat egy ISO szabványban az ISO 639-1 szabványban határozták meg. A magyar nyelv kódja hu, vagy hu-HU.
Kódolási ajánlás
A HTML5 címkékben nincs előírás arra, hogy kicsi vagy nagybetűvel kell e beírnunk a kódot. Az általános ajánlás az, hogy ahol csak lehet használjunk kisbetűt. A példákban általában mi is kisbetűvel kódolunk. A paraméterértékeket ajánlott idézőjelek vagy aposztrófjelek közé tenni, nem létfontosságú, de ajánlott. Ha értékként idézőjelet szeretnénk használni, tehetjük azt aposztrófjelek közé is.
<h1 title=‘Don „Dragon” Wilson’>A véres játék hőse</h1>
Végül összefoglalva a mai leckét videó helyett a szélesebb kijelzővel rendelkező olvasók működés közben is megtekinthetik az attribútumokat az alábbi kód mellett. Bal oldalon a forrsákód látható, jobb oldalon pedig az eredményét lehet kipróbálni.
[codepen_embed height=”265″ theme_id=”0″ slug_hash=”XqeGoR” default_tab=”html,result” user=”dongopc”]See the Pen <a href=’https://codepen.io/dongopc/pen/XqeGoR/’>XqeGoR</a> by Zoltán Tábit (<a href=’https://codepen.io/dongopc’>@dongopc</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]