H I V A T K O Z Á S O K !
1. Mire jó a hivatkozás, azaz navigálás:
Gyors mozgást tesz lehetővé:
- Webhelyünkön bellüli html - lapok, azaz weblapok között
- Hosszű dokumentációt tartalmazó html - lapon, alcímek és szövegrészek között.
- Webhelyünkön kívüli weblapokra
- Olyan adatokra, melyek nem html - lapon találhatók
Néhány példa olyan adatra, melyek nem html - lapon található.
- Elektronikus levélre történő hivatkozás.
- PDF fájlokra való hivatkozás
- Hang és zenei, fájlokra történő hivatkozás
Ha interneten megnyitunk egy weblapot a böngészőben, legtöbb weblapon találhatunk hivatkozásokat, melyre kattintva újabb weblap fog megnyílni.
Ez a hivatkozás XHTML lapon, az <a> címkével jelölt sorban található.
A link címke <link> is hivatkozás, de nem azonos az <a> címkével.
A link címkét nevezzük webhelyünkön belüli hivatkozásnak, és arra használjuk, azaz egyetlen feladata, hogy az XHTML lapunkat összekapcsolja az általunk készített CSS- azaz stíluslappal.
2. Horgony
Az <a> címkét nevezzük horgonynak.
Arra használjuk, hogy a webhelyünkön belül másik weblapunkra, hosszú dokumentumok meghatározot alcímére, vagy kívül álló weblapra ugorhassunk.
Az <a> címke lehetővé teszi:
- egy weblapon belül, az általunk kijelölt helyekre (pontokra, azaz horgonyokra) történő ugrást.
- Webhelyünkön belül másik weblapunkra történő ugrást.
- Webhelyünkön kívüli egy teljesen más weblapra történő ugrást.
Példa:
Az Y-ok helyére azon weblapunk, azaz html kiterjesztésű fájl nevét kell beírni, ahová egy kattintással szeretnénk eljutni.
Ha weblapunkon kívüli másik weblapra akarunk eljutni, akkor a teljes elérési útvonalat ide kell beírni.
<a href="YYYYYYY.html"> Kattints ide </a>
Ebből a parancssorból, a weblapunkat nézők csak a " Kattints ide " szöveget fogják a monitorukon látni, és ha rákattintnak, megnyílik előttük az általunk megadott weblapunk (XHTML lapunk)
A kattints ide elnevezést, jobb, ha valamilyen egyértelmű szóval, helyettesítjük, azaz a html - lapunk tartalmára utaló szöveggel.
3. Hivatkozások elválasztása.
Ha több hivatkozásunk is van és azok egymás mellett helyezkednek el, akkor azokat egymástól értelemszerűen el kell választani. Erre használjuk a függőleges vonalat.
Az XHTML - lapon, így kell megírni.
<p><a href="pince.html">Pince</a> | <a href="kamra.html">Kamra</a> |
<a href="kert.html">Kert</a> | <a href="udvar.html">Udvar </a> </p>
A monitoron, így fog megjelenni.
Ezek a példák bemutatónak készültek, ha rájuk kattintunk, nem visznek sehová, legfeljebb ezen lap tetejére.
A függőleges vonal nem érhet egyik szöveghez sem, vagyis szóközt kell hagyni
Billentyűzetről, alt billentyű lenyomása mellett, írjuk be a 0124 számsort.
Trükk:
Az ilyen, nem visznek sehová hivatkozásokat, felhasználhatod a több témával is foglalkozó dokumentumoknál. Például a lap aljáról, vagy a szövegrészekből, gyorsan visszajutni a lap tetejére.
A nem visznek sehová meghatározást, XHTML - lapon így kell megírni.
A kérdőjelek nem kellenek, és az Y helyére, tetszés szerinti elnevezést írhatunk.
<a href="#">YYYY YYYY YYYYY</a>
Egy adott dokumentumunkon belüli hivatkozások elkészítését, lejjebb a 6. témakörnél láthatjuk. ------------------------------------------------------------------------------------------------
4. Relatív hivatkozások.
Mindenhez, ami a webhelyünk fő mappáján belül van, bármihez készíthetünk.
Ha több hivatkozást írunk egymás mellé, akkor ezeket függőleges vonallal kell elválasztani egymástól, úgy hogy a függőleges vonal mindkét oldalánál szóközt kell alkalmazni.
A függőleges vonal beírása: Alt billentyűt lenyomva tartani, és beírni a 0124 számsort.
Példa, egy adott html - lap felső részén megadott hivatkozásokra, azaz navigációkra:
Az XHTML - lapunkon így kell beírni.
<p> Témakörök = <a href="index.html"> kezdőlap </a> | <a href="kamra.html"> Kamra </a> | <a href="pince.html"> Pince </a> | <a href="udvar.html"> Udvar </a> </p>
A weblapot nézők előtt, a monitoron csak ez látszik.
Témakörök = Kezdőlap | Kamra | Pince | Udvar
A kezdőlap elnevezés, arra a weblapunkra mutat, mely a böngészők számára a weblapunk megjelenésekor, első látásra a szemük előtt jelenik meg.( index.html - lapunk )
Ezt a parancssort, mindegyik XHTML lapunkon helyezzük el. Így ezekről, a helyekről, könnyen visszatérhetünk, (visszatérhetnek) a kezdőlapra, vagy bármelyik másik weblapunkra (XHTML lapunkra).
5. Szövegen belüli hivatkozás
Szövegen belül megadott, másik weblapunkra, azaz html - lapunkra történő hivatkozás létrehozása.
Hivatkozást, azaz horgonyt megadhatunk a szövegünkön belül is, azaz nem szükséges minden hivatkozást külön sorban feltüntetni.
Példa:
Dokumentumunk egyik mondata a következőket tartalmazza: Nézzük meg, mi van a kezdőlap területén, majd leltározzunk a pince polcain.
Előzőleg a kezdőlapról és a pincéről, már készítettünk különálló XHTML - lapot (weblapot), és ugyanazon mappába mentettük el mindkét fájlt.
Nézzük meg, mi van a <a href="index.html"> kezdőlap </a> területén, majd leltározzunk a <a href="pince.html"> pince </a> polcain.
A weblapunkat olvasók számára, a szöveg úgy jelenik meg, mint a példa első sorában. ( kék színnel kiemelve látható )
A különbség az, hogyha az egérrel akár a kezdőlap, akár a pince szó fölé állnak, akkor megjelenik egy mutató kézfej.
Ha rákattintnak például a kezdőlap szóra, megnyílik előttük az a weblapunk, mely a kezdőlap dokumentációját tartalmazza.
Megjegyzés:
A kezdőlaphoz, index.html - lapra hivatkoztunk.
Ennek oka, hogy minden webhely kezdőlapja index.html
További weblapjainknak, azaz html - fájloknak tetszés szerinti elnevezést adhatunk. (Ékezetes betűket ne használjunk.)
6. Egy adott XHTML - lapon belüli hivatkozás
Egy adott weblapon belüli hivatkozást, azaz navigálást akkor hozunk létre:
- Ha a dokumentumunk nagyon sok anyagot tartalmaz
- Ha a dokumentumunkban különböző témakörökkel foglalkozunk
A hosszú, vagy változatos témakörrel foglalkozó weblapok áttekintése, illetve egyes témakörök megkeresése elég nehézkes és fárasztó.
Ezért, tartalom vagy témakörjegyzéket készítünk, és ezekre kattintva gyorsan kikereshető a keresett témakör.
A weblapon belüli gyors navigáláshoz, kettő meghatározást, azaz hivatkozást kell készítenünk.
Első:
A tartalomjegyzékben kiválasztott témakör, egy kattintásra megjelenjen előttünk.
Második:
Ha a témakört elolvastuk, gyorsan visszajussunk a tartalomjegyzékhez, azaz a weblapunk elejére.
Amikor a tartalomjegyzékben, elkészítjük a hivatkozásra vonatkozó meghatározást, két lehetőségünk van.
- A teljes mondatra készítjük a meghatározást
- Sorszámozzuk a tartalomjegyzék szövegeit Pl.: Téma 1; Téma 2; stb. vagy Tipp 1; Tipp 2; stb. és ezekre hozzuk létre a hivatkozást.
------------------------------------------------------------------------------------------
Most a tartalomjegyzék szövegére hozunk létre, hivatkozási meghatározást.
Ha azt szeretnénk, hogy a harmadik, azaz a hivatkozások elválasztása témakörre, gyorsan eljussunk.
XHTML - lapunkon, így kell megadni.
<p> <a href="#3"> Hivatkozások elválasztása </a> </p>
A Weblapot néző előtt a monitoron ez jelenik meg: Hivatkozások elválasztása
Ha a fenti szövegre kattintnak, megjelenik előttük a hivatkozások elválasztása témakör.
-------------------------------------------------------------------------------------------
Ha a tartalomjegyzék szövegét sorszámozzuk, létrehozhatunk csak a sorszámozásra hivatkozási meghatározást.
De a sorszám után írjuk be, hogy mi a témakör.
XHTML - lapunkon, így kell megadni.
<p> <a href="#3">Téma 3</a> Hivatkozások elválasztása</p>
A Weblapot néző előtt a monitoron ez jelenik meg:
Téma 3 Hivatkozások elválasztása
Ebben az esetben, a téma 3 - ra kattintva jutunk el, a hivatkozások elválasztása témakör leírásához, a további szövegrész csak tájékoztatási szerepet tölt be.
------------------------------------------------------------------------------------------
Mindkét megoldásnál, el kell helyezni a dokumentumunk belsejében azon meghatározást, mely hatására ténylegesen a kiválasztott témakör jelenik meg.
Ezt a meghatározást, közvetlen a dokumentumunkban a témakör címszó előtt kell elhelyezni.
XHTML - lapunkon, így kell megadni.
<a name="3" id="3"> </a>
<h2> 3. Hivatkozások elválasztása.</h2>
---------------------------------------------------------------------------------------
Vissza a lap elejére, azaz a tetejére.
Ha azt szeretnénk, hogy bármelyik témakörből, egy kattintással visszajussunk a lap tetejére, a tartalomjegyzékhez, vagy netalán a dokumentumunk egy adott témaköréhez.
További két meghatározást kell beírnunk.
Meg kell határoznunk, hogy hova is jussunk vissza: a címszóhoz, a tartalomjegyzékhez, vagy netalán a dokumentumunk egy adott témaköréhez.
Ha kiválasztottuk a megfelelő helyet, oda kell beírnunk a következő meghatározást.
<a name="vissza"> </a>
Hogy egy kattintással visszajussunk, a következő meghatározást, a témakör végén, és a szövegünk megfelelő részébe kell beírni. Szövegen belüli elhelyezéskor, nem kell a kezdő és záró P címke.
<p> <a href="#vissza"> Vissza a lap elejére </a> </p>
A Weblapot néző előtt a monitoron ez jelenik meg: Vissza a lap elejére
7. A két pont ( . . ) és a pervonal ( / )
Mit is jelent a két pont és a per vonal.
Mappák és különböző témakörökkel foglalkozó fájlok között, e két jel segítségével adhatjuk meg az elérési útvonalat.
A kettő pontot: Ha egy adott mappából ki kell lépni.
A pervonal: Az utasításokat egymástól elválasztja.
Például van három mappánk: egyes, kettes és hármas
Ezek egymásba ágyazódnak, azaz az egyesben helyezkedik el a kettes, a kettesben helyezkedik el a hármas, és mindegyik tartalmaz html fájlokat.
Elérési útvonal megadása:
1. Az egyes mappában több html fájlt is elhelyeztünk, (index.html, matek.html, zene.html, stb.) és ezek között szeretnénk navigálni, akkor az elérési útvonalnál nem kell alkalmazni, ezen jeleket, csak meg kell adni, hogy melyik fájlt akarjuk megnyitni.
<a href="zene.html"> Zene </a>
A monitort nézők előtt, csak a Zene szó jelenik meg. Erre a Zene szóra kattintva, megnyílik előttünk a zene.html fájlunk és annak tartalma.
2. Az egyes mappából, hogyan jutunk el a hármas mappában lévő udvar.html fájlhoz.
<a href="kettes/hármas/udvar.html"> Udvar </a>
3. Most nézzük, hogyan jutunk vissza az egyes mappában lévő index.html fájlhoz
Vissza kell lépni a kettes, majd az egyes mappába, és ezt követően kell megadni, hogy melyik html fájlt nyissuk meg.
<a href="../../index.html"> Kezdő weblap </a>
8. Abszolút hivatkozást használunk:
Mindenhez, ami a webhelyünk fő mappáján kívül van, azaz egy kívül álló fájlra mutat.
Ez a hivatkozás megadja egy fájl teljes URL címét, ezt nevezzük elérési útnak.
Tartalmaznia kell :
- kiszolgáló nevét
- mappa nevét
- és azon belül a fájl nevét.
( ha a fájl, nem mappán belül helyezkedik el, hanem csak önálló fájlként szerepel, akkor elég a fájl neve is.)
Például:
Az XHTML lapon, következőképpen írjuk.
<p> Külső Linkek: <a href="http://www.Google.Com/"> Google </a> | <a href="http://www.altavista.Com/"> Alta Vista </a> </p>
A weblapon, ez lesz látható:
Külső Linkek: Google | Alta Vista
Az abszolút hivatkozással, bővebben itt nem foglalkozunk. Akit ez érdekel, az különböző szakkönyvekből tájékozódhat.
Ha eljutunk oda, hogy saját weblapot készítünk, nyílván való és érdekünk, hogy mindenki a mi munkánkkal és az ott lévő tartalommal foglalkozzon.
Nem pedig az, hogy olyan weblapunk legyen, melyről rögtön tovább ugranak, más személy által, vagy cég által készített weblapra.
Erre ott vannak a jól ismert kereső programok (webhelyek), mint például a Google, stb.
9. Képváltós hivatkozások.
Ha weblapunkon olyan képet helyeztünk el, melyre kattintva, egy másik html - lapra jutunk.
Megváltoztathatjuk a képet, arra az esetre, ha az egérrel az eredeti kép fölé állunk, akkor egy másik kép jelenjen meg az eredeti helyén.
Ehhez kettő képet kell készíteni, mely lehet fotó vagy rajz, de JPG, vagy GIF kiterjesztéssel kell elmenteni.
Az a kép mely mindig látszik, elnevezése legyen, állandó.jpg
Az a kép mely csak akkor jelenik meg, mikor az eredeti fölé állunk az egérrel, elnevezése legyen, másodlagos.jpg
Az állandó és másodlagos nevek helyett, tetszés szerinti nevet írhatsz, egyre figyelj, ékezetet ne használj, és lehetőleg kisbetűvel írjad.
Megjegyzés.
Itt is hasznos, ha a képek mentésekor, a kép nevéhez megadod a kép szélességét és magasságát.
Például: elsodleges350x100.jpg --- masodlagos350x100.jpg
Ez nagyon jó emlékeztető arra, hogy mekkora képet is készítettünk erre a célra, ugyanis az utasításokban meg kell adni a kép méreteit.
Vízszintesen width, függőlegesen height meghatározások után kell beírni a méreteket.
CSS, azaz stíluslapon így kell megírni a meghatározást.
A stíluslapon az ( a ) nem más, mint a horgony, azaz a hivatkozás megjelenését az ( a ) után megadott meghatározással formázhatjuk.
Példa, az elsődleges kép meghatározásához. A hogony ( a ):
a {background: url(elsodleges350x100.jpg) no-repeat center center; display: block; width: 350px; height: 100px; padding: 5px; border: 3px solid red;}
Példa a másodlagos kép meghatározásához. A horgony ( a:hover ):
a:hover{ background: url(masodlagos350x100.jpg) no-repeat center center; }
A másodlagosnak adhatunk kisebb méretet is, de ez, nem mindig jó, probáld ki.
Megjegyzés.
Css, azaz a stíluslapon a horgony ( a ), önmagában csak akkor szerepelhet, ha az XHTML - lapunkon, minden megjelenésekor, ugyan azt a hivatkozási funkciót tölti be.
Abban az esetben, ha minden megjelenésekor, más és más hivatkozási funkciót tölt be, akkor külön div szakaszban kell elhelyezni, vagy külön - külön class osztálynévvel kell ellátni.
Ha a horgony ( a ), más div szakaszokban is el van helyezve, akkor a horgony ( a ) előtt meg kell adni a div szakasz nevét. Legyen ez id jellemzőhöz, vagy class osztályazonosítóhoz rendelve.
Legyen ez a név, a navigáció szó rövidítése, azaz nav:
<div id="nav"> vagy <div class="nav">
Ezzel az id, vagy class névvel tudatjuk a böngészővel, hogy ezt a hivatkozást kell képváltósra elkészíteni.
Például:
Stíluslapon: Az id jellemző esetén kettős kereszt és név, a class osztlyazonosító esetén pont és név.
A nav szót, azaz elnevezést, a horgony ( a ) elé kell beírni.
#nav a {background: url(elsodleges350x100.jpg) no-repeat center center;}
#nav a:hover{ background: url(masodlagos350x100.jpg) no-repeat center center; }
-----------------------------------------------------------------------------------
.nav a {background: url(elsodleges350x100.jpg) no-repeat center center;}
.nav a:hover{ background: url(masodlagos350x100.jpg) no-repeat center center;}
10. Link változatai, ha aktiváljuk az egérrel
Hivatkozások aktiválásának négy variánsa van.
A hivatkozásaink megjelenési formáját, tetszés szerint meghatározhatjuk a hozzájuk megírt stílus meghatározásokkal. Első példa, alapértelmezett megjelenés: 1. Vissza a lap elejére! Ide kattintva, ezen oldal elejére jutunk. Második példa, az alapértelmezett megjelenést, mi határozzuk meg. Harmadik példa, eltüntetjük az alsó vonalat További példákEgér a hivatkozás felett. ( a:hover{......} ) Egér a hivatkozás felett, és a billentyűje lenyomva. ( a:active{......} ) Kattintás utáni állapot ( a:visited{......} )
Stílus meghatározása: A következő linkre, mind a négy aktiváló meghatározás érvényes. Alapmegjelenés (Szöveg gesztenyebarna, aláhúzás nincs.)
Ajánlott, de nem kötelező:
|