HTML alapok › 8. modul: Ellenőrzés és közzététel › Gyorsítópálya
🚀 HTML alapok · 8. modul · Gyorsítópálya
Ellenőrzés és közzététel – gyorsítópálya
A 8. modul teljes tudása egyetlen leckében: validálás, fejlesztői eszközök, akadálymentességi ellenőrzés és a webhely közzététele. A végén a saját oldalad élesbe kerül, egy minőségi jelentéssel együtt.
Mikor válaszd?
- ha gyorsan haladsz, és egy-két ó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
8.1 A W3C-validátor →
8.2 A fejlesztői eszközök →
8.3 Akadálymentesség ellenőrzése →
8.4 A webhely közzététele →
Puska: a minőségbiztosítás négy lépése
| Lépés | Eszköz | Lényeg |
|---|---|---|
| 1. Szabályos kód | validator.w3.org | Error: szabálysértés, Warning: gyanús. Mindig az első hibát javítsd! |
| 2. Hibakeresés | Fejlesztői eszközök (F12) | Elemek: DOM-fa; Konzol és Hálózat: 404-es fájlok; Ctrl + Shift + M: mobilnézet; Lighthouse: pontszámok. |
| 3. Mindenkinek | Gyorsteszt, WAVE | Tab, 200% nagyítás, alt, címsorok, felolvasó, kontraszt (4,5:1). A gép a hibák csak egy részét látja! |
| 4. Élesítés | GitHub Pages, Netlify | index.html a gyökérben, kisbetűs fájlnevek, relatív linkek, nincs személyes adat; utána teszt élesben. |
Villámkérdések
Előbb gondold végig a választ, csak utána nyisd ki!
Mit jelent a „Stray end tag” üzenet?
Pár nélküli, fölösleges záró címkét.
Melyik fülön látod, hogy nem töltődött be egy kép?
A Konzolon vagy a Hálózat fülön (404).
Miért nem bizonyíték egy képernyőkép?
Mert a fejlesztői eszközökkel bárki átírhatja az oldal szövegét a saját gépén.
Mi a WCAG négy alapelve?
Észlelhető, működtethető, érthető, robusztus.
Miért kap 404-et, aki a teljes mappát tölti fel GitHub Pages-re?
Mert az index.html egy almappába kerül a gyökér helyett.
Gyorsfeladat: tünet és eszköz
Melyik eszközt veszed elő?
a) „Az oldal telefonon apró.” b) „A felolvasó csak annyit mond: kép, kép.” c) „Nem tudom, szabályos-e a kódom.” d) „A barátom nem éri el az oldalamat.” e) „Lassan töltődik be az oldal.”
Megoldás
a) mobilnézet (Ctrl + Shift + M), viewport ellenőrzése; b) WAVE vagy gyorsteszt: hiányzó vagy rossz alt; c) W3C-validátor; d) a közzététel még nem történt meg, vagy rossz a cím, vagy almappában van az index.html; e) Lighthouse Performance és Hálózat fül: túl nagy képek.
Záróprojekt: élesítés és minőségi jelentés
Ez a HTML-tanfolyam záróprojektje: a saját oldaladat közzéteszed, és egy rövid minőségi jelentést írsz róla (akár egy külön oldalon a webhelyeden).
- Link: a közzétett webhely címe.
- Validátor: az eredmény (cél: nincs hiba).
- Lighthouse: a négy pontszám, és két javítás, amit ezek alapján elvégeztél.
- Akadálymentesség: az 5 perces gyorsteszt eredménye pontokba szedve.
- Társértékelés: egy társad két csillaga és egy kívánsága, és hogyan valósítottad meg a kívánságot.
Kész vagy, ha…
…a webhelyed élesben, https-sel működik, a validátor hibátlan, a jelentésed minden pontja kész, és nincs az oldalon személyes adat. Gratulálunk, elvégezted a HTML-tanfolyamot! 🎉
Tudom, hogy…
Pipáld ki gondolatban! Ahol bizonytalan vagy, ott a zárójelben lévő lecke segít.
- …hogyan validálom az oldalamat, és hogyan értelmezem a hibaüzeneteket. (8.1)
- …hogyan keresek hibát a fejlesztői eszközökkel, és miért nem bizonyíték a képernyőkép. (8.2)
- …kinek fontos az akadálymentesség, és hogyan ellenőrzöm 5 perc alatt. (8.3)
- …hogyan teszem közzé a webhelyemet biztonságosan és felelősen. (8.4)
Tanároknak
Mire jó a gyorsítópálya?
Differenciálásra, ismétlésre és érettségi-felkészítésre. A záróprojekt a teljes HTML-tanfolyam szummatív projektje: a közzétett webhely és a minőségi jelentés együtt mutatja a technikai, az akadálymentességi és a felelős közzétételi kompetenciákat.
Időterv
Puska és villámkérdések: 12 perc. Gyorsfeladat: 8 perc. Záróprojekt: 1–2 tanóra (közzététel, mérés, jelentés, társértékelés).
Értékelés
A minőségi jelentés pontjai egyben értékelési szempontok is: működő link, hibátlan validálás, elvégzett javítások, gyorsteszt, társértékelés és megvalósított kívánság.