hu en sv en hu it hu en hu de hu ja hu hu hu hu hu hu hu hu en hu hu hu hu en hu hu hu hu hu hu hu hu hu cs hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu cs la hu hu la la la la hu hu cs en hu sv hu hu en hu en hu hu hu hu cs en hu hu hu cs hu hu hu hu hu hu en hu hu hu es es es tr en hu hu hu hu hu hu hu hu hu fr hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu en hu hu hu en hu it hu en hu de hu ja hu hu hu hu hu es es es tr en hu
HTML hivatkozások, linkek (HTML a href) - WEBiskola
Weboldalszerkesztő (HTML, CSS, JS kódszerkesztő) HTML-színkód generátor (Hexadecimális, RGB, HSL színkód kereső)
Tanuld meg a linkek használatát a HTML nyelvben. A hivatkozásokkal rengeteg mindent megoldhatunk egy weboldalon, többek között megkönnyíthetjük a felhasználó navigációját az oldalunkon belül.
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.
A HTML nyelvben az alábbi kódrészlettel alkothatunk linkeket, hivatkozásokat.
SZÖVEG, KÉP STB  Code language: HTML, XML (xml)
Amilyen hosszú szöveget írunk az   tag nyitó és zárópárja közé, olyan hosszú lesz a kattintható szöveg.
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.
SZÖVEG, KÉP STB  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
Alapértelmezett, nincs target attribútum.   _self target attribútum.   _blank target attribútum.   _parent target attribútum.   _top target attribútum.  Code language: HTML, XML (xml)
Alapértelmezett, nincs target attribútum.
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:
WEBiskola  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:
WEBiskola  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:
WEBiskola  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.
Code language: HTML, XML (xml)
Link elhelyezése egy gombon
Ez is egy rendkívül egyszerű feladat. Nézzük a példát egyből.
Ez egy gomb.   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.
Küldj emailt!  Code language: HTML, XML (xml)
Ha hasznos volt számodra, akkor kérlek oszd meg másokkal is, hogy ezzel támogass minket!
HTML alapok (A HTML webprogramozás alapjai)
HTML elemek: Minden, amit tudnod kell a HTML-elemekről
Tömbök a JavaScript-ben (Tömbök magyarázata, létrehozása, elemek hozzáadása, módosítása, törlése, indexelés, tömb hosszának megállapítása)
JavaScript használata (Hova rakjuk a JS kódot, hogyan kössük össze a HTML dokumentummal) - head, body, külső fájl
#hiperhivatkozás #html #html a #html a href #html hiperhivatkozás #html hivatkozás #HTML ismeretek #html lecke #HTML lecke tanulás #HTML leckék #html link #html magyar #html magyar nyelven #html magyar tananyag #html magyarul #html programozás #html tananyag #html tanulás #ingyenes html tananyag #magyar html #magyar nyelvű html tananyag #online html #online html tananyag #online html tanulás #webprogramozás alapjai #webprogramozás alapok
Mi az a HTML? (A HTML bemutatása)
HTML oldal felépítése, struktúrája (Miből áll egy HTML dokumentum?)
HTML szerkesztők (Milyen HTML szerkesztő programot használjak?)
HTML dokumentum készítése (Hogyan hozz létre olyan fájlt, amit a böngésző megtud jeleníteni)
HTML dokumentum szerkesztése, módosítása
Mi az a HTML TAG? A HTML elemek felépítése
HTML elemek: Minden, amit tudnod kell a HTML-elemekről
HTML alapok (A HTML webprogramozás alapjai)
Weboldalak forráskódjának megtekintése (Így nézd meg bármelyik oldal HTML kódját)
HTML TITLE használata (Oldal nevének megadása)
HTML címsorok (h1, h2, h3, h4, h5, h6)
HTML bekezdés (HTML p)
HTML pre használata – Hogy úgy jelenjen meg a szöveg, ahogy beírtad
Mi az a HTML span és hogyan kell használni? [HTML span útmutató]
HTML szövegszín, betűszín módosítása (HTML font color és color)
HTML háttérszín beállítása (background-color)
HTML szövegformázás (Formázás CSS nélkül)
HTML sortörés (HTML br)
HTML képek használata (HTML img)
HTML háttérkép beállítása (HTML background-image)
HTML karakterkódolás, karakterkészlet megadása (HTML meta charset)
HTML komment, azaz megjegyzés a HTML dokumentumba
HTML head – Mi megy a fej részbe?
HTML body – Mi megy a HTML törzsébe?
HTML stílus, stíluslap és CSS használata, avagy HTML style
[Színkódok] HTML színmegadási módok (Színmegadás RGB, RGBA, HEX, HSL és HSLA színkóddal)
Színek használata a HTML nyelvben (Színkódok használata)
HTML táblázat készítés (HTML table)
HTML hivatkozások, linkek (HTML a href)
HTML lista, felsorolás (HTML ol, ul, li)
HTML class – Minden, amit tudnod kell a HTML osztályokról
HTML id – Minden, amit tudnod kell a HTML azonosítóról
A HTML div elem használata
HTML űrlap elemei (HTML Forms)
Kliensoldali űrlapellenőrzés: űrlapmezők ellenőrzése HTML és JavaScript segítségével