HTML alapok › 0. modul: Hogyan működik a web? › 0.3 lecke
HTML alapok · 0.3 lecke
HTML, CSS, JavaScript – ki mit csinál?
Minden weboldal három nyelvből áll össze, és mindegyiknek megvan a maga dolga. Ebben a leckében kipróbálsz egy élő példát, belenézel egy igazi weboldal forráskódjába, és „levetkőzteted” a stílusáról.
A lecke végére
- megmagyarázod, mi a HTML, a CSS és a JavaScript feladata;
- tudod, miért jelölőnyelv a HTML, és miért nem programozási nyelv;
- megnézed egy weboldal forráskódját;
- egy weboldal elemeiről eldöntöd, melyik nyelv felel értük.
Mielőtt elkezded
Érdemes előtte megnézni, hogyan jut el hozzád egy weboldal, és miből áll egy webcím.
A három nyelv, három feladat
Gondolj egy színházi előadásra. A forgatókönyv és a díszlet adja, mi történik a színpadon, a jelmez és a fények, hogy hogyan néz ki, a színészek mozgása pedig, hogy mi változik. A weboldalon:
Címsorok, bekezdések, képek, linkek, gombok: mi van az oldalon, és milyen szerkezetben.
Színek, betűk, térközök, elrendezés: hogyan néz ki mindez.
Kattintásra történő változások, számolás, ellenőrzés: mit csinál az oldal.
Jelölőnyelv, nem programozási nyelv
A HTML neve: HyperText Markup Language, vagyis hipertext-jelölőnyelv. A HTML nem „számol” és nem „dönt”, csak megjelöli, hogy a szöveg mely része címsor, bekezdés vagy link. Programozási nyelv a háromból csak a JavaScript.
Élő példa: egy gomb, három nyelv
Kattints a gombra néhányszor, aztán nézd meg, melyik nyelv mit adott hozzá!
Próbáld ki!
Kattintások száma: 0
<button id="gomb">Kattints rám!</button> <p>Kattintások száma: <span id="szam">0</span></p>
button { background: #2f5fae; color: white; border-radius: 12px; padding: 12px 22px; }
let n = 0; document.getElementById("gomb").addEventListener("click", () => { n = n + 1; document.getElementById("szam").textContent = n; });
Jósold meg!
Mi maradna a gombból, ha kitörölnéd a CSS-t? És ha a JavaScriptet?
Megoldás
CSS nélkül a gomb ott lenne, és számolna is, csak a böngésző egyszerű, szürke alapgombja lenne. JavaScript nélkül a gomb szép lenne, de a kattintás semmit nem csinálna, a szám 0 maradna.
Nézz bele egy weboldal forráskódjába!
Minden weboldal HTML-kódját megnézheted, ez nem titok. Nyiss meg egy weboldalt, és nyomd meg a Ctrl + U billentyűket (Macen: Option + Command + U). Új lapon megjelenik az oldal forráskódja.
Csináld meg!
Keress a forráskódban három ismerős dolgot: egy <title> címkét (ez adja a böngészőfül szövegét), egy <link rel="stylesheet" sort (ez tölti be a CSS-t) és egy <script címkét (ez a JavaScript). Tipp: a Ctrl + F billentyűkkel kereshetsz a lapon.
Ne ijedj meg!
Egy nagy webhely forráskódja több ezer sor, és sok benne a gép által készített rész. Nem kell mindent érteni: most csak felismerni szeretnénk a három nyelv nyomait.
Kísérlet: egy weboldal stílus nélkül
A Firefox böngészőben a CSS kikapcsolható: Nézet → Oldalstílus → Nincs stílus (ha nem látod a menüsort, nyomd meg az Alt billentyűt). Ilyenkor csak a HTML marad: a tartalom és a szerkezet, díszítés nélkül.
Jósold meg!
Egy stílus nélküli weboldal olvasható marad? Mi változik meg rajta, és mi marad ugyanaz?
Megoldás
A szöveg, a címsorok, a képek és a linkek megmaradnak, egymás alatt, egyszerű betűkkel. Eltűnnek a színek, a menük szép elrendezése, a hasábok. Egy jól megírt HTML-oldal stílus nélkül is érthető marad, és ez az akadálymentesség egyik alapja: a képernyőolvasók is a HTML szerkezetét olvassák fel.
Melyik nyelv felel érte?
Gondold végig, aztán nyisd ki a választ!
A főcím nagyobb és félkövér, mint a szöveg.
CSS. Hogy főcímről van szó, azt a HTML jelöli (h1), de hogy mekkora és milyen betűs, azt a CSS határozza meg.
Az oldal egy link, amelyre kattintva egy másik oldalra jutsz.
HTML. Az a címke készíti.
Az űrlap piros szöveggel jelzi, ha rossz e-mail-címet írtál be.
JavaScript ellenőrzi, a piros színt pedig a CSS adja. Sok jelenségben több nyelv is dolgozik együtt!
Mobilon a menü egymás alá rendeződik.
CSS. A reszponzív (képernyőmérethez igazodó) elrendezés a CSS feladata.
A képnek van leíró szövege a vakok számára.
HTML. Az img címke alt attribútuma.
Projekt: weboldal-boncolás
Válassz egy weboldalt, amit gyakran használsz (például egy szótárt vagy egy hírportált). Nézd meg alaposan, és írj a füzetedbe egy háromoszlopos táblázatot:
- HTML: három elem, ami a tartalom része (például egy címsor, egy kép, egy link).
- CSS: három dolog, ami a megjelenésről szól (színek, betűk, elrendezés).
- JavaScript: legalább egy dolog, ami valamilyen műveletre reagál (például egy lenyíló menü).
Kész vagy, ha…
…mindhárom oszlopban vannak példák, és egy társadnak meg tudod indokolni, miért az adott nyelvhez soroltad őket.
Ellenőrizd magad!
Melyik nyelv felel a tartalomért, melyik a megjelenésért és melyik a működésért?
HTML: tartalom és szerkezet. CSS: megjelenés. JavaScript: működés.
Miért nem programozási nyelv a HTML?
Mert nem számol és nem dönt, csak megjelöli a tartalom részeit (jelölőnyelv).
Hogyan nézheted meg egy weboldal forráskódját?
A Ctrl + U billentyűkkel.
Miért fontos, hogy egy oldal stílus nélkül is érthető legyen?
Mert a képernyőolvasók és a keresők a HTML szerkezetét olvassák; ez az akadálymentesség alapja.
Tanároknak
Kerettantervi kapcsolódás
NAT 2020, Digitális kultúra, 9. évfolyam, Publikálás a világhálón: a weblap részei, a HTML-dokumentum szerkezete, a CSS alapelvei és a tartalom és formátum szétválasztásának jelentősége.
Módszertan
Az élő gomb azonnal kipróbálható, a három kódblokk a munkamegosztást teszi láthatóvá. A „stílus nélkül” kísérlet egy valódi webhelyen mutatja meg a tartalom és a formátum szétválasztását, és bevezeti az akadálymentesség gondolatát. A lecke a teljes tanfolyam „térképe”: a HTML-t, a CSS-t és a JavaScriptet a későbbi modulokban részletesen tanulják.
Időterv
A három nyelv: 8 perc. Élő példa: 10 perc. Forráskód: 8 perc. Stílus nélkül: 7 perc. Melyik melyik? és összegzés: 12 perc. A projekt otthoni feladat.
Eszközök
A „Nincs stílus” funkció a Firefoxban érhető el menüből. Chrome-ban a fejlesztői eszközökkel vagy bővítménnyel oldható meg; ha nincs Firefox, a tanár kivetítve is bemutathatja.