HTML hivatkozások, linkek (HTML a href)

Minden weboldalon szükség van hivatkozásokra (vagy úgynevezett linkekre), ezek teszik lehetővé, hogy a weboldalakat bejárhassuk kattintgatva. Ha például a weboldalon látunk egy gombot, mi pedig rákattintunk és az visz valahova, akkor egy linkről, hivatkozásról van szó.

A HTML linkek, hivatkozások hiperhivatkozások (hyperlink). Kicsit magyarosabbra fordítva ugrópontnak is nevezhetjük. Azért hívjuk így, mert ha rákattintunk egy linkre, akkor az egy másik helyre, dokumentumra, weboldalra ugrik. Ha ráhúzzuk az egeret egy hivatkozásra, akkor a klasszikus ikon egy kicsi kézre változik. Ebből tudhatjuk, hogy azon a helyen egy link található. A weboldalak általában más színekkel jelölik a linkeket, így még könnyebb a felismerésük.

HTML link, hivatkozás szintaktikája

A HTML nyelvben az alábbi kódrészlettel alkothatunk linkeket, hivatkozásokat.

<a href="URL">SZÖVEG, KÉP STB</a>
Code language: HTML, XML (xml)

Az <a href=”URL”> és a </a> közé kell elhelyeznünk a szöveget, vagy a képet, vagy a gombot, amire a linket szeretnénk elhelyezni. Az a href= rész után következik idézőjelek között a linkelendő weboldal URL címe. (Egy URL cím így néz ki: https://pantonia.hu/webshop/tarot/kartyak/)

Amilyen hosszú szöveget írunk az <a> tag nyitó és zárópárja közé, olyan hosszú lesz a kattintható szöveg.

Példa

<p>
Ha csak simán bemásolok egy URL címet, az attól még nem lesz hivatkozás: https://www.webiskola.hu
</p>

<p>
Ha így csinálom, akkor viszont hivatkozás lesz: <a href="https://www.webiskola.hu">https://www.webiskola.hu</a>
</p>
Code language: HTML, XML (xml)

Alapértelmezett link

Egy alapértelmezett link, hivatkozás, mindenféle CSS formázás nélkül így néz ki minden böngészőben:

• Egy meg nem tekintett link alá van húzva és kék színű.
• Egy megtekintett link aláhúzott és lila színű.
• Egy aktív link aláhúzott és piros színű.

Hogy nyíljon meg a hivatkozás?

Alapértelmezetten egy link a saját, megnyitott ablakában nyílik meg. De lehetőségünk van rá, hogy ezt módosítsuk.

Szintaktika

<a href="URL" target="MÓD">SZÖVEG, KÉP STB</a>
Code language: HTML, XML (xml)

Az eddig ismert kód csak egy target= résszel lett kiegészítve, ezután adjuk meg idézőjellel a megnyílás módját. Amelynek a következők közül kell egynek lennie:

• _self – Ez az alapértelmezett. A már megnyitott, saját ablakában nyílik meg.
• _blank – Új lapot nyit magának.
• _parent – A szülő keretben/frame-ben nyitja meg.
• _top – Az ablak teljes törzsében (body) nyitja meg.

Hivatkozás megnyitási módjaira példák

<a href="https://webiskola.hu">Alapértelmezett, nincs target attribútum.</a>

<a href="https://webiskola.hu" target="_self">_self target attribútum.</a>

<a href="https://webiskola.hu" target="_blank">_blank target attribútum.</a>

<a href="https://webiskola.hu" target="_parent">_parent target attribútum.</a>

<a href="https://webiskola.hu" target="_top">_top target attribútum.</a>
Code language: HTML, XML (xml)

Cím adása a linknek

A hivatkozásoknak adhatunk egy úgy nevezett címet is vagy feliratot, amely akkor jelenik meg, ha az egeret a linkre húzzuk. Itt a példa és akkor minden világos lesz:

<a href="https://webiskola.hu" title="Ez itt a WEBiskola.">WEBiskola</a>
Code language: HTML, XML (xml)

Abszolút és relatív URL

Abszolút URL-t (vagy elérési útvonalat) bármikor használhatunk. Ez azt jelenti, hogy a teljes URL-t megadjuk. Példa:

<a href="https://www.webiskola.hu">WEBiskola</a>
Code language: HTML, XML (xml)

Relatív URL-t (vagy elérési útvonalat) csak abban az esetben használhatunk, ha a saját oldalunkon belül linkelünk. Ilyenkor nem szükséges kiírni a domainünket, elég csak az azt követő részt megadnunk. Itt egy példa a könnyebb érthetőségért:

<a href="/html-ismeretek">WEBiskola</a>
Code language: HTML, XML (xml)

Relatív útvonalnál a böngésző értelmezi, hogy azért hagytuk el a domain címet, mivel a saját weboldalunk tartalmára szeretnénk hivatkozni. Így ő magától összerakja a képet és kiegészíti az URL-t a weboldalad címével.

Link elhelyezése egy képen

Ahogy fentebb már szó volt róla hivatkozást helyezhetünk el egy képen is. Ez semmiben sem különbözik attól, mintha egy szövegen helyeznénk el hivatkozást. Csak annyiban tér el attól, hogy itt tudnunk kell létrehozni egy képet is HTML-ben.

Példa

HTML kód

<a href="https://webiskola.hu"><img src="https://www.webiskola.hu/kep.jpg"></a>
Code language: HTML, XML (xml)

Eredmény

Link elhelyezése egy gombon

Ez is egy rendkívül egyszerű feladat. Nézzük a példát egyből.

<a href="https://webiskola.hu"><button>Ez egy gomb.</button></a>
Code language: HTML, XML (xml)

Link elhelyezése egy email címen

Ha ezt a kis trükköt igénybe véve helyezünk el egy linket az email címen, akkor könnyedén utasíthatjuk a böngészőt arra, hogy kapásból egy email küldő programba betöltve nyíljon meg az. Azaz nem kell még a felhasználónak kimásolni az email címet, mert az azonnal egy email küldő szoftverben nyílik meg, ahol már egy új levél címzettjéhez is beírja az email címet.

Példa

<a href="mailto:[email protected]">Küldj emailt!</a>
Code language: HTML, XML (xml)

Ha hasznos volt számodra, akkor kérlek oszd meg másokkal is, hogy ezzel támogass minket!