Linkek

A linkek (vagy magyarul hivatkozások) kötik össze a honlapokat, az egész Internet linkekből áll. Az alábbi példa egy Google-ra mutató link:

<a href="http://www.google.hu/">Látogasd meg a Google-t!</a>

Látogasd meg a Google-t!

Az a (anchor, azaz horgony) címke segítségével hozhatunk létre linket. A kezdő címkébe mindössze a href attribútumot kell írni, aminek az értéke annak a webhelynek a címe, ahová a link mutat, a fenti példában ez a Google magyar webhelye. Az <a>...</a> címkék közé írt szöveg fog megjelenni a link szövegeként.

Ne használjuk a „Kattints ide” szövegű linkeket! Ehelyett néhány szóban, de jobb ha egy mondatban írjuk le, hova fog jutni a látogató a linkre való kattintáskor. Így többen fognak az adott linkre kattintani.

A title attribútum segítségével segédszöveget írhatunk a linkhez, ami akkor fog megjelenni, ha az egérmutatót kis ideig pihentetjük az adott linken.

<a href="http://www.google.hu/" title="Erre a linkre kattintva a Google magyar nyelvű oldala fog megjelenni">Látogasd meg a Google-t!</a>

Látogasd meg a Google-t!

A Transitional DTD-ben még benne van a target attribútum is, amit a horgonyba írhatunk be, és megadhatjuk vele, hogy a hivatkozás új ablakba nyíljon-e vagy sem. Azonban ha Strict DTD-t használunk, amit javaslok, akkor nem használhatjuk ezt az attribútumot, ezért minden általunk gyártott link ugyanabba a böngészőablakba fog megnyílni. Emögött az a filozófia húzodik meg, hogy a látogató dönthesse el, hogy új ablakok akar-e vagy sem, ne pedig a weboldal készítője.

Ha mindenképpen szükségünk van arra, hogy a link új böngészőablakban nyíljon meg, akkor használjuk a Transitional DTD-t! De előtte fontoljuk meg, hogy tényleg szükség van-e az új ablakra!

Linket úgy tudunk új ablakba megnyittatni, ha a target attribútum értékének a "_blank" szöveget adjuk meg.

De legjobb, ha a látogatóra bízzuk, hogy új ablakba akarja-e megnyitni a linket, vagy sem.

Firefox és Internet Explorer alatt ezeket lehet tenni egy linkkel:

Ha egy linkre az egér középső gombjával (a görgővel) kattintunk, akkor az új lapon fog megnyílni.
Ha nyomva tartjuk a Shift+W billenytűket, és közben a linkre kattintunk, akkor új ablakban fog megnyílni.
Ha jobb gombbal kattintunk a linken, a menüből is ki tudjuk választni, hol nyíljon meg.
A böngésző beállításai között is megadhatjuk, hogy sose nyíljon link új ablakba, hanem csak új lapra.

Törött linkek ellenőrzése

Mielőtt feltöltjük honlapunkat az Internetre, feltétlenül ellenőrizzük a rajta található összes linket, hogy elérhetőek-e a hivatkozott oldalak! Ugyanis ha a link egy olyan oldalra mutat, ami nem létezik, akkor a látogató hibaüzenetet fog látni (404 - A keresett oldal nem található). Ez kevésbé kellemetlen akkor, ha külső (mások által készített) oldalra linkeltünk, mert az bármikor megváltozhat. De ha a saját oldalunkra mutató link nem működik, akkor a látogatók szélsebesen fogják elhagyni az oldalt.

Szerencsére nem kell ezt kézzel megtennünk, két programot ajánlok:

Relatív és abszolút linkek

Kétféle link létezik: relatív és abszolút. Abszolút linkre már láttunk példát, ez az a fajta link, ahol egy webhely címét, azaz URL címét adjuk meg a href attribútumnak. A webhely címét ebben a formában érdemes megadni: http://www.webhelycime.hu/. Tehát a végére tegyünk oda egy / jelet.

Ha kimásolunk valahonnan egy linket, akkor muszáj kicserélnünk a linkben előforduló összes & jelet entitásra, azaz & jelekre. Például ha Google-n rákeresünk a html css kifejezésre, és linket akarunk létrehozni a találati listára, akkor ezt a linket fogjuk látni a címsorban:

http://www.google.hu/search?hl=hu&q=html+css&
btnG=Google+keres%C3%A9s&meta=

De ebben van három & jel a vastagon szedett részeken, ezért így írjuk ki a linket a href attribútumba:

http://www.google.hu/search?hl=hu&q=html+css
&btnG=Google+keres%C3%A9s&meta=

Relatív link az a link, amelyik a rá hivatkozott dokumenthoz képest valahol máshol helyezkedik el a webszerveren belül. Tekintsük az alábbi könyvtárszerkezetet egy webszerveren belül:

A root a webszervernek az a könyvtára, amibe feltölthetjük az elkészített weboldalainkat, képeinket, stíluslapjainkat stb. Ebbe kell feltölteni az index.html nevű weboldalt, amit a böngésző automatikusan keresni fog, ha beírja valaki a domain nevünket a böngészőbe. Pl. ha megvettük a www.endomainnevem.hu domain nevet, akkor ha az index.html fájlt elhelyeztük a tárhelyünkön lévő saját könyvtárunkba (ez most a root), akkor ha beírjuk a böngészőbe, hogy www.endomainnevem.hu, akkor meg fogja jeleníteni az index.html fájlt.

Térjünk vissza a linkekhez! A fenti könyvtárszerkezetet tekintve el fogjuk készíteni az összes lehetséges hivatkozást a zold.html oldalról! A zold.html az alma nevű könyvtárban van, alatta helyezkedik el a barack könyvtár, felette pedig a korte és a root könyvtár.

Tekintse meg a zold.html oldalt, és próbálja ki a hivatkozásokat!

Hivatkozás ugyanabban a könyvtárban lévő másik fájlra:
Ha a zold.html oldalról linket akarunk készíteni a kek.html oldalra, akkor egyszerűen ezt kell tennünk:

<a href="kek.html">Menj a kek.html oldalra!</a>
Hivatkozás alkönyvtárban lévő fájlra:
Ha a zold.html oldalról az egy könyvtárral lentebb lévő piros.html oldalra kívánunk hivatkozni, akkor ezt kell írnunk:

<a href="barack/piros.html">Menj a piros.html oldalra!</a>
Hivatkozás egy könyvtárral feljebb lévő fájlra:
Ha egy szinttel feljebb kell hivatkoznunk a korte könyvtárban lévő sarga.html oldalra, akkor így kell ezt megtennünk:

<a href="../sarga.html">Menj a sarga.html oldalra!</a>
Hivatkozás két könyvtárral feljebb lévő fájlra:
Ha vissza szeretnénk jutni a kezdőlapra, azaz az index.html oldalra, akkor azt ugyanígy kell megtenni, csak mivel két könyvtárral feljebb hivatkozunk, kétszer kell a két pont és a per jel:

<a href="../../index.html">Menj az index.html oldalra!</a>
Kiszolgálón belüli abszolút hivatkozások:
Van azonban egy alternatív módszer a fentiek helyett, amivel az egyes fájokra mindenhonnan ugyanúgy tudunk hivatkozni (ez sokkal egyszerűbb). Ha a példabeli négy fájlra akarunk hivatkozni bárhonnan, akkor ezt így tehetjük meg:
- index.html: /index.html
- sarga.html: /korte/sarga.html
- zold.html: /korte/alma/zold.html
- piros.html: /korte/alma/barack/piros.html
A / jelenti a root mappát, onnan kiindulva tudjuk meghatározni a link útvonalát. A kezdőlapunkra például így tudunk hivatkozni, bármely HTML oldalból tesszük ezt meg:

<a href="/index.html">Menj az index.html oldalra!</a>
Abszolút linkekkel a következőképpen lehetne hivatkozni ezekre az oldalakra. Tegyük fel, hogy ezeket az oldalakat a www.endomainnevem.hu elérhetőségű webszerverre töltöttük fel. Ekkor abszolút hivatkozással így lehet rájuk hivatkozni, mindegy hogy honnan, akár egy teljesen más weboldalról is, tehát itt nem számít a könyvtárszerkezet:
- index.html: http://www.endomainnevem.hu/index.html
- sarga.html: http://www.endomainnevem.hu/korte/sarga.html
- zold.html: http://www.endomainnevem.hu/korte/alma/zold.html
- piros.html: http://www.endomainnevem.hu/korte/alma/barack/piros.html
A root mappát most ez jelenti: http://www.endomainnevem.hu/

Saját webhelyünkön belül mindig relatívan hivatkozzunk a saját fájlainkra, mert ha később átvisszük más domain név alá az egész webhelyet, akkor nem kell átírni az abszolút hivatkozásokat.

Kép megadása linkként

Azt is megtehetjük, hogy egy képre kattintáskor nyíljon meg egy honlap, ha a link szövege helyett a képet szúrjuk be. Ha az alábbi képre kattintunk, akkor a W3C HTML ellenőrzője fog bejönni, ami ellenőrzi ennek a weboldalnak a kódját:

<a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-html401" alt="Valid HTML 4.01 Strict" height="31" width="88"></a>

Ekkor azonban Firefox böngésző alatt kék keret jelenik meg a kép körül, mivel maga a kép egy link. A keretet az alábbi stíluslappal tüntethetjük el, ha kívánjuk:

a img {
border: none;
}

Hivatkozás letölthető fájlokra

Ugyancsak link segítségével kínálhatunk letöltésre akármilyen kiterjesztésű fájlt. Ha rákattintunk egy linkre, és az nem egy másik weboldalra vezet el, hanem egy fájlhoz, akkor a böngésző megpróbálja először saját maga megjeleníteni ezt a fájlt. Ha nem tudja, akkor egy külső programot fog megnyitni, ami már képes a fájl megjelenítésére.

Például PDF dokumentumot így tudunk belinkelni:

<a href="mypdf.pdf">Kattintson ide a PDF letöltéséhez!</a>

Kattintson ide a PDF letöltéséhez!

Ugrás a honlap egy bizonyos pontjához

Az a címke arra is jó, hogy a honlapunk egy bizonyos pontjához tudjunk ugrani, ha rákattintunk a linkre. Ezt legtöbbször tartalomjegyzéknél használják. Az alábbi példával a 4. és a 7. fejezethez lehet ugrani:

<p><a href="#f4">Ugrás a 4. fejezethez!</a></p>
<p><a href="#f7">Ugrás a 7. fejezethez!</a></p>

<h2>1. fejezet</h2>
<p>Ez itt a fejezet tartalma stb. stb.</p>
<h2>2. fejezet</h2>
<p>Ez itt a fejezet tartalma stb. stb.</p>
<h2>3. fejezet</h2>
<p>Ez itt a fejezet tartalma stb. stb.</p>
<h2 id="f4">4. fejezet</h2>
<p>Ez itt a fejezet tartalma stb. stb.</p>
<h2>5. fejezet</h2>
<p>Ez itt a fejezet tartalma stb. stb.</p>
<h2>6. fejezet</h2>
<p>Ez itt a fejezet tartalma stb. stb.</p>
<h2 id="f7">7. fejezet</h2>
<p>Ez itt a fejezet tartalma stb. stb.</p>
<h2>8. fejezet</h2>
<p>Ez itt a fejezet tartalma stb. stb.</p>
<h2>9. fejezet</h2>
<p>Ez itt a fejezet tartalma stb. stb.</p>
<h2>10. fejezet</h2>
<p>Ez itt a fejezet tartalma stb. stb.</p>
<h2>11. fejezet</h2>
<p>Ez itt a fejezet tartalma stb. stb.</p>
<h2>12. fejezet</h2>
<p>Ez itt a fejezet tartalma stb. stb.</p>
<h2>13. fejezet</h2>
<p>Ez itt a fejezet tartalma stb. stb.</p>
<h2>14. fejezet</h2>
<p>Ez itt a fejezet tartalma stb. stb.</p>
<h2>15. fejezet</h2>
<p>Ez itt a fejezet tartalma stb. stb.</p>

Ugrás a 4. fejezethez!

Ugrás a 7. fejezethez!