8. modul – 39. 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-39, 
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.
Állíts be hiperhivatkozást a „családi szabadidőprogramok” szövegrészre, amely mutasson a Programok című oldalra (programok.html).
Jelöld ki a feladatleírásból az idézőjelek közötti 
családi szabadidőprogramok 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=programok.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 programok.html sorig, kiválasztása: ENTER.
Mentés: CTRL + S.
Állíts be hiperhivatkozást a „fővárostól nem messze” 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 
fővárostól nem messze 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.
3. Adj „kep” nevű osztályt a zsiraf.jpg képet tartalmazó bekezdésnek. A kép megjelenési szélességét állítsd 190 pixelre.
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.
A kurzor a bekezdés jelölőben van.
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: width=190.
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 az index.html fájlt.
	
Fájl bezárása: CTRL + F4.
4. 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 MAZ-ZOO Vadaspark szöveggel. Rendelj a fájlhoz a styles.css stíluslap állományt.
Megjegyzés: A stíluslap és a cím is a head záró jelölő előtt kell legyen.
Jelöld ki a feladatleírásból az idézőjelek közötti 
MAZ-ZOO Vadaspark 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.
A kurzor pozíciójába illeszd be a címet: CTRL + V.
Mentés: CTRL + S.
5. Az „Autóval szintén...” kezdetű mondattól a szöveg kerüljön új bekezdésbe, a mondat elől szedd ki a sortörést.
Megjegyzés: Ez az egy sortörés jelölő van az oldalon.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: <br.
Keresés minialkalmazás bezárása: ESC.
Ugrás a kijelölés elejére: BALRA.
SHIFT + LE, majd SHIFT + HOME.
SZÓKÖZ, majd í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.
Az „Aktualitások, rendezvények...” mondat elé szúrj be egy sortörést.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: Aktualitások.
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.

6. Alkalmazz félkövér betűstílust a szövegben előforduló mindhárom „MAZ-ZOO” előfordulásra.
Megjegyzés: A body tartalmában lévő három helyen kell elvégezni a módosítást.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: body.
Keresés minialkalmazás bezárása: ESC.
Body 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: MAZ-ZOO.
Ö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: b, majd ENTER.
Vagy: HTML Tag Wrap: ALT + W. Írd be: b.
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 a programok.html fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: programok, majd ENTER.
Vond össze a „július 11.”-et tartalmazó cellát az alatta található üres cellával. Tedd ugyanezt a „Szabadidő klubok” szöveget tartalmazó cellával is.
Megjegyzés: A két megadott tartalom egymás alatt van az oldalon.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: július 11.
Keresés minialkalmazás bezárása: ESC.
Ugrás a kijelölés elejére: BALRA.
Kijelölés bővítése a következő sorra is: CTRL + ALT + NUMPAD2.
Megjegyzés: A multi kurzorral egyszerre módosítható mind a két sor.
BALRA, SZÓKÖZ, majd írd be: rowspan=2.
Megjegyzés: Az értéknél az idézőjeleket nem kell beírni, automatikusan létrejönnek.
Csere minialkalmazás megnyitása: CTRL + H.
A Find szerkesztőmező az aktív, írd be: <td></td>.
TAB a Replace szerkesztőmezőig: töröld a tartalmát: DELETE.
Összes cseréje: CTRL + ALT + ENTER.
Formázás: ALT + SHIFT + F.
Mentés: CTRL + S.
8. Adj a táblázatnak táblázatcímet (caption) „Programok a nyárra” szöveggel.
Jelöld ki a feladatleírásból az idézőjelek közötti 
Programok a nyárra 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.
Mentsd el és zárd be a programok.html fájt.
Fájl bezárása: CTRL + F4.
9. Nyisd meg a tudasteszt.html fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: tudasteszt, 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 30.
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.
Input elem kijelölése: ALT + O.
Ugrás a kijelölés végére: JOBBRA.
BALRA, majd SZÓKÖZ, és írd be: name=nev, JOBBRA, SZÓKÖZ majd írd maxlength=30.
Megjegyzés: Az értéknél az idézőjeleket nem kell beírni, automatikusan létrejönnek.
Mentés: CTRL + S.
10. A giliszta nevű kiválasztó elem paramétereit módosítsd úgy, hogy annak minden értéke látszódjon, alapértelmezésben pedig az első értéke legyen kiválasztott állapotban.
Megjegyzés: A lista 4 elemből áll.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: giliszta", (a záró idézőjelet is írd be!).
Keresés minialkalmazás bezárása: ESC.
Ugrás a kijelölés végére: JOBBRA.
SZÓKÖZ, majd írd be: size=4.
Megjegyzés: Az értéknél az idézőjeleket nem kell beírni, automatikusan létrejönnek.
LE a következő sorra. 
BALRA, majd ugrás az option jelölők közé: ALT + I.
BALRA, a kurzor a nyitó option jelölőben van.
SZÓKÖZ, majd írd be: selected.
Mentés: CTRL + S.
11. Az űrlap alján lévő nyomógombot módosítsd úgy, hogy a típusa submit, a felirata „Elküldöm” legyen.
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: Elküldöm.
Mentés: CTRL + S.
Mentsd el és zárd be a tudasteszt.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 fo azonosítójú elemen belüli h1 elemek számára határozd meg a betűméretet az alap betűméret 1,5-szörösére, a szövegelrendezést pedig rendezd középre.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: #fo h1{.
Keresés minialkalmazás bezárása: ESC.
LE a font-size sorig.
Sor kijelölése: CTRL + L.
Kijelölés felülírása Emmet rövidítéssel: fz:1.5, majd TAB. 
Vagy írd be: font-size: 1.5em;
Új sor nyitása: ENTER.
Írd be az Emmet rövidítést: ta:c, majd TAB. 
Vagy írd be: text-align: center;
Mentés: CTRL + S.
13. A menu azonosítójú elemen belüli hivatkozás jelölő elem hover állapotánál a szöveg aláhúzott legyen és #fff színű.
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:#fff, majd TAB. 
Vagy írd be: color: #fff;
Mentés: CTRL + S.
14. A th elemekre állíts be #060 háttérszínt, valamint 10 pixel méretű bélés (padding) értéket.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: 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: bgc:#060, majd TAB. 
Vagy írd be: background-color: #060;
Új sor nyitása: ENTER.
Írd be az Emmet rövidítést: p:10, majd TAB. 
Vagy írd be: padding: 10px;
Mentés: CTRL + S.
15. A legend elemekben a betűméret legyen az alap betűméret 1,3-szorosa, a betűk közti távolság pedig 0,6em.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: legend{.
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, majd TAB. 
Vagy írd be: font-size: 1.3em;
Új sor nyitása: ENTER.
Írd be az Emmet rövidítést: lts:0.6, majd TAB. 
Vagy írd be: letter-spacing: 0.6em;
Mentés: CTRL + S.
16. A text típusú input elemek szélességét állítsd 300 pixelre.
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