HTML <a> címkék
Az <a> címke, azaz hogyan hozzunk létre linkeket?
A HTML egyik legfontosabb funkciója, hogy lehetőséget biztosít a weboldalak közötti átkattintásra. Az internet alapját a hiperhivatkozások jelentik, hiszen ezek segítségével tudunk egyik oldalról a másikra navigálni. Ehhez a HTML <a> (anchor) címkét használjuk.
🔹 Miért fontos a <a> címke?
A HTML nevében a „H” betű a „Hypertext” rövidítése, ami azt jelenti, hogy a dokumentum nem lineáris, hanem kattintható linkekkel van összekötve.
Ha egy másik weboldalra vagy saját aloldaladra szeretnél mutató linket készíteni, ezt így teheted meg:
🔍 Példa egy alap linkre
<a href=”https://www.digitalisfelfedezok.hu/”>Ez a blog főoldala</a>
📌 Mit csinál ez a kód?
✅ Az href attribútum meghatározza, hogy hova mutasson a link.
✅ Az idézőjelek ("") között adjuk meg a célt.
✅ A <a> és </a> közé írt szöveg lesz kattintható linkként megjelenítve.
➡️ Eredmény a böngészőben:
👉 Ez a blog főoldala
🔹 Hogyan nyisson meg egy linket új ablakban?
Alapértelmezés szerint a link ugyanabban az ablakban nyílik meg, de ha azt szeretnéd, hogy egy új ablakban vagy új fülön nyíljon meg, akkor a target="_blank" attribútumot kell használnod.
🔍 Példa egy új fülön nyíló linkre:
<a href=„https://www.digitalisfelfedezok.hu/” target=„_blank”>Ez a blog főoldala új ablakban</a>
➡️ Eredmény a böngészőben:
👉 Ez a blog főoldala új ablakban (ha rákattintasz, új fülön nyílik meg)
📌 Fontos!
✅ A target="_blank" attribútum mindig új fülön vagy ablakban nyitja meg a linket.
✅ Ha egy link új oldalon nyílik meg, mindig érdemes hozzáadni a rel="noopener noreferrer" attribútumot is biztonsági okokból:
<a href=„https://www.digitalisfelfedezok.hu/” target=„_blank” rel=„noopener noreferrer”>Biztonságos link új fülön</a>
🔹 Hogyan hozzunk létre e-mail linket?
Nemcsak weboldalakra, hanem e-mail címekre is lehet hivatkozni, így ha a látogató rákattint a linkre, az alapértelmezett levelezőprogramja megnyílik.
🔍 Példa egy e-mail hivatkozásra:
<a href=„mailto:[email protected]”>Írj nekünk e-mailt!</a>
➡️ Eredmény a böngészőben:
📩 Írj nekünk e-mailt! (Ha rákattintasz, megnyílik az e-mail kliens.)
🔹 Hogyan hozzunk létre egy telefonhívás linket?
Ha egy telefonszámot szeretnél kattinthatóvá tenni, hogy mobilon rákattintva azonnal hívást indítson, akkor a tel: előtagot kell használni.
🔍 Példa kattintható telefonszámra
<a href=„tel:+36201234567”>Hívj minket!</a>
➡️ Eredmény a böngészőben:
📞 Hívj minket! (Mobilon rákattintva hívást indít.)
🔹 Hogyan készítsünk egy oldalra ugró linket?
A horgony (anchor) linkek segítségével ugyanazon az oldalon belül tudunk egy adott pontra ugrani.
🔍 Példa egy „Vissza az elejére” gombra:
<a href=„#eleje”>Vissza az elejére</a> <h1 id=„eleje”>Ez az oldal teteje</h1>
📌 Mit csinál ez a kód?
✅ Az id="eleje" egy azonosítót ad az adott résznek.
✅ A <a href="#eleje"> link erre az ID-ra ugrik kattintáskor.
🔹 Próbáld ki magad! (Interaktív példa)
Próbáld ki az alábbi kódot! Kattints a linkekre, és figyeld meg, hogyan működnek!
<!DOCTYPE html>
<html lang=”hu”>
<head>
<meta charset=”UTF-8″>
<title>HTML Linkek</title>
</head>
<body>
<h1>HTML linkek példa</h1>
<p><a href=”https://www.digitalisfelfedezok.hu/”>Ez a blog főoldala</a></p>
<p><a href=”https://www.digitalisfelfedezok.hu/” target=”_blank”>Ez a blog főoldala új fülön</a></p>
<p><a href=”mailto:[email protected]”>Küldj nekünk egy e-mailt!</a></p>
<p><a href=”tel:+36201234567″>Hívj fel minket!</a></p>
</body>
</html>
📌 Mit fogsz látni a böngészőben?
✅ Kattintható linkek a weboldalakhoz
✅ Új fülön nyíló linkek
✅ E-mail és telefonszám linkek
🛑 Gyakori hibák és megoldások
❌ Nem jelenik meg a link?
✅ Ellenőrizd, hogy az <a> címkén belül ténylegesen van-e szöveg!
❌ Nem nyílik meg új ablakban?
✅ Győződj meg róla, hogy a target="_blank" attribútumot használtad!
❌ Nem működik a horgony link?
✅ Adj hozzá egy id azonosítót annak a résznek, ahova ugrani szeretnél!
📌 Összegzés
✅ A <a> címke a linkek létrehozására szolgál HTML-ben.
✅ Az href attribútum meghatározza a cél URL-t vagy e-mail címet.
✅ A target="_blank" új fülön nyitja meg a linket.
✅ Telefonhívásokhoz és e-mailekhez speciális mailto: és tel: formátumok használhatók.
✅ Ugyanazon az oldalon belüli ugrásokhoz használj id-t és horgony linkeket!
🔗 Kapcsolódó bejegyzések, amelyeket érdemes elolvasni: