WebmesterKE2 - ECDL vizsgafeladatok megoldásai ingyen, lépésről-lépésre!

8. modul – 45. feladatsor.
Indítsd el a Visual Studio Code programot.
Nyisd meg a feladatsorhoz tartozó munkafájl mappát: CTRL + K, O.
Az Open Folder párbeszédpanelen a Mappa szerkesztőmezőbe írd be: munkafájlok-45, 
kiválasztása: ENTER, megnyitása: ENTER.
2. Nyisd meg az index.html nevű fájlt a megadott helyről.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: index, majd ENTER.
„A fodrászhelyiség...” mondattól a szöveg kerüljön új bekezdésbe.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: A fodrászhelyiség.
Keresés minialkalmazás bezárása: ESC.
Ugrás a kijelölés elejére: BALRA.
Írd be: </p><p>.
Megjegyzés: A záró bekezdés jelölő esetén a perjel után kiegészül a jelölő. 
A nyitó bekezdés jelölő beírásakor pedig kiegészül a záró bekezdés jelölővel, ezt vissza kell vonni: CTRL + Z.
Mentés: CTRL + S.
A „Szombati napon...” mondat elé szúrj be egy sortörést.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: Szombati.
Keresés minialkalmazás bezárása: ESC.
Ugrás a kijelölés elejére: BALRA.
Írd be az Emmet rövidítést: br, majd TAB.
Mentés: CTRL + S.
3. Töröld a félkövérré tevő jelölőket a „45 m<sup>2</sup> alapterületen” szövegrészről, valamint a dőltté tevő jelölőket az „5 fodrász” szövegrészről.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: 45.
Keresés minialkalmazás bezárása: ESC.
Emmet: Elem eltávolítása: CTRL + E, E.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: 5 fodrász.
Keresés minialkalmazás bezárása: ESC.
Emmet: Elem eltávolítása: CTRL + E, E.
Mentés: CTRL + S.
Mentsd el és zárd be az index.html fájlt.
Fájl bezárása: CTRL + F4.
4. Nyisd meg a kapcsolat.txt fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: kapcsolat, majd ENTER.
Megjegyzés: A formázást segítő elemek csak html fájl esetén használhatók, ezért még az elején át kell nevezni a fájlt html-re.
Átlépés a fanézetre: SHIFT + F6, elhangzik: Files Explorer - Fanézet.
Ugrás a fájlnév végére: END.
Kiterjesztés kijelölése: CTRL + SHIFT + BALRA.
Írd át: html, majd ENTER.
Visszalépés a Szerkesztő ablakba: F6.
Egészítsd ki a fájlt a hiányzó html nyitó és záró jelölőivel. Adj oldalcímet a következő szöveggel: „Fodor & Bodor fodrászat”.
Ugrás a dokumentum elejére: CTRL + HOME.
LE a nyitó head jelölő sorába.
Kijelölés a dokumentum végéig: CTRL + SHIFT + END.
A kijelölt terület köré html jelölő beillesztése:
Emmet: Becsomagolás rövidítéssel: CTRL + B, R.
A szerkesztőmezőbe írd be: html, majd ENTER.
Jelöld ki a feladatleírásból az idézőjelek közötti 
Fodor & Bodor fodrászat szöveget, majd másold: CTRL + C.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: /head.
Keresés minialkalmazás bezárása: ESC.
FEL az előző sorba.
Ugrás a sor végére: END.
Új sor nyitása: ENTER.
Írd be az Emmet rövidítést: title, majd TAB.
A kurzor pozíciójába illeszd be a kimásolt címet: CTRL + V.
Mentés: CTRL + S.
5. Alakítsd számozatlan felsorolás stílusúvá az „Elérhetőség, Munkaidő,” stb. sorokat.
Megjegyzés: Akadálymentesítés mindenképpen szükséges!
Megjegyzés: A listaelemek előtt kötőjel és szóköz van. A listaelemek 1-2 vagy 3 sorból állnak, sortöréssel,
ezért a listaelemek végére egy csillag jelet tettem, az együttes kijelölés megkönnyítésére.
Az órák közötti kötőjelet HTML kóddal írtam be.
A listát bekezdés jelölők közé tettem.
Listasorok kezdeténél lévő kötőjel és szóköz cseréje nyitó lista jelölőre:
Csere minialkalmazás megnyitása: CTRL + H.
A Find szerkesztőmező az aktív, írd be: KÖTŐJEL SZÓKÖZ (értelemszerűen írásjelekkel!).
TAB a Replace szerkesztőmezőig, töröld: <li>.
Összes cseréje: CTRL + ALT + ENTER.
Listasorok végénél lévő csillag karakter cseréje záró lista jelölőre:
Csere minialkalmazás megnyitása: CTRL + H.
A Find szerkesztőmező az aktív, írd be: ALTGR + kötőjel.
TAB a Replace szerkesztőmezőig, töröld: <li>.
Összes cseréje: CTRL + ALT + ENTER.
A listasorok köré számozatlan felsorolás jelölők beszúrása:
Bekezdés jelölők cseréje.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: Elérhetőség.
Keresés minialkalmazás bezárása: ESC.
Bekezdés tartalmának kijelölése: ALT + O.
Emmet: Becsomagolás rövidítéssel: CTRL + B, R.
A szerkesztőmezőbe írd be: ul, majd ENTER.
Mentés: CTRL + S.
6. Alakítsd hiperhivatkozássá a „fodorbodor@fodraszat.hu” email címet.
Jelöld ki a feladatleírásból az idézőjelek közötti 
fodorbodor@fodraszat.hu szöveget, majd másold: CTRL + C.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe illeszd be a kimásolt szöveget: CTRL + V.
Keresés minialkalmazás bezárása: ESC.
Emmet: Becsomagolás rövidítéssel: CTRL + B, R.
A szerkesztőmezőbe írd be: a, majd ENTER.
Mentés: CTRL + S.
Állíts be hiperhivatkozást az „on-line” kifejezésre, amely mutasson a „Bejelentkezés” című oldalra (bejelentkezes.html).
Jelöld ki a feladatleírásból az idézőjelek közötti 
on-line szöveget, majd másold: CTRL + C.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe illeszd be a kimásolt szöveget: CTRL + V.
Keresés minialkalmazás bezárása: ESC.
1. megoldás:
Emmet: Becsomagolás rövidítéssel: CTRL + B, R.
A szerkesztőmezőbe írd be: a[href=bejelentkezes.html], majd ENTER.
2. megoldás:
HTML Tag Wrap: ALT + W.
Írd be: a href=.
Megjegyzés: Az értéknél az idézőjeleket nem kell beírni, automatikusan létrejönnek.
CTRL + SPACE, LE a bejelentkezes.html sorig, kiválasztása: ENTER.
Mentés: CTRL + S.
7. Szúrd be a comfort.jpg képet a kep_jobbra osztályú elemen belülre. Adj alternatív szöveget a képnek „szék” értékkel.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: kep_jobbra.
Keresés minialkalmazás bezárása: ESC.
Ugrás a bekezdés jelölők közé: ALT + I.
Írd be az Emmet rövidítést: img[src=comfort.jpg alt=szék], majd TAB.
Mentés: CTRL + S.
Mentsd el a fájlt weboldalként kapcsolat.html néven és zárd be.
Fájl bezárása: CTRL + F4.
8. Nyisd meg az arlista.html fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: arlista, majd ENTER.
Adj táblázatcímet az oldalon található táblázatnak „Árlista” szöveggel.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: <table>.
Keresés minialkalmazás bezárása: ESC.
Ugrás a kijelölés végére: JOBBRA.
Új sor nyitása: ENTER.
Írd be az Emmet rövidítést: caption, majd TAB.
A kurzor pozíciójába írd be: Árlista.
Mentés: CTRL + S.
9. Vond össze a „Férfi hajvágás szárítással” valamint a „Gyermek hajvágás szárítással” sorok melletti „ár” celláit a mellettük lévő üres cellákkal.
Megjegyzés: 3 sort kell összevonni.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmező az aktív, írd be: <td></td>.
Összes kijelölése: ALT + ENTER.
Keresés minialkalmazás bezárása: ESC.
Sorok kijelölése: CTRL + L.
Sorok törlése: DELETE.
Keresés minialkalmazás megnyitása: CTRL + F.
(Reguláris kifejezés használata: ALT + R.)
TAB a Use Regular Expression gombig, ha nincs bejelölve, bejelölése: SZÓKÖZ.
SHIFT + TAB a Find szerkesztőmezőig, írd be: Férfi|Gyermek.
Összes kijelölése: ALT + ENTER.
Keresés minialkalmazás bezárása: ESC.
BALRA, kétszer, majd LE, ekkor az ár cellák nyitó cella jelölőiben van a kurzor.
SZÓKÖZ, majd írd be: colspan=3.
Megjegyzés: Az értéknél az idézőjeleket nem kell beírni, automatikusan létrejönnek.
Mentés: CTRL + S.
Mentsd el és zárd be az arlista.html fájlt.
Fájl bezárása: CTRL + F4.
10. Nyisd meg a bejelentkezes.html fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: bejelentkezes, majd ENTER.
A „Telefon” felirathoz tartozó űrlapelembe írható karakterek száma maximum 15 legyen, alapértelmezetten pedig „06-” szöveg látszódjon a mezőben.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: Telefon.
Keresés minialkalmazás bezárása: ESC.
LE, ez az input sor.
Input elem kijelölése: ALT + O.
Ugrás a kijelölés végére: JOBBRA.
BALRA, ekkor a kurzor az input elemen belül van.
SZÓKÖZ, majd írd  be: maxlength=15, JOBBRA, SZÓKÖZ, majd írd be: value=06-.
Megjegyzés: Az értéknél az idézőjeleket nem kell beírni, automatikusan létrejönnek.
Mentés: CTRL + S.
11. Az űrlap alján található submit típusú nyomógomb feliratát módosítsd „küldés”-re, a reset típusú felirata pedig „adatok törlése” legyen.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: submit.
Keresés minialkalmazás bezárása: ESC.
ALT + N, a value értékig, írd át: küldés.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: reset.
Keresés minialkalmazás bezárása: ESC.
ALT + N, a value értékig, írd át: adatok törlése.
Mentés: CTRL + S.
Mentsd el és zárd be a bejelentkezes.html fájlt.
Fájl bezárása: CTRL + F4.
12. Nyisd meg a styles.css fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: styles, majd ENTER.
Módosítsd a CSS szabályokat az alábbiak szerint:
A h1 elemek betűszínére határozd meg #f28 értéket, a betű mérete pedig az alap betűméret 1,8-szorosa legyen.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: h1{.
Keresés minialkalmazás bezárása: ESC.
LE a font-size sorig.
Sor kijelölése: CTRL + L.
Kijelölés felülírása Emmet rövidítéssel: fz:1.8, majd TAB. 
Vagy írd be: font-size: 1.8em;
Új sor nyitása: ENTER.
Írd be az Emmet rövidítést: c:#f28, majd TAB. 
Vagy írd be: color: #f28;
Mentés: CTRL + S.
13. A kep_jobbra osztályú elemeken belüli img elemek szélességét állítsd 120 pixel méretűre, és határozz meg 2 pixel vastag, pontozott mintázatú és kék (blue) színű keretet.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: .kep_jobbra img{.
Keresés minialkalmazás bezárása: ESC.
LE a width sorig.
Sor kijelölése: CTRL + L.
Kijelölés felülírása Emmet rövidítéssel: w:120, majd TAB. 
Vagy írd be: width: 120px;
LE a border sorig.
Sor kijelölése: CTRL + L.
Kijelölés felülírása Emmet rövidítéssel: bd:2-dt-blue, majd TAB.
Vagy írd be: border: 1px dotted blue;
Mentés: CTRL + S.
14. A table elemek háttérszínének adj fehér (white) színt, a betűszínnek pedig #f66 értéket.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: table{.
Keresés minialkalmazás bezárása: ESC.
Ugrás a sor végére: END.
Új sor nyitása: ENTER.
Írd be az Emmet rövidítést: bgc:white, majd TAB. 
Vagy írd be: background-color: white;
Új sor nyitása: ENTER.
Írd be az Emmet rövidítést: c:#f66, majd TAB. 
Vagy írd be: color: #f66;
Mentés: CTRL + S.
15. Alkalmazz középre történő szövegigazítást minden olyan td elemre, amelynél 3 egymás melletti cella van összevonva.
Ugrás a dokumentum végére: CTRL + END.
Új sor nyitása: ENTER.
Írd be: td[colspan="3"]{, majd ENTER.
A záró kapcsos zárójel automatikusan megjelenik, a kurzor a két kapcsos zárójel között helyezkedik el.
Írd be az Emmet rövidítést: ta:c, majd TAB. 
Vagy írd be: text-align: center;
Mentés: CTRL + S.
16. A text típusú input elemek szélességét állítsd 300 pixel méretűre.
Ugrás a dokumentum végére: CTRL + END.
Új sor nyitása: ENTER.
Írd be: input[type='text']{, majd ENTER.
A záró kapcsos zárójel automatikusan megjelenik, a kurzor a két kapcsos zárójel között helyezkedik el.
Írd be az Emmet rövidítést: w:300, majd TAB. 
Vagy írd be: width: 300px;
Mentés: CTRL + S.
Ments és zárj be minden fájlt és zárj be minden alkalmazást.
Fájl bezárása: CTRL + F4.
Visual Studio Code bezárása: ALT + F4.	

Ide kattintva megtekinthetitek, hogyan kell kinéznie az elkészült weboldalnak.

Vissza a feladatsorszámok kiválasztásához

8. modul – 45. feladatsor.

2. Nyisd meg az index.html nevű fájlt a megadott helyről.

„A fodrászhelyiség...” mondattól a szöveg kerüljön új bekezdésbe.

A „Szombati napon...” mondat elé szúrj be egy sortörést.

3. Töröld a félkövérré tevő jelölőket a „45 m<sup>2</sup> alapterületen” szövegrészről, valamint a dőltté tevő jelölőket az „5 fodrász” szövegrészről.

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

4. 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. Adj oldalcímet a következő szöveggel: „Fodor & Bodor fodrászat”.

5. Alakítsd számozatlan felsorolás stílusúvá az „Elérhetőség, Munkaidő,” stb. sorokat.

6. Alakítsd hiperhivatkozássá a „fodorbodor@fodraszat.hu” email címet.

Állíts be hiperhivatkozást az „on-line” kifejezésre, amely mutasson a „Bejelentkezés” című oldalra (bejelentkezes.html).

7. Szúrd be a comfort.jpg képet a kep_jobbra osztályú elemen belülre. Adj alternatív szöveget a képnek „szék” értékkel.

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

8. Nyisd meg az arlista.html fájlt.

Adj táblázatcímet az oldalon található táblázatnak „Árlista” szöveggel.

9. Vond össze a „Férfi hajvágás szárítással” valamint a „Gyermek hajvágás szárítással” sorok melletti „ár” celláit a mellettük lévő üres cellákkal.

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

10. Nyisd meg a bejelentkezes.html fájlt.

A „Telefon” felirathoz tartozó űrlapelembe írható karakterek száma maximum 15 legyen, alapértelmezetten pedig „06-” szöveg látszódjon a mezőben.

11. Az űrlap alján található submit típusú nyomógomb feliratát módosítsd „küldés”-re, a reset típusú felirata pedig „adatok törlése” legyen.

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

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

Módosítsd a CSS szabályokat az alábbiak szerint: A h1 elemek betűszínére határozd meg #f28 értéket, a betű mérete pedig az alap betűméret 1,8-szorosa legyen.

13. A kep_jobbra osztályú elemeken belüli img elemek szélességét állítsd 120 pixel méretűre, és határozz meg 2 pixel vastag, pontozott mintázatú és kék (blue) színű keretet.

14. A table elemek háttérszínének adj fehér (white) színt, a betűszínnek pedig #f66 értéket.

15. Alkalmazz középre történő szövegigazítást minden olyan td elemre, amelynél 3 egymás melletti cella van összevonva.

16. A text típusú input elemek szélességét állítsd 300 pixel méretűre.

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