Elôzô fejezet | Tartalom | Következô fejezet

Linkek

Amit eddig tettünk, az alig különbözik egy bármilyen kiadványszerkesztô programmal elôállítható laptól -- sôt igazából azokhoz képest elég szerények a lehetôségek. Van azonban valami, amitôl egy HTML lap életre kel: ezek a kapcsolatok, vagy angol szakszóval a linkek. Lapunkon bárhol elhelyezhetünk linkeket egy-egy szóhoz, mondathoz, akár szövegrészhez vagy képhez kapcsolva, s aki erre rákattint, máris új oldalt kap. Vége a lexikonok "lásd még" utalói után folytatott lapozgatásnak és a szószedet szerinti keresgélésnek, a "lineáris" olvasásnak -- csak egy kattintás az egész. Ez a hipertext.

Persze ezeknek a linkeknek valaminô értelemmel kell bírniuk.

Technikai oldalról a link nem más, mint egy cím, a kapcsolódó anyag (mert az nemcsak egy másik HTML lap lehet) URL-je, azaz hálózati "lelôhelye".

Az URL felépítése

A legegyszerűbb, ha rögtön egy példával kezdjük: 
http://www.honlapiskola.hu:8080/~jakab/cdlista.html#koncz

Protokol

A kettôspontig bezárólag tudatjuk, hogy az általunk elérni kívánt anyagot milyen kommunikációs eljárással lehet elérni.

Host

A hostokat már említettük, itt lakik az egyik hoston a mi lapunk is. Kétféle megadási mód van: név vagy IP szám szerinti.

Név szerint pl. a már ismert www.honlapiskola.hu.

IP szám szerint pl. a 193.6.1.39.

Ez utóbbit kerüljük. Csak akkor szükséges, ha a host-nak nincs bejegyzett neve (gyakori kis vagy frissen telepített gépeknél, tehát rákényszerülhetünk).

Port

Általában elhagyható. Ritkán, de elôfordul, hogy a böngészônk magától nem tudja megállapítani, melyik "ajtón" kell belépnie a távoli gépbe. Ekkor a hostnevet (vagy az IP számot) egy kettôsponttal és egy számmal egészítjük ki. Nehéz kideríteni, ha vaktában kell próbálkoznunk (ami elég reménytelen), akkor ezeket a számokat érdemes elôször megpróbálni: 8000, 8080. A szabványos szám ugyanis a 80-as, de új szervereknél megesik, hogy tesztelés vagy más ok miatt nem ezt használják.

Elérési út és állománynév

Kezdjük azzal, hogy ha ide semmit nem adunk meg, akkor a megcímzett gép legfôbb lapjának kell(ene) megjelennie, amely általában az üzemeltetô honlapja. "Társbérlôk" egy / után megadott néven érhetôk el, ha vannak. A felhasználók viszont a ~ jel után a user nevük alapján, azaz Jakab kezdôlapja a ~jakab "útvonalon". Ha e mögé állománynevet nem illesztünk, akkor a megadott útvonal egy könyvtárra mutat (ez esetünkben Jakab public_html könyvtára) és abban az index.html állomány az, ami majd megjelenik. Ez az alapértelmezés. Ezért kellett pont ezt a könyvtárat és állománynevet megadnunk a "tanfolyam" elején.

Kínos, de az ellenség keze ide is betette a lábát. Bizonyos jó marketingpolitikával, ám annál (khmm) erôtlenebb operációs rendszerrel rendelkezô cégek ránk hagyományozták a 8+3 betűs állományneveket. Ekkor az index.html index.htm-mé válik, ami kavarodást okozhat. Ha barátunk lapját nem érjük el, esetleg próbáljuk meg az egyébként nem kötelezô index.html-t index.htm-ként beírni a cím végére! (Vagy esetleg az index.html-t, ha a szolgáltató éppen a 8+3-at tekintette alapértelmezésnek.) Van amikor segít...

Más lapok elérésénél már semmit nem takaríthatunk meg, a teljes utat és az állomány nevét is meg kell adnunk. A példában Jakab cdlista.html állományát címeztük meg.

Kiegészítôk

A # jel után egy HTML lapon belül egy adott részre hivatkozunk, ezt a lap írójának elôre ki kell jelölnie a megfelelô HTML jellel. Hosszú tematikus listáknál például jól jön. Jakab sokféle CD-t hallgat, de nekünk csak Koncz Zsuzsa kell. Tehát megy a végére az, hogy #koncz.

A ? után viszont paramétert ad át a böngészô. Ez már túlmutat azon, amivel mi foglalkozunk, de ha ilyet látunk valahol, érdemes figyelni és találgatni, hogyan is működik.

A link jelölése

Linkre nekünk is szükségünk lesz. Háromféle "távolságra" vethetjük ki a lasszót: távolra, helybe, vagy az oldalon belülre. A linket az <a href=valami> leíróval jelezzük és ezt zárni is kell a </a> jelzôvel.

Link távolra

A teljes URL címet meg kell adnunk: 
<a href="http://www.homepageschool.edu/~donald/cdlista.html">Donald CD-i</a>
Ezzel amerikai Donald barátunk listájára mutató linket helyeztünk el a lapunkban. A lapon a "Donald CD-i" felirat jelenik meg (olyan színben, amilyet a link= vagy a vlink= határoz meg -- alapesetben kéken). Az egeret odairányítva a nyílból kéz lesz, azaz kattinthatunk. Kattintás után érkezik meg Donald barátunk lapja.

Link helybe

Jakab a saját public_html könyvtárán belül az állományok neveivel (és az esetleges alkönyvtárnevekkel kiegészítve) hivatkozhat a saját lapjaira. 
<a href="cdlista.html">A saját CD-im</a>
Jakab a(z index.html) lapjában egy másik, cdlista.html nevű lapjára hivatkozott. Ezt írhatta volna így is: 
<a href="http://www.honlapiskola.hu/~jakab/cdlista.html>A saját CD-im</a>
Ez nemcsak hosszabb, de rugalmatlanabb is. Ha véletlenül költözik a lapunk egy másik hostra, akkor az ilyen címeket egyenként mind át kell írni! Jobb a rövid (ún. relatív) cím és kényelmesebb is!

Link dokumentumon belüli ugrásra

Egy hosszú dokumentumon belüli ugráláshoz elég csak a címkét megadni. 
<a href="#koncz">Koncz Zsuzsa CD-k</a>
Ehhez azonban ezeket a címkéket el kell helyezni. Erre az <a name=cimke> leíró szolgál, ezt is </a> zárja. 
<a name="koncz"></a>
Itt nem, de a linkeknél muszáj valamit a nyitójel és a záró jel közé tenni, mert különben nem lesz mit kattintani!

Link egyébként nem csak HTML lapra, hanem bármi másra is mutathat. A böngészô vagy meg tudja jeleníteni (.txt, .gif, .jpg), vagy át tudja adni valamilyen csatolt segédprogramnak (.mpg-t videolejátszónak, .au-t hanglejátszónak), amennyiben ilyet el tud érni, végsô esetben pedig felajánlja, hogy letölti nekünk a munkakönyvtárunkba, aztán azt csinálunk vele, amit akarunk.

Hova kerülhet link a lapon?

Linket bárhová rakhatunk. Egy szövegbe, egy szóhoz, egy kifejezéshez rendelve. 
<a href="magamrol.html">Jakab</a> vagyok, most tanulom a 
honlapkészítés rejtelmeit.
Jakab ebben a példában valószínűleg hosszabban értekezik önmagáról a magamrol.html lapon, de ezt csak akkor olvashatjuk el, ha a "Jakab" szóra kattintunk.

Akár egy egész bekezdést is elláthatunk linkkel, ha ennek van valami értelme (pl. egy cikkbôl idézünk röviden, de ezt inkább az idézet végére írt irodalmi hivatkozás pár szavára illesztjük).

Ha valamit listaszerűen oldunk meg, arra van némi plusz segítségünk. Jakab a CD-it így jelöli meg: 

Jakab fantasztikus otthoni CD gyűjteménye:
<ul>
<li><a href="#cseh">Cseh Tamás</a>
<li><a href="#koncz">Koncz Zsuzsa</a>
<li><a href="#pici">Presser Gábor</a>
<li><a href="#zoran">Sztevanovity Zorán</a>
</ul>
A tételek egymás alatt lesznek, kicsit beljebb, mint a lap széle és egy kis tömör ponttal kezdôdnek majd. A bekezdést az <ul>, a pontokat (és az új tétel miatt az új sort) a <li> jelzi. Pontozott lista helyett számozottat is kérhetünk az <ol> leíróval.

Linket tehetünk képre is. Mondjuk feltettük a lapunkra ôsi és veretes családi címerünket JPEG képként, s azt szeretnénk, hogy az eredeti kutyabôr teljes szövegét elolvashassa az, aki rákattint a címerre. Nézzük: 

<a href="kutyabor.html"><img src="cimer.jpg" alt="cimer"></a>
A képre kattintva máris jön a kutyabor.html lapunk...

Érdekes és viszonylag új lehetôség képen belül bizonyos területek kijelölése. Azt szeretnénk például, hogy kedvenc üdülôfalunk, Baltásasszonyfa térképét feltéve a nevezetesebb intézményekrôl (horgásztanya, kocsma) rövid leírást adhatnánk. Kicsit bonyolult, de nem veszélyes.

Elôször is kell egy baltásasszonyfai térkép mondjuk GIF-ben, ennek mérete pl. 320x200 pixel (nem nagy falu, tömegben nem lehet pihenni!): 

<img usemap="#helyek" src="basszonyfa.gif" alt="B.asszonyfa City">
Ebben az új a usemap= jelzés volt. Ez is lehet más lapra, sôt távoli lapra való hivatkozás is, de célszerűbb rögtön helyben elintézni a feldolgozást: 
<map name="helyek">

<area shape="rect" coords="110, 90,130,110" href="horgasztanya.html">
<area shape="rect" coords="190, 20,210, 40" href="kocsma.html">
<area shape="rect" coords="  0,  0,319,199" nohref>

</map>
A shape= megjelöli, hogy milyen alakzatot használunk, de egyelôre ez csak a téglalap (rect) lehet, ennek bal felsô és jobb alsó koordinátáit adjuk meg pixelben. Ezek után a képen ide kattintva a href= után megadott lap hívódik meg, akár egy linkrôl. A nohref sor elhagyható.

Okos dolog, de ne felejtsük el, hogy aki kép nélkül hívja le ezt az oldalt, az nem tudja használni ezt a lehetôséget! Nyakra-fôre ne éljünk vele, ha pedig mégis kell, akkor találjunk ki valamit szegény karakteres felhasználóknak is -- mondjuk egy sima kis listát a kép alá, ugyanezekkel a lapokkal.

A végére egy kis fekete leves:

Gondok a linkekkel

Sok link, sok gond. Az Internet állandóan átalakul, a szolgáltatások költöznek és megszűnnek, vagy csak átmenetileg bezárnak, s újabbak nyílnak. Aki tehát nagy nekibuzdulással ezer linket szedett össze az oldalára, az nagy munkát szakasztott a saját nyakába: ha nem akar leégni a vakvilágba mutató elavult linkjeivel, azt folyamatosan ellenôriznie és frissítenie kell! Ez pedig sok idôt igényel. Szóval mértékletesség! Tényleg csak oda tegyünk távoli linket, ahova feltétlenül szükséges és idônként ellenôrizzük! Az elsô "not found" még nem jelenti azt, hogy nincs többé a címzett lap, dugulások elôfordulnak. Próbálkozzunk máskor! Egy hete elérhetetlen lap azonban már gyanús, kezdjük el keresni az új címét (ha van még egyáltalán)!
Elôzô fejezet | Tartalom | Következô fejezet