8. modul – 38. 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-38, 
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 legtöbb viccet beküldők...” kezdetű bekezdés elé szúrj be sortörést, és vond össze a fölötte lévő bekezdéssel.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: A legtöbb.
Keresés minialkalmazás bezárása: ESC.
Ugrás a kijelölés elejére: BALRA.
Nyitó bekezdés jelölő kijelölése: SHIFT + HOME, majd töröld: DELETE.
FEL az előző sorra, ugrás a sor végére: END.
Záró bekezdés jelölő kijelölése: NUMPAD4, háromszor.
Írd át: <br>.
Mentés: CTRL + S.
Alkalmazz félkövér és dőlt betűstílust a Balu szóra.
Megjegyzés: A bekezdésben lévő kifejezéseket kell keresni, harmadik és negyedik előfordulás.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: Balu, majd kétszer ENTER.
Keresés minialkalmazás bezárása: ESC.
Következő kifejezés kijelölése is: CTRL + D.
Emmet: Becsomagolás rövidítéssel: CTRL + B, R.
A szerkesztőmezőbe írd be: b>i, majd ENTER.
Mentés: CTRL + S.
3. Állíts be hiperhivatkozást „az eddig beküldött viccek” szövegrészre, amely mutasson a Viccek című oldalra (viccek.html).
Jelöld ki a feladatleírásból az idézőjelek közötti 
az eddig beküldött viccek 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=viccek.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 viccek.html sorig, kiválasztása: ENTER.
Mentés: CTRL + S.
Állíts be hiperhivatkozást a „küldj jobbakat” szövegrészre is, ez mutasson a bekuldes.html oldalra.
Jelöld ki a feladatleírásból az idézőjelek közötti 
küldj jobbakat 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=bekuldes.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 bekuldes.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 top.txt fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: top, 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ó body nyitó és záró jelölőivel. Adj oldalcímet „Balu vicces oldala” szöveggel.
Ugrás a dokumentum elejére: CTRL + HOME.
LE a záró head jelölőt követő sorba.
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.
Jelöld ki a feladatleírásból az idézőjelek közötti 
Balu vicces oldala 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ő sorba.
Ugrás a sor végére: END.
Ú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 címet: CTRL + V.
Mentés: CTRL + S.
5. Módosítsd a fun_1.jpg képet magába foglaló bekezdés osztályát kep-re. A képnek adj alternatív szöveget „süti” értékkel.
Megjegyzés: Ez az egy kép van az oldalon.
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ölés elejére: BALRA.
SZÓKÖZ, majd írd be: class=kep.
Megjegyzés: Az értéknél az idézőjeleket nem kell beírni, automatikusan létrejönnek.
Keresés ismétlése: F3.
Ugrás a kijelölés végére: JOBBRA.
SZÓKÖZ, majd írd be: alt=süti.
Megjegyzés: Az értéknél az idézőjeleket nem kell beírni, automatikusan létrejönnek.
Mentés: CTRL + S.
Mentsd el a fájlt weboldalként top.html néven és zárd be.
Fájl bezárása: CTRL + F4.
6. Nyisd meg a viccek.html fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: viccek, majd ENTER.
Az oldalon található táblázatnak adj táblázatcímet (caption) „E heti vicceink” szöveggel.
Jelöld ki a feladatleírásból az idézőjelek közötti 
E heti vicceink szöveget, majd másold: CTRL + C.
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 kijelölés végére: JOBBRA.
Új sor nyitása: ENTER.
Írd be az Emmet rövidítést: caption, majd TAB.
A kurzor pozíciójába illeszd be a kimásolt címet: CTRL + V.
Mentés: CTRL + S.
7. A táblázat minden viccet tartalmazó celláját vond össze a mellette lévő üres cellával.
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.
Sorok kijelölése: CTRL + L.
Sorok törlése: DELETE.
FEL az előző sorra, ekkor a kurzor a viccet tartalmazó táblázatcellában van.
Cellák tartalmának kijelölése: ALT + O.
Ugrás a kijelölése elejére: BALRA.
Még egyszer BALRA, ekkor a viccet tartalmazó cellák nyitó jelölőjében lesz a kurzor.
SZÓKÖZ, majd írd be: colspan=2.
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 a viccek.html fájlt.
Fájl bezárása: CTRL + F4.
8. Nyisd meg a bekuldes.html fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: bekuldes, majd ENTER.
Az űrlap Név feliratához tartozó beviteli mező név értéke legyen „nev”, a maximálisan beírható karakterek száma pedig 40.
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, ez az input elem.
ALT + N, a name értékig, írd át: nev.
JOBBRA, SZÓKÖZ, majd írd be: maxlength=40.
Megjegyzés: Az értéknél az idézőjeleket nem kell beírni, automatikusan létrejönnek.
Megjegyzés: Az Email cím beviteli mező name értéke is nev, ezt javítani kell email-re!
Mentés: CTRL + S.
9. A többsoros beviteli mező paramétereit módosítsd úgy, hogy a sorok száma 8, a soron belüli karakterek száma 55 legyen, alapértelmezetten a mezőben „A kedvenc viccem:” szöveg látszódjon.
Jelöld ki a feladatleírásból az idézőjelek közötti 
A kedvenc viccem: (a kettőspontos is írd be) szöveget, majd másold: CTRL + C.
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ölés elejére: BALRA.
BALRA, ekkor a kurzor a nyitó jelölőben van.
SZÓKÖZ, majd írd be: cols=55, JOBBRA, SZÓKÖZ majd írd be: rows=8.
Megjegyzés: Az értéknél az idézőjeleket nem kell beírni, automatikusan létrejönnek.
Ugrás a textarea jelölők közé: ALT + I.
Illeszd be a kimásolt szöveget: CTRL + V.
Mentés: CTRL + S.
10. Az jelölőnégyzet alapértelmezetten legyen bejelölt állapotban, a mellette lévő szöveget alakítsd a jelölőnégyzet címkéjévé (label).
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: checkbox.
Keresés minialkalmazás bezárása: ESC.
ALT + N, az id értékig, másold ki: CTRL + C.
JOBBRA, kétszer, SZÓKÖZ, majd írd be: checked.
Ugrás a felirat elejére: CTRL + NUMPAD6.
Kijelölés a sor végéig: SHIFT + END.
Záró div jelölő kivétele a kijelölésből: SHIFT + BALRA, hatszor.
Megjegyzés: Ha a záró div külön sorba kerülne, erre nem lenne szükség!
Emmet: Becsomagolás rövidítéssel: CTRL + B, R.
A szerkesztőmezőbe írd be: label, majd ENTER.
A kurzor a for értéknél van.
Illeszd be a kimásolt azonosítót: CTRL + V.
Mentés: CTRL + S.
11. A nyomógomb mellé vegyél fel egy reset típusú nyomógombot is, felirata legyen „törlés”.
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 a kijelölés 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 bekuldes.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 valasztek azonosítójú elemen belüli hivatkozás jelölő elemek hover állapota esetén a betűszín legyen #f99.
Ugrás a dokumentum végére: CTRL + END.
Új sor nyitása: ENTER.
Írd be: #valasztek a:hover{, 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:#f99, majd TAB. 
Vagy írd be: color: #f99;
Mentés: CTRL + S.
13. A viccek osztályú elemeken belüli th elemekre határozz meg dőlt betűtípust és balra történő szövegelrendezést.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: .viccek th{.
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: fs:i, majd TAB. 
Vagy írd be: font-style: italic;
Új sor nyitása: ENTER.
Írd be az Emmet rövidítést: ta:l, majd TAB. 
Vagy írd be: text-align: left;
Mentés: CTRL + S.
14. A top osztályú table elemek számára állíts be 1 pixel vastag, pontozott mintázatú és fekete (black) színű keretet.
Ugrás a dokumentum végére: CTRL + END.
Új sor nyitása: ENTER.
Írd be: table.top{, 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:1-dt-black, majd TAB.
Vagy írd be: border: 1px dotted black;
Mentés: CTRL + S.
15. A fieldset elemek szélességére adj 650 pixel értéket.
Ugrás a dokumentum végére: CTRL + END.
Új sor nyitása: ENTER.
Írd be: fieldset{, 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:650, majd TAB. 
Vagy írd be: width: 650px;
Mentés: CTRL + S.
16. A legend elemekhez rendelj félkövér betűstílust.
Ugrás a dokumentum végére: CTRL + END.
Új sor nyitása: ENTER.
Írd be: legend{, 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