Nyitó

Gyorstalpaló

Tervezés

HTML

CSS

Sablonok

Bevezetés

Szintaktika

Dokumentum szerkezet

Általános attribútumok

Szöveg megadása

Linkek

Kép beillesztése

Táblázatok

Listák

Űrlapok

Szkriptek

Linkek - Hivatkozások. Az <a> tag

Egy HTML dokumentumban linkeket az <a>...</a> tagok segítségével definiálhatsz. A nyitó és a zárótag közötti részre kattintva a böngésző megnyitja (vagy ha nem tudja megnyitni, akkor a számítógépre letölti) a hivatkozott állományt. A nyitó és a zárótag közötti tartalom általában egy szövegrészlet vagy egy kép szokott lenni.

Az <a> tag legfontosabb attribútumai:
Leggyakrabban használt stílus tulajdonságok:

A böngészők alapbeállításuk szerint aláhúzzák a linkeket, és amelyeket a felhasználó még nem nézett meg, kék színnel jelenítik meg. A meglátogatott oldalakra mutató linkeket sötétlila színnel jelzik a böngészők. Ehhez hozzászoktak a felhasználók és segítséget ad nekik az eligazodásban. Ezért azt javaslom, hogy ha a honlapod színösszeállítása megengedi, akkor ne add meg a linkek stílusát, hagyd érvényesülni a böngészők alapbeállítását.

Az előző bekezdésben írtak persze nem vonatkoznak a menürendszert alkotó linkekre, ha a menü kialakítása egyértelműen jelzi annak funkcióját az olvasóid számára. A menü létrehozásakor bármilyen stílusmegoldást választhatsz.

Ha a link egy HTML fájlra mutat, akkor a linkre kattintva a böngésző megnyitja a hivatkozott fájlt és az elejétől kezdi azt megjeleníteni. Egy hivatkozás mutathat egy HTML fájl belsejébe is, ekkor a böngésző a hivatkozott résztől kezdi el megjeleníteni a dokumentumot. Ehhez a hivatkozás célpontjában meg kell adnod egy HTML tag id attribútumát, vagyis a tag egyedi azonosítóját. (A hivatkozás végpontja bármilyen tag lehet. Lehet <a> tag is, de bármilyen másik HTML tagot is választhatsz.) A link kezdőpontjában pedig a href attribútumban az elérési utat egy kettőskeresztnek kell követnie, ami után az egyedi azonosítót is meg kell adni.

A következő példában a hivatkozás végpontja egy <a> tag.

A link kezdőpontja:

...a link előtti tartalom az egyik HTML oldalon...
<a href="masik.html#kozep">Ugrás a másik fájl középső fejezetére.</a>
...a link utáni tartalom...

A masik.html nevű fájlnak pedig tartalmaznia kell egy ehhez hasonló részt:

...a HTML dokumentum eleje...
<h3><a id="kozep">Középső fejezet</a></h3>
...az oldal folytatása...

Az előző példával teljesen egyenértékű megoldás az, ha a <h3> tagban van definiálva az azonosító:

...a HTML dokumentum eleje...
<h3 id="kozep">Középső fejezet</h3>
...az oldal folytatása...

Egy link kezdőpontja és végpontja lehet ugyan abban a fájlban is. Például a masik.html oldal elején el lehet helyezni egy linket, amire rákattintva, a köztes részt átugorva, rögtön a középső fejezetre jut a felhasználó. A link kezdőpontja az oldalon belüli hivatkozás esetén így nézne ki:

<a href="#kozep">Ugrás a középső fejezetre.</a>

Az oldalon belülre mutató linkekkel kapcsolatosan problémát jelent, hogy a felhasználó azt hiheti, egy új oldalt nyitott meg, amit az elejétől kezdve lát. Ez megnehezítheti számára a weblapod szerkezetének megértését. Ezzel szemben, ha egy hosszabb dokumentumban nem helyezel el belső hivatkozási végpontokat és minden link az oldal elejére mutat, akkor az olvasóid azért hagyhatják el a honlapodat, mert nincs türelmük végigolvasni az oldalt, ha a számukra hasznos információk annak végén helyezkednek el.

Tipp: A honlapodat úgy tervezd meg, hogy az egyes oldalak ne legyenek hosszúak. Így nem lesz szükség az oldalaid belsejébe mutató linkek elhelyezésére. (Az interneten egyébként is általános szabály, hogy egy oldalnak tömörnek és rövidnek kell lennie. Az interneten böngészve sokkal gyorsabban „lapoznak” az emberek, mint egy újság vagy egy könyv olvasásakor.)

Speciális hivatkozások

A fent leírt módon létrehozott hivatkozások összekapcsolnak két dokumentumot. A hivatkozást követve általában a böngésző egyszerűen betölti a hivatkozott állományt az aktuális oldal helyett. A két dokumentum viszonya is definiálható, ehhez többnyire az alábbi attribútumokat használhatjuk:

  • rel: ez írja le, hogy a hivatkozott állomány milyen viszonyban van az aktuális dokumentummal. Gyakrabban előforduló értékei:
    • alternate: a hivatkozott állomány az aktuális dokumentum valamilyen változata. Általában a type vagy a hreflang attribútum megadásával együtt használjuk.
    • next: a következő dokumentum egy sorozatban
    • prev: az előző dokumentum egy sorozatban
    • help: a hivatkozott állomány segítséget ad az aktuális oldalhoz (részletesebb információ, további linkek, stb.)
  • type: a hivatkozott dokumentum típusa
  • hreflang: a hivatkozott dokumentum nyelve
  • target: az írható elő, hogy a hivatkozott állomány melyik keretben nyíljon meg. Nem csak keretes oldalszerkezet esetén alkalmazható, a _blank kulcsszó megadásával a böngésző a betöltött állományt új ablakban jeleníti meg.

Ezekben az attribútumokban megadott információkat figyelembe véve a böngészők segíthetik a felhasználókat a hivatkozott dokumentumok közötti navigálásban.

Példák

Az aktuális oldal más nyelven írt változatára mutató hivatkozás:
<a href="../en/a.php" rel="alternate" hreflang="en">
    Angol nyelvű változat</a>

Link az aktuális oldal PDF formátumú változatára:
<a href="a.pdf" rel="alternate"
    type="application/pdf">PDF verzió</a>

A hivatkozott állományt új ablakban nyitja meg a böngésző:
<a href="link.php" target="_blank">Összehasonlítás a
    &lt;link&gt; taggal.</a>

Ami így jelenik meg:

Összehasonlítás a <link> taggal.

A kereskedelmi célú webhelyek előszeretettel alkalmazzák azt a módszert, hogy a hivatkozások új ablakban nyíljanak meg. Így próbálják minél tovább "megtartani" a látogatóikat. Ez látszólag egyszerű és sikeres stratégia lehet, hiszen az új ablak bezárása után is az eredeti weboldalt látja a felhasználó. Elképzelhető, hogy ott folytatja a böngészést. Ugyanakkor a böngésző ablakainak indokolatlan "szaporítása" bosszanthatja az oldal látogatóit, ezért hosszú távon akár látogatottság csökkenéshez is vezethet a módszer. Senki sem szereti azzal tölteni az idejét, hogy fölösleges ablakokat zárogat be és például a vissza gombra kattintva sem történik semmi az újonnan megnyitott ablakban.

Én két esetben tartom indokolhatónak a hivatkozott dokumentum megnyitását új ablakban:

  • A felhasználó várhatóan össze akarja majd hasonlítani két oldal tartalmát, ezért többször és viszonylag gyorsan akar váltani a két dokumentum között.
  • A webhelyről kifelé mutató linkek megnyitását határesetnek tartom. Én ilyen esetekben sem nyitok új ablakot, hiszen akit komolyan érdekel az én weblapom az úgyis vissza fog térni. Ugyanakkor az is valószínű, hogy egy idegen weblapról - néhány kattintás után - már nem lesz könnyű visszatalálni az én oldalamra.

A <link> tag


Tőzsde és technikai elemzés érthetően