Kódolj velünk!2021.02.05.|By andi Kérjük add meg email címedet, ahová az eredményedet küldhetjük! HTML | step 1 HTML alapok 1. FELADAT: A HTML vázad ún. elemekből fog állni. A tag-ek nyitó és záró elemből állnak. Az első feladatban a tag szerepel, ami a vázad főcímét jelöli.Feladat:Először nyomd meg a RESULT gombot, így láthatod a kódod Frontend oldali megjelenését.Írd át a "Hello World!" szöveget pl. erre: "Első weboldalam!". (A bal oldali mezőben a kódot, a jobb oldaliban a Frontend oldali megjelenést láthatod.) [codepen_embed height=300 theme_id=1 slug_hash='OJbMqLG' user='progmatic' default_tab='html' animations='run'] [/codepen_embed] HTML | step 2 HTML alapok 2. FELADAT: A második feladatban a tag szerepel, amivel a vázad bekezdésit kódolhatod le.Feladat:Először nyomd meg a RESULT gombot.Írd át a tagek közötti "Bekezdés" szöveget pl. erre: "Hurrá, kódolok!". (A bal oldali mezőben a kódot, a jobb oldaliban a Frontend oldali megjelenést láthatod.) [codepen_embed height=300 theme_id=1 slug_hash='BaQjMPM' user='progmatic' default_tab='html' animations='run'] [/codepen_embed] HTML | step 3 HTML alapok 3. FELADAT: A harmadik feladatban megtanulunk hivatkozást létrehozni. A hivatkozás tag eleme az . Az tag-be href="" jelöléssel tudjuk megadni, hova vezessen a linkünk. Az alábbi módon kódoljuk:HIVATKOZÁS Feladat:Először nyomd meg a RESULT gombot.Írd át aZ tagek közötti "HIVATKOZÁS" szöveget pl. erre: "LINK". (A bal oldali mezőben a kódot, a jobb oldaliban a Frontend oldali megjelenést láthatod.) [codepen_embed height=300 theme_id=1 slug_hash='poNybzj' user='progmatic' default_tab='html' animations='run'] [/codepen_embed] CSS | step 4 CSS alapok 4. FELADAT: A negyedik feladatban megismerkedünk a CSS-sel. A CSS az angol „cascading style sheets” kifejezés rövidítése, ami magyarul „egymásba ágyazott stíluslapokat” jelent. A CSS fájlunkba a HTML elemet adjuk meg, amit formázni szeretnénk.Az alábbi módon kódoljuk:h1{}Feladat:Először nyomd meg a RESULT gombot. Kattints a CSS fülre, hogy lásd a kódot.Írd át az a{} elem background-color egyik 0-ás értékét 200-ra:(A bal oldali mezőben a kódot, a jobb oldaliban a Frontend oldali megjelenést láthatod.) [codepen_embed height=300 theme_id=1 slug_hash='gOLrMbq' user='progmatic' default_tab='html' animations='run'] [/codepen_embed] CSS | step 5 CSS alapok 5. FELADAT: Az ötödik feladatban a gombunk hover színén változtatunk. Az a:hover azt jelöli, amikor a hivatkozásunk, vagy gombunk színe az egér fölévitelével megváltozik.Az alábbi módon kódoljuk:a:hover{}Feladat:Először nyomd meg a RESULT gombot. Kattints a CSS fülre, hogy lásd a kódot.Írd át az a:hover{} elem background-color 200-as értékét 0-ra:(A bal oldali mezőben a kódot, a jobb oldaliban a Frontend oldali megjelenést láthatod.) [codepen_embed height=300 theme_id=1 slug_hash='OJbNXbe' user='progmatic' default_tab='html' animations='run'] [/codepen_embed] Time is Up! Time's up ElőzőKövetkező
