Linkek

Kapcsolatok (linkek)

A HTML oldalak egyik legfontosabb kellékei a kapcsolatok. Ezek segítségével lehet egyetlen egér kattintással elérni egy több oldalas dokumentum más oldalait, vagy akár egy a világ másik pontján levő dokumentumot. A kapcsolatok teremtik meg a lehetőséget - egyik oldalról a másikra lépve - a hálózaton való szörfözéshez. Egy kapcsolatnak a lapon való elhelyezéséhez a <a> </a> TAG-et kell használni, ám ennek a TAG-nak van egy kötelező paramétere is, a HREF="cím", amely az oldalhoz ezen a kapcsolaton keresztül kapcsolódó oldal címét adja meg. A kezdő, és záró TAG közötti objektum - szöveg, vagy kép lesz az amire kattintva a böngésző a kapcsolat által mutatott lapra ugrik, ezért fontos, hogy a kezdő, és a záró TAG között legyen valami - szöveg, vagy kép.

Nézzünk egy egyszerű példát:

Legyen a link, vagy más néven hiperhivatkozás célja, mondjuk az ismert kereső a Google.

Látogassunk a <A>Google</A>-ra Látogassunk a Google-ra
Ezzel kijelöltük a "Google" szöveget az <A> elem használatával, már majdnem link. Nincs más hátra, mint megmondani a böngészőnek, hogy mit jelenítsen meg, ha a linkre kattintunk:
Látogassunk a <A HREF="http://www.google.hu">Google</A>-ra Látogassunk a Google-ra
Mint láthatjuk, a HREF= után idézőjelek között azt a webcímet kell beírni, amit a böngésző címsorába is írnánk.
Képet is felhasználhatunk linknek.
<A HREF="http://www.szon.hu"> <IMG SRC="szabolcslogo.gif" width="72" height="48" border="0" alt="SZON"></A> SZON
Nem csak másik weblap címe írható be az <A></A> elemek közé:
 Küldj nekem egy <A HREF="mailto:fazekas.steve@freemail.hu">e-mail</A>-t! Küldj nekem egy e-mail-t!
Ha ezt a lehetőséget alkalmazzuk, a linkre kattintáskor az alapértelmezett levelezőprogram fog elindulni, a címzett helyére  előre beírva a linkben hivatkozott cím.

Van a linkeknek még egy fajtája; amely nem másik webhelyre ugrasztja a gyanútlan látogatót, hanem ugyanazon lap másik részére. Ezeket, illetve az ehhez tartozó másik elemet bookmark -nak, vagy magyarul könyvjelzőnek nevezzük.

Én is hoztam létre ilyet néhány oldalon: görgessük az ablakot a legaljára! Található ott egy "Tetejére" felirat. Ha arra rákattintunk, varázslatos módon a lap teteje kerül a képernyő tetejére! Nézzük, hogyan lehet ezt megoldani: most is az <A> taget fogjuk használni:

<A name="top">Katalógus:</A>

Ezzel kineveztük a "Katalógus:" szót könyvjelzőnek. A lap alján pedig, ahonnan lehetőséget kínálok ide visszatérni, a következő lesz a kód:

<A HREF="#top">Tetejére</A>

A "#" karakterrel jelzem a böngészőnek, hogy könyvjelzőről van szó, tehát az <A NAME> szöveget keresse.

<p><a name="top">Katalógus:</a></p>
<p><a href="#porsche">Porsche GT</a></p>
<p><a href="#vw">VW Polo</a></p>
<p><a name="porsche">
<img border="0" src="porche.bmp"></a></p>
<p><a href="#top">tetejére</a></p>
<p><a name="vw">
<img border="0" src="vw.jpg"></a></p>
<p><a href="#top">tetejére</a></p>
Nézd meg!

Kapcsolat a lapok között:

Akkor válik "működővé" egy Web lap, ha az egyes dokumentumai kontaktusban vannak egymással.
Azt már megnéztük hogyan lehet egy oldalon belül kapcsolatokat létrehozni (belső link). Arra is volt példa, hogy egy külső veboldalra, vagy e-mail címre hivatkoztunk. Most nézzük meg, hogyan lehet egy másik oldalra hivatkozni.

Legyen a két oldalunk neve: elso.htm és masodik.htm. Az elso oldalról mutasson egy link a masodik oldalra, és a masodik oldalról vissza lehessen térni az elsőre:

.
<title>Első</title>
</head>
<body>
<p>Ez az első lapunk.
<a href="masodik.htm">Ezzel</a> a linkkel a második oldalra juthatunk.</p>
</body>
</html>

.
<title>Második</title>
</head>
<body>
<p>Ez a második oldal.</p>
<p>A <a href="elso.htm">vissza</a> link az első oldalra juttat!</p>
</body>
</html>

Nézd meg!
Az oldalakra történő hivatkozásokat relatív és abszolút módon is megadhatjuk