A hivatkozások

 

 

Ebben a fejezetben a hivatkozásokkal: linkekkel és könyvjelzőkkel ismerkedünk meg.
Az úgynevezett "hiperhivatkozások", köznapi nevükön linkek a web alapvető részei. Segítségükkel lehet a világhálón található különböző dokumentumok között ugrálni.

Ennek az oldalnak a témái:


A hivatkozások

Lássunk mindjárt egy példát: Ha ide klikkelsz, a tartalomhoz érkezel.

Ennek a sornak így néz ki a kódja:
<a href="fej0.html">Ha ide klikkelsz,</a> a tartalomhoz érkezel.

Itt láthatjuk a hivatkozások forráskódjának alapesetét. Azt már tudjuk, hogy egy HTML parancsot két taggal jelzünk a böngészőnek. Ez esetben a nyitó rész tartalmazza a parancsot (a href=), tulajdonságként pedig megadjuk a helynek a címét, ahova a link mutasson (fej0.html). Ez a parancs a közbezárt részre vonatkozik.
Az elérendő fájlt mindig az elérési úttal együtt kell megadni.
Az elérési utat meg lehet abszolút hivatkozásként adni, így:
http://www.extra.hu/twm/main/tanf/html1/fej0.html
Itt a http:// az internetprotokoll fajtáját jelzi, ez esetben weblapról van szó, a www.extra.hu a webszerver címét, továbbiakban a DOS-nál megszokott módszerrel adjuk meg a fájlunk helyét és kiterjesztését a szerveren. Ha így írjuk a linkjeinket, azonos könyvtárban lévő másik fájlhoz is meg kell adni a teljes elérési utat. Ennek a módszernek előnye, hogy ha weblapunkat kiemelik a környezetéből, pl. letöltik vagy email mellékletként elküldik, a benne szereplő hivatkozások a böngésző számára értelmezhetők maradnak.

Meg lehet adni a linkcímet relatív hivatkozásként is. Ekkor a hivatkozó oldaltól kiindulva kell az elérési utat megadni a DOS szabályai szerint. Lássunk erre is egy példát:
Így néz ki példakönyvtárunk:

           főkönyvtár
            |      |
            |      |
   könyvtáram1   könyvtáram2
       |    |      |     |
       |    |      |   3oldal.html
       |    |      |
       |    |    4oldal.html
       |    |
       |   2oldal.html
       |
      1oldal.html

ez esetben az első oldalról a második oldal így érhető el: <A HREF="2oldal.html"> link </A>
Az elsőről a harmadik oldal így érhető el: <A HREF="../konyvtar2/3oldal.html"> link </A>

Ezek ugyan a webszerveren található könyvtárak, de mivel a kiinduló lap már be van töltve a böngészőbe, ismerve annak a teljes címét a böngésző ezt a rövid linket ki tudja egészíteni teljes internetcímmé a webre küldött kérésében.

Linket természetesen nem csak szövegre lehet írni, hanem képre is. Lássunk erre is egy példát:

<A HREF="fej0.html"> <IMG src="egy-kep.jpg" width=70 height=70> </A>

Ez így néz ki:

ez egy kép

Vegyünk észre még egy fontos dolgot: a böngészők a linkeket kiemelik a környezetükből. A szöveges linkek alapértelmezett esetben aláhúzva, a képek kerettel jelennek meg. A színük is eltérő: az új linkek kék színnel jelennek meg, a már meglátogatottak lilával. További jelzés a látogatónak, hogy az egérmutató képe a linkre tolva megváltozik. Ezek az alapértelmezett színek a szövegtest jellemzőinél vagy stílusparanccsal megváltoztathatók. (Ezen az oldalon is stílusparanccsal változtattuk meg a linkek színét.)

Ha azt akarom, hogy az új oldal ne ebben a böngészőablakban nyíljon meg, egy új jellemzőt kell az eddigiekhez hozzáírni: a TARGET paramétert. Lássuk ezt is egy példával:

Ha erre a linkre klikkelsz, webhelyünk új ablakban fog megnyílni.

Ha erre a <A HREF="http://mitglied.lycos.de/thomaswebmuhely/" TARGET="_blank"> linkre </A> klikkelsz, webhelyünk új ablakban fog megnyílni.

A TARGET paraméter határozza meg, melyik ablakban nyíljon meg az új dokumentum. Ha keretes ablakban van, a meghívott dokumentum keretének a nevét kell megadni, illetve vannak előre meghatározott értékek:

  • _blank új ablakban nyíljon meg,
  • _top a keretek fölött, teljes ablakban nyíljon meg,
  • _self saját ablakában nyíljon meg,
  • _parent a keret főablakában (szülőablak) nyíljon meg.

A TARGET tulajdonságairól részletesebben a kereteknél, vagy a tag leírásoknál olvashatsz.


Eddig az oldalak betöltésével foglalkoztunk. A hiperhivatkozások azonban a http internet protokollon kívül más adatátviteli protokollokat is tudnak kezelni. Gyakrabban az elektronikus levelezéssel - email -, esetleg a fájl átviteli protokollal szoktunk találkozni. Itt az email linkekről beszélünk még.

fel...

email linkek

Ha ezt írjuk:

<A HREF="mailto:email_címem@domainom.hu"> küldj levelet </A> azaz küldj levelet,

a böngésző megnyitja az alpértelmezett levelezőprogramját, egy megcímzett üres email ablakot ajánl fel levélírásra. Itt a mailto: a kulcsszó, ezt kel a http:// helyett beírni.

Lehetőségünk van a megnyíló email ablakban további adatokat is előre meghatározni: a levél tárgysorát, esetleg a szövegrészét, illetve címzésként beírhatunk több email címet is (a felhasználó ezeket az adatokat persze megváloztathatja). Ekkor a levél minden beírt címre el lesz küldve. Erre hasznos ötleteket találsz itt.

fel...

A könyvjelzők

Eddig csak arról volt szó, hogyan tudunk teljes lapokat meghívni. Azonban meg lehet hívni egy lapon szereplő adott részt, pl. egy fejezetet is. Erre a HTML-ben a  #  karakter használatos.

Először is egy könyvjelzőt kell elhelyezni azon a dokumentumrészen, ahova ugrania kell a linknek. ez a rész lehet szövegrész vagy kép is. A könyvjelző így néz ki:

<A NAME="elso_resz"> első fejezet </A>

Látjuk, hogy itt A HREF helyett A NAME a parancs szövege. Ez a megjelölés a dokumentumban semmi látható változást nem okoz.

Másodszor meg kell írni a hivatkozást, ahonnan tovább fogok lépni. Ha azonos lapon van a hivatkozás és a könyvjelző is (mint ennek a lapnak a tetején található tartalomlista), Így írjuk:

<A HREF="#elso_resz"> innen indul </A>

Ebből ennyit látsz a lapon: innen indul

Ha másik lap adott részére akarok érkezni, a linkek készítésének már megismert módját egészítjük ki így:

<A HREF="2oldal.html#elso_resz"> ez pedig innen </A>

Ebből ennyit látsz a lapon: ez pedig innen

Ezek a sorok a többi linkhez hasonlóan fognak kinézni.
Van néhány kivételes lehetőség, amikor nem szükséges az A NAME elemet megadni. A lap tetejére fog ugrani például erre a linkre:

<A HREF="#top">fel...</A>
Ezt akár ki is próbálhatod: fel...

A hivatkozásokról bővebben itt olvashatsz...

fel...

 



fel...
előző: a szövegformázásról...
következő: képek beillesztése...
tartalom...


ThomasWebMűhely
(c)Katona Tibor
2001-2002