8. modul – 25. 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-25, 
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 „Remélem, tetszeni fognak...” mondattól a szöveg kerüljön új bekezdésbe.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: Remélem.
Keresés minialkalmazás bezárása: ESC.
Ugrás a kijelölés elejére: BALRA.
Írd be: </p><p>.
Megjegyzés: A záró bekezdés jelölő esetén a perjel után kiegészül a jelölő. 
A nyitó bekezdés jelölő beírásakor pedig kiegészül a záró bekezdés jelölővel, ezt vissza kell vonni: CTRL + Z.
Mentés: CTRL + S.
„A legtöbb viccet...” mondat szintén kerüljön új bekezdésbe.
Megjegyzés: A megadott szöveg előtt sortörés elem van! Nincs más sortörés az oldalon. A sortörés előtti karakter egy p betű!
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: <br>.
Keresés minialkalmazás bezárása: ESC.
Kijelölés törlése: DELETE.
Megjegyzés: Mivel nem írásjel volt a sortörés jelölő előtt, ezért el kell választani a szöveget a rövidítés kódtól egy szóközzel!
Írd be egy SZÓKÖZ után: </p><p>.
Megjegyzés: A záró bekezdés jelölő esetén a perjel után kiegészül a jelölő. 
A nyitó bekezdés jelölő beírásakor pedig kiegészül a záró bekezdés jelölővel, ezt vissza kell vonni: CTRL + Z.
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 
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 „listára” szóra is, ez mutasson a top.html oldalra.
Jelöld ki a feladatleírásból az idézőjelek közötti 
listára 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=top.html], majd 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ó head nyitó és záró jelölőivel.

Az oldal címe „Balu vicces oldala” legyen.
Ugrás a dokumentum elejére: CTRL + HOME.
LE a html nyitó jelölőt követősorra.
Két sor kijelölése: CTRL + L, kétszer.
Emmet: Becsomagolás rövidítéssel: CTRL + B, R.
A szerkesztőmezőbe írd be: head, 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.
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 cmíet: CTRL + V.
Mentés: CTRL + S.
5. Szúrd be a kep osztályú elemen belülre a fun_1.jpg képet.

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=fun_1.jpg width=200], majd TAB.
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.
Minden „beküldte:” és a beküldő email címét tartalmazó cella típusát módosítsd fejléc cellára.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmező az aktív, írd be: beküldte.
Összes megjelölése: ALT + ENTER.
Ugrás a kijelölés végére: JOBBRA.
Kijelölés bővítése a következő sorokra is: CTRL + ALT + NUMPAD2.
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: th, majd ENTER.
Mentés: CTRL + S.
7. Minden viccet tartalmazó cella legyen összevonva 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 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 form jelölőn belüli részét tedd mezőcsoportba (fieldset).

Adj az űrlapnak magyarázó feliratot (legend) a következő szöveggel: „Oszd meg velünk kedvenc viccedet!”
Jelöld ki a feladatleírásból az idézőjelek közötti 
Oszd meg velünk kedvenc viccedet! szöveget, majd másold: CTRL + C.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: <form>.
Keresés minialkalmazás bezárása: ESC.
Ugrás a kijelölés végére: JOBBRA.
Form elem tartalmának kijelölése: ALT + O.
Emmet: Becsomagolás rövidítéssel: CTRL + B, R.
A szerkesztőmezőbe írd be: fieldset, majd ENTER.
A kurzor a záró fieldset jelölő mögött van.
Ugrás a nyitó fieldset jelölőpárra: CTRL + U, P.
Ugrás a sor végére: END
LE a következő (üres) sorba.
Írd be az Emmet rövidítést: legend, majd TAB.
A kurzor a nyitó és záró jelölő között van.
A Find szerkesztőmezőbe illeszd be a kimásolt szöveget: CTRL + V.
Mentés: CTRL + S.
9. Módosítsd az Email cím felirathoz tartozó beviteli mezőt a következők szerint: a név értéke email, a maximálisan beírható karakterszám pedig 50 legyen.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: Email.
Keresés minialkalmazás bezárása: ESC.
LE, ez az input mező sora.
Input elem kijelölése: ALT + O.
Ugrás a kijelölés végére: JOBBRA.
BALRA, ekkor a kurzor az elem záró jele előtt lesz.
SZÓKÖZ, majd írd be: name=email, JOBBRA, SZÓKÖZ, majd írd be: maxlength=50.
Megjegyzés: Az értéknél az idézőjeleket nem kell beírni, automatikusan létrejönnek.
Mentés: CTRL + S.
10. A Vicc felirathoz tartozó mező típusa legyen többsoros szöveges, a sorok száma 6 a soron belüli karakterszám pedig 50.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: Vicc:, (a kettőspontot is írd be!).
Keresés minialkalmazás bezárása: ESC.
LE, ez az input mező sora.
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 van, írd be: vicc.
JOBBRA, SZÓKÖZ majd írd be: rows=6, JOBBRA, SZÓKÖZ, majd írd be: cols=50.
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=vicc cols=6 rows=50], majd TAB.
Mentés: CTRL + S.
11. Az űrlap végén található nyomógomb típusa legyen submit, a gomb felirata pedig „beküldés”.
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.
JOBBRA, SZÓKÖZ, majd írd be: value=küldés.
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 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ítsa a CSS szabályokat az alábbiak szerint:

A valasztek azonosítójú elemen belüli ittvagyok osztályú elemekre vonatkozóan a listajelölő típusa kör (circle) legyen.
Ugrás a dokumentum végére: CTRL + END.
Új sor nyitása: ENTER.
Írd be: #valasztek .ittvagyok{, 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: list:c, majd TAB. 
Vagy írd be: list-style-type: circle;
Mentés: CTRL + S.
13. A lenyeg azonosítójú elemen belüli h1 elemekben a betűméret legyen az alap betűméret 1,5-szöröse.
Ugrás a dokumentum végére: CTRL + END.
Új sor nyitása: ENTER.
Írd be: #lenyeg h1{, 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.5 majd TAB. 
Vagy írd be: font-size: 1.5em;
Mentés: CTRL + S.
14. A viccek osztályú table elemek kerete legyen 1 pixel vastag, szaggatott vonalas mintázatú és #000 színű.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: table.viccek{.
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-da-#000, majd TAB.
Vagy írd be: border: 1px dashed #000;
Mentés: CTRL + S.
15. A viccek osztályú elemeken belüli td elemek bélés (padding) méretét állítsd 10 pixelre.
Ugrás a dokumentum végére: CTRL + END.
Új sor nyitása: ENTER.
Írd be: .viccek td{, 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: p:10, majd TAB. 
Vagy írd be: padding: 10px;
Mentés: CTRL + S.
16. A text típusú input elemek szélességének adj meg 300 pixel értéket.
Megjegyzés: Az elemre még nincs tulajdonság megadva.
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.
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