Publikálás a világhálón
A diákok megismerik a weboldalak felépítését: HTML-lel szerkezetet, CSS-sel megjelenést adnak, megértik, miért kell a tartalmat és a stílust szétválasztani, és több oldalból álló webhelyet készítenek és publikálnak. A témakörhöz javasolt óraterv, ötletláda és tanári tippek tartoznak.
Az első címkétől a saját webhelyig
A témakör a HTML-dokumentum szerkezetétől indul, a CSS-stíluslapokon át eljut egy több oldalból álló, publikált webhelyig.
HTML-szerkezet
Címsorok, bekezdések, felsorolások, képek, hivatkozások, táblázat.
CSS-stílusok
Stíluslap csatolása, szín, háttér, szövegformázás, stíluslap cseréje.
Publikálás
Többoldalas webhely, fájlformátumok, a publikálás szabályai.
Mit tanulnak ebben a témakörben?
A kerettanterv a 9. évfolyamon a webes publikálás alapjait teszi le: a diákok értsék a HTML-dokumentum szerkezetét és a CSS alapelveit. A 10. évfolyamon ehhez tartalomkezelő rendszer és összetettebb webhely kapcsolódik.
Ismeri a HTML formátumú dokumentumok szerkezeti elemeit.
Weblapot készít címsorokkal, bekezdésekkel, felsorolásokkal, képekkel, hivatkozásokkal és táblázattal.
Érti a CSS alapelveit és a tartalom és a stílus szétválasztásának jelentőségét.
Stíluslapot csatol a weblaphoz, és a stílusok cseréjével módosítja a megjelenést.
Több lapból álló webhelyet készít, a lapokat hivatkozásokkal köti össze.
Tudja, milyen szöveges és képi tartalom publikálható, és betartja a szerzői jogokat.
Ha hat tanórád van a témakörre
Ez a javasolt sorrend a NAT 2020 kerettantervének és a 9–10. évfolyamos mintatantervnek a fejlesztési feladataira épül, saját óravázlatokhoz. Az órák önállóan is használhatók, és az ötletláda ötleteivel helyettesíthetők.
- A weblap szerkezeteBöngésző, HTML-dokumentum, fej és törzs, címsorok, bekezdések.📘 NKP – hivatalos tananyagNKP 9. – tankönyvi tartalomjegyzék (válaszd ki a témát) ↗💻 Digitális Felfedezők – kapcsolódó HTML-leckékBöngésző és szerver →Első HTML-fájl →DOCTYPE és nyelv →A head szerepe →A body szerepe →
- Tartalmi elemekFelsorolás, kép, hivatkozás, táblázat.📘 NKP – hivatalos tananyagNKP 9. – tankönyvi tartalomjegyzék (válaszd ki a témát) ↗💻 Digitális Felfedezők – kapcsolódó HTML-leckékCímsorok →Bekezdések →Listák →Hivatkozások →Képek →Táblázatok →
- CSS alapjaiStíluslap csatolása, szín, háttér, betűformázás.📘 NKP – hivatalos tananyagNKP 9. – tankönyvi tartalomjegyzék (válaszd ki a témát) ↗💻 Digitális Felfedezők – kapcsolódó HTML-leckékHTML és CSS kapcsolata →
- Stílusok alkalmazásaOsztályok, elrendezés, a stíluslap cseréje.📘 NKP – hivatalos tananyagNKP 9. – tankönyvi tartalomjegyzék (válaszd ki a témát) ↗💻 Digitális Felfedezők – kapcsolódó HTML-leckékHTML, CSS és JavaScript szerepe →
- Többoldalas webhelyOldalak összekapcsolása, egységes megjelenés.📘 NKP – hivatalos tananyagNKP 9. – tankönyvi tartalomjegyzék (válaszd ki a témát) ↗
- PublikálásTartalom előkészítése, fájlformátumok, publikálás és szabályai.📘 NKP – hivatalos tananyagNKP 9. – tankönyvi tartalomjegyzék (válaszd ki a témát) ↗
Weboldaltervezés számítógép nélkül
45 perc játékos tervezés, címkekirakó és közös hibakeresés.
Weboldal papíron
Rajzoljatok osztályhonlapot fejléccel, menüvel és tartalommal!
10 percHTML-kártyák
Rendezzétek sorrendbe a nyitó és záró címkéket!
15 percLinknyomozás
Keressétek a hiányzó hivatkozásokat papírlapok között!
10 percKilépőkártya
Írjatok egy szabályt, egy kijavított hibát és egy kérdést!
10 perc
További óravázlatok a témakörhöz
A témakörhöz kapcsolódó, már elkészült óravázlatok. Szabadon beilleszthetők a javasolt sorrendbe, vagy kiválthatnak egy órát.
További ötletek a témakörhöz
Rövid, kipróbálható tevékenységek, amelyekkel egy órát kiválthatsz vagy kiegészíthetsz. Mindegyiknél jelöltük, melyik órához illik a legjobban.
A weboldal csontváza
Kinyomtatott weboldalon a diákok bekeretezik és felcímkézik az elemeket (címsor, bekezdés, lista, kép, link). Utána megnézik ugyanezt a böngésző fejlesztői eszközével.
1. óra · elemzésEgy tartalom, három ruha
Ugyanaz a HTML-oldal három különböző stíluslappal. Így a diákok maguk tapasztalják meg, miért jó a tartalom és a stílus szétválasztása.
4. óra · CSSReceptoldal
Kedvenc recept weboldalként: hozzávalók felsorolásban, lépések számozott listában, kép, és egy táblázat a tápértékről.
2. óra · tartalmi elemekTörött link nyomozás
Egy többoldalas mintawebhelyen öt hivatkozás hibás. Ki találja meg és javítja ki mindet leghamarabb? Relatív és abszolút útvonalak.
5. óra · hibakeresésOsztályunk webhelye
Csoportmunkában háromoldalas webhely az osztályról (bemutatkozás, programok, galéria), közös stíluslappal. Emberekről csak hozzájárulással kerülhet fel kép.
5–6. óra · projektAkadálymentes-e?
A diákok ellenőrzik a saját oldalukat: van-e alternatív szöveg a képeken, jó-e a kontraszt, logikus-e a címsorok sorrendje?
6. óra · akadálymentesség
Tantárgyi kapcsolódások
Hamarosan
Így lesz mindenkié az óra
Kódolás előbb, szerkesztő utána
Érdemes egyszerű szövegszerkesztőben kezdeni, hogy a diákok lássák a kódot. A vizuális szerkesztők és tartalomkezelők a 10. évfolyamon kerülnek elő.
Differenciálás
Kész HTML-váz a segítséget igénylőknek, akik csak a tartalmat és a stílusokat töltik ki. A gyorsabban haladók reszponzív elrendezéssel kísérletezhetnek.
Publikálás felelősen
A nyilvánosságra kerülő oldalakon ne legyen személyes adat, és csak jogtiszta kép, szöveg kerüljön fel. Az iskolai publikálás szabályait előre egyeztesd.
Kerettantervi kapcsolódás és hivatalos források
A témakör a NAT 2020 Digitális kultúra kerettantervének 9. évfolyamos tanulási eredményeire és fejlesztési feladataira épül, nem egy adott tankönyv leckéire. A kerettanterv fő fogalmai:
- böngészőprogram, a weblap részei és szerkezete
- címsorok, bekezdések, felsorolások, táblázat, link, kép
- stílusok, stíluslap, szín és háttér, szövegformázás
- publikálás, fájlformátumok, szerzői jog
Kerettantervi témakör: Publikálás a világhálón (6 óra a 9. évfolyamon). A kerettanterv a 10. évfolyamra további 8 órát ad, ahol a tartalomkezelő rendszer és az összetett webhely következik.