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

8. modul – 4. 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-4, 
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.
Tedd dőltté a „Ponta de Sagres” szövegrészt, valamint félkövérré az „Akár üzleti út, akár kikapcsolódás” szövegrészt.
Jelöld ki a feladatleírásból az idézőjelek közötti 
Ponta de Sagres 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: i, majd ENTER.
Vagy: HTML Tag Wrap: ALT + W. Írd be: i.
Jelöld ki a feladatleírásból az idézőjelek közötti 
Akár üzleti út, akár kikapcsolódás 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: b, majd ENTER.
Vagy: HTML Tag Wrap: ALT + W. Írd be: b.
Mentés: CTRL + S.
3. Állíts be hiperhivatkozást a „Foglalja le a szobát már most!” mondatra, amely mutasson a Foglalás című oldalra (foglalas.html), azon belül az urlap nevű könyvjelzőre.
Jelöld ki a feladatleírásból az idézőjelek közötti 
Foglalja le a szobát már most! 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=foglalas.html#urlap], 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 foglalas.html sorig, kiválasztása: ENTER.
A kurzor pozíciójába írd be: #urlap.
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 szolg.html fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: szolg, majd ENTER.
Módosítsd az oldalon megjelenő pool.jpg kép megjelenését úgy, hogy szélessége 425, magassága 283 pixel legyen. Adj alternatív szöveget a képhez medence értékkel.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: pool.jpg", (a záró idézőjelet is ír 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: width=425, JOBBRA, SZÓKÖZ, majd írd be: height=283 JOBBRA, SZÓKÖZ, majd írd be: alt=medence.
Megjegyzés: Az értéknél az idézőjeleket nem kell beírni, automatikusan létrejönnek.
Mentés: CTRL + S.
5. Tedd dőltté a felsorolás fölötti „Szolgáltatásaink:” sort.
Jelöld ki a feladatleírásból az idézőjelek közötti 
Szolgáltatásaink: (a kettőspontot is!), 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: i, majd ENTER.
Vagy: HTML Tag Wrap: ALT + W. Írd be: i.
Mentés: CTRL + S.
A felsorolás stílusát módosítsd számozottról számozatlanra.
Megjegyzés: egy számozott felsorolás van, ezért nem kell keresni.
Csere minialkalmazás megnyitása: CTRL + H.
A Find szerkesztőmező az aktív, írd be: ol>.
TAB a Replace szerkesztőmezőig, írd be: ul>.
Összes cseréje: CTRL + ALT + ENTER.
Csere minialkalmazás bezárása: ESC.
Mentés: CTRL + S.
6. Töröld a felsorolásból az „Iszapfürdő” sort, a felsorolás végére pedig tegyél be egy új sort „Aromaterápia” szöveggel.
Jelöld ki a feladatleírásból az idézőjelek közötti 
Iszapfürdő 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.
Sor kijelölése: CTRL + L.
Sor törlése: DELETE.
Jelöld ki a feladatleírásból az idézőjelek közötti 
Aromaterápia szöveget, majd másold: CTRL + C.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: /ul>.
Keresés minialkalmazás bezárása: ESC.
FEL az előző sorra.
Ugrás a sor végére: END.
Új sor nyitása: ENTER.
Írd be az Emmet rövidítést: li, majd TAB.
A kurzor pozíciójába illeszd be a kimásolt szöveget: CTRL + V.
Mentés: CTRL + S.
Mentsd el és zárd be a szolg.html fájlt.
Fájl bezárása: CTRL + F4.
7. 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ó head és body nyitó és záró jelölőivel.
Ugrás a dokumentum elejére: CTRL + HOME.
LE a nyitó html jelölőt követő sorig.
Ugrás a sor elejére: HOME.
A head részbe tartozó elemek kijelölése: CTRL + L, háromszor.
A kijelölt terület köré head jelölő beillesztése:
Emmet: Becsomagolás rövidítéssel: CTRL + B, R.
A szerkesztőmezőbe írd be: head, majd ENTER.
A kurzor a head záró jelölő után van.
Kijelölés a dokumentum végéig: CTRL + SHIFT + END.
A html záró jelölő visszavonása a kijelölésből: SHIFT + HOME.
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.
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 a szobak.html fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: szobak, majd ENTER.
Töröld a táblázatból az Egyéb nevű oszlopot.
Megjegyzés: A Egyéb tartalmú cella és az ebben az oszlopban lévő, kötőjelet tartalmazó cellákat is törölni kell.
Egyéb tartalmú cella törlése:
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: td>Egyéb.
Keresés minialkalmazás bezárása: ESC.
Kijelölés kiterjesztése a cellasorra: ALT + O.
Cellasor törlése: DELETE.
Az oszlop többi, kötőjelet tartalmazó cellájának törlése:
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmező az aktív, írd be: <td>-</td>.
Összes előfordulás kijelölése: ALT + ENTER.
Keresés párbeszédpanel bezárása: ESC.
Cellasorok kijelölése: CTRL + L.
Sorok törlése: DELETE.
Mentés: CTRL + S.
9. A megmaradt táblázat első sorának és oszlopának celláit alakítsd fejléc cella típusúvá.
Megjegyzés: A fejléc cellákat tartalmazó sor a táblázatcím (caption) záró jelölő utáni sorban található.
Első sor celláinak átalakítása:
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: caption.
Keresés minialkalmazás bezárása: ESC.
LE a táblázatsor jelölő sorára.
Táblázatsor kijelölése: ALT + O.
Csere minialkalmazás megnyitása: CTRL + H.
Keresés a kijelölésben: ALT + L.
A Find szerkesztőmező az aktív, írd be: td>.
TAB a Replace szerkesztőmezőig, írd be: th>.
Összes cseréje: CTRL + ALT + ENTER.
Csere minialkalmazás bezárása: ESC.
Első oszlop celláinak átalakítása:
Megjegyzés: Az oszlopcellákról annyit lehet tudni, hogy hónap neveket tartalmaznak, 1-1 kötőjellel elválasztva,
ezt használom az együttes kijelölésre.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmező az aktív, írd be: SZÓKÖZ KÖTŐJEL SZÓKÖZ (értelemszerűen írásjelekkel!).
Összes előfordulás kijelölése: ALT + ENTER.
Keresés párbeszédpanel bezárása: ESC.
Ugrás a kijelölések végére: JOBBRA.
A cellasorok körüli táblázatcella jelölők eltávolítása:
Emmet: Elem eltávolítása: CTRL + E, E.
A cellasorok köré fejléc cella jelölők jelölők beszúrása:
Emmet: Becsomagolás rövidítéssel: CTRL + B, R.
A szerkesztőmezőbe írd be: th, majd ENTER.
Mentés: CTRL + S.
Mentsd el és zárd be a szobak.html fájlt.
Fájl bezárása: CTRL + F4.
10. Nyisd meg a foglalas.html fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: foglalas, majd ENTER.
Módosítsd a Hotel nevű választólista tulajdonságait úgy, hogy mind a 4 értéke látszódjon.
Megjegyzés: A választólista name értéke: hotel.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: name="hotel", (az idézőjeleket 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: size=4.
Megjegyzés: Az értéknél az idézőjeleket nem kell beírni, automatikusan létrejönnek.
Mentés: CTRL + S.
Alapértelmezés szerint a Cape Hotel legyen kiválasztott állásban.
LE, kétszer, amíg elhangzik a Cape Hotel.
Lépj a Cape Hotel szöveg elejére: CTRL + BALRA.
BALRA, ekkor a kurzor már a nyitó jelölőben van, SZÓKÖZ, majd írd be: selected.
Mentés: CTRL + S.
11. Adj hozzá két új listaelemet a Szoba típusa (szoba nevű) választólistához: Egyágyas, illetve Kétágyas szöveggel, a listaelemekhez rendelt érték pedig 1 illetve 2 legyen.
Megjegyzés: A választólista name értéke: szoba.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: name="szoba", (az idézőjeleket is írd be!).
Keresés minialkalmazás bezárása: ESC.
LE, majd ugrás a sor végére: END.
Új sor nyitása: 
Írd be az Emmet rövidítést: option[value=1]{Egyágyas}+option[value=2]{Kétágyas}, majd TAB.
A kód jelentése: Két option elem létrehozása, az első value értéke 1, tartalma: Egyágyas, a második value értéke 2, tartalma: Kétágyas.
Megjegyzés: rövidebb kód csak így sikerült: option[value=$]*2{$ ágyas}.
Mentés: CTRL + S.
Mentsd el és zárd be a foglalas.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ítsa a CSS szabályokat az alábbiak szerint:
Az aktiv azonosítójú elemen belüli hivatkozás jelölő elemek betűszíne legyen #f66, a betűstílus pedig félkövér.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: #aktiv a{.
Keresés minialkalmazás bezárása: ESC.
LE a color sorra.
Sor kijelölése: CTRL + L.
Kijelölés felülírása Emmet rövidítéssel: c:#f66, majd TAB.
Vagy írd be: color: #f66;
Ú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. Adj keretet a tartalom azonosítón belüli table elemeknek: a felső és a baloldali keret legyen 2 pixel vastag, folytonos és #ccc színű, az alsó és jobboldali keret pedig 2 pixel vastag, folytonos és #999 színű.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: #tartalom table{.
Keresés minialkalmazás bezárása: ESC.
LE a border sorra.
Sor kijelölése: CTRL + L.
Megjegyzés: Először a szegély azonos beállításait adjuk meg, majd a különböző szegélyszíneket.
Írd be az Emmet rövidítést: bd:2-s, majd TAB. Új sor nyitása: ENTER.
Írd be az Emmet rövidítést: bdc:#ccc-#999-#999-#ccc, majd TAB.
A kibontás után: 
border: 2px solid;
border-color: #ccc #999 #999 #ccc;
Mentés: CTRL + S.
14. A táblázat feliratához (caption) rendelj csupa nagybetűs (uppercase) betűképet és 2em nagyságú betűközt.
Megjegyzés: Az elemre már van tulajdonság megadva.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: caption{.
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: tt:u, majd TAB.
Vagy írd be: text-transform: uppercase;
Új sor nyitása: ENTER.
Írd be az Emmet rövidítést: lts:2e, majd TAB.
Vagy írd be: letter-spacing: 2em;
Mentés: CTRL + S.
15. A foglalas_urlap osztályú elem háttérszíne legyen #eee, a bal- és jobboldali margóját pedig állítsd be úgy, hogy az elem tartalma középre rendeződjön.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: .foglalas_urlap{.
Keresés minialkalmazás bezárása: ESC.
Ugrás a sor végére: END.
LE a margin sorig.
Sor kijelölése: CTRL + L.
Kijelölés felülírása Emmet rövidítéssel: m:0-a, majd TAB.
Vagy írd be: margin: 0 auto;
Új sor nyitása: ENTER.
Írd be az Emmet rövidítést: bgc:#eee, majd TAB.
Vagy írd be: background-color: #eee;
Mentés: CTRL + S.
16. A text típusú input elemek szélessége legyen 220 pixel, a háttérszínük pedig #ffe.
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:220, majd TAB.
Vagy Írd be: width: 220px;
Új sor nyitása: ENTER.
Írd be az Emmet rövidítést: bgc:#ffe, majd TAB.
Vagy írd be: background-color: #ffe.
Mentés: CTRL + S.
Mentsd el é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 – 4. feladatsor.

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

Tedd dőltté a „Ponta de Sagres” szövegrészt, valamint félkövérré az „Akár üzleti út, akár kikapcsolódás” szövegrészt.

3. Állíts be hiperhivatkozást a „Foglalja le a szobát már most!” mondatra, amely mutasson a Foglalás című oldalra (foglalas.html), azon belül az urlap nevű könyvjelzőre.

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

4. Nyisd meg a szolg.html fájlt.

Módosítsd az oldalon megjelenő pool.jpg kép megjelenését úgy, hogy szélessége 425, magassága 283 pixel legyen. Adj alternatív szöveget a képhez medence értékkel.

5. Tedd dőltté a felsorolás fölötti „Szolgáltatásaink:” sort.

A felsorolás stílusát módosítsd számozottról számozatlanra.

6. Töröld a felsorolásból az „Iszapfürdő” sort, a felsorolás végére pedig tegyél be egy új sort „Aromaterápia” szöveggel.

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

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

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

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

8. Nyisd meg a szobak.html fájlt.

Töröld a táblázatból az Egyéb nevű oszlopot.

9. A megmaradt táblázat első sorának és oszlopának celláit alakítsd fejléc cella típusúvá.

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

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

Módosítsd a Hotel nevű választólista tulajdonságait úgy, hogy mind a 4 értéke látszódjon.

Alapértelmezés szerint a Cape Hotel legyen kiválasztott állásban.

11. Adj hozzá két új listaelemet a Szoba típusa (szoba nevű) választólistához: Egyágyas, illetve Kétágyas szöveggel, a listaelemekhez rendelt érték pedig 1 illetve 2 legyen.

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

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

Módosítsa a CSS szabályokat az alábbiak szerint: Az aktiv azonosítójú elemen belüli hivatkozás jelölő elemek betűszíne legyen #f66, a betűstílus pedig félkövér.

13. Adj keretet a tartalom azonosítón belüli table elemeknek: a felső és a baloldali keret legyen 2 pixel vastag, folytonos és #ccc színű, az alsó és jobboldali keret pedig 2 pixel vastag, folytonos és #999 színű.

14. A táblázat feliratához (caption) rendelj csupa nagybetűs (uppercase) betűképet és 2em nagyságú betűközt.

15. A foglalas_urlap osztályú elem háttérszíne legyen #eee, a bal- és jobboldali margóját pedig állítsd be úgy, hogy az elem tartalma középre rendeződjön.

16. A text típusú input elemek szélessége legyen 220 pixel, a háttérszínük pedig #ffe.

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