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> |
 |
 |
|
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
|
|