2. modul · HTML alapok · 6. lecke
A link teszi a webet webbé — enélkül csak különálló lapok lennének. Ez a lecke viszont nem a linkről szól elsősorban, hanem az útvonalról: hogyan mondod meg a böngészőnek, hol keresse a másik fájlt. Ez a tananyag eddigi legfontosabb gyakorlati része.
/ és a ../ segítségével.
A link elemének neve egyetlen betű: <a> — az
anchor (horgony) szóból. Egyetlen attribútuma kötelező: a href,
ami a hypertext reference rövidítése, és azt mondja meg, hova mutat a link.
href a cél, a tartalom pedig a kattintható felület.<p> Nézd meg a <a href="https://hu.wikipedia.org">Wikipédiát</a>, ha többet szeretnél tudni. </p>
<a> soron belüli elem, nem tör új sort.
Nemcsak szöveget: képet, egy egész kártyát, listaelemet is. Amit az
<a> közrefog, az lesz a kattintható felület. Egyetlen tilalom van:
linket nem tehetsz linkbe.
A linkszöveg nem mindegy. Sok felhasználó — és minden képernyőolvasó-program — képes kilistázni egy oldal összes linkjét, a környező szöveg nélkül. Ilyenkor derül ki, hogy a linkszöveg beszédes-e.
<a href="arak.html">Kattints ide</a> <a href="doc.pdf">itt</a> <a href="rolam.html">bővebben</a> <a href="x.html">https://x.hu/o/2</a>
<a href="arak.html">Áraink</a> <a href="doc.pdf">Letölthető útmutató</a> <a href="rolam.html">Rólam bővebben</a> <a href="x.html">A projekt leírása</a>
| Szabály | Miért? |
|---|---|
| A linkszöveg írja le a célt | „Kattints ide" a listából kiragadva semmit nem mond. „Áraink" mindent. |
| Ne legyen nyers URL | A https://x.hu/oldal/2?id=7 felolvasva rémálom, és olvasni is nehéz. |
| Legyen elég hosszú | Egy-két betűs link nehezen eltalálható, főleg érintőképernyőn. |
| Ne ismétlődjön más céllal | Öt „bővebben" link öt különböző oldalra: megkülönbözthetetlen. |
Olvasd fel hangosan csak a linkek szövegét, a mondat többi része nélkül. Ha így is tudod, hova vezetnek, jó a linkszöveged.
Az abszolút útvonal a teljes webcím, a protokolltól kezdve. Akkor használod, ha másik weboldalra mutatsz.
<a href="https://hu.wikipedia.org/wiki/HTML">HTML a Wikipédián</a>
Ez a leggyakoribb link-hiba. Ha ezt írod:
<a href="www.google.hu">Google</a>
akkor a böngésző nem külső címként érti, hanem fájlnévként: egy
www.google.hu nevű fájlt fog keresni a saját mappádban. Nem találja,
és hibát kapsz.
Helyesen: href="https://www.google.hu"
A saját oldalaid között ne abszolút úttal linkelj. Ha
https://sajatoldalam.hu/rolam.html-t írsz, az azonnal eltörik, amint
a mappát átmásolod máshova, vagy másik gépen nyitod meg. Ilyenkor relatív útvonal
kell — jön a következő pontban.
A relatív útvonal nem a világ elejétől indul, hanem attól a fájltól, amiben éppen vagy.
„Onnan indulva, ahol most vagyok, hogyan jutok el a célfájlhoz?" Nem az számít, hol van a fájl a merevlemezen — az számít, hol van hozzád képest.
weboldal/ ├── index.html ← most itt vagyunk ├── rolam.html └── kapcsolat.html
Az index.html-ből a másik kettőre így hivatkozol:
<a href="rolam.html">Rólam</a> <a href="kapcsolat.html">Kapcsolat</a>
Ennyi — se protokoll, se mappanév, se perjel. Csak a fájlnév, mert ugyanott van.
Látni fogsz ilyet is: href="./rolam.html". A
./ azt jelenti: „ebben a mappában". Ugyanazt jelenti, mintha nem írnád
oda — elhagyható. Mi nem fogjuk kiírni.
Most jön a nehezebb rész. Ha a célfájl másik mappában van, meg kell mondanod az utat odáig. Két irány van:
| Jelölés | Mit jelent? |
|---|---|
mappanev/ | Lefelé: lépj be ebbe az almappába |
../ | Felfelé: lépj ki a szülőmappába |
A továbbiakban végig ezzel dolgozunk:
weboldal/
├── index.html
├── kepek/
│ ├── profil.jpg
│ └── hatter.jpg
└── oldalak/
├── rolam.html
├── kapcsolat.html
└── projektek/
└── elso.html
Az index.html-ben vagyunk. El akarunk jutni a rolam.html-hez:
<a href="oldalak/rolam.html">Rólam</a>
Olvasd így: „lépj be az oldalak mappába, ott van a
rolam.html". Két szint lefelé ugyanígy:
<a href="oldalak/projektek/elso.html">Első projekt</a>
Most fordítva: a rolam.html-ben vagyunk (az
oldalak mappában), és vissza akarunk jutni a kezdőlapra:
<a href="../index.html">Kezdőlap</a>
A ../ azt jelenti: „lépj ki egy szinttel". Innen már látszik az
index.html.
A rolam.html-ből a profil.jpg képhez
először ki kell lépni, aztán be a másik mappába:
<a href="../kepek/profil.jpg">A profilképem</a>
És a legmélyebbről, az elso.html-ből a kezdőlapra
két szintet kell felfelé lépni:
<a href="../../index.html">Kezdőlap</a>
| Innen… | …ide | Az útvonal |
|---|---|---|
index.html | oldalak/rolam.html | oldalak/rolam.html |
index.html | kepek/profil.jpg | kepek/profil.jpg |
index.html | …/projektek/elso.html | oldalak/projektek/elso.html |
oldalak/rolam.html | index.html | ../index.html |
oldalak/rolam.html | oldalak/kapcsolat.html | kapcsolat.html |
oldalak/rolam.html | kepek/profil.jpg | ../kepek/profil.jpg |
…/projektek/elso.html | index.html | ../../index.html |
…/projektek/elso.html | oldalak/rolam.html | ../rolam.html |
A ../../index.html hangosan: „ki egy szintet, ki még egy szintet,
ott az index.html". Ha ki tudod mondani, le is tudod írni. Kezdőként rajzold le a
mappaszerkezetet egy papírra, és mutass rá az ujjaddal az útra.
A Windows a \ jelet használja a mappák elválasztására
(C:\web\kepek), a web viszont mindig a
/ jelet. HTML-ben soha ne írj visszaperjelet.
A legtöbb webszerver megkülönbözteti a kis- és nagybetűt. A
Profil.JPG és a profil.jpg két különböző
fájl. Windowson a saját gépeden működni fog — a szerveren nem. Ezért írunk mindent kisbetűvel
(2. lecke).
Van egy harmadik forma is, ami perjellel kezdődik:
<a href="/oldalak/rolam.html">Rólam</a>
A kezdő / azt jelenti: „indulj a webhely gyökeréből",
vagyis a legfelső szintről — függetlenül attól, hol vagy éppen. Ez kényelmes nagy oldalaknál, mert
minden fájlból ugyanaz az útvonal működik.
Két okból is fejfájást okoz:
file:///),
a „gyökér" a merevlemezed gyökere lesz — vagyis a C:\. Az oldalad
összes linkje és képe eltörik.
Ebben a tananyagban végig relatív útvonalat használunk, kezdő perjel nélkül. De jó ha felismered, mert találkozni fogsz vele mások kódjában.
| Alak | Neve | Honnan indul? |
|---|---|---|
https://… | abszolút | A világhálóról — másik webhelyre |
oldalak/rolam.html | relatív | A mostani fájltól — ezt használjuk |
/oldalak/rolam.html | gyökértől relatív | A webhely gyökerétől — most kerüljük |
Hosszú oldalnál hasznos, ha a tetején lévő tartalomjegyzékből egy adott szakaszhoz lehet ugrani. (Pont úgy, ahogy ennek a leckének a tartalomjegyzéke működik.)
Két lépésből áll:
id attribútumot.id értékére hivatkozol
# jellel.<h2 id="tetejen">Tartalom</h2> <ul> <li><a href="#arak">Áraink</a></li> <li><a href="#kapcsolat">Kapcsolat</a></li> </ul> <h2 id="arak">Áraink</h2> <p>Az árlistánk itt olvasható.</p> <p><a href="#tetejen">Vissza a tetejére</a></p> <h2 id="kapcsolat">Kapcsolat</h2> <p>Hívj minket bizalommal.</p> <p><a href="#tetejen">Vissza a tetejére</a></p>
#arak rész.
id egy oldalon csak egyszer szerepelhet.id="arak", nem id="áraink listája".# nem része az id értékének: id="arak" → href="#arak".
A kettő kombinálható: előbb az útvonal, aztán a # és az azonosító.
<a href="oldalak/rolam.html#hobbik">A hobbijaim</a>
Ez megnyitja a rolam.html-t, és rögtön a
id="hobbik" elemhez görget.
Látni fogsz ilyen linket: <a href="#">. Ez „sehova" sem mutat — az
oldal tetejére ugrik. Helykitöltőként használják, amíg nincs kész a céloldal. Kész munkában
kerüld: a felhasználó kattint, és nem történik semmi értelmes.
Alapból a link ugyanabban a lapban nyílik meg. Ha új lapot akarsz, a
target="_blank" attribútum kell.
<p>
<a href="https://hu.wikipedia.org">
Ugyanebben a lapban
</a>
</p>
<p>
<a href="https://hu.wikipedia.org"
target="_blank"
rel="noopener">
Új lapon nyílik
</a>
</p>
A target="_blank" mellé illik odaírni a
rel="noopener"-t. Enélkül a megnyíló oldal korlátozott hozzáférést kap
ahhoz a laphoz, ahonnan jött — ez biztonsági kockázat. Ma a legtöbb böngésző már magától véd, de a
kiírása jó szokás.
| Mikor? | Döntés |
|---|---|
| Saját oldalaid között | Ugyanabban a lapban. A felhasználó számít rá, hogy a Vissza gomb működik. |
| Külső oldalra | Lehet új lap — így nem veszíti el a te oldaladat. |
| PDF, letöltés | Új lap indokolt. |
| Kitöltés alatt álló űrlapról | Mindenképp új lap, különben elveszne a beírt adat. |
Sokan minden linket új lapon nyitnak — ez rossz szokás. A felhasználó maga is tud új lapot nyitni (középső egérgomb, Ctrl+kattintás). Ha te döntesz helyette, elveszed tőle a Vissza gombot, és teleszemeteled a böngészőjét.
A href nemcsak weboldalra mutathat. Három hasznos formát érdemes ismerni.
<p>
<a href="mailto:anna@example.com">
Írj nekem e-mailt
</a>
</p>
<p>
<a href="tel:+36301234567">
+36 30 123 4567
</a>
</p>
<p>
<a href="onelectrajz.pdf" download>
Önéletrajz letöltése
</a>
</p>
| Forma | Mi történik kattintásra? |
|---|---|
mailto: |
Megnyílik a felhasználó levelezőprogramja, a címzett kitöltve. Nem küld levelet — csak megnyitja az ablakot. |
tel: |
Telefonon: tárcsázás indul. Asztali gépen általában nem történik semmi. Írd a számot nemzetközi formában, szóköz nélkül. |
download |
A böngésző letölti a fájlt, ahelyett hogy megnyitná. Logikai attribútum — nincs értéke. |
A mailto: kiegészíthető:
<a href="mailto:anna@example.com?subject=Érdeklődés&body=Szia Anna!"> Írj nekem </a>
A ? után jön az első paraméter, a továbbiakat
& választja el. Mivel az &
entitáskezdő jel, HTML-ben &-ként illik írni (4. lecke).
Ha a címed nyílt weboldalon szerepel, a spamküldő programok begyűjtik. Éles oldalakon ezért
gyakoribb a kapcsolatfelvételi űrlap (9. lecke). Gyakorlófeladatokban nyugodtan használj
mailto: hivatkozást kitalált címmel.
Egy link nem mindig ugyanúgy néz ki. A böngésző négy állapotot különböztet meg, és mindegyiket máshogy jeleníti meg:
| Állapot | Mikor? | Alapértelmezett szín |
|---|---|---|
| link | Még nem jártál ott | kék |
| visited | Már meglátogattad | lila |
| hover | Rajta az egér | (általában aláhúzás) |
| active | Épp lenyomva tartod | piros |
Mind a négy állapot átszínezhető — a 14. leckében (pszeudo-osztályok) meg is tanulod, hogyan. Most csak azt jegyezd meg, hogy léteznek, és hogy a „meglátogatott link más színű" nem hiba, hanem szolgáltatás.
Kezdők kedvence: text-decoration: none minden linkre, mert „szebb".
Csakhogy ha a link se nem aláhúzott, se nem más színű, akkor senki nem fogja tudni, hogy
link. Ha elveszed az aláhúzást, adj helyette valami mást: erős színkülönbséget, keretet,
gombszerű megjelenést.
| Hiba | Mi történik, és mi a megoldás? |
|---|---|
Lehagyott https:// külső linknél |
A böngésző fájlnévnek nézi, és a saját mappádban keresi. Írd ki a protokollt. |
Visszaperjel: kepek\profil.jpg |
A weben nem létezik. Mindig sima perjel. |
Kezdő perjel: /kepek/profil.jpg |
Fájlként megnyitva a lemez gyökerét keresi. Tanulás közben hagyd el a kezdő perjelet. |
| Rossz kis/nagybetű a fájlnévben | A saját géped elnézi, a szerver nem. Írj mindent kisbetűvel. |
Elfelejtett ../ |
Almappából a szülőmappa fájljára hivatkozol. A böngésző az almappában keresi, és nem találja. |
Két id ugyanazzal az értékkel |
A horgony csak az elsőre ugrik. Az id egyedi. |
# az id értékében |
id="#arak" hibás. A # csak a linkben van: href="#arak". |
| Linkbe ágyazott link | Érvénytelen. Egy <a>-ba nem tehetsz másik <a>-t. |
Az útvonalas kérdésekhez használd a lecke mappaszerkezetét (5. pont). Előbb válaszolj magadban!
1. Az oldalak/kapcsolat.html-ben vagy. Hogyan hivatkozol az index.html-re?
../index.html — egy szintet ki kell lépni az oldalak mappából.
2. Az oldalak/projektek/elso.html-ben vagy. Hogyan hivatkozol a kepek/hatter.jpg képre?
../../kepek/hatter.jpg — két szintet fel a gyökérig, majd be a kepek mappába.
3. Mi a baj ezzel: <a href="www.index.hu">Hírek</a>?
Hiányzik a protokoll. A böngésző így egy www.index.hu nevű fájlt keres a saját mappádban. Helyesen: href="https://www.index.hu".
4. Miért nem ajánlott a /kepek/profil.jpg alak, amíg tanulsz?
A kezdő perjel a webhely gyökerét jelenti. Ha a fájlt duplán kattintva nyitod meg (file:///), akkor a gyökér a merevlemez gyökere lesz (C:\), és minden hivatkozás eltörik. Ugyanez történik, ha az oldal egy almappába kerül a szerveren.
5. Két lépésben: hogyan készítesz ugrópontot egy „Áraink" című szakaszhoz?
1. A célnak adsz azonosítót: <h2 id="arak">Áraink</h2>. 2. A linkben #-tel hivatkozol rá: <a href="#arak">Áraink</a>. A # nem része az id értékének.
6. Egy űrlap kitöltése közben a felhasználó rákattint egy „Adatvédelmi tájékoztató" linkre. Ugyanabban a lapban nyisd, vagy újban? Miért?
Újban (target="_blank" rel="noopener"). Ha ugyanabban a lapban nyílna meg, elveszne a már beírt űrlapadat.
7. Miért rossz linkszöveg a „Kattints ide"?
Mert önmagában nem mondja meg, hova vezet. A képernyőolvasók és egyes felhasználók kilistázzák egy oldal összes linkjét a környező szöveg nélkül — ilyenkor öt darab „kattints ide" megkülönböztethetetlen. A linkszöveg írja le a célt: „Áraink", „Önéletrajz letöltése".
8. A linkjeidről levetted az aláhúzást, mert szebb így. Mi lehet a probléma?
Ha se aláhúzás, se jelentős színkülönbség nincs, a felhasználó nem tudja, hogy az egy link. Ha elveszed az aláhúzást, adj helyette más egyértelmű jelzést: erős színt, keretet, gombszerű megjelenést.
<a href="cél">szöveg</a>. A href a cél, a tartalom a kattintható felület.https://…) csak külső oldalra. A protokollt soha ne hagyd le.mappanev/ = lefelé · ../ = felfelé · ezek kombinálhatók: ../kepek/profil.jpg./, soha \. A fájlnév kis/nagybetűje számít./kepek/…) tanulás közben kerüld.id="valami", a linkben href="#valami". Az id egyedi, ékezet és szóköz nélküli.target="_blank" + rel="noopener" — de csak indokolt esetben.mailto:, tel:, és a download attribútum.