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