Informatika tanulás - Újlak 2018/19 - 5-6. osztály

7-8. osztályIskola honlapjaDigitális témahetekSegédletElérhetőség

ÉVVÉGI_DOGA

Animáció a weboldalon
A html kódba animációt beilleszteni többféleképpen lehet. Eredetileg vagy külső file-t használtak (gif, flash) vagy a JavaScriptben rejlő programozási lehetőségeket használták. Később a CSS-be is beépítésre került a @keyframes, ami from - to szerkezetben a html elemeket vagy tulajdonságaikat változtatva mozgással vagy színátmenetekkel épít föl animációs hatásokat.
Erre készítettünk példát:

A <div> elem háttérszínét (background-color) változtatja meg ez a keyframes 5 másodpercenként, és az animáció folyamatos (infinite).
Linkek
A html kódban linkeket, hivatkozásokat hozhatunk létre.

Képlink
- Kacsacsőrben img src="" formulát használjuk, ahol a kép elérése (képcím linkje) az idézőjelek közé kerül.
Képmanipulációk:
- méret (width százalékban vagy pixelben)
- filterek (style-ban filter: 8 féle, pl. grayscale, blur)

Link egy másik html file-ra
Egy másik html file-ra linket a href paranccsal adunk meg kacsacsőrök között. Ha helyileg nem ugyanazon a mappán belül van a linkelt file, akkor a http:// formulát használjuk.

Font vagyis betűlink
A html kódot olvasó böngészők szabványosítva (egységesen) mintegy 15 betűtípust "ismernek". Betűket, font-family-ket ugyanakkor külső szerverről szintén linkelhetünk. A legáltalánosabb lehetőség a Google Font szervere. Google Fontok

A fontra való linket a headben kell elhelyezni a html kódban, ahogy a Google oldal meg is mondja, miután kiválasztottuk a szimpatikus betűtípust: tehát előbb a fenti szürke hátteres linket kell bemásolni a head részbe, utána a style-ban pedig meg lehet már adni a használandó font családot, amit az alsó szürke sáv mutat CSS megjelöléssel.. A betűmintákat rögtön látjuk a Google oldalán:




Az iframe
A linkelt html file-t úgynevezett iframe-be is behívhatjuk, ilyenkor a mi weboldalunkon belül egy ablakban fog megjelenni, ennek méreteit úgy szélesség, mint magasság, megadhatjuk.

Példa: az iskola weboldala iframe-ben

RGB véletlenszínek


A html kódon belül szkripttel előállítottunk egy véletlen RGB értéket, amit a gomb lenyomásával háttérnek állítunk be. Minden egyes gomblenyomásnál új háttérszín keletkezik.
Színkódok
A html színkódok, ahogy minden informatikai színkód, alapvetően 3 adatból áll, a piros-zöld-kék (angolul: RGB - red, green, blue) összetevőből. Minden elérhető szín, ennek a három "tiszta" színnek a keveréséből jön létre a szemünk számára, ami azt jelenti, hogy egy képpont színét ennek a három értéknek a beállításával jeleníti meg a számítógép - vagyis az abban külön egységként is működő videokártya.

Ebből az is következik, hogy egyrészt logikai úton, másrészt a w3schools Color Pickerére kattintva színbeállításokat tudunk meghatározni.
Értelemszerűen van 5 szín, amit kapásból meg tudunk mondani:
Piros: R - 255, G - 0, B - 0.
Zöld: R - 0, G - 255, B -0.
Kék: R - 0, G - 0, B - 255.
Fehér: R - 255, B - 255, G - 255. (Teljes fény!)
Fekete: R - 0, B - 0, G - 0. (Teljes kikapcs!)


Banner hirdetés
Boldog Karácsonyt!
Az SVG-ben való rajzolás a W3schools online felületén különleges alkotásokra is lehetőséget ad.
Vízszintes téglalapban úgynevezett banner hirdetést készítünk. Először az üdvözlő szöveget alkotjuk meg text parancsok között, annak a színét, betűméretét, és elhelyezkedését is beállítjuk. Új alakzatunk a polygon, amelynek a pontjait kell úgy megadni, hogy az x, y értéket vesszővel, a pontokat szóközzel elválasztva rögzítjük. A körök méretet és elhelyezkedést is meg kell adnunk: cx és cy valamint a sugár méretét, természetesen mindent pixelben. A színt a fill parancs adja.
A w3schools color pickerére kattintva a baloldali sávban találunk color groups menüben összeállított színcsoportokat névvel, amit használhatunk.



Adattárolás

Adattárolók és működésük
Tovább >>

Hogyan működik?

A számítógép részei
Tovább >>