HTML alapok › 3. modul: Linkek és navigáció › 3.2 lecke
HTML alapok · 3.2 lecke
Fájlok összekapcsolása: CSS, JavaScript, ikon és betűtípus
Egy igazi webhely nem egyetlen fájl, hanem egy kis csapat: a HTML adja a tartalmat, a CSS a megjelenést, a JavaScript a működést. Ebben a leckében megtanulod összekötni őket, hogy egyetlen stíluslap a webhely összes oldalát formázza.
A lecke végére
- érted, miért érdemes a HTML-t, a CSS-t és a JavaScriptet külön fájlba tenni;
- közös stíluslapot kapcsolsz a webhely összes oldalához a
linkcímkével; - JavaScript-fájlt töltesz be a
scriptcímkével és adeferattribútummal; - ikont adsz a webhelyednek, amely a böngészőfülön látszik;
- tudod, hogyan használj betűtípust adatvédelmi szempontból is helyesen.
Mielőtt elkezded
Ez a lecke az előzőre épül: szükséged lesz a relatív útvonalakra és a 3.1-ben elkezdett háromoldalas webhelyre.
Miért több fájl?
Gondolj egy házra: a falak adják a szerkezetet, a festés és a bútorok a kinézetet, a villany és a gépek a működést. A weboldalon ugyanez a munkamegosztás:
A tartalom és a szerkezet: címsorok, bekezdések, képek, linkek.
A megjelenés: színek, betűk, elrendezés.
A működés: gombok, számolás, változó tartalom.
Ha a megjelenést egyetlen CSS-fájlba teszed, és minden oldalhoz ezt kapcsolod, akkor egy színt egyetlen helyen kell átírnod, és a webhely összes oldala megváltozik. Egy ilyen webhely mappái így néznek ki:
├── index.html
├── rolam.html
├── css/
│ └── stilus.css
├── js/
│ └── datum.js
└── kepek/
└── ikon.png
Közös stíluslap a link címkével
A stíluslapot a head részben, a link címkével kapcsolod az oldalhoz:
<head> <meta charset="utf-8"> <title>A hobbim</title> <link rel="stylesheet" href="css/stilus.css"></head>
A stíluslap maga egy egyszerű szövegfájl .css kiterjesztéssel. A CSS-t a következő tanfolyamban részletesen tanulod, most elég ennyi:
body { font-family: Arial, sans-serif; background: #fdf6e3;}h1 { color: #a31f55;}
Jósold meg!
A stilus.css-t a index.html és a rolam.html is betölti. Átírod benne a címsor színét kékre. Hány oldalon változik meg a szín?
Megoldás
Mindkettőn. Ez a közös stíluslap lényege: egy módosítás, és minden oldal követi. Egy 50 oldalas webhelynél ez 50 fájl kézi átírását spórolja meg.
Csináld meg!
A 3.1-es webhelyed mappájában hozz létre egy css mappát, benne a stilus.css fájllal. Kapcsold hozzá mindhárom oldalhoz. Változtasd meg a háttérszínt, és nézd meg mindhárom oldalt: mindegyiken megváltozott?
JavaScript a script címkével
A JavaScript-fájlt a script címke tölti be. Ma a legjobb helye szintén a head rész, a defer attribútummal:
<head> <link rel="stylesheet" href="css/stilus.css"> <script src="js/datum.js" defer></script></head><body> <p>Utoljára frissítve: <span id="datum"></span></p></body>
// Kiírja a mai dátumot a „datum” azonosítójú helyredocument.getElementById("datum").textContent = new Date().toLocaleDateString("hu-HU");
src van, nem href!datum helyet.script címkét mindig le kell zárni, akkor is, ha üres.Jósold meg!
Mi történik, ha elhagyod a defer szót, és a szkript a head-ben marad?
Megoldás
A szkript azonnal lefut, mielőtt a böngésző elérne a body-hoz. Ekkor még nincs datum azonosítójú elem, ezért a dátum nem jelenik meg (a böngésző a fejlesztői eszközökben hibát jelez). A defer pont ezt oldja meg.
Oldalikon a böngészőfülre
A böngészőfülön a cím mellett látható kis képet oldalikonnak (angolul favicon) hívják. Ezt is a link címke kapcsolja be:
<link rel="icon" href="kepek/ikon.png">
Egy címke, sokféle kapcsolat
Látod? A link címke a rel értékétől függően mást kapcsol: stylesheet esetén stíluslapot, icon esetén ikont. A rel jelentése: „kapcsolat” (az angol relationship szóból).
Betűtípus, adatvédelmi szempontból helyesen
Szép betűtípust ingyenesen is találsz, például a Google Fonts gyűjteményében. A betöltésükre két út van:
| Módszer | Előny | Hátrány |
|---|---|---|
Betöltés közvetlenül a Google szerveréről (link címkével) | Egyszerű, egy sor. | A látogató IP-címe a Google-hoz kerül. Az EU-ban ez adatvédelmi kockázat, egy német bíróság 2022-ben el is marasztalt emiatt egy weboldalt. |
| A betűtípus letöltése és betöltése a saját tárhelyről | Nem kerül ki adat, és gyorsabb is lehet. | Pár perccel több munka. |
@font-face { font-family: "Quicksand"; src: url("../betuk/quicksand.woff2") format("woff2");}body { font-family: "Quicksand", Arial, sans-serif;}
Figyeld az útvonalat!
A ../betuk/ útvonal a CSS-fájlhoz képest értendő, nem a HTML-hez. A stilus.css a css mappában van, ezért egy szinttel feljebb kell lépni, hogy elérjük a betuk mappát.
Hibavadászat
A négy példa közös tünete: „nem történik semmi”, a böngésző nem ír ki hibát az oldalra. Keresd meg a hibát!
1. Hiányzó kapcsolat
<link href="css/stilus.css">
Mi a baj?
Hiányzik a rel="stylesheet", így a böngésző nem tudja, hogy stíluslapról van szó, és nem alkalmazza.
2. Önlezáró script
<script src="js/datum.js" defer />
Mi a baj?
A script címkét nem lehet „önlezáróként” írni. Kell a külön </script>, különben a böngésző az utána következő kódot is szkriptnek tekintheti.
3. Almappából induló oldal
<!-- az oldalak/hobbi.html fájlban --><link rel="stylesheet" href="css/stilus.css">
Mi a baj?
A hobbi.html az oldalak mappában van, így a böngésző ott keres egy css mappát. Helyesen: ../css/stilus.css.
4. Fordított perjel
<link rel="stylesheet" href="css\stilus.css">
Mi a baj?
A Windows fájlkezelője fordított perjelet (\) használ, a web viszont mindig sima perjelet (/). A saját gépeden néha működik, feltöltés után már nem.
Tipp a hibakereséshez
Nyomd meg az F12 billentyűt, és nézd meg a Console (Konzol) fület: a böngésző itt jelzi, ha nem talált egy fájlt. A fejlesztői eszközökről a 8. modulban részletesen tanulsz.
Projekt: a háromoldalas webhely összeáll
Folytasd a 3.1-ben elkezdett hobbiwebhelyet!
- Mindhárom oldal ugyanazt a
css/stilus.cssstíluslapot töltse be. - Adj a webhelynek oldalikont (egy saját rajz is lehet,
kepek/ikon.pngnéven). - A főoldal alján jelenjen meg a „Utoljára frissítve” dátum a
datum.jsszkripttel. - Ha más betűtípust szeretnél, töltsd be saját tárhelyről.
Kész vagy, ha…
…a stíluslap egyetlen módosítása mindhárom oldalt megváltoztatja, a fülön látszik az ikon, a dátum megjelenik, és a konzolban (F12) nincs piros hibaüzenet.
Ellenőrizd magad!
Miért jobb a stílust külön CSS-fájlba tenni?
Mert egy fájl módosításával a webhely összes oldala megváltozik, és a HTML is átláthatóbb marad.
Mi a különbség a link és a script címke „cím” attribútuma között?
A link címke href-et, a script címke src-t használ.
Mit csinál a defer?
Megvárja, amíg az oldal betöltődik, és csak utána futtatja a szkriptet.
Mit jelent a rel attribútum?
A kapcsolat típusát: stylesheet stíluslap, icon oldalikon.
Miért jobb a betűtípust saját tárhelyről betölteni?
Mert így a látogató adatai (az IP-címe) nem kerülnek külső szolgáltatóhoz.
Tanároknak
Kerettantervi kapcsolódás
NAT 2020, Digitális kultúra, 9. évfolyam, Publikálás a világhálón: több lapból álló webhely, a CSS alapelvei, a tartalom és a formátum szétválasztása. A lecke egy 45 perces órára, a projekttel két órára tervezett.
Módszertan
A lecke a 3.1 projektjét folytatja, így a diákok egy valódi, fokozatosan bővülő webhelyen dolgoznak, a code.org CS Discoveries webfejlesztési egységének mintájára. A hibavadászat közös tünete („nem történik semmi”) szándékos: a diákok megtanulják, hogy a hiányzó fájl vagy hibás útvonal nem jelez hibát az oldalon, ezért a konzolt kell megnézni.
Szakmai megjegyzés
A defer használata a mai ajánlott gyakorlat. A korábbi „szkript a body végére” megoldás is működik, de a defer áttekinthetőbb, és a letöltést sem késlelteti. A Google Fonts adatvédelmi kérdése az EU-s gyakorlat miatt releváns (LG München, 2022).
Differenciálás
A segítséget igénylők kész mappaszerkezetet kaphatnak. A gyorsabban haladók a szkripttel az aktuális évszakot vagy egy napi idézetet is kiírathatják.