HTML alapok › 3. modul: Linkek és navigáció › 3.1 lecke
Linkek a weboldalon – az a címke
HTML alapok · 3.1 lecke
A web attól lett „háló”, hogy az oldalak össze vannak kötve. Ebben a leckében megtanulod, hogyan készül egy link, hogyan kötöd össze a saját oldalaidat, és hogyan írsz olyan linket, amit mindenki ért, a képernyőolvasót használók is.
A lecke végére
- linket készítesz az
acímkével és ahrefattribútummal; - megkülönbözteted az abszolút és a relatív útvonalat, és összekötöd a saját oldalaidat;
- tudod, mikor és hogyan nyiss linket új lapon;
- e-mail- és telefonlinket, valamint oldalon belüli ugrást készítesz;
- beszédes, mindenki számára érthető linkszöveget írsz.
Mielőtt elkezded
Erre a leckére akkor állsz készen, ha már tudsz HTML-fájlt létrehozni és megnyitni a böngészőben, és ismered a címsorokat és a bekezdéseket.
Mi a link?
A HTML rövidítés első betűje, a H a hypertext szót jelöli: olyan szöveget, amelyből egy kattintással máshová juthatsz. Tim Berners-Lee 1989-ben a svájci CERN kutatóközpontban azért találta ki a webet, hogy a kutatók dokumentumai így, linkekkel legyenek összekötve. Minden weboldal, amit ma meglátogatsz, erre az ötletre épül.
Jósold meg!
Amikor rákattintasz egy linkre, honnan tudja a böngésző, hogy hová kell mennie? Írd le egy mondatban a füzetedbe, mielőtt továbbolvasol!
Az első link
A linket az a címke készíti (az angol anchor, vagyis horgony szóból). A cél címe a href attribútumba kerül, a nyitó és a záró címke közé írt szöveg pedig kattintható lesz.
<a href="https://www.digitalisfelfedezok.hu/">A Digitális felfedezők főoldala</a>
Csináld meg!
Nyisd meg a saját index.html fájlodat a Visual Studio Code-ban, és a törzsbe (body) írj egy linket egy általad választott, iskolai célra hasznos weboldalra. Mentsd el, és nyisd meg a böngészőben. Működik a link?
A jóslás megoldása: honnan tudja a böngésző, hová menjen?
A href attribútumból. Kattintáskor a böngésző kiolvassa az ott megadott címet, és azt az oldalt tölti be. Ha a href hiányzik vagy hibás, a link nem működik, vagy rossz helyre visz.
Hová mutat? Abszolút és relatív útvonal
A href-be kétféle címet írhatsz. Az abszolút cím a teljes webcím, mint egy teljes postai cím országgal és irányítószámmal. A relatív cím azt mondja meg, hol van a cél ahhoz a fájlhoz képest, amelyikben a link van, mint amikor azt mondod: „a szomszéd szobában”.
Nézzünk egy kis webhelyet a gépeden:
├── index.html
├── rolam.html
└── oldalak/
└── hobbi.html
| Honnan? | Hová? | A href értéke |
|---|---|---|
| index.html | rolam.html (ugyanabban a mappában) | rolam.html |
| index.html | hobbi.html (egy almappában) | oldalak/hobbi.html |
| hobbi.html | index.html (egy mappával feljebb) | ../index.html |
| bármelyik oldal | egy külső webhely | https://www.w3.org/ |
Jegyezd meg
A ../ azt jelenti: „egy mappával feljebb”. A saját oldalaid között mindig relatív útvonalat használj: így a webhely akkor is működik, ha a mappát átmásolod egy másik gépre vagy feltöltöd egy tárhelyre.
Jósold meg!
A hobbi.html oldalon ezt a linket írod: <a href="rolam.html">Rólam</a>. Működni fog?
Megoldás
Nem. A böngésző az oldalak mappában keresi a rolam.html-t, de az egy szinttel feljebb van. A helyes érték: ../rolam.html.
Link új lapon
Alapesetben a link ugyanabban a lapon nyílik meg. Ha azt szeretnéd, hogy új lapon nyíljon, a target="_blank" attribútumot használd, mellé pedig a rel="noopener"-t:
<a href="https://www.w3.org/" target="_blank" rel="noopener">A W3C webhelye (új lapon nyílik)</a>
Csak indokolt esetben!
Az új lap összezavarhatja a látogatót: a „Vissza” gomb nem működik, és a képernyőolvasót használók nem mindig veszik észre, hogy új lap nyílt. Ezért csak akkor használd, ha tényleg kell (például egy külső forrásnál), és jelezd a linkszövegben: „(új lapon nyílik)”.
E-mail és telefon
A href nemcsak weboldalra mutathat. A mailto: előtag levelezőprogramot nyit, a tel: előtag mobilon hívást indít:
<a href="mailto:szakkor@pelda.hu">Írj a szakkörnek!</a><a href="tel:+3612345678">Hívd az iskolatitkárságot: +36 1 234 5678</a>
Két apróság
A telefonszámot a tel: után szóköz nélkül, nemzetközi formában (+36…) írd, a linkszövegben viszont tagolhatod, hogy könnyebb legyen olvasni. A nyilvános oldalra kitett e-mail-címeket kéretlen leveleket küldő programok is begyűjthetik, ezért valódi oldalon érdemes kapcsolatfelvételi űrlapot használni (erről a 7. modulban lesz szó).
Ugrás az oldalon belül
Egy hosszú oldalon a link az oldal egy adott részére is ugorhat. Ehhez a célpontnak id-t adsz, a linkben pedig a # jel után ezt az azonosítót írod:
<a href="#kapcsolat">Ugrás a kapcsolathoz</a><!-- ... az oldal többi része ... --><h2 id="kapcsolat">Kapcsolat</h2>
Már használtad!
Ennek a leckének a tetején az „Így haladunk” gombjai pontosan így működnek: mindegyik egy # jeles link, amely a lecke egy szakaszára ugrik. Próbáld ki: vissza a lecke elejére ↑
Jó linkszöveg: mindenkinek érthetően
A vakok és gyengénlátók képernyőolvasó programja fel tudja olvasni az oldal összes linkjét egy listában, a környező szöveg nélkül. Képzeld el, hogy ez a lista így hangzik: „kattints ide, kattints ide, itt, tovább”. Semmit nem árul el! Ezért a linkszöveg mindig mondja meg, hová visz.
| Így ne | Így igen |
|---|---|
| A házirendet itt találod. | Olvasd el az iskola házirendjét. |
| Kattints ide a letöltéshez. | Töltsd le a feladatlapot (PDF, 200 kB). |
Írd át!
Javítsd ki ezeket a linkszövegeket: 1. „A menetrendért kattints ide.” 2. „Bővebben” (egy cikk a mesterséges intelligenciáról). 3. „https://www.w3.org/WAI/”.
Lehetséges megoldások
1. „Nézd meg a buszmenetrendet.” 2. „Bővebben a mesterséges intelligenciáról.” 3. „A W3C akadálymentességi oldala”, mert a puszta webcímet a képernyőolvasó betűnként olvassa fel.
Hibavadászat
Mind a négy link hibás. Keresd meg a hibát, mielőtt kinyitod a megoldást!
1. Hiányzó idézőjel
<a href="rolam.html>Rólam</a>
Mi a baj?
A cím végéről hiányzik a záró idézőjel, ezért a böngésző nem tudja, hol ér véget a href. Helyesen: href="rolam.html".
2. Hiányzó záró címke
<a href="rolam.html">Rólam<p>Szeretek focizni és programozni.</p>
Mi a baj?
Hiányzik a </a>, ezért a link „nem ér véget”: a böngésző az utána következő szöveget is a link részének tekintheti, így rákattintva az is a rolam.html-re visz.
3. Nagybetű a fájlnévben
<a href="Rolam.html">Rólam</a>
Mi a baj?
A fájl neve rolam.html, kisbetűvel. A saját gépeden (Windows) működhet, de a legtöbb webszerver megkülönbözteti a kis- és nagybetűt, így feltöltés után a link hibát ad. Ezért a fájlneveket mindig kisbetűvel, ékezet és szóköz nélkül írjuk.
4. Hiányzó protokoll
<a href="www.w3.org">A W3C webhelye</a>
Mi a baj?
Az elejéről hiányzik a https://, ezért a böngésző relatív útvonalnak hiszi, és a saját mappádban keres egy „www.w3.org” nevű fájlt. Külső oldalra mindig a teljes címmel mutass: https://www.w3.org/.
Mini projekt: háromoldalas bemutatkozó webhely
Készíts egy kis webhelyet a kedvenc hobbidról, három oldalból: index.html (főoldal), hobbi.html (a hobbid) és kapcsolat.html.
- Minden oldal tetején legyen egy menü linkekkel a másik két oldalra (relatív útvonallal).
- A hobbid oldalán legyen legalább egy külső forrás linkje, új lapon nyíló, jelzett linkkel. Ha képet vagy szöveget veszel át, a forrást is linkeld be!
- A kapcsolat oldalon legyen egy e-mail-link egy kitalált címmel (valódi, személyes adatot ne tegyél ki).
- A főoldal alján legyen egy „Vissza az oldal tetejére” link.
Kész vagy, ha…
…mindhárom oldal elérhető egymásról, egyik link sem ad hibát, és minden linkszöveg elárulja, hová visz. Cseréld ki a gépedet egy társadéval: ő is végig tud kattintani a webhelyeden?
Ellenőrizd magad!
Melyik attribútumba kerül a link célja?
A href-be.
Mi a különbség az abszolút és a relatív útvonal között?
Az abszolút a teljes webcím (https://…), a relatív a cél helyét adja meg az aktuális fájlhoz képest (például oldalak/hobbi.html).
Mit jelent a ../ az útvonalban?
Egy mappával feljebb.
Miért rossz linkszöveg a „kattints ide”?
Mert nem árulja el, hová visz a link. A képernyőolvasót használók a linkeket gyakran önmagukban hallgatják meg, így számukra értelmetlen.
Hogyan készítesz oldalon belüli ugrást?
A célpont kap egy id-t (például id="kapcsolat"), a link href-je pedig #kapcsolat.
Tanároknak
Kerettantervi kapcsolódás
NAT 2020, Digitális kultúra, 9. évfolyam, Publikálás a világhálón: a weblap szerkezeti elemei, hivatkozások, több lapból álló webhely készítése. A lecke egy 45 perces órára vagy (a mini projekttel) két órára tervezett.
Módszertan
A lecke a PRIMM-modellt követi (jóslás, futtatás, vizsgálat, módosítás, alkotás). A hibavadászat a leggyakoribb diákhibákra épül: relatív útvonal almappából, kis- és nagybetű a fájlnévben, hiányzó protokoll. A mini projekt a code.org CS Discoveries webfejlesztési egységének személyes weboldal-projektjét követi, a forrásmegjelölés hangsúlyozásával.
Differenciálás
Segítséget igénylőknek kész, háromoldalas sablon adható, amelyben csak a linkeket kell megírni. A gyorsabban haladók a menüt minden oldalon azonos helyre tehetik, és kiemelhetik az aktuális oldalt, ami a CSS-leckéket készíti elő.
Értékelés
A mini projekt a „Kész vagy, ha…” szempontjai szerint értékelhető, párban, társellenőrzéssel: a társ minden linket végigkattint, és jelzi a hibásakat.