HTML alapok › 0. modul: Hogyan működik a web? › Gyorsítópálya
🚀 HTML alapok · 0. modul · Gyorsítópálya
Hogyan működik a web? – gyorsítópálya
A 0. modul teljes tudása egyetlen leckében: böngésző és szerver, a webcím részei, és a HTML, a CSS és a JavaScript munkamegosztása. 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:
0.1 Böngésző és szerver →
0.2 A webcím (URL) felépítése →
0.3 HTML, CSS, JavaScript →
Puska: a modul fogalmai
| Fogalom | Jelentés |
|---|---|
| Böngésző | A program, ami kéri és megjeleníti a weboldalt (Chrome, Firefox, Edge, Safari). |
| Szerver | Mindig bekapcsolt számítógép, ami tárolja a webhely fájljait, és kiszolgálja a kéréseket. |
| DNS és IP-cím | A DNS a webcímből (névből) megkeresi a szerver IP-címét (számát), mint egy telefonkönyv. |
| Kérés és válasz | A böngésző kér, a szerver válaszol. Egy oldalért sok kérés megy: HTML, CSS, képek, szkriptek. |
| Állapotkód | 200: rendben. 404: nincs ilyen oldal. 500: hiba a szerveren. |
| A webcím részei | protokoll (https://) · domainnév · útvonal (/html/) · lekérdezés (?…) · horgony (#…) |
| https | Titkosított kapcsolat. Nem jelenti, hogy a webhely megbízható! |
| HTML · CSS · JavaScript | Tartalom és szerkezet · megjelenés · működés. A HTML jelölőnyelv, nem programozási nyelv. |
Villámkérdések
Előbb gondold végig a választ, csak utána nyisd ki!
Mit csinál a DNS?
A webcímből kikeresi a szerver IP-címét.
Hány kérést küld a böngésző egy oldalért, amely egy HTML-fájlból, egy stíluslapból és három képből áll?
Ötöt: egyet-egyet minden fájlért.
Mi a valódi domainnév ebben: https://suli.hu.letoltes-ingyen.net/?
letoltes-ingyen.net. A „suli.hu” csak álca az elején.
Egy lakatos (https) oldal biztosan megbízható?
Nem. A https csak a titkosított adatforgalmat garantálja, a webhely tisztességességét nem.
Melyik nyelv felel azért, hogy mobilon a menü egymás alá rendeződik?
A CSS.
Gyorsfeladatok
Tedd sorrendbe!
A megjelenítés · A DNS kikeresi az IP-címet · A szerver visszaküldi a HTML-t · Beírod a webcímet · A böngésző elkéri a képeket és a stíluslapot · A böngésző kérést küld a szervernek.
A helyes sorrend
Beírod a webcímet → a DNS kikeresi az IP-címet → a böngésző kérést küld → a szerver visszaküldi a HTML-t → a böngésző elkéri a képeket és a stíluslapot → megjelenítés.
Szedd szét!
Nevezd meg ennek a webcímnek a részeit: https://www.pelda.hu/szotar/?szo=weboldal#jelentes
Megoldás
Protokoll: https:// · domainnév: www.pelda.hu · útvonal: /szotar/ · lekérdezés: ?szo=weboldal · horgony: #jelentes
Kapcsold ki!
Nyiss meg egy weboldalt a Firefoxban, és kapcsold ki a stílusát (Nézet → Oldalstílus → Nincs stílus). Írd le egy mondatban, mi maradt meg, és mi tűnt el.
Záróprojekt: „Így jut el hozzád egy weboldal”
Készíts egyoldalas infografikát (papíron vagy egy rajzoló-, illetve bemutatókészítő programban), amely egy kisebb diáknak elmagyarázza, mi történik egy webcím beírása után.
- Szerepeljen benne: böngésző, DNS, szerver, kérés, válasz, és hogy egy oldal több fájlból áll.
- Legyen rajta egy színekkel szétszedett webcím.
- Egy „vigyázz!” rész: hogyan ismered fel a hamis webcímet.
- Egy kis rész a HTML, a CSS és a JavaScript szerepéről.
Kész vagy, ha…
…egy kisebb diák (vagy egy családtagod) az infografikád alapján el tudja mondani, honnan jön egy weboldal, és hogyan ismeri fel a hamis webcímet.
Tudom, hogy…
Pipáld ki gondolatban! Ahol bizonytalan vagy, ott a zárójelben lévő lecke segít.
- …mi a böngésző és a szerver feladata, és mi a DNS szerepe. (0.1)
- …egy weboldal sok külön kérésből érkezik, és ezt a fejlesztői eszközökben meg is tudom nézni. (0.1)
- …mit jelent a 404-es és az 500-as hiba. (0.1)
- …meg tudom nevezni egy webcím részeit. (0.2)
- …a https mit garantál, és mit nem. (0.2)
- …felismerem a hamis webcímeket. (0.2)
- …melyik nyelv mit csinál: HTML, CSS, JavaScript. (0.3)
Tanároknak
Mire jó a gyorsítópálya?
Differenciálásra (a gyorsabban haladók egy óra alatt átveszik a modult), ismétlésre, dolgozat előtti összefoglalásra és érettségi-felkészítésre. A záróprojekt új helyzetben, magyarázó feladatként kéri a tudást: aki el tudja magyarázni egy kisebbnek, az érti is.
Időterv (45 perc)
Puska és villámkérdések: 12 perc. Gyorsfeladatok: 15 perc. Záróprojekt megtervezése: 18 perc (befejezés otthon vagy a következő órán).
Értékelés
A „Tudom, hogy…” lista önértékelésre, az infografika a „Kész vagy, ha…” szempontja szerint, akár egy alsóbb évfolyamos „tesztolvasóval” értékelhető.