Tartalomjegyzék

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:

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 &amp; 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&amp;q=html+css
&amp;btnG=Google+keres%C3%A9s&amp;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:

mappaszerkezet

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!

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>

Valid HTML 4.01 Strict

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!

1. fejezet

Ez itt a fejezet tartalma stb. stb.

2. fejezet

Ez itt a fejezet tartalma stb. stb.

3. fejezet

Ez itt a fejezet tartalma stb. stb.

4. fejezet

Ez itt a fejezet tartalma stb. stb.

5. fejezet

Ez itt a fejezet tartalma stb. stb.

6. fejezet

Ez itt a fejezet tartalma stb. stb.

7. fejezet

Ez itt a fejezet tartalma stb. stb.

8. fejezet

Ez itt a fejezet tartalma stb. stb.

9. fejezet

Ez itt a fejezet tartalma stb. stb.

10. fejezet

Ez itt a fejezet tartalma stb. stb.

11. fejezet

Ez itt a fejezet tartalma stb. stb.

12. fejezet

Ez itt a fejezet tartalma stb. stb.

13. fejezet

Ez itt a fejezet tartalma stb. stb.

14. fejezet

Ez itt a fejezet tartalma stb. stb.

15. fejezet

Ez itt a fejezet tartalma stb. stb.

Mailto link készítése

Amikor kiírjuk az e-mail címünket a honlapra, akkor elérhetjük, hogy amikor rákattintanak az e-mail címre, akkor megnyíljon az alapértelmezett levelezőprogram, amiben a címzett automatikusan a megadott e-mail címünk lesz.

<p>Elérhetőségeink:<br>
E-mail cím: <a href="mailto:info@cegnev.hu">info@cegnev.hu</a><br>
Telefonszám: +3620 555 55 55 </p>

Elérhetőségeink:
E-mail cím: info@cegnev.hu
Telefonszám: +3620 555 55 55

Azonban ezt a megoldást NEM AJÁNLOTT használni, mert könnyen áldozatául eshetünk a spammereknek (spam=kéretlen reklámlevél). A spammer olyan személy, aki tömegesen küldözget kéretlen reklámleveleket a nap 24 órájában. Egyik módszerük az e-mail címek gyűjtésére egy olyan program, amelyik folyamatosan pásztázza az Internetet, minél több honlap forráskódját végignézve és e-mail címek után kutatva. Ha talált egyet, felveszi az adatbázisba és már küldi is rá a kéretlen reklámokat!

Továbbál a mailto hivatkozások nagyon sokszor nem jelentek előnyt a látogatónak, ugyanis a hivatkozásra kattintáskor az alapértelmezett levelezőprogram töltődik be, de nem biztos, hogy a látogató ezt a programot használja levelezésre. Vagy az is lehet, hogy nem otthonról böngészik. Így elvész a mailto hivatkozás előnye.

Ezekre a problémákra három megoldás van:

1. Egyáltalán nem használjuk a mailto címkét, hanem helyette például így írjuk ki az e-mail címünket, ha az info@cegnev.hu:

Ezek a címek így nem kattinthatók, tehát kézzel kell őket bemásolni a levelezőprogramba, majd olyan formára hozni, hogy érvényes e-mail cím legyen. De aki akar nekünk írni, az úgyis meg fogja tenni ezt a kis fáradtságot.

2. Készíthetünk egy kapcsolatfelvételi formot is, amelyben a látogató megadja a nevét, e-mail címét és a kérdését, majd ezeket az adatokat elküldi a szerverünkre. A szerveren egy megfelelő program e-mailben fogja nekünk elküldeni a megkapott adatokat. Így nem kell kiírnunk az e-mail címünket a honlapra. Talán ez a legjobb megoldás.

Linkek díszítése stíluslappal

Először próbáljuk ki, mi történik, ha az a címkére alkalmazunk egy stílust.

Az a címke díszítése.

Itt beállítottuk, hogy a linkek ne legyenek aláhúzva, és piros színűek legyenek. Ez a stílus az összes linkre hat, függetlenül annak állapotától. Azonban olyan stílust is megadhatunk, ami a link állapotához kötődik.

Az alábbi táblázat a linkekre alkalmazható álosztályokat gyűjti össze. (Az álosztályokkal bővebben ez a fejezet foglalkozik, de enélkül is könnyű megérteni őket.)

Álosztály neve Leírás
:link A még meg nem látogatott linkeket választja ki.
:visited A már meglátogatott linkeket választja ki.
:hover Azt a linket választja ki, amelyik felett éppen áll az egér.
:active Azt linket választja ki, amelyiken állva az egérrel a felhasználó lenyomta az egérgombot, de még nem engedte fel.

A link mind a négy állapotának díszítése.

Nem kötelező mind a négy állapotra külön stílust megadni. Azonban ha megadjuk őket, akkor pontosan a fenti példában látható sorrendben alkalmazzuk őket! Ha nem így teszünk, akkor felülírhatják egymást az egyes állapotok. A következő példában először adtuk meg a :hover tulajdonságot, és utána a többit. Így a :visited álosztály color tulajdonsága felülírta a :hover álosztály color tulajdonságát. Így a már meglátogatott linkek fölé érve nem érvényesül a :hover-nél megadott szín.

Álosztályok rossz sorrendben való megadása.

Tanulság: tartsuk be az első példában látott sorrendet: :link, :visited, :hover, :active.

A linkekre az alábbi sorrendben alkalmazzuk az álosztályokat: :link, :visited, :hover, :active. (Nem kötelező mindegyiket megadni.) Ezt könnyebben meg tudjuk jegyezni, ha a LoVe/HAte szavakra gondolunk.

A következő példában a :link és a :visited ugyanolyan stílust kap, és az :active álosztályt egyáltalán nem díszítjük.

A link három állapotának díszítése.

Előfordulhat olyan, hogy valahogyan jelezni szeretnénk, hogy melyek egy külső honlapra mutató linkek, és melyek mutatnak a saját honlapunkon belülre. Ezt úgy fogjuk megoldani, hogy az ilyen linkek mögé teszünk egy kis képet. Azonban felesleges volna minden külső link mögé „kézzel” odatenni a képet, amikor erre használhatjuk a stíluslapokat is!

Ikon helyezése a linkek mögé.

Furcsának tűnhet a stíluslap, nem véletlenül. Ugyanis CSS 3 kijelölőt használtunk, ez a fajta kijelölő nincs benne a CSS 2.1 szabványban. A a[href^="http://"] kijelölő az összes olyan a elemet választja ki, amelynek href attribútuma pontosan a http:// karakterekkel kezdődik. Ez egy kívülre mutató link lesz, mert a belülre mutatókat relatív, és nem abszolút módon szoktuk megadni. Hasonló módon tudjuk díszíteni a biztonságos webhelyre (https://) mutató linkeket, de akár az FTP linkeket is díszíthetnénk külön ikonnal. Az IE6 nem ismeri fel ezt a kijelölőt, az IE7, Firefox 2, Opera 9 viszont már igen.

A trükk pedig abban van, hogy az ikon a link háttérképe, és a linknek akkora jobb oldali belső margót adtunk meg, hogy ne lógjon rá a szöveg az ikonra.

Egy attribútumot nemcsak a kezdő, hanem a befejező karakterei alapján is kiválaszthatunk.

Ikon helyezése a linkek mögé 2.

Most pedig az a[href$=".pdf"] kijelölőt használtuk, ami minden olyan a elemre érvényes, amelynek href attribútuma .pdf karakterekre végződik. Ekkor odahelyezzük mögé a PDF dokumentumokat jelölő kis ikont.

Firefox böngészőhöz elérhető a TargetAlert kiterjesztés, amely minden link mögé a megfelelő ikont helyezi el minden weboldalon aszerint, hogy a link milyen protokollt használ, vagy milyen fájlra mutat.

Ajánlott linkek

A W3C linkellenőrzője: http://validator.w3.org/checklink

Xenulink linkellenőrző program: http://home.snafu.de/tilman/xenulink.html

Linkcseréről: http://linkcsere.lap.hu/

A tökéletes „404 - Az oldal nem található” hibaoldal: http://alistapart.com/articles/perfect404

Weblabor - Barátságos hibaüzenetek: http://weblabor.hu/cikkek/baratsagos404

TargetAlert kiterjesztés a Firefoxhoz: http://www.bolinfest.com/targetalert/

Milyen a teljes értékű link? http://webni.innen.hu/Teljes_c3_a9rt_c3_a9k_c5_b1Link

Tartalomjegyzék Impresszum, szerzői jogok