8. modul – 10. 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-10, 
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.
Állíts be hiperhivatkozást a „képzéseink listáját” szövegrészre, amely mutasson a képzéseket tartalmazó oldalra (kepzeseink.html).
Jelöld ki a feladatleírásból az idézőjelek közötti 
képzéseink listáját 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=kepzeseink.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 kepzeseink.html sorig, kiválasztása: ENTER.
Mentés: CTRL + S.
Állíts be hiperhivatkozást a „kapcsolatot” szóra is, ez mutasson a kapcsolat.html-re.
Jelöld ki a feladatleírásból az idézőjelek közötti 
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.
Emmet: Becsomagolás rövidítéssel: CTRL + B, R.
A szerkesztőmezőbe írd be: a[href=kapcsolat.html], majd ENTER.
Mentés: CTRL + S.
3. Tedd félkövérré a „régi és új” szövegrészt, valamint a „Kellemes böngészést, jó szórakozást kívánunk!” mondatot. 
Jelöld ki a feladatleírásból az idézőjelek közötti 
régi és új 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: b, majd ENTER.
2. megoldás:
HTML Tag Wrap: ALT + W.
Írd be: b.
Jelöld ki a feladatleírásból az idézőjelek közötti 
Kellemes böngészést, jó szórakozást kívánunk! 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: b, majd ENTER.
2. megoldás:
HTML Tag Wrap: ALT + W.
Írd be: b.
Mentés: CTRL + S.
4. Állítsd be a szöveg alatti kép paramétereit a következőképpen: A kép szélessége 380 pixel, magassága 280 pixel legyen. Adj hangszerek néven alternatív szöveget a képhez.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: img.
Keresés minialkalmazás bezárása: ESC.
Ugrás a kijelölt szöveg végére: JOBBRA.
SZÓKÖZ, majd írd be: width=380, JOBBRA és SZÓKÖZ, majd írd: height=280, JOBBRA és SZÓKÖZ, majd írd: alt=hangszerek.
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 index.html fájlt.
Fájl bezárása: CTRL + F4.
5. 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.
6. A cím alatti szövegrészt formázd át úgy, hogy az számozatlan felsorolás stílusú legyen.
Megjegyzés: A cím: Kapcsolat, vagy kereshető a h1 jelölő.
Az átalakítandó sorok egy bekezdés (p) jelölőn belül helyezkednek el. Nincs más bekezdés.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: h1> (vagy Kapcsolat).
Keresés minialkalmazás bezárása: ESC.
LE a következő sorra.
Csere minialkalmazás megnyitása: CTRL + H.
A Find szerkesztőmező az aktív, írd be: p>.
TAB a Replace szerkesztőmezőig, írd be: ul>.
Összes előfordulás cseréje: CTRL + ALT + ENTER.
Megjegyzés: A listaelemeket egy kötőjellel kezdődő és két sorba tördelt tartalomból kell kialakítani,
minden listarész között üres sor is van, ezért a többsoros kurzort a kötőjelekhez igazítom.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmező az aktív, írd be: 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.
Kijelölések törlése: DELETE.
Első sorok kijelölése: CTRL + L.
Második sorok kijelölése is: CTRL + L.
A kijelölések köré li jelölők beillesztése:
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 a fájlt weboldalként kapcsolat.html néven és zárd be.
Fájl bezárása: CTRL + F4.
7. Nyisd meg a kepzeseink.html fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: kepzeseink, majd ENTER.
Töröld az első mondatból a „melyekre jelentkezni legkésőbb február 1-jéig lehet” szövegrészt.
Megjegyzés: A megadott szöveg előtti rész vesszővel zárul.
Jelöld ki a feladatleírásból az idézőjelek közötti 
melyekre jelentkezni legkésőbb február 1-jéig lehet szöveget, majd másold: CTRL + C.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írj be egy VESSZŐT és egy SZÓKÖZT, majd illeszd be a kimásolt szöveget: CTRL + V.
Keresés minialkalmazás bezárása: ESC.
Kijelölt szöveg törlése: DEL.
Mentés: CTRL + S.
Javítsd továbbá a második mondat „áfával értendők” szövegrészt „áfa nélkül értendők”-re.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: áfával.
Keresés minialkalmazás bezárása: ESC.
A kijelölt szöveget írd át: áfa nélkül.
Mentés: CTRL + S.
8. Alakítsd a táblázat első sorának, valamint első oszlopának celláit fejléc cella típusúvá.
Megjegyzés: A sor fejléc cellák a thead jelölőn belüli sorban találhatók.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmező az aktív, írd be: thead.
Keresés minialkalmazás bezárása: ESC.
Thead tartalmának 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.
Megjegyzés: Az oszlopcellákban nincs azonos adat, de a második cellákban szerepe az év szó,
ezt használom az együttes kijelölésre. FONTOS: Az év szó elé SZÓKÖZT is kell ütni!
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmező az aktív, írd be: SZÓKÖZ év.
Összes előfordulás kijelölése: ALT + ENTER.
Keresés minialkalmazás bezárása: ESC.
FEL, a fejléc cellává alakítandó sorokra.
A táblázatcella jelölők eltávolítása:
Emmet: Elem eltávolítása: CTRL + E, E.
A sorok köré fejléc cella 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.
9. Rendezd a táblázat sorait hangszer szerint ABC sorrendbe.
Megjegyzés: Két sort kell átmozgatni. A zongora táblázatsor a végére, vagyis a záró tbody elé,
valamint a dob táblázatsor az elejére, vagyis a nyitó tbody után.
A kurzor az előző feladat után a zongora fejléc cella sor végén van.
FEL, majd BALRA, a kurzor a nyitó táblázatsor jelölőben van.
Táblázatsor kijelölése: ALT + O.
Táblázatsor kivágása: CTRL + X.
Megjegyzés: A cellákat a tbody záró jelölő elé kell beilleszteni.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: /tbody.
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.
Kivágott táblázatsor beillesztése: CTRL + V.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmező az aktív, írd be: dob.
Keresés minialkalmazás bezárása: ESC.
FEL, majd BALRA, a kurzor a nyitó táblázatsor jelölőben van.
Táblázatsor kijelölése: ALT + O.
Táblázatsor kivágása: CTRL + X.
Megjegyzés: A cellákat a tbody nyitó jelölő után kell beilleszteni.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: <tbody.
Keresés minialkalmazás bezárása: ESC.
Ugrás a sor végére: END.
Új sor nyitása: ENTER.
Kivágott táblázatsor beillesztése: CTRL + V.
Mentés: CTRL + S.
Mentsd el és zárd be a kepzeseink.html fájlt.
Fájl bezárása: CTRL + F4.
10. Nyisd meg a vendegkonyv.html fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: vendegkonyv, majd ENTER.
Módosítsd az „Üzenet” melletti beviteli mező paramétereit úgy, hogy a sorok száma 5, a soron belüli karakterek száma 40 legyen. A mezőben legyen alapértelmezetten a következő szöveg: „Az üzenetét ide írja.”
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: <textarea.
Keresés minialkalmazás bezárása: ESC.
Ugrás a kijelölt szöveg végére: JOBBRA.
SZÓKÖZ, majd írd be: cols=40, JOBBRA, SZÓKÖZ, majd írd: rows=5.
Megjegyzés: Az értéknél az idézőjeleket nem kell beírni, automatikusan létrejönnek.
Jelöld ki a feladatleírásból az idézőjelek közötti 
Az üzenetét ide írja. szöveget, majd másold: CTRL + C.
Ugrás a textarea jelölők közé: ALT + I.
Illeszd be a kimásolt szöveget: CTRL + V.
Mentés: CTRL + S.
11. Módosítsd az űrlap végén lévő nyomógombot submit típusúra, a gomb felirata pedig „Bejegyzés küldése” legyen.
Megjegyzés: A gomb jelenleg button típusú.
Jelöld ki a feladatleírásból az idézőjelek közötti 
Bejegyzés küldése szöveget, majd másold: CTRL + C.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: button.
Keresés minialkalmazás bezárása: ESC.
Írd át a kijelölést: submit.
ALT + N, a value értékig, illeszd be a kimásolt szöveget. CTRL + V.
Mentés: CTRL + S.
Mentsd el és zárd be a vendegkonyv.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 elemekre a betűméret az alap betűméret 1,8-szerese legyen, a betűszín pedig zöld (green).
Megjegyzés: Az elemre már van tulajdonság beállítást.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: h1{.
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: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:green, majd TAB. 
Vagy írd be: color: green;
Mentés: CTRL + S.
13. A kep osztályú elemeken belüli img elemek keretének vastagsága legyen 2 pixel, folytonos vonalú és barna (brown) színű.
Ugrás a dokumentum végére: CTRL + END.
Új sor nyitása: ENTER.
Írd be: .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:2-s-brown.
Vagy írd be: border: 2px solid brown.
Mentés: CTRL + S.
14. Egészítsd ki a th elemekre vonatkozó szabályt a következőkkel: a szöveg legyen balra rendezett, valamint a betűméret az alap betűméret 1,1-szerese.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: th{.
Keresés minialkalmazás bezárása: ESC.
Ugrás a sor végére: END.
LE a text-align sorra.
Sor kijelölése: CTRL + L.
Kijelölés felülírása Emmet rövidítéssel: ta:l, majd TAB. 
Vagy írd be: text-align: left;
Új sor nyitása: ENTER.
Írd be az Emmet rövidítést: fz:1.1, majd TAB. 
Vagy írd be: font-size: 1.1em;
Mentés: CTRL + S.
15. A text típusú beviteli mezők szélességéhez rendeljen 300 pixel értéket.
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.
16. Határozz meg bélés (padding) méretet a fieldset elemekre: a felső és alsó értéke legyen 0, a bal és jobboldali pedig 20 pixel.
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 sor végére: END.
Új sor nyitása: ENTER.
Írd be az Emmet rövidítést: p:0-20, majd TAB. 
Vagy írd be: padding: 0px 20px;
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