Webszerkesztés
Visual Studio Code

---

1/1. A(z) ...... weboldalak megtekintésére szolgáló alkalmazás. Válassza ki, melyik a mondat helyes kiegészítése!

a. – böngésző b. – webszerver c. – szerver d. – keresőmotor

1/2. Mire szolgálnak a HTML állományban a <h1>, <h2>, ..., <h6> jelölők?

a. – Tetszőlegesen felhasználható jelölők, amelyekhez nincs alapértelmezett stílus hozzárendelve. b. – Könyvjelzők létrehozására szolgáló jelölők. c. – Számozott felsorolás egyes listaelemeinek tárolására szolgál. d. – Különböző szintű és méretű fejezetcímek és alfejezetcímek adhatók meg használatukkal.

1/3. A(z) ...... az adott honlapon elérhető oldalak listája. Válassza ki, melyik a mondat helyes kiegészítése!

a. – oldaltérkép b. – web hosting c. – domain d. – könyvjelzők/kedvencek

1/4. Mire használják a weboldalak táblázataiban a <tr> jelölőt?

a. – a táblázat egy-egy sorát határozza meg b. – a táblázat egy-egy celláját határozza meg c. – a táblázat egy-egy oszlopát határozza meg d. – a táblázat fejlécét határozza meg

1/5. Az alábbiak közül melyik határoz meg jelölőnégyzet típusú űrlap mezőt?

a. – <input type="check" name="alma" value="1"> b. – <form type="checkbox" name="alma" value="1"> c. – <input type="checkbox" name="alma" value="1"> d. – <check name="alma" value="1">

1/6. Mire illeszkedik az a CSS szabály, amelynek szelektora: „div h1{...}”?

a. – Arra a <h1> elemre, amely olyan elemen belül található, amelynek „id” jellemzője „div”. b. – Arra a <div> elemre, amely olyan elemen belül található, amelynek „id” jellemzője „h1”. c. – Minden <div>-en belül elhelyezett <h1> elemre. d. – Minden <h1>-en belül elhelyezett <div> elemre.

Indíts el a Visual Studio Code webszerkesztő programot.

2. Nyisd meg az index.html fájlt.

Alakítsd a „MAZ-ZOO Vadaspark” sort 1. szintű címsorrá, az alatta lévő „Bemutatkozás” sort 2. szintű címsorrá.

3. Állíts be hiperhivatkozást a „szabadidőprogramok” szóra, amely mutasson a Programok című oldalra.
Állíts be hiperhivatkozást a „vadfajok bemutatására” szövegrészre is, ez mutasson a tudasteszt.html oldalra.

4. Szúrd be a zsiraf.jpg-t a kep osztályú elemen belülre. Adj alternatív szöveget a képnek: „a park kedvence, Zsolti a zsiráf”.

Mentsd el és zárd be az index.html fájlt.

5. Nyisd meg a kapcsolat.txt fájlt.

Egészítsd ki a fájlt a hiányzó html nyitó és záró jelölőivel.
Rendeld a fájlhoz a styles.css stíluslap állományt.

6. Alakítsd félkövérré és dőltté a szövegben előforduló két telefonszámot.

Mentsd el a fájlt weboldalként kapcsolat.html néven és zárd be.

7. Nyisd meg a programok.html fájlt.

A táblázatban vond össze a „Hollókunyhó játszóház” szöveget tartalmazó cellát az alatta található üres cellákkal.

8. A táblázat első sorának celláit módosítsd fejléc cella típusúra.

Mentsd el és zárd be a programok.html fájlt.

9. Nyisd meg a tudasteszt.html fájlt.

A „Melyik a legnagyobb élő madár?” kérdéshez tartozó rádiógombok feliratait alakítsd címke (label) típusúvá.

10. A „Melyik az egyetlen lábujjhegyen járó emlősállat?” kérdés választómezőjét egészítsd ki az alpakka választási lehetőséggel.
Módosítsd a mező paramétereit úgy, hogy minden értéke látszódjon.

11. A „Melyik a kedvenc állatod és miért?” kérdés beviteli mezőjét módosítsd többsorossá, a sorok száma 6, a soron belüli karakterszám pedig 50 legyen.

Mentsd el és zárd be a tudasteszt.html fájlt.

12. Nyisd meg a styles.css fájlt.

Módosítsd a CSS szabályokat az alábbiak szerint:
A fo azonosítójú elemen belüli h2 elemekre a betűméret legyen az alap betűméret 1,3-szorosa.

13. A kep osztályú elemeken belüli img elemeknek legyen keretük, amely 2 pixel széles, folytonos vonalú és sárga (yellow) színű.

14. A table elemekhez rendeljen #fff háttérszínt.

15. A td elemek minimális szélessége legyen 100 pixel, az itt lévő szöveg pedig legyen felülre rendezve.

16. A textarea elemekben a betűszín legyen kék (blue).

Ments és zárj be minden fájlt és zárj be minden alkalmazást.

Az elkészült weboldal: