18. HTML hivatkozások — építsük fel a webet!

By Karbonade

Bevezető

Ebben a leírásban mindent meg fogsz tudni a web történetének egyik legnagyobb dobásáról — a hivatkozásokról. Egy dokumentum olvasója a hivatkozást követve átugorhat egy másik dokumentumra, és egyik kiszolgálóról átléphet egy másik kiszolgálóra úgy, hogy közben nem kell újra kapcsolódnia minden alkalommal. Mióta feltalálták, már nagyon sok minden történt, de egy dolog változatlan maradt: a hivatkozások most is különösen fontos részei a webes életnek, és a használatukkal jelentősen megkönnyítheted, de akár meg is nehezítheted a látogatóid dolgát.

Miután végigolvasod ezt a leírást, tudni fogod, hogyan készíthetsz olyan hivatkozásokat, amelyek jól érthetőek, és minden környezetben működnek. Azt is meg fogod ismerni, hogyan befolyásolják a hivatkozások az oldalad népszerűségét a keresőkben, és kapsz néhány tippet a hivatkozások elnevezéséhez is. Szokás szerint most is van egy kapcsolódó csomagolt zip fájl, amely a leírásban hivatkozott fájlokat tartalmazza. A mai anyag felépítése a következő:

Mik azok a hivatkozások?

A hivatkozások a weblap részei (melyeket a legtöbb esetben HTML-ben hoznak létre, de nem mindig), és valamilyen másik erőforrásra mutatnak — más HTML dokumentumokra, szöveges fájlokra, PDF fájlokra, stb. Vannak olyan hivatkozások, amelyeket a böngésző automatikusan követni szokott, ilyenek például a link elem hivatkozásai (ezekkel már találkozhattál néhány korábbi leírásban, ezt használtuk például a CSS fájlok importálására a HTML dokumentumban), míg más hivatkozásokat a felhasználó aktiválhat tetszés szerint. Ezeket kapcsoknak nevezzük, és az a elem segítségével adhatod hozzá a dokumentumhoz.

Egy hivatkozás felépítése

Bármilyen soron belüli (inline) elemet átalakíthatsz kapcsolt hivatkozássá, ha köré teszed az a elemet. Például az alábbi HTML dokumentumban a Yahoo Developer Network szöveg hivatkozássá alakul (linkpelda.html).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Hivatkozás példa</title>
<link rel="stylesheet" href="linkexamplestyles.css">
</head>
<body>
  <h1>Hivatkozás a YDN-re</h1>
  <p><a href="http://developer.yahoo.com">Yahoo Developer Network</a></p>
</body>
</html>

Azok a látogatók, akik aktiválják ezt a hivatkozást (rákattintva az egérrel, kiválasztva a billentyűzettel vagy hanggal) el fogják hagyni az aktuális oldalt, és átkerülnek a YDN oldalára. A hivatkozással sok mindent lehet csinálni, de a stílusozásáról csak később fogunk részletesebben is beszélni.

A hivatkozáshoz több attribútumot is megadhatsz:

href — az erőforrás, amire mutat (ez egy külső fájl vagy egy azonosító).
id — az azonosító, ha ez a kapocs egy cél, és nem egy hivatkozás.
title — további információk a külső erőforrásról.

Először is vegyük sorra a legfontosabb attribútumokat, majd nézzük meg, hogyan könnyítheted meg a látogatóid dolgát.

Hivatkozás vagy cél? Az `id` és `href` attribútumok

Az a elemnek többféle szerepe is lehet a dokumentumban attól függően, hogy milyen attribútumot állítottunk be rajta. A leggyakoribb, amit közülük használni fogsz, az a href attribútum, ez adja meg, hogy egy hivatkozás milyen erőforrásra mutat. Ez az attribútum több különböző értéket is tartalmazhat:

Egy URL-t az aktuális mappában (sugo.html), vagy egy másik mappában, az aktuális mappához viszonyított útvonallal megadva (például "../../sugo/sugo.html" — a 2 pont itt a hierarchiában eggyel feljebb található mappát jelenti), vagy pedig a kiszolgálón található abszolút útvonallal (például "/sugo/sugo.html" — itt a kezdő perjel azt jelenti, hogy az útvonal a kiszolgáló gyökérkönyvtárából indul).
Egy URL-t egy teljesen más kiszolgálóhoz (például "http://wait-till-i.com" vagy "ftp://ftp.opera.com/" vagy "http://developer.yahoo.com/yui").
Egy szakaszazonosítót vagy egy hivatkozásnevet, kettőskereszt után megadva (például "#menu"). Ez a dokumentumon belül mutat egy területre.
Egy vegyes, URL-ből és szövegrész azonosítóból álló szöveget — így direkt tudsz hivatkozni egy másik dokumentumban egy megjelölt szakaszra, az URL után álló szakaszazonosítóval (például "http://developer.yahoo.com/yui/#cheatsheets").

Bármelyik megoldás ezek közül egy hivatkozást fog készíteni, amelyik valahová máshová mutat. Másrészről az id attribútum csak egy kapcsot hoz létre a lapon — erre tudnak aztán más hivatkozások mutatni. Ez talán első hallásra bonyolultnak tűnik, mivel mindkét esetben ugyanazt az elemet használjuk (a). Hogy könnyen megjegyezhesd, gondolj rájuk így: az id attribútum csak egy hivatkozás jelölőt készít, amelyet aztán felhasználhatsz arra, hogy a dokumentum különböző szakaszaira hivatkozz vele. Az alábbi HTML-ben az összes felsorolt hivatkozástípusra találsz egy példát (linkpeldak.html):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Különböző hivatkozás példák</title>
<link rel="stylesheet" href="linkexamplestyles.css">
</head>
<body>
  <h1>Különböző hivatkozás példák</h1>

  <h2>Példa a lapon belüli navigációra szakasz azonosítókkal, hivatkozásokkal és kapcsokkal</h2>
  <div id="nav">
    <ul id="toc">
      <li><a href="#sec1">Első szakasz</a></li>
      <li><a href="#sec2">Második szakasz</a></li>
      <li><a href="#sec3">Harmadik szakasz</a></li>
      <li><a href="#sec4">Negyedik szakasz</a></li>
      <li><a href="#sec5">Ötödik szakasz</a></li>
    </ul>
  </div>  
    
  <div id="content">
    <div>
      <h2><a id="sec1">Szakasz #1</a></h2>
      <p><a href="#toc">Vissza a menühöz</a></p>
    </div>
    <div>
      <h2><a id="sec2">Szakasz #2</a></h2>
      <p><a href="#toc">Vissza a menühöz</a></p>
    </div>
    <div>
      <h2><a id="sec3">Szakasz #3</a></h2>
      <p><a href="#toc">Vissza a menühöz</a></p>
    </div>
    <div>
      <h2><a id="sec4">Szakasz #4</a></h2>
      <p><a href="#toc">Vissza a menühöz</a></p>
    </div>
    <div>
      <h2><a id="sec5">Szakasz #5</a></h2>
      <p><a href="#toc">Vissza a menühöz</a></p>
    </div>
  </div>

  <h2>Néhány más hivatkozás példa</h2>
  <ul>
    <li><a href="http://developer.yahoo.com">Yahoo Developer Network</a></li>
    <li><a href="http://dev.opera.com/articles/view/the-freelancing-business-part-1-pricing/#marketing">Önmarketing tippek</a></li>
    <li><a href="ftp://get.opera.com/pub/opera/win/">Az Opera különböző verzióinak letöltése</a></li>
    <li><a href="http://farm1.static.flickr.com/56/188791635_0b8bdd808d.jpg?v=0">Képek a könyvemről</a></li>
  </ul>

</body>
</html>

Nyisd meg ezt a fájlt a böngésződben, és próbáld ki benne a hivatkozásokat. Ha az első listából aktiválod a linkeket, akkor azt fogod észrevenni, hogy ezek a dokumentum megfelelő szakaszaira fognak ugrani. Ez azért van, mert a kapcsolódó szakasz azonosítóra hivatkoznak — a lista első eleme például a href attribútummal hivatkozik a #sec1 azonosítójú szakaszra, ami az első h2 elemben található hivatkozás id attribútumának felel meg. Ennyit kell tenned ahhoz, hogy összeköss két kapcsot egy dokumentumon belül — csak add meg a href attribútumban azt az értéket, amelyik a hivatkozott rész id attribútumában található, és tegyél elé egy kettőskeresztet. Figyeld meg azt is, hogy a böngésződ címsorában megjelenített URL ilyenkor tartalmazza a szakaszazonosítót is, így a látogatók elmenthetik vagy elküldhetik emailben a direkt erre a szakaszra mutató hivatkozást, amellyel egyből a dokumentumnak a megadott pontjára ugorhatnak.

Ha viszont a „Vissza a menühöz” linkeket aktiválod, akkor is működik a funkcionalitás, bár a célnál nincs megadva egy azonosítóval rendelkező hivatkozás. Hogyan lehetséges ez? Úgy, hogy a szakaszazonosító valójában bármilyen elem lehet, amelyiknek meg van adva az id attribútuma. Ismétlésként:

A hivatkozásoknak meg lehet adni egy szakasz azonosítót a href attribútumban — az azonosító ilyenkor mindig kettőskereszttel (#) kezdődik.
Aktiváláskor a hivatkozás átugrik bármilyen HTML elemre, amelyiknek az id attribútuma a megadott értéket tartalmazza. Egy lapon belül az id attribútumoknak egyedieknek kell lenniük.
Az id elemek elnevezésére vonatkozik néhány megkötés. A legfontosabb, hogy egy alfanumerikus karakterrel kell kezdődnie, és nem lehet benne üres hely.

Ezzel lefedtük a menüt és a példában szereplő különböző szakaszokat, de mi van a többi hivatkozással? Ha kipróbálod őket, látni fogod, hogy mindegyik más célra mutat — az egyik egy másik oldalra visz, a másik megjelenít egy képet, a harmadik egy másik weboldal egy bizonyos pontjára visz át (a megfelelő id megadásával). Ha mindegyik működött nálad, az nagyszerű, de mi van akkor, ha a böngésződ nem képes egyik-másik linkkel megbirkózni?

Ne hagyj kétséget afelől, hogy mire hivatkozol

Soha ne felejtsd el az egyik legfontosabb dolgot a hivatkozásokkal kapcsolatban, mégpedig hogy alapvető részét képezik a felhasználóval való kapcsolatodnak. Ha felkínálsz nekik egy hivatkozást, akkor megbíznak abban, hogy nyugodtan követhetik, és ott hasznos, releváns információt fognak találni. Ha a hivatkozásaid nem működnek, mert a hivatkozott tartalom nem elérhető, vagy olyan formában található meg, amit a látogató nem tud megnyitni, akkor visszaélsz ezzel a bizalommal és elveszíted a hiteledet a látogatók szemében. Ne hagyd, hogy ez megtörténjen.

Extra információk a `title` attribútummal

Mint sok más HTML elemhez, az a elemhez is hozzá lehet adni egy title attribútumot, ha további információkat akarsz megadni. A böngészők ezt a szöveget egy ún. tooltipben jelenítik meg, ha a látogató a hivatkozás fölé viszi az egérkurzort. Ez a megjegyzés megmondhatja számukra, hogy mire vonatkozik ez a hivatkozás. Például adhatsz egy rövid bevezetést a hivatkozott tartalomhoz (titlepelda.html):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Extra információk hozzáadása a title attribútummal</title>
<link rel="stylesheet" href="linkexamplestyles.css">
</head>
<body>
  <h1>Extra információk hozzáadása a title attribútummal</h1>
  <ul>
    <li>További információt a <a title="A Yahoo Developer Network egy központi oldal azokhoz az eszközökhöz, amelyeket a Yahoo biztosít, mint például a Yahoo User Interface Library (YUI) és a Design Patterns repository" href="http://developer.yahoo.com">Yahoo Developer Network</a> oldalán találhatsz.</li>
  </ul>
  </body>
</html>

Ennek ellenére nem várhatod el azt sem a látogatóidtól, hogy elég figyelmük és türelmük legyen ehhez, így nem támaszkodhatsz teljes mértékben csak erre a megoldásra. Könnyen lehet, hogy a látássérült felhasználók, akik a lapot egyáltalán nem is látják, nem fognak hozzáférni ehhez az információhoz. Bár a képernyőfelolvasók képesek kiolvasni a title attribútum tartalmát, alapesetben ezt nem olvassák fel a felhasználóknak — éppen ezért soha ne adj meg fontos információt egy hivatkozásról a title attribútumban. Fontos információk a következők lehetnek:

Hivatkozás nem HTML erőforrásokra, mint például PDF fájlok, képek, videók, hangfájlok vagy letöltések.
Hivatkozás egy másik kiszolgálóra, ami elhagyja az aktuális oldalt (külső kontra belső linkek).
Hivatkozás egy olyan dokumentumra, amelyik egy új lapon vagy egy felugróban fog megnyílni.

Hivatkozás nem HTML erőforrásokra — ne hagyd, hogy találgassanak

Nagyon bosszantó tud lenni, ha rákattintasz egy hivatkozásra, és a böngésződ nem tudja, hogy a hivatkozáson található tartalommal mit kezdjen. Mégis nagyon gyakran előfordul az, hogy a weboldalak mindenféle figyelmeztetés nélkül hivatkoznak képekre, PDF dokumentumokra és videókra anélkül, hogy erről a felhasználót értesítenék. A videók különösen gyakran le tudják fagyasztani a böngészőket. Az ilyen erőforrások ráadásul sokszor elég nagyméretűek (biztos láttál már 20 megás PDF-et), ami azt jelenti, hogy a felhasználó esetleg le szeretné tölteni ahelyett, hogy megnyitná a böngészőben, és tovább növelné annak memóriafogyasztását, de az is lehet, hogy egyáltalán nem akar megnyitni nagyméretű fájlokat.

A webes termékek sikerének egyik legnagyobb titka abban rejlik, hogy ne hagyjuk az embereket bizonytalanságban az általuk végezhető műveletekkel kapcsolatban, hanem tisztán és nyíltan leírjuk, hogy a különböző műveleteknek milyen hatásai lesznek. Hogy elkerülhesd a bosszúságot, a hivatkozások esetében mindössze annyit kell tenned, hogy megmondod a látogatónak, milyen erőforrásra mutat ez a hivatkozás. Íme néhány példa (nemhtmlhivatkozas.html):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Hivatkozás nem HTML erőforrásokra</title>
<link rel="stylesheet" href="linkexamplestyles.css">
</head>
<body>
  <h1>Hivatkozás nem HTML erőforrásokra</h1>

  <ul>
    <li>További információt a <a href="http://developer.yahoo.com">Yahoo Developer Network site (külső)</a> oldalán találhat.</li>
    <li>Töltsd le a <a href="http://www.wait-till-i.com/stuff/JavaScript-DOM-Cheatsheet.pdf">Dom tippek és trükkök (PDF, 85KB)</a> dokumentumot</li>
    <li>Válaszd ki és <a href="ftp://get.opera.com/pub/opera/win/">töltsd le az Opera különböző verzióit az FTP oldalukról (külső)</a></li>
    <li>Nézd meg a <a href="http://farm1.static.flickr.com/56/188791635_0b8bdd808d.jpg?v=0">képet a könyvemről (JPG, 200KB)</a></li>
  </ul>

  </body>
</html>

Külső kontra belső hivatkozások

A webes vállalkozások egyik legnagyobb félelme az, hogy a látogatóik egyszer csak fogják magukat, elhagyják a cég weboldalát, és lelépnek a hipertérbe. Emiatt gyakran tiltják meg külső hivatkozások használatát (kivéve, ha a külső hivatkozás célpontja hajlandó eleget fizetni az átirányított forgalom után). Erre a döntési hibára még később visszatérünk; most csak arról fogunk beszélni, hogy mit tesznek az emberek azért, hogy a látogatók ne hagyják el az oldalt, és ez hogyan befolyásolja az oldal sikerét.

Keretek és felugrók — mondj nemet rájuk

A látogatók elvesztésének a félelme és a más oldalakra való hivatkozás kényszerűsége olyan torz fejlesztéseket hozott a webfejlesztésben, amelyek évekig mérgezték az oldalak használhatóságát. Ezek a keretek (frame-ek) és a felugrók.

A HTML keretek használata azt jelenti, hogy a böngészőben megjelenített lapot több különálló dokumentumra osztod fel. Ennek az előnye az, hogy a dokumentum látszólag változatlan marad akkor is, ha a különböző részeit több kiszolgálóról töltöd is be, akár a sajátodról, akár más, külső szerverekről. A használhatóság ezen a ponton véget is ér — a keretek borzalmas felhasználói élményt nyújtanak, és rendkívül károsak:

A keresőmotorok nem tudják a teljes oldal leindexelni, viszont a találatoknál megjeleníthetik a lap egyik részét, amely így, kontextus nélkül akár teljesen értelmetlen is lehet.
A látogatók nem tudnak könyvjelzőt készíteni a laphoz — amikor legközelebb megnyitják az elmentett könyvjelzőt, akkor a keretrendszer eredeti állapotát fogják látni, és nem azt az állapotot, amiben a mentést végezték.
Azoknak a látogatóknak, akik kisegítő technológiákra szorulnak, igencsak nehéz napjuk lesz, ha navigálni akarnak a keretek között.
A külső oldalak sokszor nem szeretik, ha egy ilyen keretben próbálják megjeleníteni őket, és ún. „framebreaker” szkripteket használnak arra, hogy lecseréljék az URL-t a valódi címre az ilyen esetekben. Erre azért van szükség, hogy meggátolják egyes adathalász oldalak trükkjét, amelyek ehhez hasonló módon próbálják rávenni az embereket arra, hogy megadják a webbankos jelszavukat vagy a hitelkártyájuk adatait.

A keretkészleten belüli hivatkozások a target attribútumot használják fel arra, hogy megnevezzék a helyes keretet. Minden keret a keretkészleten belül kap egy bizonyos nevet, és a hivatkozást aktiválásakor a href attribútumban megadott dokumentum a megadott keretben fog megjelenni. Ha keretkészlet nem elérhető (például a látogató a dokumentumot egy keresőben találta meg), akkor mindegyik hivatkozás egy új lapot fog nyitni.

Az új lap nyitása egy másik gyakori megoldás a külső oldalakra való hivatkozásra — vagy egy szkriptes felugró ablakkal, vagy a target attribútum _blank értékével. Az a tény, hogy manapság már minden modern böngésző le tudja tiltani a felugró ablakokat, elég jól mutatja, hogy mennyire építhetsz erre a technikára. Nem igazán.

Röviden: ne használd a target attribútumot, amikor hivatkozásokat hozol létre, csak abban az esetben, ha pontosan tudod, mit csinálsz. A módszer különben is már rég elavult — ma már a böngészők tudnak füleket nyitni, így a látogatók a külső hivatkozásokat megnyithatják egy másik fülön a háttérben, hogy később olvassák el azokat, és közben ott maradhatnak az oldaladon. Bizonyos esetekben különbséget tehetsz valamilyen jelöléssel a külső és a belső hivatkozások között, de mindig hagyd a döntést a felhasználóra, hogy mit szeretne tenni velük.

A bejövő és kimenő hivatkozások haszna

Több előnye is van annak, ha külső oldalakra hivatkozol, akár még a konkurenciára is.

Megbízhatóvá tesz a látogatók előtt — azt sugallja, hogy biztos vagy a saját tartalmaid minőségében, és nem bújsz el a kihívóid elől.
Lehetőséget ad arra, hogy teljes szolgáltatást nyújts — hivatkozhatsz olyan tartalmakra, cikkekre vagy akár termékekre más oldalakról, amelyeket te nem tudsz lefedni, de a látogatóidat esetleg érdekelhetik, ha mélyebben akarnak a témával foglalkozni.
Ha egy jobb vagy egy eltérő megoldást dolgoztál ki valamire, akkor hivatkozhatsz a régi megoldásra referenciaként.

A bejövő hivatkozások hasznosságát (amikor külső oldalak hivatkoznak az oldaladra) kevesen vitatják. Minél több érvényes és minőségi oldal hivatkozik rád releváns kulcsszavakat használva, annál nagyobb besorolást kapsz a webes keresőkben, mint például a Google. Viszont mielőtt ez megtörténne, bizonyítanod kell, hogy te sem félsz másokra hivatkozni az oldaladról.

A releváns kulcsszavak egy másik nagyon fontos témához irányítanak a jó hivatkozások készítésével kapcsolatban, mégpedig hogy hogyan nevezzük el őket.

Hivatkozások elnevezése

Erről már részben beszéltünk annál a résznél, ahol a nem HTML erőforrásokra mutató hivatkozásokról volt szó, de azért nem árt emlékeztetni magunkat, hogy egy hivatkozás nem csak egyszerűen a lap szövegezésének a része, hanem egy interaktív elem a dokumentumban.

Egyes kisegítő megoldások a teljes dokumentum helyett először csak a hivatkozások listáját ajánlják fel a látogatóak, hogy gyorsan átfuthasson rajtuk, ami azt jelenti, hogy érdemes figyelned arra, hogy a hivatkozásaid szövege önmagában is értelmes legyen, a saját kontextusán kívül is. Ezt könnyen ellenőrizheted Operában, ha megnyitod a weblapot, és kiválasztod az Eszközök > Hivatkozások pontot a menüben, vagy megnyomod a Ctrl + Shift + L gombokat. Egy új fülön látni fogod a dokumentum összes hivatkozását, valamint azt is, hogy melyik hová mutat.

A fentiek alapján nem csak arra érdemes figyelned, hogy a hivatkozások szövege értelmes legyen, hanem arra is, hogy ne legyenek olyan linkek, amelyeknek ugyanaz a szövege, de különböző címekre mutatnak. A klasszikus hiba a „klikk ide” típusú linkek, például a következő szövegkörnyezetben: „A program utolsó változatának letöltéséhez kattints ide”. Sokkal jobb, ha olyan szöveget választasz a hivatkozásnak, amelyik megmagyarázza, hogy az mire mutat — ebben az esetben például „Töltsd le és próbáld ki az alkalmazás utolsó változatát”.

Ugyanez vonatkozik a „tovább” linkekre is. Ezeket főleg a híroldalakon találod meg, ahol van egy címsor és egy bevezető szöveg, majd egy „tovább” vagy „bővebben” link a végén. Erre a problémára megoldás lehet, ha készítesz egy „tovább” képet, és egyedi alternatív szöveget adsz hozzá, vagy készítesz egy span elemet a hivatkozáson belül, amit aztán CSS-sel elrejtesz. Ezekről a trükkökről bővebben is fogunk még beszélni a sorozat egy későbbi részében, a menük és a navigáció keretében.

Hivatkozások stílusozása

Bár még nem érkeztünk el a sorozatban a CSS-hez, de ezen a ponton érdemes megemlíteni, hogy nagyon fontos a hivatkozásaid megjelenése is, és ehhez a hivatkozásoknak több különböző állapotát kell figyelembe venned. A linkek lehetséges állapotai (amelyek megfelelnek a CSS pszeudo-szelektoroknak — ne ijedj meg, nem bonyolult) a következők:

link — ez az alapértelmezett állapot — ezzel határozhatod meg, hogyan nézzen ki egy hivatkozás a dokumentum különböző részeiben. Alapesetben a még nem látogatott hivatkozások kékkel jelennek meg.
visited — azoknak a hivatkozásoknak a stílusa, amelyeket már korábban meglátogattál (és valószínűleg még benne is vannak a böngésző gyorsítótárában). Alapesetben a látogatott hivatkozások lilával jelennek meg.
hover — a hivatkozás stílusa, amikor az egérkurzor fölötte van.
active — a hivatkozás stílusa, amikor aktiválva van, például amíg kattintás után felépül a kapcsolat a hivatkozott oldalra; olyankor is ebben az állapotban van az utolsó aktivált link, amikor a böngészőben visszalépsz egy korábbi oldalra.

Összefoglaló

Sok mindenről beszéltünk ebben a leírásban, de a legfontosabb azt megjegyezni, hogy hogyan működnek és mire szolgálnak a hivatkozások. A pályafutásod során rengeteg trükköt és technikát fogsz róluk tanulni, amelyekkel felülbírálhatod a normál működésüket, de remélem ilyenkor megállsz majd egy pillanatra, és elgondolkodsz rajta, hogy valóban szükség van-e arra, amit éppen meg szeretnél valósítani.

A következőkről beszéltünk:

Az a elem felépítése és a (nem elavult) attribútumai
A különbség az a elemek között hivatkozásként (a href attribútummal) vagy kapocsként (a name attribútummal) használva
Miért kell a kapcsok neve egyedi legyen
Annak a szükségessége, hogy a látogatókat tájékoztasd arról, mire számíthatnak a hivatkozás mögött (milyen formátumú a fájl és mekkora)
Hogyan adhatsz további információt a hivatkozáshoz a title attribútum segítségével, mint tooltip — és miért nem jó ezt fontos információk megadására használni
A különbség a külső (más oldalakra mutató) és belső (a saját szerveren található dokumentumokra mutató) hivatkozások között
Elavult technikák, mint például a felugrók és a keretek, valamint hogy miért kell ezeket elkerülni
A más oldalakra való hivatkozás, valamint a bejövő hivatkozások előnyei
Hogyan nevezzük el helyesen a hivatkozásokat, hogy kontextustól függetlenül is értelmesek legyenek, és ez miért fontos
A hivatkozások stílusozásának alapjai

Ezzel a tudással már képes leszel a HTML dokumentumokban helyes hivatkozásokat készíteni, és készen állsz arra, hogy elgondolkodj a menükön és a navigáción.

Tesztkérdések

Mi a hiba a következő hivatkozásban: <a href="jelentes.pdf" title="Jelentés PDF-ben, 2.3MB">töltse le a legutolsó jelentést</a>?
Mire szolgál a hivatkozásoknál a target attribútum, és hogyan lehet ezt jól felhasználni?
Hogyan készíthetsz olyan hivatkozást, amelyik aktiváláskor a lap alsóbb részére visz el? Mire kell vigyáznod az ilyen esetekben?

A szerzőről

Fotó: Bluesmoon

Miután belekontárkodott a rádiózásba, Chris Heilmann tíz évig dolgozott webfejlesztőként. Jelenleg a Yahoo!-nál dolgozik Angliában mint oktató és vezető fejlesztő, és a kódminőséget ellenőrzi az európai és ázsiai kirendeltségeknél.

Chris a Wait till I come oldalon blogol, és „codepo8” néven található meg több közösségi oldalon is.

This article is licensed under a Creative Commons Attribution, Non Commercial - Share Alike 2.5 license.