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

8. modul – 33. 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-33, 
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 „További szolgáltatásaink...” mondat elé tegyél sortörést.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: További.
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.
Az „Üdvözlettel:” kezdődő két sor kerüljön új bekezdésbe.
Megjegyzés: A megadott szöveg előtti sor végén egy sortörés jelölő van, (ez az első sortörés az oldalon).
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: Üdvözlettel.
Keresés minialkalmazás bezárása: ESC.
FEL az előző sorra.
Ugrás a sor végére: END.
Sorvégi sortörő jelölő kijelölése: SHIFT + BALRA, négyszer.
Í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. Állíts be hiperhivatkozást a „faiskolai áruinkkal” szövegrészre, amely mutasson a Termékeink című oldalra (termekeink.html).
Jelöld ki a feladatleírásból az idézőjelek közötti 
faiskolai áruinkkal szöveget, majd másold: CTRL + C.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: írjon nekünk.
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=termekeink.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 termekeink.html sorig, kiválasztása: ENTER.
Mentés: CTRL + S.
Állíts be hiperhivatkozást a „További szolgáltatásaink” szövegrészre is, ez mutasson a szolgaltatasaink.html oldalra.
Jelöld ki a feladatleírásból az idézőjelek közötti 
További szolgáltatásaink szöveget, majd másold: CTRL + C.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: írjon nekünk.
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=szolgaltatasaink.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 szolgaltatasaink.html sorig, kiválasztása: ENTER.
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 az akcionk.txt fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: akcionk, 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 és body nyitó és záró jelölőivel.
LE a záró head jelölőt követő sorba.
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 sorba.
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.
5. Tedd az „Akciónk” sort 1. szintű címsorrá.
Megjegyzés: Az egyik link tartalma is Akciónk!
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: p>Akciónk.
Keresés minialkalmazás bezárása: ESC.
Ugrás a kijelölés végére: JOBBRA.
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: h1, majd ENTER.
Mentés: CTRL + S.
A „Tavaszi akció!” sort pedig alakítsd 2. szintű címsorrá.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: Tavaszi.
Keresés minialkalmazás bezárása: ESC.
Ugrás a kijelölés végére: JOBBRA.
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: h2, majd ENTER.
Mentés: CTRL + S.
Mentsd el a fájlt weboldalként akcionk.html néven és zárd be.
Fájl bezárása: CTRL + F4.
6. Nyisd meg a szolgaltatasaink.html fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: szolgaltatasaink, majd ENTER.
Módosítsd az oldalon található felsorolást számozatlan felsorolás stílusúvá.
Megjegyzés: Egy számozott felsorolás van az oldalon.
Csere minialkalmazás megnyitása: CTRL + H.
A Find szerkesztőmező az aktív, írd be: ol>.
TAB a Replace szerkesztőmezőig, töröld: ul>.
Összes cseréje: CTRL + ALT + ENTER.
Csere minialkalmazás bezárása: ESC.
Mentés: CTRL + S.
A Kertépítés és Szaktanácsadás közti sorokat ágyazd be a Kertépítés sora alá. (már ott van!) A beágyazott felsorolás legyen számozott felsorolás stílusú.
Megjegyzés: Az átalakítandó rész egy bekezdésben van, sortörésekkel, kivéve az utolsó listasort.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: Kertépítés.
Keresés minialkalmazás bezárása: ESC.
LE a következő sorra, ez a nyitó bekezdés jelölő sora.
Bekezdés tartalmának kijelölése: ALT + O.
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: ul, majd ENTER.
FEL az előző sorra.
Bekezdés kijelölése: ALT + O.
Keresés minialkalmazás megnyitása: CTRL + F.
Keresés a kijelölésben: ALT + L.
A Find szerkesztőmező az aktív, írd be: <br>.
Összes kijelölése: ALT + ENTER.
Keresés minialkalmazás bezárása: ESC.
Sortörő jelölők törlése: DELETE.
Kijelölés bővítése egy sorral: CTRL + ALT + NUMPAD2.
A sorok köré lista jelölők beszúrása:
Emmet: Becsomagolás rövidítéssel: CTRL + B, R.
A szerkesztőmezőbe írd be: li, majd ENTER.
Mentés: CTRL + S.
Mentsd el és zárd be a szolgaltatasaink.html fájlt.
Fájl bezárása: CTRL + F4.
7. Nyisd meg a termekeink.html fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: termekeink, majd ENTER.
Adj a termek_kep osztályú elemeken belüli képeknek alternatív szöveget, ezek értéke legyen ugyanaz, mint a képek alatt lévő, zárójelbe tett latin megnevezés.
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: \(.*\) , (írásjelekkel!).
Összes előfordulás kijelölése: ALT + ENTER.
Keresés minialkalmazás bezárása: ESC.
Latin nevek másolása: CTRL + C.
Kiléspés a többsoros kurzorból: ESC.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmező az aktív: jpg", (a záró idézőjelet is írd be!).
Összes előfordulás kijelölése: ALT + ENTER.
Keresés párbeszédpanel bezárása: ESC.
Ugrás a kijelölés végére: JOBBRA.
SZÓKÖZ, majd írd be: alt=, illeszd be a kimásolt latin neveket: CTRL + V.
Megjegyzés: Az értéknél az idézőjeleket nem kell beírni, automatikusan létrejönnek.
Maximalistáknak: az alternatív szövegekből a zárójelek törlése:
Csere minialkalmazás megnyitása: CTRL + H.
(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: "\(|\)" , (írásjelekkel!).
TAB a Replace szerkesztőmezőig, írd be: ".
Összes előfordulás cseréje: CTRL + ALT + ENTER.
Csere párbeszédpanel bezárása: ESC.
Mentés: CTRL + S.
Mentsd el és zárd be a termekeink.html fájlt.
Fájl bezárása: CTRL + F4.
8. Nyisd meg az elerhetosegunk.html fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: elerhetosegunk, majd ENTER.
Szúrd be a garden.jpg képet a kep osztályú elemen belülre, a kép megjelenési magasságát állítsd 180 pixelre.
Jelöld ki a kép nevét, garden.jpg, majd másold: CTRL + C.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: kep.
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=garden.jpg height=180], majd TAB.
Mentés: CTRL + S.
9. Az oldalon található űrlap egészét tedd egy mezőcsoportba (fieldset). Adj magyarázó feliratot (legend) a mezőcsoporthoz „Írjon nekünk!” szöveggel.
Jelöld ki a feladatleírásból az idézőjelek közötti 
Írjon nekünk! szöveget, majd másold: CTRL + C.
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.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: <fieldset>.
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: legend, majd TAB.
A kurzor a nyitó és záró jelölő között van, illeszd be a kimásolt szöveget: CTRL + V.
Mentés: CTRL + S.
10. A Tárgy felirathoz tartozó beviteli mező név tulajdonságát módosítsd „targy”-ra, a maximálisan beírható karakterek száma pedig 30 legyen.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: Tárgy.
Keresés minialkalmazás bezárása: ESC.
LE a beviteli mezőre.
ALT + N, a name értékig, írd át: targy.
JOBBRA, SZÓKÖZ, majd írd be: maxlength=30.
Megjegyzés: Az értéknél az idézőjeleket nem kell beírni, automatikusan létrejönnek.
Mentés: CTRL + S.
11. A submit gomb mellé vegyél fel egy reset típusú nyomógombot. Ennek felirata legyen „üzenet törlése”.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: submit.
Keresés minialkalmazás bezárása: ESC.
Ugrás a sor végére: END.
Írd be az Emmet rövidítést: input:reset, majd TAB.
A value érték van kijelölve, írd át: üzenet törlése.
Mentés: CTRL + S.
Mentsd el és zárd be az elerhetosegunk.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 menu azonosítójú elemen belüli hivatkozás jelölő elemekhez tartozó, valamint azok link és visited állapotaira a betű színe legyen fehér (white), a stílusa pedig félkövér.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: visited.
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: c:white, majd TAB. 
Vagy írd be: color: white;
Ú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.
13. A h1 elemekre a betűméret legyen az alap betűméret 1,65-szöröse, a szöveget pedig igazítsd középre.
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.65, majd TAB. 
Vagy írd be: font-size: 1.65em;
Ú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 termek_kep osztályú elemeken belüli img elemekhez határozz meg keret tulajdonságot, amely 3 pixel vastag, folytonos vonalú és #060  színű.
Ugrás a dokumentum végére: CTRL + END.
Új sor nyitása: ENTER.
Írd be: .termek_kep img{, 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: bd:3-s-#060, majd TAB.
Vagy írd be: border: 3px solid #060;
Mentés: CTRL + S.
15. A fieldset elemekre határozz meg 15 pixel méretű bélést (padding), valamint félkövér betűstílust.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: fieldset{.
Keresés minialkalmazás bezárása: ESC.
LE a padding sorig.
Sor kijelölése: CTRL + L.
Kijelölés felülírása Emmet rövidítéssel: p:15, majd TAB. 
Vagy írd be: padding: 15px;
Ú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.
16. A text típusú input elemek szélessége legyen 300 pixel.
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 – 33. feladatsor.

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

A „További szolgáltatásaink...” mondat elé tegyél sortörést.

Az „Üdvözlettel:” kezdődő két sor kerüljön új bekezdésbe.

3. Állíts be hiperhivatkozást a „faiskolai áruinkkal” szövegrészre, amely mutasson a Termékeink című oldalra (termekeink.html).

Állíts be hiperhivatkozást a „További szolgáltatásaink” szövegrészre is, ez mutasson a szolgaltatasaink.html oldalra.

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

4. Nyisd meg az akcionk.txt fájlt.

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

5. Tedd az „Akciónk” sort 1. szintű címsorrá.

A „Tavaszi akció!” sort pedig alakítsd 2. szintű címsorrá.

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

6. Nyisd meg a szolgaltatasaink.html fájlt.

Módosítsd az oldalon található felsorolást számozatlan felsorolás stílusúvá.

A Kertépítés és Szaktanácsadás közti sorokat ágyazd be a Kertépítés sora alá. (már ott van!) A beágyazott felsorolás legyen számozott felsorolás stílusú.

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

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

Adj a termek_kep osztályú elemeken belüli képeknek alternatív szöveget, ezek értéke legyen ugyanaz, mint a képek alatt lévő, zárójelbe tett latin megnevezés.

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

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

Szúrd be a garden.jpg képet a kep osztályú elemen belülre, a kép megjelenési magasságát állítsd 180 pixelre.

9. Az oldalon található űrlap egészét tedd egy mezőcsoportba (fieldset). Adj magyarázó feliratot (legend) a mezőcsoporthoz „Írjon nekünk!” szöveggel.

10. A Tárgy felirathoz tartozó beviteli mező név tulajdonságát módosítsd „targy”-ra, a maximálisan beírható karakterek száma pedig 30 legyen.

11. A submit gomb mellé vegyél fel egy reset típusú nyomógombot. Ennek felirata legyen „üzenet törlése”.

Mentsd el és zárd be az elerhetosegunk.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ú elemen belüli hivatkozás jelölő elemekhez tartozó, valamint azok link és visited állapotaira a betű színe legyen fehér (white), a stílusa pedig félkövér.

13. A h1 elemekre a betűméret legyen az alap betűméret 1,65-szöröse, a szöveget pedig igazítsd középre.

14. A termek_kep osztályú elemeken belüli img elemekhez határozz meg keret tulajdonságot, amely 3 pixel vastag, folytonos vonalú és #060 színű.

15. A fieldset elemekre határozz meg 15 pixel méretű bélést (padding), valamint félkövér betűstílust.

16. A text típusú input elemek szélessége legyen 300 pixel.

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