Órai tesztek

Minden óra elején írtunk egy rövid tesztet. A tanfolyamon a következő feladatokat kellett megoldanunk:

1. óra

Hozz létre egy bekezdést és használj 3 szövegszerkesztő elemet.
Illetve jelenítsd meg az a2+b2=c2 szöveget a tanultaknak megfelelően!

2. óra

  1. Mi a HTML?
  2. Milyen fő részekből áll egy HTML oldal?
  3. Sorolj fel három tanult taget és magyarázd meg mire való.
  4. Mi az a DTD?
  5. Mit jelent, hogy egy elem blokk típusú?

3. óra

  1. Hány fajta listát ismersz? Sorold fel őket!
  2. Hogyan adhatom meg egy kép elemnek, hogy block típusú legyen?
  3. Készits telefonról hivható linket.
  4. Helyezz el html kódban egy képet és a kép legyen link a prooktatás oldalára, illetve a link új ablakban nyíljon meg.

4. óra

  1. Mi a CSS alap szintaktikája?
  2. Mi az a doboz modell?
  3. Hogyan adhatom meg egy elemnek, hogy a marginja alul-felül 10px oldalt 20px legyen?
  4. Hány pixeles alapból a h1 tag?
  5. Mire használható a pre tag?
  6. Mire jó a hr tag?

5. óra

  1. Mire használjuk a clear:both; CSS utasítást?
  2. Hogyan lehet blokkositani egy HTML elemet?
  3. Készíts egy ’container’ nevű HTML 'dobozt’ és tegyél bele három másik ’dobozt’, a következő nevekkel: header, main, footer. A három belső 'dobozhoz’ rendeld hozzá a ’balaton’ osztályt!
  4. Állítsd be a 'csirke’ osztályú elemek tulajdonságát az alábbiak szerint:
    • szöveg jobbra igazítva legyen,
    • háttérszín #ddd legyen,
    • a betűszin rgb 100,55,66 legyen
    • 5px margó legyen mindenhol
    • 5%-os belső margó legyen mindenhol.
    (teljes css kód)?

6. óra

  1. Mire használjuk a pre tag-et?
  2. Készíts egy számozott listát három tetszőleges elemmel!
    • fájl vagy szöveg mentése
    • keresés a szövegben
    • összes szöveg kijelölése
  4. Hogyan hozhatunk létre 'Emmet' segítségével egy 10 elemből álló számozatlan listát?
  5. Hogyan tudok felülírni egy inline CSS utasítást egy külső stíluslapban?
  6. Állítsd be a varjú osztályú elemek tulajdonságát az alábbiak szerint:
    • szöveg sorkizárt legyen,
    • háttérszín sárga legyen,
    • legyen egy zöld, 2 px széles és folytonos kerete,
    • 3% margó legyen alul és felül,
    • 10px-es belső margó legyen jobb és bal oldalt.
    (teljes css kódot írj)

7. óra

  1. Mire használjuk a CSS-t?
  2. Milyen HTML tag-et használunk, ha képet szeretnénk elhelyezni a honlapon?
  3. írd az alábbi utasítások mellé billentyűzet kódjukat!
    • fájl másolása vágólapra
    • böngésző ablak frissitése
    • fájl mentése a szerkesztőben
    • ablakok közti váltás
  4. Milyen CSS utasítást használnál a HTML oldal hátterének pirosra állításához?
  5. Mire használjuk a formokat?
  6. Hozz létre egy formot, ami az adatokat post metódussal küldi el és tartalmaz 2 szövegbeviteli mezőt. Legyen submit gomb is benne 'Belépés' felirattal.

8. óra

  1. Készítsen egy olyan HTML utasítást, amelyben megad egy e-mail címet, amire rákattintva egyből megnyitja a levelező programot!
  2. Helyezzen el három ’checkbox’-ot az oldalon (állatok, növények, gombák) felirattal.
  3. Állítsa be a ’gomba’ osztályban lévő ehetők osztály tulajdonságait az alábbiak szerint:
    • szöveg sorkizárt legyen,
    • háttérszín kék legyen,
    • a betűszín sárga legyen,
    • szélessége az oldal 70%-a legyen,
    • 5%-os belső margó legyen felül, és 5% a többi helyen,
    • balra legyenek folyatva,
    • legyen egy 3px-es, zöld, pontozott keret,
    4. (teljes css kód)

9. óra

  1. Írd le röviden, hogy lehet egy betűtípust beilleszteni és használni egy weboldalon? (Google font-ot pl.)
  2. Készíts egy olyan HTML utasítást, amelyben megadsz egy telefonszámot, ami mobil készülékről hivhatóan jelenik meg.
  3. Állítsd be a 'tulok' osztályú elemben lévő, himek nevű html elem tulajdonságait az alábbiak szerint:
    • szöveg középre igazítva legyen,
    • háttérszín zöld legyen,
    • a betűszin szürke legyen
    • szélessége az oldal fele legyen,
    • 2%-os belső margó legyen alul, és 5% a többi helyen
    (teljes css kód)
  4. Készíts egy olyan HTML utasítást, amelyben elhelyezel az oldalon egy űrlapot a következő mezőkkel:
    • Név (text, kötelező mező, legyen példa benne)
    • Telefonszám (text, kötelező mező, legyen példa benne)
    • Születési idő (dátum mező)
    • Üzenet (szövegmező 20 sor, 20 oszlop)
    • Elküld gomb

10. óra

  1. Írj egy CSS kódot, amellyel megadod egy, hogy felsorolásnál a ’lufi.png’ fálj legyen a listajel!
  2. Készíts egy olyan HTML utasítást, amelyben elhelyezel az oldalon egy űrlapot a következő mezőkkel:
    • Név (text, kötelező mező, legyen példa benne)
    • Születési idő (dátum mező, kötelező legyen)
    • E-mail cím (text, kötelező mező, legyen példa benne)
    • Üzenet (szövegmező 10 sor, 30 oszlop)
    • Elküld gomb
  3. Írj egy HTML kódot, amely elhelyez a weboldalon egy ’dobozt’, amiben egy kép és alatta egy leírás található. Az egész ’doboz’ legyen link a //www.prooktatas.hu oldalra.
  4. Állítsd be a ’makk’ osztályban lévő összes képre a következő tulajdonságokat:
    • szélesség 70%,
    • középre helyezve (blokkositani kell!) piros, folytonos, lpx-eles keret,
    • legyen egy árnyéka balról, fentről megvilágítva 2-2 px és 10px vastag legyen az árnyék
    • az átlátszósága legyen fele a teljesnek,
    (teljes css kód)

11. óra

  1. Készíts egy olyan HTML utasítást, amelyben elhelyezel egy menüt, három menüponttal. A menüpontok linkek legyenek. Használj HTML5-ös utasítást!
  2. Írj egy HTML kódot, amely elhelyez a weboldalon egy hanganyagot!
  3. Állítsa be a ’emberek’ osztályban lévő, ’ferfiak’ osztályra a következő tulajdonságokat:
    • Tahoma betűtípust,
    • félkövér betűk
    • balra zárt szöveg legyen
    • legyen egy 5px-es, #ddd, lekerekített kerete
    (teljes css kód)
  4. GIT
    • Írd le röviden a githubon való munkának a menetét, miért hasznos így dolgozni egy projekten stb.
    • Írd le a tanult parancsokat és magyarázd meg mire valók.

12. óra

  1. Mi a reszponzivitás? Mit jelent az, hogy Mobile First Dizájn?
  2. Milyen metataget ismersz a reszponzivitással kapcsolatban?
  3. Írd le milyen egyéb mértékegységeket tanultunk a reszponzív szövegekkel kapcsolatban. írj róluk rövid ismertetőt is.
  4. Hogyan tudnám elérni, hogy 568 pixeles méret alatt eltűnjön egy adott elem a weboldalról?
  5. Magyarázd meg az alábbi kódot, mi mit csinál:

    @media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
      div.proba {
       font-size: 50px;
       padding: 5px;
       border: 1px solid black;
      }
     }

13. óra

  1. írj CSS szelektorokat! Hogyan hivatkozunk:
    • egy ID-ra?
    • egy CLASS-ra?
    • minden olyan class-ra, ami „col-„ névvel kezdődik?
    • kötelezően kitöltendő INPUT elemekre?
  2. Sorolj fel 5 darab HTML5 szemantikus elemet! Miért használjuk őket?
  3. Hogyan tehető egy elem grid megjelenítésére alkalmassá?
  4. Hogyan tudok 25 pixeles térközt létrehozni a grid elemei között?
  5. írj 3 példát pseudo classokra, és 3 példát pseudo elemekre! Magyarázd meg, hogy mire valók!
  6. Helyes-e az alábbi kód?
    • grid-template-columns: autó autó autó autó autó autó;
    • float: middle;
    • padding: 10px -5px;
    • margin: 0 0 0 25px;

Nagyteszt