8. modul – 19. 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-19, 
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 1. szintű címsorrá az „Üdvözöljük a klubunkban!” sort, valamint 2. szintű címsorrá „A klubról” sort.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: Üdvözöljük.
Keresés minialkalmazás bezárása: ESC.
Ugrás a kódsor elejére: HOME.
JOBBRA	(ekkor már a nyitó jelölőn belül van a kurzor).
Bekezdés jelölőnév (p) kijelölése: SHIFT + JOBBRA, írd át: h1.
Megjegyzés: A nyitó jelelölő átnevezésével a záró jelölő átnevezése is megtörténik.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: A klubról.
Keresés minialkalmazás bezárása: ESC.
Ugrás a kódsor elejére: HOME.
JOBBRA	(ekkor már a nyitó jelölőn belül van a kurzor).
Bekezdés jelölőnév (p) kijelölése: SHIFT + JOBBRA, írd át: h2.
Mentés: CTRL + S.
3. Állíts be hiperhivatkozást a „házi versenyeket” szövegrészre, amely mutasson az Események című oldalra (esemenyek.html).
Jelöld ki a feladatleírásból az idézőjelek közötti 
házi versenyeket 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=esemenyek.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 az esemenyek.html sorig, kiválasztása: ENTER.
Mentés: CTRL + S.
Állíts be hiperhivatkozást a „nyitvatartás alatt” szövegrészre is, ez mutasson a kapcsolat.html oldalra.
Jelöld ki a feladatleírásból az idézőjelek közötti 
nyitvatartás alatt 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.
4. Szúrd be a chess.jpg képet a kep osztályú elemen belülre.
A kép megjelenési szélességét állítsd 200 pixelre.
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=chess.jpg width=200], majd TAB.
Mentés: CTRL + S.
Ments 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.
Adj oldalcímet „Black Knight Sakk Klub” szöveggel.
Rendelj a fájlhoz a styles.css 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 
Black Knight Sakk 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: END.
Ú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. 
Ugrás a sor végére: END.
Új sor nyitása: ENTER.
Írd be az Emmet rövidítést: title, majd TAB. Vagy írd be: <title></title>.
A kurzor pozíciójába illeszd be a kimásolt szöveget: CTRL + V.
Mentés: CTRL + S.
6. Alakítsd a Kapcsolat cím alatti sorokat számozatlan felsorolás stílusúvá.
Megjegyzés: Az átalakítandó szöveg bekezdés jelölők között van.
A listasorok sortöréssel két sorba van tördelve, az első sorok előtt egy kötőjel és egy szóköz van.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: h1>Kapcsolat.
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.
Felsorolás tartalmának 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őbe írd be: <br>.
Összes előfordulás kijelölése: ALT + ENTER.
Keresés minialkalmazás bezárása: ESC.
Ugrás a kijelölt sorok elejére: HOME.
Kötőjel és szóköz kijelölése: NUMPAD6.
Kötőjel és szóköz törlése: DELETE.
Sorok kijelölése: CTRL + L.
Második sorok hozzáadása a kijelölésekhez: CTRL + L.
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 az esemenyek.html fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: esemenyek, majd ENTER.
A táblázat első sorának cellái legyenek fejléc cella típusúak.
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.
Thead tartalmának kijelölése: ALT + O.
Csere minialkalmazás megnyitása: CTRL + H.
Keresés csak 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.
Mentés: CTRL + S.
Mentsd el és zárd be az esemenyek.html fájlt.
Fájl bezárása: CTRL + F4.
8. Nyisd meg a csatlakozas.html fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: csatlakozas, majd ENTER.
Szúrj be egy új sort az űrlapba a Név alá. A felirat legyen Email cím, a hozzá tartozó mező egysoros szöveges beviteli mező.
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. Állítsd be a Születési idő év beviteli mezőjének maximálisan beírható karaktereinek számát 4-re, a nap mező maximálisan beírható karaktereinek számát 2-re.
Megjegyzés: name értékek: szido_ev, szido_nap.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: szido_ev", (a záró idézőjelet is írd be!).
Keresés minialkalmazás bezárása: ESC.
JOBBRA, SZÓKÖZ, majd írd be: maxlength=4.
Megjegyzés: Az értéknél az idézőjeleket nem kell beírni, automatikusan létrejönnek.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: szido_nap", (a záró idézőjelet is írd be!).
Keresés minialkalmazás bezárása: ESC.
JOBBRA, SZÓKÖZ, majd írd be: maxlength=2.
Megjegyzés: Az értéknél az idézőjeleket nem kell beírni, automatikusan létrejönnek.
Mentés: CTRL + S.
10. A Megjegyzés felirathoz tartozó mezőt módosítsd többsoros beviteli mezőre, a sorok száma 6, a soron belüli karakterek száma 55 legyen.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: Megjegyzés.
Keresés minialkalmazás bezárása: ESC.
LE, a következő sorra.
Input elem 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: megj.
JOBBRA, SZÓKÖZ majd írd be: rows=6, JOBBRA, SZÓKÖZ, majd írd be: cols=55.
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=megj cols=6 rows=55], majd TAB.
Mentés: CTRL + S.
11. Az űrlap alján található nyomógomb mellé tegyél be egy reset típusú nyomógombot, melynek felirata „törlés” legyen.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: submit.
Keresés minialkalmazás bezárása: ESC.
Input elem kijelölése: ALT + O.
Ugrás az input elem végére: JOBBRA.
Írd be az Emmet rövidítést: input:reset, majd TAB.
A kurzor a value értéknél van, írd be: törlés.
Mentés: CTRL + S.
Mentsd el és zárd be a csatlakozas.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:
Adj keretet a kep osztályú elemeknek: a keret vastagsága 2 pixel, folytonos vonalú és #ff9 színű.
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 sor végére: END.
Új sor nyitása: ENTER.
Írd be az Emmet rövidítést: bd:2-s-#ff9, majd TAB.
Vagy írd be: border: 2px solid #ff9;
Mentés: CTRL + S.
13. A jobb azonosítójú elemek h2 gyermekelemeinél a betű mérete az alap betűméret 1,4-szerese legyen.
Ugrás a dokumentum végére: CTRL + END.
Új sor nyitása: ENTER.
Írd be: #jobb h2{, 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: fz:1.4, majd TAB. 
Vagy írd be: font-size: 1.4em;
Mentés: CTRL + S.
14. A table elemek felső és alsó margóit állítsd 0-ra, a bal- és jobboldali margókat állítsd be úgy, hogy az elem középre rendeződjön.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: table{.
Keresés minialkalmazás bezárása: ESC.
LE a margin sorra.
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;
Mentés: CTRL + S.
15. A szulido_ev és szulido_nap nevű input elemek szélességeire határozzon meg 30 pixel értéket.
Megjegyzés: A munkafájlban szido_ev és szido_nap szerepel!
Ugrás a dokumentum végére: CTRL + END.
Új sor nyitása: ENTER.
Írd be: input[name^="szido_"]{, 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:30, majd TAB. 
Vagy írd be: width: 30px;
Mentés: CTRL + S.
16. A fildset elemek p gyermekelemei esetén a betűstílus legyen félkövér.
Ugrás a dokumentum végére: CTRL + END.
Új sor nyitása: ENTER.
Írd be: fieldset p{, 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.
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