HTML alapok › 0. modul: Hogyan működik a web? › 0.1 lecke
HTML alapok · 0.1 lecke
Böngésző és szerver: mi történik egy kattintás után?
Beírsz egy webcímet, és egy pillanat múlva ott a weboldal. De honnan jön? Ebben a leckében végigkövetjük egy weboldal útját a szervertől a képernyődig, és kiderül, miért áll egy oldal sokszor több tucat fájlból.
A lecke végére
- megmagyarázod, mi a böngésző és mi a szerver feladata;
- sorrendbe teszed, mi történik a webcím beírásától az oldal megjelenéséig;
- megérted a kérés és a válasz fogalmát;
- felismered a leggyakoribb hibaüzeneteket (404, 500);
- a böngésző fejlesztői eszközeivel megnézed, hány fájlból áll egy weboldal.
Mielőtt elkezded
Ehhez a leckéhez nem kell előzetes tudás, csak egy számítógép böngészővel. Ez a HTML-tanfolyam kiindulópontja.
A szereplők: böngésző és szerver
Képzelj el egy éttermet. Te vagy a vendég, aki rendel. A pincér viszi a rendelést a konyhára, a konyha elkészíti az ételt, a pincér pedig kihozza. A weben ugyanez történik:
A gépeden futó program (Chrome, Firefox, Edge, Safari), ami „rendel”, vagyis kér egy oldalt, és megjeleníti.
A hálózat, ami a kérést elviszi, és a választ visszahozza.
Egy mindig bekapcsolt számítógép valahol a világban, ahol a weboldal fájljai vannak, és amely „kiszolgálja” a kéréseket.
Jósold meg!
Ha a konyha bezár, a vendég nem kap ételt. Mi történik a weben, ha egy szerver kikapcsol? Írd le egy mondatban!
Egy weboldal útja lépésről lépésre
Amikor beírod a böngészőbe, hogy www.digitalisfelfedezok.hu, és megnyomod az Entert, ez történik, általában egy másodpercen belül:
- Címkeresés. A böngésző megkérdezi a névszervert (DNS): melyik számítógépen van ez a webhely? A válasz egy számsor, az IP-cím. Olyan, mint egy telefonkönyv: névből számot csinál.
- Kérés. A böngésző elküldi a kérést a szervernek: „Kérem a főoldalt!”
- Válasz. A szerver visszaküldi az oldal HTML-fájlját.
- További kérések. A böngésző elolvassa a HTML-t, és látja, hogy kell még egy stíluslap, néhány kép és egy szkript. Ezeket is egyenként elkéri.
- Megjelenítés. Amikor minden megérkezett, a böngésző összerakja és megrajzolja az oldalt.
A jóslás megoldása: mi történik, ha a szerver kikapcsol?
A kérésre nem érkezik válasz, ezért a böngésző egy idő után hibaüzenetet ír ki (például „Ez a webhely nem érhető el”). Ezért a nagy webhelyek több szervert is használnak egyszerre.
Csomagokban utazik
Az adatok nem egy darabban utaznak, hanem kis csomagokra bontva, és a célnál állnak újra össze. Ha egy csomag elveszik, a gépek újrakérik. Erről a code.org internetes óráin is sokat megtudhatsz.
Játsszátok el: az emberi web
Gép nélküli szerepjáték 5–6 fős csoportokban. Kell hozzá néhány papírlap és egy toll.
Csináld meg!
Játsszátok el egy oldal betöltését! A HTML-lapon legyen felírva, milyen további darabok kellenek (például „kép: macska.png”). A böngésző csak akkor rajzolhatja meg az oldalt, ha minden darab megérkezett. Mérjétek az időt: hány kör kellett?
Mit tanulhattatok a játékból?
Hogy az oldal nem egyszerre, hanem sok külön kérésben érkezik, és minél több a darab, annál tovább tart a betöltés. Ezért figyelnek a webfejlesztők arra, hogy ne legyen fölöslegesen sok vagy nagy fájl.
Nézz be a színfalak mögé: sok kis fájl
A böngésző fejlesztői eszközeivel meg tudod nézni, hány fájlt kért le egy oldal. Ez egy igazi webfejlesztői eszköz, de nyugodtan kipróbálhatod.
- Nyiss meg egy weboldalt (például a Digitális felfedezők főoldalát).
- Nyomd meg az F12 billentyűt, és válaszd a Network (Hálózat) fület.
- Frissítsd az oldalt az F5 billentyűvel, és figyeld, ahogy a lista feltöltődik.
- Alul olvasd le, hány kérés (requests) történt, és mekkora volt az adatmennyiség.
Jósold meg!
Szerinted hány fájlból áll egy átlagos hírportál főoldala? Tippelj, aztán nézz meg egyet!
Megoldás
A nagy hírportálok főoldala gyakran több száz kérésből áll: képek, stíluslapok, szkriptek, betűtípusok, reklámok. Egy egyszerű, saját weboldal ezzel szemben néhány fájlból is kijön.
Hibaüzenetek: amit a szerver üzen
A szerver minden válaszhoz egy háromjegyű állapotkódot is küld. Általában nem látod, de hiba esetén igen:
| Kód | Jelentés | Mit tehetsz? |
|---|---|---|
| 200 | Minden rendben, itt az oldal. | Semmit, ez a jó eset. |
| 404 | Nincs ilyen oldal (a fájl nem található). | Ellenőrizd a webcímet, elírás lehet benne. |
| 403 | Az oldal létezik, de nincs jogod megnézni. | Lehet, hogy be kell jelentkezni. |
| 500 | Hiba történt a szerveren. | Nem a te hibád: próbáld újra később. |
Jegyezd meg
A 4-essel kezdődő kódok általában a kérés hibái (például rossz cím), az 5-össel kezdődők a szerver hibái.
Projekt: egy weboldal útja
Készíts rajzos folyamatábrát vagy rövid képregényt arról, mi történik, amikor beírsz egy webcímet és megnyomod az Entert. Legyen benne a böngésző, a DNS, a szerver, a kérés és a válasz.
- Használd a lecke szavait: böngésző, szerver, kérés, válasz, IP-cím.
- Jelöld, hogy a böngésző több kérést is küld (HTML, stíluslap, képek).
- Rajzolj egy 404-es hibát is: mikor és miért történik?
Kész vagy, ha…
…a folyamatábrád alapján egy társad, aki nem olvasta a leckét, el tudja mondani, honnan jön egy weboldal.
Ellenőrizd magad!
Mi a böngésző és mi a szerver feladata?
A böngésző kéri és megjeleníti az oldalt, a szerver tárolja a fájlokat és kiszolgálja a kéréseket.
Mire jó a DNS?
A webcímből (névből) megkeresi az IP-címet (számot), mint egy telefonkönyv.
Miért küld a böngésző több kérést egyetlen oldalért?
Mert az oldal több fájlból áll: a HTML mellett stíluslapokból, képekből, szkriptekből.
Mit jelent a 404-es hiba?
Hogy a kért oldal vagy fájl nem található a szerveren.
Tanároknak
Kerettantervi kapcsolódás
NAT 2020, Digitális kultúra, 9. évfolyam, Publikálás a világhálón: a böngészőprogram és a weblap működése; kapcsolódik az információs társadalom és a digitális eszközök (hálózat, felhő) témaköreihez is.
Módszertan
A lecke az étterem-analógiából indul, a szerepjáték a CS Unplugged és a code.org CS Principles internetes óráinak szemléletét követi: a diákok megtapasztalják, hogy az oldal több kérésből, darabokban érkezik. A fejlesztői eszközök Network fülének megnyitása valódi, szakmai eszközhasználat.
Időterv
Szereplők és az oldal útja: 12 perc. Szerepjáték: 15 perc. Fejlesztői eszközök: 8 perc. Hibaüzenetek és összegzés: 10 perc. A projekt otthoni vagy következő órai feladat.
Differenciálás
A gyorsabban haladók utánanézhetnek, mi a különbség a http és a https között, ami a 0.2 leckét készíti elő.