Weblap készítés vizsga

Weblap készítés vizsga

A weboldalak építőkövei a HTML (tartalom), a CSS (megjelenés) és a JavaScript (viselkedés). Ezen a vizsgán mindhárom területet teszteljük.

Fontos fogalmak

Egy weboldal lehet statikus vagy dinamikus. A víz képlete H2O, míg Einstein híres egyenlete E=mc2 (itt egy hiba van a formázásban).

Lista a technológiákról

Népszerű keretrendszerek

  1. React
  2. Vue
  3. Angular

Egy egyszerű táblázat

Nyelv Szerep
HTML Struktúra
CSS Stílus

Kereső megnyitása

Ez a doboz jelenleg látható, de a CSS segítségével eltüntethető.

Változó színű doboz




Vizsgafeladatok

Csak azokat a sorszámú feladatokat oldd meg, amiket a tanártól kaptál!

  1. Módosítsd az oldal böngészőfülön megjelenő címét a saját teljes nevedre!
  2. Változtasd meg a teljes weboldal háttérszínét #e6f2ff színkódúra a stíluslap (CSS) segítségével!
  3. Igazítsd vízszintesen középre a weblap főcímét („Weblap készítés vizsga”) a megfelelő CSS szelektor használatával!
  4. Formázd meg úgy az összes alcímet, hogy a szövegük aláhúzott legyen!
  5. Tedd félkövérré a „JavaScript” szót az első bekezdésben a hozzárendelt CSS osztály módosításával!
  6. Javítsd a hibát az Einstein-képletben! A kettest alsó index helyett felső indexként (hatványként) jelenítsd meg!
  7. A „Lista a technológiákról” alatti lista elemei előtt ne körök, hanem négyzetek jelenjenek meg (CSS segítségével oldd meg)!
  8. A „Népszerű keretrendszerek” listájának számozását alakítsd át úgy, hogy arab számok helyett nagybetűkkel (A, B, C) történjen a felsorolás!
  9. Tedd vastagabbá (3 pixel vastagra) a táblázat összes cellájának és magának a táblázatnak a külső szegélyét!
  10. A táblázat fejlécében szereplő szavakat („Nyelv” és „Szerep”) alakítsd csupa nagybetűssé magában a HTML kódban!
  11. A „Kereső megnyitása” link ne a Google-re, hanem a magyar Wikipédiára (https://hu.wikipedia.org) mutasson!
  12. Érd el, hogy a fenti (Wikipédiára mutató) hivatkozásra kattintva az oldal egy új, üres böngészőlapon nyíljon meg!
  13. A piros keretes dobozt (ami a szövege szerint jelenleg látható) rejtsd el teljesen a weblapról a CSS segítségével!
  14. A „Változó színű doboz” szaggatott keretét cseréld le folytonos vonalra a stíluslapban!
  15. Változtasd meg mindkét gomb háttérszínét zöldről kékre (blue), a hozzájuk tartozó CSS osztály szerkesztésével!
  16. Módosítsd az első gombra kattintáskor felugró ablak szövegét erre: „A feladatot sikeresen végrehajtottad!”
  17. Írd át a második gombhoz tartozó JavaScript függvényt úgy, hogy kattintáskor a doboz ne rózsaszínűre, hanem sárgára (yellow) változzon!
  18. Változtasd meg az első gomb feliratát az oldalon (tehát amit a felhasználó lát a gombon) a „Kattints rám!” szövegre!
  19. Tiltsd le a második gombot (tedd inaktívvá) a megfelelő HTML attribútum hozzáadásával, hogy ne lehessen rákattintani!
  20. Keresd meg a dokumentumban a „statikus vagy dinamikus” szövegrészt, és tedd dőlt betűssé a megfelelő HTML formázó címke segítségével!