8. modul – 18. 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-18, 
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.
Alakítsd 2. szintű címsorrá a Cím, Telefon, Email és a Nyitvatartás sorokat.
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: p>[C|T|E|N] , (írásjelekkel!). 
Összes kijelölése: ALT + ENTER.
Megjegyzés: Így mind a négy, szükséges sor ki lesz kijelölve.
Keresés párbeszédpanel 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.
3. Állíts be hiperhivatkozást az „info@izzofitneszklub.hu” email címre.
Jelöld ki a feladatleírásból az idézőjelek közötti 
info@izzofitneszklub.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 „üzenet írása itt” szövegrészre is, amely mutasson a Kapcsolat című oldalra (kapcs.html).
Jelöld ki a feladatleírásból az idézőjelek közötti 
üzenet írása itt 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=kapcs.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 kapcs.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 a szolg.txt fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: szolg, 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.
Adj oldalcímet „Izzó Fitnesz Klub” szöveggel.
Rendelj a fájlhoz a styles.css nevű stíluslap állományt.
Megjegyzés: A head záró jelölő elé először a stíluslap csatolást, majd a címet kell felvenni.
Jelöld ki a feladatleírásból az idézőjelek közötti 
Izzó Fitnesz Klub 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ő sorra.
Ugrás a sor végére.
Új sor nyitása: ENTER.
Írd be az Emmet rövidítést: link:css, majd TAB. 
A kibontott kódban módosítani kell a stíluslap nevét, ami kibontáskor ki van jelölve.
Alapnév (style), ugrás a kijelölés végére: JOBBRA, írd be: s.  
Ú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 szöveget: CTRL + V.
Mentés: CTRL + S.
5. Tedd dőltté a „has-, hát- és karizom-fejlesztő” szövegrészt.
Jelöld ki a feladatleírásból az idézőjelek közötti 
has-, hát- és karizom-fejlesztő 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.
Mentés: CTRL + S.
Alakítsd félkövérré a Konditerem, az Uszoda és a Szauna sorokat.
Megjegyzés: A sorok bekezdés jelölők között vannak.
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: p>(Kon|U|S) , (írásjelekkel!).
Megjegyzés: A Kon azért szükséges, mert van egy Kom kezdetű bekezdés is.
Összes kijelölése: ALT + ENTER.
Megjegyzés: Így mind a három, szükséges sor ki lesz kijelölve.
Keresés párbeszédpanel bezárása: ESC.
Ugrás a kijelölés végére: JOBBRA.
Bekezdések tartalmának kijelölése: ALT + O.
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.
6. Szúrd be a fitness_2.jpg képet a kep osztályú elemen belülre.
Adj alternatív szöveget a képnek „súlyzó” néven.
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=fitness_2.jpg alt=súlyzó], majd TAB.
Mentés: CTRL + S.
7. A táblázat első sorának celláit alakítsd fejléc cella típusúvá.
Megjegyzés: A 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őbe írd be: <thead.
Keresés minialkalmazás bezárása: ESC.
Kijelölés bővítése a thead tartományra: ALT + N.
Csere minialkalmazás megnyitása: CTRL + H.
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.
Mentés: CTRL + S.
Mentsd el a fájlt weboldalként szolg.html néven és zárd be.
Fájl bezárása: CTRL + F4.
8. Nyisd meg a kapcs.html fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: kapcs, majd ENTER.
Szúrj be egy új sort az oldalon található űrlapba a Név alá. A felirat legyen „Email cím”, a hozzá tartozó mező egysoros szöveges beviteli mező.
Megjegyzés: A felirat és a beviteli mező egy bekezdésben van, sortöréssel.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: Név.
Keresés minialkalmazás bezárása: ESC.
LE a következő sorra. 
Ugrás a sor végére: END.
Új sor nyitása: ENTER.
Írd be az Emmet rövidítést: p{Email cím}>br+input[name=email], majd TAB.
A kód jelentése: Bekezdés (p) elem felvétele, melynek tartalma: Email cím, bekezdés elemen belül sortörés és egy text típusú input elem létrehozása, az input elem name értéke: email.
Mentés: CTRL + S.
9. A „Melyik szolgáltatásunk keltette fel az érdeklődését?” kérdéshez tartozó rádiógombok feliratait alakítsd címke (label) típusúvá.
Megjegyzés: A label jelölőnél szükség van a rádió gombok azonosítójára, ezek a tulajdonságok végén vannak.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmező az aktív, írd be: radio.
Keresés párbeszédpanel bezárása: ESC.
FEL az előző sorra.
Rádiógombokat tartalmazó bekezdés tartalmának kijelölése: ALT + O.
Keresés minialkalmazás megnyitása: CTRL + F.
Keresés csak a kijelölésben: ALT + L.
A Find szerkesztőmezőbe írd be: id=" , (a záró idézőjelet is írd be!).
Összes kijelölése: ALT + ENTER.
Keresés ablak bezárása: ESC.
Ugrás a kijelölések végére: JOBBRA.
Azonosítók kijelölése: NUMPAD6.
Azonosítók másolása: CTRL + C.
Ugrás a rádiógomb feliratok elé: CTRL + NUMPAD6.
Feliratok kijelölése: NUMPAD6.
A kijelölt feliratok köré label jelölő beillesztése:
HTML Tag Wrap: ALT + W.
Írd: label for=.
Megjegyzés: Az értéknél az idézőjeleket nem kell beírni, automatikusan létrejönnek.
A kurzor a for értéknél van, a kimásolt azonosítók illeszd be: CTRL + V.
Mentés: CTRL + S.
10. Az Üzenet felirathoz tartozó beviteli mezőt módosítsd többsorosra, a sorok száma legyen 6, a soron belüli karakterek száma pedig 60.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: Üzenet.
Keresés minialkalmazás bezárása: ESC.
LE a következő sorra, ez az egysoros beviteli mező sora.
Beviteli mező kijelölése: ALT + O.
1. megoldás:
Írd be az Emmet rövidítést: textarea, majd TAB.
A kurzor a name értéknél áll, írd be: uzenet.
JOBBRA, SZÓKÖZ, majd írd be: rows=6, JOBBRA, SZÓKÖZ, majd írd be: cols=60.
Megjegyzés: Az értéknél az idézőjeleket nem kell beírni, automatikusan létrejönnek.
2. megoldás:
Írd be az Emmet rövidítést: textarea[name=uzenet cols=6 rows=60], majd TAB.
Mentés: CTRL + S.
11. Az űrlap végén található nyomógomb paramétereit módosítsd úgy, hogy a típusa submit, a felirata pedig „küldés” legyen.
Megjegyzés: A gomb jelenleg button típusú.
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, írd át: küldés.
Mentés: CTRL + S.
Mentsd el és zárd be a kapcs.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!) kivalasztott osztályú hivatkozás jelölő elemekre a betűszín legyen sárga (yellow).
Ugrás a dokumentum végére: CTRL + END.
Új sor nyitása: ENTER.
Írd be: #menu a.kivalasztott{, 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: c:yellow, majd TAB. 
Vagy írd be: color: yellow;
Mentés: CTRL + S.
13. Módosítsd a tartalom azonosítójú elem h2 gyermekelemeire vonatkozó szabályt: itt a betű mérete az alap betűméret 1,3-szorosa legyen, a betűstílus pedig félkövér.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: #tartalom 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:1.3+fw:b, majd TAB. 
Vagy írd be: font-size: 1.3em; font-weight: bold;
Mentés: CTRL + S.
14. A table elemek felső és alsó margóit méretezd 10 pixelesre, a bal- és jobboldali margókat pedig állítsd be úgy, hogy az elem középre rendeződjön.
Megjegyzés: Az elemre van tulajdonság megadva.
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: m:10-a, majd TAB. 
Vagy írd be: margin: 10px auto;
Mentés: CTRL + S.
15. A th és td elemekhez adj keretet, ami 1 pixel vastag, pontozott mintázatú és #666 színű.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: th, td{.
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: bd:1-dt-#666, majd TAB.
Vagy írd be: border: 1px dotted #666;
Mentés: CTRL + S.
16. A fieldset elemek felső és alsó margója 0, a bal- és jobboldali margója 20 pixel értékű legyen.
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: m:0-20, majd TAB. 
Vagy írd be: margin: 0px 20px;
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