HTML alapok › 8. modul: Ellenőrzés és közzététel › 8.4 lecke
HTML alapok · 8.4 lecke
A webhely közzététele: élesben a saját oldalad
Eddig a weboldalad csak a te gépeden létezett. Ebben a leckében felteszed az internetre, hogy egy linkkel bárki megnyithassa: a barátaid, a családod, vagy egyszer akár egy leendő munkahelyed is. Előtte persze még egyszer mindent ellenőrzünk.
A lecke végére
- megérted, mi a tárhely és a webcím szerepe a közzétételben;
- egy ellenőrző listával felkészíted a webhelyed;
- közzéteszed a webhelyed (például GitHub Pages-en);
- tudod, mire figyelj az adatvédelem és a biztonság terén.
Mielőtt elkezded
Szükséged lesz egy kész, ellenőrzött webhelyre.
0.1 Böngésző és szerver →
8.1 A W3C-validátor →
8.3 Akadálymentesség →
Mi kell a közzétételhez?
Emlékszel a 0.1 leckére? A weboldal fájljainak egy mindig bekapcsolt szerveren kell lenniük. Ehhez két dolog kell:
felhasznalonev.github.io). Saját domainnév (például .hu végződésű) pénzbe kerül, és regisztrálni kell.Ellenőrző lista közzététel előtt
- A főoldal neve
index.html, és a mappa „gyökerében” van. (1.2) - Minden fájlnév csupa kisbetű, ékezet és szóköz nélküli. (1.2)
- Minden link és kép relatív útvonallal, sima perjellel hivatkozik. (3.1, 3.2)
- A validátor nem talál hibát. (8.1)
- Az 5 perces akadálymentességi teszt rendben van. (8.3)
- A képek kicsinyítve, és mindegyik saját, közkincs vagy jogtiszta, forrásmegjelöléssel. (4.1, 4.3)
- Nincs az oldalon személyes adat: lakcím, telefonszám, iskolai osztály, mások fotója engedély nélkül.
Amit egyszer közzétettél…
…azt mások letölthetik, lementhetik, és a keresők, archívumok még a törlés után is őrizhetik. Ezért közzététel előtt gondold végig: vállalnád-e ezt a tartalmat öt év múlva is?
Hová tegyem fel?
| Lehetőség | Előny | Tudnivaló |
|---|---|---|
| GitHub Pages | Ingyenes, stabil, a programozók világszerte ezt használják; a projekted egyben a portfóliód része lehet. | GitHub-fiók kell, amely 13 éves kortól hozható létre. A tároló (repository) nyilvános. |
| Netlify Drop | A mappát egyszerűen ráhúzod a weboldalra, és pár másodperc múlva él. | Fiók nélkül csak ideiglenes; a megtartáshoz ingyenes fiók kell. |
| Iskolai szerver | Ha az iskolának van, a tanár segítségével FTP-vel tölthetsz fel. | Kérdezd meg a tanárodat. |
Korhatár és hozzájárulás
Sok online szolgáltatásnál a regisztrációhoz életkori feltétel van, és Magyarországon 16 év alatt bizonyos esetekben szülői hozzájárulás is kellhet. Iskolai projektnél kérd a tanárod segítségét, aki akár egy közös osztályfiókkal is megoldhatja a közzétételt.
Lépésről lépésre: GitHub Pages
- Jelentkezz be a github.com oldalon, és hozz létre egy új tárolót: New repository. Adj neki beszédes, kisbetűs nevet (például
sajat-oldal), legyen Public. - A tároló oldalán válaszd: Add file → Upload files, és húzd rá a saját oldalad mappájának tartalmát (az index.html legyen legfelül, ne egy almappában!). Kattints a Commit changes gombra.
- Nyisd meg: Settings → Pages. A Build and deployment résznél a forrás legyen Deploy from a branch, az ág main, a mappa / (root). Mentsd el.
- Pár perc múlva megjelenik a webhelyed címe, ilyen formában:
https://felhasznalonev.github.io/sajat-oldal/ - Ha módosítasz valamit, töltsd fel újra a fájlt: a webhely pár perc alatt frissül.
Jósold meg!
Egy diák a teljes sajat-oldal mappát töltötte fel, nem a tartalmát. A címen 404-es hibát kap. Miért?
Megoldás
Mert így az index.html egy almappába került (sajat-oldal/sajat-oldal/index.html), a szerver pedig a gyökérben keresi (1.2 lecke). A cím végére írva a mappa nevét megnyílna, de egyszerűbb a fájlokat a gyökérbe tenni.
Közzététel után
Kihívás: két csillag, egy kívánság
Cseréljetek linket egy társaddal. Nézzétek meg egymás közzétett oldalát gépen és telefonon is, és írjatok egymásnak visszajelzést: két dolgot, ami nagyon jól sikerült (két csillag ⭐⭐), és egy dolgot, amit még fejlesztenél (egy kívánság ✨). Legyetek konkrétak és kedvesek!
Projekt: élesben a saját oldalad!
A tanfolyam során épített saját oldaladat most közzéteszed.
- Menj végig az ellenőrző listán, és javíts, ahol kell.
- Tedd közzé a webhelyed (GitHub Pages, Netlify vagy iskolai szerver).
- Teszteld élesben gépen és telefonon, validáld a webcímével, és futtass Lighthouse-t.
- Kérj „két csillag, egy kívánság” visszajelzést egy társadtól, és valósítsd meg a kívánságot.
Kész vagy, ha…
…a webhelyed egy linkkel bárhonnan elérhető, https-sel működik, a validátor nem talál hibát, és nincs rajta semmilyen személyes adat. Gratulálunk: ez már egy igazi, élő weboldal! 🎉
Ellenőrizd magad!
Mi kell egy weboldal közzétételéhez?
Tárhely egy szerveren és egy webcím.
Miért kap 404-et, aki a teljes mappát tölti fel?
Mert az index.html almappába kerül, a szerver pedig a gyökérben keresi.
Mit ne tegyél ki a webhelyedre?
Személyes adatot (lakcím, telefonszám), mások fotóját engedély nélkül, és nem jogtiszta képet.
Mi a „két csillag, egy kívánság”?
Egy visszajelzési módszer: két dolog, ami jól sikerült, és egy fejlesztési javaslat.
Tanároknak
Kerettantervi kapcsolódás
NAT 2020, Digitális kultúra, 9. évfolyam, Publikálás a világhálón: a webhely publikálása; Az információs társadalom, e-Világ: adatvédelem, digitális lábnyom, felelős közzététel.
Szervezési javaslat
A GitHub felhasználási feltételei szerint a fiók 13 éves kortól hozható létre. Ha a diákok nem regisztrálnak, a tanár egy közös (osztály- vagy iskolai) fiókkal vagy az iskolai szerverrel is megoldhatja a közzétételt. A közzétett tartalmat érdemes tanári ellenőrzés után élesíteni.
Módszertan
A lecke a teljes tanfolyam lezárása: a 0.1-es leckében megismert szerver–böngésző modell itt válik a diák saját élményévé. A „két csillag, egy kívánság” bevett formatív értékelési technika, amely konstruktív társértékelést tanít.
Időterv
Mi kell hozzá?: 5 perc. Ellenőrző lista: 10 perc. Hová tegyem?: 5 perc. GitHub Pages: 15–30 perc. Közzététel után és társértékelés: 10–30 perc. Két tanórára is bontható.