HTML attribútumok – 4. óra

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=”300alt=”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]

 

 

 

Ez a weboldal az Akismet szolgáltatását használja a spam kiszűrésére. Tudjunk meg többet arról, hogyan dolgozzák fel a hozzászólásunk adatait..

%d blogger ezt szereti: