HTML alapok › 3. modul: Linkek és navigáció › Gyorsítópálya
🚀 HTML alapok · 3. modul · Gyorsítópálya
Linkek és navigáció – gyorsítópálya
A 3. modul teljes tudása egyetlen leckében: linkek, útvonalak, közös stíluslap és szkript. Ha valahol elakadsz, a részletes leckék egy kattintásra vannak.
Mikor válaszd?
- ha gyorsan haladsz, és egy órában szeretnéd átvenni a modult;
- ha ismételsz, például dolgozat előtt;
- ha érettségire készülsz, és egy tömör áttekintés kell.
Részletesen
Ha egy témát alaposabban szeretnél megérteni, magyarázatokkal és több gyakorlással:
Puska: minden egy helyen
| Mit szeretnél? | Kód |
|---|---|
| Link egy másik oldalra | <a href="rolam.html">Rólam</a> |
| Link egy almappában lévő oldalra | href="oldalak/hobbi.html" |
| Link egy mappával feljebb | href="../index.html" |
| Link külső webhelyre, új lapon | href="https://…" target="_blank" rel="noopener"A linkszövegben jelezd: „(új lapon nyílik)”. |
| E-mail és telefon | href="mailto:cim@pelda.hu"href="tel:+3612345678" |
| Ugrás az oldalon belül | href="#kapcsolat" + id="kapcsolat" |
| Közös stíluslap | <link rel="stylesheet" href="css/stilus.css">A head-be. |
| JavaScript-fájl | <script src="js/datum.js" defer></script>A head-be, a defer-rel. |
| Oldalikon | <link rel="icon" href="kepek/ikon.png"> |
Villámkérdések
Előbb gondold végig a választ, csak utána nyisd ki!
A hobbi.html az oldalak mappában van. Mi a link a főoldalra (index.html), ami eggyel feljebb van?
../index.html
Miért rossz linkszöveg a „kattints ide”?
Mert nem árulja el, hová visz. A képernyőolvasót használók a linkeket gyakran önmagukban hallgatják meg.
Mi a különbség a link és a script címke címet tartalmazó attribútuma között?
A link href-et, a script src-t használ.
Miért kell a defer a head-be tett szkripthez?
Mert nélküle a szkript lefutna, mielőtt a böngésző betöltené az oldal törzsét, így nem találná meg az elemeket.
Hány fájlt kell módosítanod, ha egy 10 oldalas webhely összes címsorát át akarod színezni?
Egyet, a közös stíluslapot, ha minden oldal azt tölti be.
Gyorsfeladatok
Menü három oldalon
Készíts három oldalt, és mindegyik tetejére egy menüt, ami a másik kettőre mutat.
Egy stíluslap mindenhová
Kapcsolj egy közös stilus.css-t mindhárom oldalhoz, és egy színnel ellenőrizd, hogy működik.
Vissza a tetejére
A leghosszabb oldal aljára tegyél egy linket, ami az oldal tetejére ugrik.
Vegyes hibavadászat
A
<a href="www.w3.org">W3C</a>
Megoldás
Hiányzik a https://, így a böngésző helyi fájlt keres.
B
<link href="css/stilus.css">
Megoldás
Hiányzik a rel="stylesheet".
C
<a href="Rolam.html">Rólam</a> <!-- a fájl: rolam.html -->
Megoldás
Kis- és nagybetű: a szerveren a Rolam.html és a rolam.html két különböző fájl.
D
<script src="js/datum.js" defer />
Megoldás
A script címkét külön </script> zárja, nem lehet önlezáró.
Záróprojekt: az osztálykirándulás webhelye
Készíts háromoldalas webhelyet egy (kitalált vagy valódi) osztálykirándulásról: index.html (bemutatás), program.html (napirend) és kapcsolat.html.
- Minden oldalon ugyanaz a menü, relatív linkekkel.
- Közös stíluslap és oldalikon mindhárom oldalon.
- A programoldalon link a célpont hivatalos weboldalára, új lapon nyílóan, jelezve.
- A kapcsolat oldalon egy kitalált e-mail-cím linkként.
- A főoldalon „Utoljára frissítve” dátum szkripttel, és egy „Vissza a tetejére” link.
Kész vagy, ha…
…egy társad a gépeden végig tud kattintani a webhelyen, minden link működik, minden linkszöveg elárulja, hová visz, és a konzolban (F12) nincs piros hibaüzenet.
Tudom, hogy…
Pipáld ki gondolatban! Ahol bizonytalan vagy, ott a zárójelben lévő lecke segít.
- …a link célja a
href-be kerül, és a linkszöveg mondja meg, hová visz. (3.1) - …a saját oldalaim között relatív útvonalat használok, és tudom, mit jelent a
../. (3.1) - …az új lapon nyíló linket jelzem, és csak indokolt esetben használom. (3.1)
- …oldalon belüli ugrást készítek
id-vel és#jellel. (3.1) - …egy közös stíluslappal az összes oldalt formázom. (3.2)
- …a szkriptet a
defer-rel töltöm be, és tudom, miért. (3.2) - …a betűtípust adatvédelmi szempontból is helyesen használom. (3.2)
Tanároknak
Mire jó a gyorsítópálya?
Differenciálásra (a gyorsabban haladók egy óra alatt átveszik a modult, a többiek a részletes leckékkel haladnak), ismétlésre, dolgozat előtti összefoglalásra és érettségi-felkészítésre. A záróprojekt új helyzetben kéri ugyanazt a tudást, így a transzfert is méri.
Időterv (45 perc)
Puska és villámkérdések: 10 perc. Gyorsfeladatok: 15 perc. Hibavadászat: 5 perc. Záróprojekt elkezdése: 15 perc (befejezés otthon vagy a következő órán).
Értékelés
A „Tudom, hogy…” lista önértékelésre, a záróprojekt a „Kész vagy, ha…” szempontjai szerint, párban, társellenőrzéssel értékelhető.