8. modul – 32. 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-32, 
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.
Tedd az „Üdvözlöm Önt cégünk nevében!” sort 1. szintű címsor típusúvá.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: Üdvözlöm.
Keresés minialkalmazás bezárása: ESC.
Ugrás a kijelölés elejére: BALRA.
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: h1, majd ENTER.
Mentés: CTRL + S.
A „Reméljük, hamarosan...” mondat elé tegyél sortörést.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: Reméljük.
Keresés minialkalmazás bezárása: ESC.
Ugrás a kijelölés elejére: BALRA.
Írd be az Emmet rövidítést: br, majd TAB.
Mentés: CTRL + S.
3. Szúrd be a map.gif képet a kep_kozep osztályú elemen belülre. A képhez adj alternatív szöveget térkép értékkel.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: kep_kozep.
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=map.gif alt=térkép], majd TAB.
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 az idojaras.txt fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: idojaras, 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ó html nyitó és záró jelölőivel. Adj oldalcímet a következő szöveggel: „Csendes Víz horgásztó”.
Ugrás a dokumentum elejére: CTRL + HOME.
LE a nyitó head jelölő sorába.
Kijelölés a dokumentum végéig: CTRL + SHIFT + END.
A kijelölt terület köré html jelölő beillesztése:
Emmet: Becsomagolás rövidítéssel: CTRL + B, R.
A szerkesztőmezőbe írd be: html, majd ENTER.
Jelöld ki a feladatleírásból az idézőjelek közötti 
Csendes Víz horgásztó 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. Tedd félkövérré „A változó felhőzet”, valamint „A sok napsütés” szövegrészeket.
Jelöld ki a feladatleírásból az idézőjelek közötti 
A változó felhőzet 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: b, majd ENTER.
Vagy: HTML Tag Wrap: ALT + W. Írd be: b.
Jelöld ki a feladatleírásból az idézőjelek közötti 
A sok napsütés 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: b, majd ENTER.
Vagy: HTML Tag Wrap: ALT + W. Írd be: b.
Mentés: CTRL + S.
6. A „Várható hőmérséklet” szövegrészeket mindkét előfordulásnál alakítsd dőltté.
Jelöld ki a feladatleírásból az idézőjelek közötti 
Várható hőmérséklet 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.
Összes előfordulás kijelölése: ALT + ENTER.
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.
Vagy: HTML Tag Wrap: ALT + W. Írd be: i.
Mentés: CTRL + S.
Mentsd el a fájlt weboldalként idojaras.html néven és zárd be.
Fájl bezárása: CTRL + F4.
7. Nyisd meg az eszkozok.html fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: eszkozok, majd ENTER.
Adj táblázatcímet (caption) az oldalon lévő táblázatnak „Minőségi botok kedvező áron” szöveggel.
Jelöld ki a feladatleírásból az idézőjelek közötti 
Minőségi botok kedvező áron 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 sor végére: END.
Ú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.
Mentsd el és zárd be az eszkozok.html fájlt.
Fájl bezárása: CTRL + F4.

8. Nyisd meg az informacio.html fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: informacio, majd ENTER.
Az „Információ” címsor alatti, űrlapig tartó sorokat alakítsa definíciós listává.
Megjegyzés: Akadálymentesítés mindenképpen szükséges! Az átalakítandó sorokat egy bekezdésbe raktam.
Az átalakítandó sorok közül az egyik záró bekezdés jelölő is hiányzik, ezt is pótolni kell!
A definiálandó kifejezések végére egy kettőspontot kell tenni!
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: Információ.
Keresés minialkalmazás bezárása: ESC.
LE a következő sorra, ez a listává alakítandó bekezdés.
Bekezdés tartalmának kijelölése: ALT + O.
Emmet: Elem eltávolítása: CTRL + E, E.
A definiálandó kifejezések köré dl jelölők beszúrása:
Emmet: Becsomagolás rövidítéssel: CTRL + B, R.
A szerkesztőmezőbe írd be: dl, majd ENTER.

FEL az előző sorra, a kurzor a listában van.
Lista 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: : , (írásjellel!).
Összes előfordulás kijelölése: ALT + ENTER.
Keresés minialkalmazás bezárása: ESC.
Ugrás a kijelölés elejére: BALRA.
Emmet: Elem eltávolítása: CTRL + E, E.
A definiálandó kifejezések köré dt jelölők beszúrása:
Emmet: Becsomagolás rövidítéssel: CTRL + B, R.
A szerkesztőmezőbe írd be: dt, majd ENTER.

Lista tartalmának kijelölése: ALT + O.
A definíciók bekezdésekben vannak.
Csere minialkalmazás megnyitása: CTRL + H.
Keresés csak a kijelölésben: ALT + L.
A Find szerkesztőmezőbe írd be: p>, (a záró jelölőt is írd be!).
TAB a Replace szerkesztőmezőig, írd be: dd>.
Összes előfordulás kijelölése: ALT + ENTER.
Keresés minialkalmazás bezárása: ESC.
Mentés: CTRL + S.
9. Az űrlap Kategória felirathoz tartozó mezőjéhez vegyél fel egy új választható értéket egyéb szöveggel.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: /select.
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: option[value=egyeb]{egyéb}, majd TAB.
Mentés: CTRL + S.
Az űrlapelem paramétereit változtasd meg úgy, hogy lenyíló legyen.
Megjegyzés: Az űrlapelem name értéke: kategoria.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: kategoria.
Keresés minialkalmazás bezárása: ESC.
ALT + N, ekkor size="3" tulajdonság és érték pár van kijelölve, töröld: DELETE.
Mentés: CTRL + S.
10. Az Üzenet felirathoz tartozó beviteli mező paramétereit módosítsd úgy, hogy a sorok száma 5, a soron belüli karakterek száma 50 legyen. A szövegmezőbe alapértelmezetten „Írj valamit!” szöveg jelenjen meg.
Jelöld ki a feladatleírásból az idézőjelek közötti 
Írj valamit! szöveget, majd másold: CTRL + C.
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ő sorba, ez a textarea elem.
ALT + N, a name tulajdonság érték párig.
JOBRRA, majd SZÓKÖZ, és írd be: cols=50, 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.
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. A submit gomb mellé vegyél fel egy reset típusú nyomógombot, amelynek felirata „adatok törlése” 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.
Submit 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: adatok törlése.
Mentés: CTRL + S.
Mentsd el és zárd be az informacio.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 hivatkozás jelölő elemek hover állapotánál a betű színe sárga (yellow) legyen és aláhúzott.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: #menu a:hover{.
Keresés minialkalmazás bezárása: ESC.
LE a text-decoration sorig.
Sor kijelölése: CTRL + L.
Kijelölés felülírása Emmet rövidítéssel: td:u, majd TAB. 
Vagy írd be: text-decoration: underline;
Új sor nyitása: ENTER.
Írd be az Emmet rövidítést: c:yellow, majd TAB. 
Vagy írd be: color: yellow;
Mentés: CTRL + S.
13. A table elemek felső és alsó margója legyen 0 méretű, a bal- és jobboldali margót állítsd be úgy, hogy az elem középre igazodjon.
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:0-a, majd TAB. 
Vagy írd be: margin: 0 auto;
Mentés: CTRL + S.
14. A td elemek számára határozz meg keret tulajdonságot, amely 1 pixel vastag, szaggatott mintázatú és #888 színű.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: 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-ds-#888, majd TAB.
Vagy írd be: border: 1px dashed #888;
Mentés: CTRL + S.
15. A legend elemekre a betűstílust állítsd félkövérre.
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.
16. A text típusú input elemek szélessége legyen 300 pixel.
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