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

8. modul – 27. 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-27, 
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 „Családi tagságot...” kezdetű mondat elé szúrjon be egy sortörést.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: Családi.
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.
A „Kérjük, töltse ki...” kezdetű 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: Kérjük.
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.
3. Szúrj be egy 3. szintű címsort „A Bayview Szabadidő Központ versenyúszási lehetőséget biztosít...” bekezdés elé „Versenyúszás” szöveggel.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: versenyúszási.
Keresés minialkalmazás bezárása: ESC.
Ugrás a sor elejére: HOME.
FEL az előző sorra, ez egy üres sor.
Írd be: h3, majd TAB, a kurzor pozíciójába írd be: Versenyúszás.
Mentés: CTRL + S.
4. Cseréld le a facilities.jpg képet a swimming.jpg-re. A kép megjelenési szélessége legyen 170 pixel, magassága pedig 180 pixel.
Megjegyzés: Csak ez az egy kép van az oldalon.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: facilities.
Keresés minialkalmazás bezárása: ESC.
Írd át: swimming.
ALT + N, a width értékig, írd át: 170.
ALT + N, a height értékig, írd át: 180.
Mentés: CTRL + S.
5. Módosítsd a táblázatban a Versenyúszás részen a csütörtöki napra vonatkozó cellát, a cella tartalma 19.30-20.30 legyen. A cella kiemelt osztályba sorolását töröld.
Megjegyzésben: A táblázatban ez az első cella, melyhez tartozik osztály.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: td class.
Keresés minialkalmazás bezárása: ESC.
Ugrás a kijelölés elejére: BALRA.
ALT + N, kétszer, ekkor kijelölődik a class tulajdonság és az értéke, töröld: DEL.
Zárva! szöveg kijelölése: ALT + I, írd át: 19.30-20.30.
Mentés: CTRL + S.
6. Vond össze a Football klub celláját a vele egy sorban lévő üres cellákkal.
Megjegyzés: 7 cellát kell összevonni.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: Football.
Keresés minialkalmazás bezárása: ESC.
BALRA kétszer, ekkor a kurzor a nyitó cella jelölőn belül van.
SZÓKÖZ, majd írd be: colspan=7.
Megjegyzés: Az értéknél az idézőjeleket nem kell beírni, automatikusan létrejönnek.
LE a következő sorra, ez az első törlendő üres cella.
Sor kijelölése: CTRL + L.
Összes ilyen sor kijelölése: CTRL + F2.
Kijelölt sorok törlése: DELETE.
Mentés: CTRL + S.
Mentsd el és zárd be az index.html fájlt.
Fájl bezárása: CTRL + F4.
7. Nyisd meg a sport.txt fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: sport, 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ó head és body nyitó és záró jelölőkkel.
Megjegyzés: A html jelölő hiányzik, nem a head.
Ugrás a dokumentum elejére: CTRL + HOME.
LE a záró head jelölőt követő sorig.
Ugrás a sor elejére: HOME.
Kijelölés a dokumentum végéig: CTRL + SHIFT + END.
A kijelölt terület köré body jelölő beillesztése:
Emmet: Becsomagolás rövidítéssel: CTRL + B, R.
A szerkesztőmezőbe írd be: body, majd ENTER.
Ugrás a dokumentum elejére: CTRL + HOME.
LE a második sorra.
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.
Mentés: CTRL + S.
8. Módosítsd a Bayview Golf Klub, valamint a Bayview Futball Klub sorait 3. szintű címsorrá.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmező az aktív, írd be: Klub< (a kisebb jelet is írd be!).
Összes kijelölése: ALT + ENTER.
Keresés párbeszédpanel bezárása: ESC.
Ugrás a kijelölés elejére: BALRA.
Emmet: Elem eltávolítása: CTRL + E, E.
Emmet: Becsomagolás rövidítéssel: CTRL + B, R.
A szerkesztőmezőbe írd be: h3, majd ENTER.
Mentés: CTRL + S.
9. Állíts be hiperhivatkozást az „űrlapot kitölteni” szövegrészre, amely mutasson a Kapcsolat című oldalra (kapcsolat.html).
Jelöld ki a feladatleírásból az idézőjelek közötti 
űrlapot kitölteni 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=kapcsolat.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 kapcsolat.html sorig, kiválasztása: ENTER.
Mentés: CTRL + S.
Valamint Állíts be hiperhivatkozást a „felvenni velünk a kapcsolatot” szövegrészre is, ez mutasson a tel.html oldalra.
Jelöld ki a feladatleírásból az idézőjelek közötti 
felvenni velünk a kapcsolatot 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=tel.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 tel.html sorig, kiválasztása: ENTER.
Mentés: CTRL + S.
Mentsd el a fájlt weboldalként sport.html néven és zárd be.
Fájl bezárása: CTRL + F4.
10. Nyisd meg a kapcsolat.html fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: kapcsolat, majd ENTER.
Az űrlapon található jelölőnégyzet alapértelmezetten legyen bejelölt állapotban.
A hozzá tartozó „Ajánlatot szeretnék kérni” szöveget alakítsd címke (label) típusúvá.
Megjegyzés: A munkafájlban a jelölőnégyzet azonosítója: ajanlatkeresS, a végén egy kis és egy nagy S-sel(?), javítottam: ajanlatkeres.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: checkbox", (a záró idézőjelet is írd be!).
Keresés minialkalmazás bezárása: ESC.
Ugrás a kijelölés végére: JOBBRA.
SZÓKÖZ, majd írd be: checked.
Jelöld ki a feladatleírásból az idézőjelek közötti 
Ajánlatot szeretnék kérni 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: label[for=ajanlatkeres], majd ENTER.
Mentés: CTRL + S.
11. Tedd mezőcsoportba (fieldset) a form jelölőn belüli részt.
Adj magyarázó feliratot (legend) az űrlapnak Kapcsolat szöveggel.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: <form>.
Keresés minialkalmazás bezárása: ESC.
Ugrás a kijelölés végére: JOBBRA.
Form elem tartalmának kijelölése: ALT + O.
Emmet: Becsomagolás rövidítéssel: CTRL + B, R.
A szerkesztőmezőbe írd be: fieldset, majd ENTER.
A kurzor a záró fieldset jelölő mögött van.
Ugrás a nyitó fieldset jelölőpárra: CTRL + U, P.
LE a következő (üres) sorra.
Írd be az Emmet rövidítést: legend, majd TAB.
A kurzor a nyitó és záró jelölő között van.
Írd be: Kapcsolat.
Mentés: CTRL + S.
Mentsd el és zárd be a kapcsolat.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:
Az also azonosítójú elemen belüli h2 elemekre vonatkozóan a betűméret legyen 16 pixel, a szöveg pedig legyen középre rendezett.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: #also h2{.
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: fz:16, majd TAB. 
Vagy írd be: font-size: 16px;
Új sor nyitása: ENTER.
Írd be az Emmet rövidítést: ta:c, majd TAB. Vagy írd be: text-align: center;
Mentés: CTRL + S.
13. A cim azonosítójú elemek betűköze legyen 0.4em, a szöveg középre rendezett.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: #cim{.
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: lts:0.4, majd TAB. 
Vagy írd be: letter-spacing: 0.4em;
Új sor nyitása: ENTER.
Írd be az Emmet rövidítést: ta:c, majd TAB. 
Vagy írd be: text-align: center;
Mentés: CTRL + S.
14. A table elemeken belüli kiemelt osztályú elemekben legyen a betű színe vörös (red), a betűvastagság félkövér.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: table .kiemelt{.
Keresés minialkalmazás bezárása: ESC.
LE a color sorig.
Sor kijelölése: CTRL + L.
Kijelölés felülírása Emmet rövidítéssel: c:red, majd TAB. 
Vagy írd be: color: red;
Új sor nyitása: ENTER.
Írd be az Emmet rövidítést: fw:b, majd TAB. 
Vagy írd be: font-weight: bold;
Mentés: CTRL + S.
15. A caption elemekben a szöveg betűstílusát állítsd félkövérre.
Megjegyzés: Egyik oldalon sincs caption elem!
Ugrás a dokumentum végére: CTRL + END.
Új sor nyitása: ENTER.
Írd be: caption{, 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: fw:b, majd TAB. 
Vagy írd be: font-weight: bold;
Mentés: CTRL + S.
16. Az urlap azonosítójú elemre a felső és alsó margók 0 méretűek legyenek, a bal- és jobboldali margókat állítsd be úgy, hogy az elem középre igazodjon.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: #urlap{.
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: m:0-a, majd TAB. 
Vagy írd be: margin: 0 auto;
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 – 27. feladatsor.

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

A „Családi tagságot...” kezdetű mondat elé szúrjon be egy sortörést.

A „Kérjük, töltse ki...” kezdetű mondattól a szöveg kerüljön új bekezdésbe.

3. Szúrj be egy 3. szintű címsort „A Bayview Szabadidő Központ versenyúszási lehetőséget biztosít...” bekezdés elé „Versenyúszás” szöveggel.

4. Cseréld le a facilities.jpg képet a swimming.jpg-re. A kép megjelenési szélessége legyen 170 pixel, magassága pedig 180 pixel.

5. Módosítsd a táblázatban a Versenyúszás részen a csütörtöki napra vonatkozó cellát, a cella tartalma 19.30-20.30 legyen. A cella kiemelt osztályba sorolását töröld.

6. Vond össze a Football klub celláját a vele egy sorban lévő üres cellákkal.

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

7. Nyisd meg a sport.txt fájlt.

Egészítsd ki a fájlt a hiányzó head és body nyitó és záró jelölőkkel.

8. Módosítsd a Bayview Golf Klub, valamint a Bayview Futball Klub sorait 3. szintű címsorrá.

9. Állíts be hiperhivatkozást az „űrlapot kitölteni” szövegrészre, amely mutasson a Kapcsolat című oldalra (kapcsolat.html).

Valamint Állíts be hiperhivatkozást a „felvenni velünk a kapcsolatot” szövegrészre is, ez mutasson a tel.html oldalra.

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

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

Az űrlapon található jelölőnégyzet alapértelmezetten legyen bejelölt állapotban. A hozzá tartozó „Ajánlatot szeretnék kérni” szöveget alakítsd címke (label) típusúvá.

11. Tedd mezőcsoportba (fieldset) a form jelölőn belüli részt. Adj magyarázó feliratot (legend) az űrlapnak Kapcsolat szöveggel.

Mentsd el és zárd 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: Az also azonosítójú elemen belüli h2 elemekre vonatkozóan a betűméret legyen 16 pixel, a szöveg pedig legyen középre rendezett.

13. A cim azonosítójú elemek betűköze legyen 0.4em, a szöveg középre rendezett.

14. A table elemeken belüli kiemelt osztályú elemekben legyen a betű színe vörös (red), a betűvastagság félkövér.

15. A caption elemekben a szöveg betűstílusát állítsd félkövérre.

16. Az urlap azonosítójú elemre a felső és alsó margók 0 méretűek legyenek, a bal- és jobboldali margókat állítsd be úgy, hogy az elem középre igazodjon.

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