<info9>

Hivatkozások

Az internet egyik legfontosabb alapvető eleme, hogy az elérhető tartalmak nem csak egymástól függetlenül léteznek, hanem hivatkoznak egymásra. Az oldalakra mutató hivatkozások létrehozására általában az a elemet használjuk, amelynek az alábbi fontosabb paraméterei vannak:

• href: a hivatkozás célja, ahová navigálni szeretnénk a felhasználót, ha a linkre kattint
• target: a hely, ahol szeretnénk, hogy a hivatkozás megnyíljon, leggyakoribb értékei:
  • _blank: a hivatkozás új lapon nyílik meg
  • _top: a hivatkozás a legfelső keretben nyílik meg
  • _self: a hivatkozás a jelenlegi oldal helyén nyílik meg
  • alapértelmezett érték: _self
• download: amennyiben azt szeretnénk, hogy a hivatkozott oldal mindenképp letöltődjön, akkor ezzel a paraméterrel megadhatjuk a letöltendő fájl nevét
• rel: a hivatkozott oldal és a jelenlegi oldal viszonyát (relationship) írja le, elsősorban szemantikai célokból fontos. Üresen hagyható.
  Lehetséges értékei: alternate, author, bookmark, external, help, license, next, nofollow, noreferrer, noopener, prev, search, tag
• ping : a linkre kattintások követéséhez megadhatunk pingback URL-eket, erre a böngésző küld a háttérben egy POST lekérdezést, ha a linket a felhasználó követi, ezzel elősegítve a statisztikakészítést. A gyakorlatban a használata nem jellemző.

Ha tehát szeretnénk például készíteni egy hivatkozást, ami megnyitja új lapon a Google kezdőoldalát, ezt könnyedén megtehetjük:

<a href="https://google.com" target="_blank">hivatkozás szövege</a>

Gyakran előfordul azonban, hogy a hivatkozások nem egy másik weboldalra mutatnak, hanem a saját oldalunk egy másik fájljára. Ha azonos mappában lévő másik fájlra szeretnénk hivatkozni, akkor elég a fájl nevét megadni, például így:

<a href="autoim.html">Autóimról</a>

Ha a fájl, ahová hivatkoznánk, egy almappában van, akkor is elegendő csak a mappát, valamint benne a fájlnevet megadni. Ha pedig felfelé szeretnénk lépni egy mappával, akkor a .. jelölést használhatjuk mappanév helyett. Nézzünk egy példát:

Kép:
<img src="logo.png">

Hivatkozások:
<a href="kontakt.html">Kapcsolat</a>

<a href="hobbik/autok.html">Autók</a>
<a href="hobbik/festes.html">Festés</a>
<a href="hobbik/tura.html">Túra</a>

Kép:
<img src="../logo.png">

Hivatkozások:
<a href="../index.html">Kezdőlap</a>
<a href="../kontakt.html">Kapcsolat</a>

<a href="festes.html">Festés</a>
<a href="tura.html">Túra</a>

Azokat a hivatkozásokat, amik nem teljes webcímet tartalmaznak, csak a cél nevét/helyét a jelenlegi oldalhoz képest, mint amiket a táblázatban találunk, relatív hivatkozásoknak nevezzük. A relatív hivatkozások fontosak, ugyanis ezek akkor is működőképesek maradnak, ha az oldalunk egy másik webcímre költözik, pl. a saját gépünkön való kísérletezés után feltöltjük egy tárhelyre. Az oldalunkon belül tehát, ha lehet, érdemes relatív hivatkozásokat használnunk.

Oldalon belüli hivatkozások

Előfordulhat olyan is, hogy egy oldalon belül, az oldal egy konkrét részére szeretnénk hivatkozni, szerencsére erre is van lehetőség. Az oldalon belüli hivatkozásokat onnan ismerhetjük fel, hogy a fájlnév után egy # karakter található, amit egy HTML elem azonosítója követ.

Hivatkozni olyan elemre tudunk, amelyik rendelkezik azonosítóval. Azonosítót bármelyik elemnek adhatunk, az id paraméter használatával. Fontos, hogy egy oldalon belül az azonosítóknak egyedinek kell lenniük, tehát nem lehet több azonos ID-vel rendelkező elem egy oldalon.

Ezen az oldalon több elemnek is adtunk ID-t. Az oldal tetején lévő Hivatkozások felirat ID-je: cim, az Oldalon belüli hivatkozások alcím ID-je pedig: alcim. Próbáljuk ki!

Hivatkozások: # (az oldal tetejére) #cim (főcímhez) #alcim (alcímhez)

<a href="#"># (az oldal tetejére)</a>
<a href="#cim">#cim (főcímhez)</a>
<a href="#alcim">#alcim (alcímhez)</a>

<h1 id="cim">Cím</h1>
<h2 id="alcim">Alcím</h2>