A hivatkozás meghatározása HTML-ben az a elem segítségével történik. Mielőtt bemutatnám nektek annak használatát, még néhány általános tanácsot adnék a hivatkozásokkal kapcsolatban. Mindenképp gondoljátok át, hogy jó hivatkozószövegeket adjatok meg. Egy egyszerű vissza kifejezéssel általában senkinek sem segítetek. (Ha ugyanis valaki egy külső oldalról érkezik, általában nem tudja, mit jelent a vissza). Próbáljatok leíró hivatkozószövegeket választani.
A hivatkozások HTML-ben mindig ugyanaz elvek szerint működnek.
<a href="videos.html">Aktuális videók</a>
A a elemhez a href attribútum van hozzárendelve. Ezt a href attribútumot ismét értéknek várja, ami a hivatkozás célja. Az előző példában a videos.html fájlra hivatkoztunk. Ez a fájl ugyanabban a könyvtárban található, mint a HTML-fájl, ahol a hivatkozás definiálva van.
A hivatkozások meghatározásakor érvényesek azok a szabályok is, amelyeket a képek beillesztése kapcsán bemutattunk.
Egyébként nem csak a projektbeli hivatkozásokat lehet definiálni. A hivatkozásokat külső fájlokra és domainekre is lehet állítani.
<a href="http://www.psd-tutorials.de">PSD-Tutorials.de</a>
Az <a> nyitó és a záró </a> közötti szöveg végül a hivatkozó szöveg lesz. Alapértelmezés szerint ezt a szöveget a böngészők aláhúzottként jelenítik meg.
Célfelület megadása
Ha valaki rákattint egy hivatkozásra, akkor a hivatkozás célja az aktuális böngészőablakban nyílik meg. Ez általában teljesen rendben van. Azonban előfordulhat, hogy valaki például egy külső domainre mutató hivatkozást állított be. Ha egy látogató rákattint erre a linkre, akkor a hivatkozás célfelülete egy új böngészőablakban vagy fülön nyílik meg. Ennek a változatnak az előnye: Az a weboldalatok marad a háttérben nyitva.
Azonban nem minden hivatkozást kell kívülről nyílt ablakban megnyitnotok, mivel látogatóitok hamar idegesek lehetnek ettől.
A a elem target attribútumával meghatározhatjátok, hogy melyik célállomást nyissa meg a hivatkozás. HTML-ben alapvetően három szabványos értéket kínál a target.
• _blank – A hivatkozás célja egy új böngészőablakban jelenik meg.
• _self – A hivatkozás célállomása az aktuális böngészőablakban nyílik meg.
• _parent – Ebből a keretből ki lehet lépni. (Vegyétek figyelembe, hogy a kereteket az HTML5 nem támogatja. Ezenkívül ezt a technikát ma már nem szabad használni, mivel jobb alternatívák vannak rá. A keretekkel kapcsolatban bővebben információt találhatsz például a http://de.wikipedia.org/wiki/Frame_(HTML) oldalon).
• _top – Ezt szintén a keretekkel kapcsolatban használják. Segítségével a hivatkozás célállomását a framekészleten kívül nyithatjátok meg.
Itt egy példa arra, hogy hogyan kell használni a target attribútumot:
<a href="http://www.psd-tutorials.de" target="_blank">PSD-Tutorials.de</a>
Ebben az esetben a http://www.psd-tutorials.de hivatkozás célállomása egy új ablak/fülben nyílik meg. Ugyanezt a hatást érnétek el, ha a _blank nevű előre meghatározott nevet használnátok fantázianév helyett, például halligalli. Azonban ha a target-et használjátok, akkor a célzott nevek közül valamelyiket használnám.
A hivatkozás alapjának meghatározása
Az HTML-fájl head részében egy ún. hivatkozás alapot definiálhattok. Az ilyen hivatkozás alap megadja, hogy az összes hivatkozáscél egy adott böngészőablakban jelenjen meg. Természetesen ez is elsősorban a keretekkel való kapcsolatban érdekes.
Ez az egész gyakorlatilag akkor is hasznos, ha például szeretnéd, hogy az összes link egy _blank segítségével mindig egy új böngészőablakban jelenjen meg. Képzeld el egy linklista esetét. Ha azt szeretnéd, hogy a hivatkozott célok mindig egy új ablakban nyíljanak meg, akkor így nézne ki:
<a href="http://www.facebook.com/psdtutorials" target="_blank">http://www.facebook.com/psdtutorials</a> <br /> <a href="http://www.facebook.com/psdDarkArt" target="_blank">http://www.facebook.com/psdDarkArt</a> <br /> <a href="http://www.facebook.com/HowToNetzwerk" target="_blank">http://www.facebook.com/HowToNetzwerk</a>
Tehát minden a definícióhoz egy target attribútumot kell hozzárendelnetek.
Mint látható, ez nem túl hatékony. Még kisebb hatékonysággal jár, ha pár hónap múlva úgy döntötök, hogy mégsem az új ablakban akarjátok megnyitni a célokat. Ekkor minden link target attribútumát módosítanotok kellene. Ezt elkerülhetitek a fenti hivatkozási alappal. Ezt a base
elem meghatározásával tehetitek meg a head elemen belül. A base elemhez rendeljétek a target attribútumot a kívánt értékkel. Itt egy példa arra, hogyan nézhetne ki ez:
<!DOCTYPE html> <html lang="de"> <head> <title>PSD-Tutorials.de</title> <meta charset="UTF-8" /> <base target="_blank"> </head> <body> <a href="http://www.facebook.com/psdtutorials">http://www.facebook.com/psdtutorials</a> <br /> <a href="http://www.facebook.com/psdDarkArt">http://www.facebook.com/psdDarkArt</a> <br /> <a href="http://www.facebook.com/HowToNetzwerk">http://www.facebook.com/HowToNetzwerk</a> </body> </html>
That a megnyomás a sok gépelést.
Alapok meghatározása
Azok how hogy hiperhivatkozásokat más fájlokkal helyezhetnek el, már láttátok. Azonban egy HTML-fájlban úgynevezett horgonynak is meghatározhatók. Ezekre a horgonyokra hivatkozásokat adhattok meg. Gyakorlati példa erre például egy terjedelmes oldalak esetében. Így az oldal elején hátlapozás nélkül ugorhatnak azokba a helyekre, amelyek számukra relevánsak, az oldal számukra releváns helyeire ugraniuk nem kell.
A horgonyokat az a elementum hozza létre. Azonban a horgony-meghatározások nem a href, hanem egy name attribútumot kapnak.
<a name="seitenanfang">Tartalom</a> <a name="kapitel1">1. fejezet tartalma</a> <p>Itt sok szöveg követi.</p> <a name="kapitel2">2. fejezet tartalma</a> <p>Itt sok szöveg követi.</p>
A horgonynév szabadon választható. Azonban javaslom, hogy ezeket lehetőleg röviden válasszátok meg, csak kisbetűt használjatok, és kerüljétek a különleges karaktereket.
A horgonyra való hivatkozáshoz egy általános hiperhivatkozást határoztok meg, mint ahogy ez a bevezető részben is megtehettétek.
<a href="#seitenanfang">Az oldal tetejére</a>
A href attribútum értékként a horgonynév van beállítva. Itt azonban az a lényeges, hogy a horgonynév eléje van írva a keresztcímke.
A horgonyra való hivatkozásokat egy fájlon átnyúlóan is elhelyezhetitek. A következő példában arra tételezem fel, hogy létezik egy news.htm fájl, amely ugyanabban a könyvtárban van, mint az aktuális HTML-fájl. A news.htm fájlban a "seitenanfang" horgony lett definiálva. Ennek való hivatkozásnál a célfájl neve (news.htm) után egy keresztcímke van jelenítve. Ezt követi újra a horgonynév.
<a href="news.htm#seitenanfang">Az oldal tetejére</a>
Ilyen egyszerűen tehettek hivatkozást horgonynévre bármelyik fájlban.
