Webszerkesztés
Visual Studio Code

---

1/1. Az URL ...... Válaszd ki, melyik a mondat helyes befejezése!

a. – az interneten fellelhető dokumentumok címe. b. – a webszerver és a kliens programok közti kommunikációt biztosító protokoll. c. – weblapok megtekintésére szolgáló program. d. – weboldalak, képek keresésére szolgáló internetes alkalmazás.

1/2. Miért fontos a weboldalon beillesztett képekhez helyettesítő szöveg megadása?

a. – Tájékoztatja a felhasználót a kép készítőjéről, amely a kép alatt jelenik meg. b. – Informálja a felhasználót a kép tartalmáról, ha valamilyen ok miatt a kép nem jeleníthető meg, de fontos szerepe van a keresésnél is. c. – A böngésző programot informálja a kép méreteiről, hogy megfelelően tudja elhelyezni a képernyőn. d. – Fontos adattal szolgál a webszerver számára a kép méreteiről, hogy optimálisan tudja eltárolni a webtárhelyen.

1/3. Mire szolgál a HTML állományokban az <img src="..."> jelölő?

a. – kép beillesztésére b. – hang fájl beillesztésére c. – letöltendő dokumentum beillesztésére d. – oldaltérkép beillesztésére

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

a. – táblázat címére b. – táblázat láblécének megadására c. – táblázat oszlopcímének megadására d. – táblázat egy cellájának megadására

1/5. Az alábbiak közül melyik határoz meg többsoros szöveges beviteli mezőt?

a. – <textarea name="msg" rows="4" cols="50">Üzenet szövege:</textarea> b. – <input type="textarea" name="msg" rows="4" cols="50">Üzenet szövege:</input> c. – <area name="msg" rows="4" cols="50">Üzenet szövege:</area> d. – <form type="area" name="msg" rows="4" cols="50" value="Üzenet szövege:">

1/6. Mi a CSS?

a. – A weboldalak stílusát, kinézetét leíró nyelv. b. – Az interneten fellelhető dokumentumok, különböző erőforrások címe. c. – A webszerverek és a kliens programok (pl. böngészők) közti kommunikáció protokollja. d. – Olyan program, amellyel az interneten keresztül elérhető weblapok megtekintését teszi lehetővé.

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

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

Az „Egyedülálló módszertan...” szövegrésztől a szöveget tedd új bekezdésbe. A „Mai napig...” szövegrész elé tegyél sortörést.

3. Alakítsd félkövérré és dőltté Elvira Sanchez és Anna Krotzmann neveit.

4. Állíts be hiperhivatkozást a „tanáraink listája” szövegrészre, amely mutasson a tanaraink.html oldalra.
Állíts be hiperhivatkozást a „tervezett kurzusaink” szövegrészre is, ez mutasson a Kurzusok című oldalra.

Mentse el és zárja be az index.html fájlt.

5. Nyisd meg a tanaraink.txt fájlt.
Mentsd el a fájlt weboldalként tanaraink.html néven.

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

6. Alakítsd definíciós listává a Tanáraink listája alatti felsorolást.

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

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

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

8. Töröld a táblázatból a görög haladó sort.
Módosítsd a görög kezdő óraszámát 3*3 órára.

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

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

A „Nyelv, ami érdekli” szöveghez tartozó mező paramétereit módosítsd úgy, hogy a választó minden sora látszódjon, valamint engedélyezve legyen egyszerre több lehetőség kiválasztása is.

10. Az Üzenet beviteli mezőjét módosítsd többsorossá, a sorok száma legyen 4, a soron belüli karakterek száma pedig 40.

11. Tegyél a submit nyomógomb mellé egy reset típusú nyomógombot is, a gomb felirata törlés legyen.

Mentse el és zárja be a kapcsolat.html fájlt.

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

Módosítsd a CSS szabályokat az alábbiak szerint:
A menu azonosítójú elem aktiv osztájú elemeiben a listajelölő típusa négyzetes (square) legyen, a betűstílus félkövér.

13. A table elemek felső és alsó margója 10 pixel legyen, a bal- és jobboldali margót állítsa be úgy, hogy az elem középre igazodjon.

14. A th és a td elemeknek legyen 2 pixel vastag, pontozott mintázatú és fekete (black) színű kerete.

15. A text típusú input elemek szélessége legyen 280 pixel.

16. A submit típusú input elemek háttérszíne #ccc legyen.

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

Az elkészült weboldal: