8. modul – 36. 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-36, 
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 félkövérré az „egyszerűen és gyorsan” szövegrészt.
Jelöld ki a feladatleírásból az idézőjelek közötti 
egyszerűen és gyorsan 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.
Alakítsd dőltté az „Ismerd meg a vidéket!” sort.
Jelöld ki a feladatleírásból az idézőjelek közötti 
Ismerd meg a vidéket! 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: i, majd ENTER.
Vagy: HTML Tag Wrap: ALT + W. Írd be: i.
Mentés: CTRL + S.
3. Állíts be hiperhivatkozást a „FALU-VÉGE kft.” szövegrészre, amely mutasson a kapcsolat.html oldalra.
Jelöld ki a feladatleírásból az idézőjelek közötti 
FALU-VÉGE kft. 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.
Állíts be hiperhivatkozást a „szálláshelyeket és programokat” szövegrészre is, ez mutasson a Programok című oldalra (programok.html).
Jelöld ki a feladatleírásból az idézőjelek közötti 
szálláshelyeket és programokat 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.
4. Szúrd be a turizmus.jpg képet a kep osztályú elemen belülre. Adj alternatív szöveget a képnek „turizmus” értékkel.
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=turizmus.jpg alt=turizmus], majd TAB.
Mentés: CTRL + S.
Mentsd 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.
Egészítsd ki a fájlt a hiányzó head és body nyitó és záró jelölőivel.
Ugrás a dokumentum elejére: CTRL + HOME.
LE a nyitó html jelölőt követő sorig.
Ugrás a sor elejére: HOME.
A head részbe tartozó elemek kijelölése: CTRL + L, háromszor.
A kijelölt terület köré head jelölő beillesztése:
Emmet: Becsomagolás rövidítéssel: CTRL + B, R.
A szerkesztőmezőbe írd be: head, majd ENTER.
A kurzor a head záró jelölő után van.
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.
Mentés: CTRL + S.
6. Módosítsd a „Kapcsolat” címsor alatti szöveget úgy, hogy az egyes sorok legyenek külön bekezdésben.
Megjegyzés: Jelenleg a sorok egy bekezdésben vannak, sortörésekkel, kivéve az utolsó sort. Összesen 5 sor van.
A bekezdések elején lévő tartalmak félkövér jelölők között vannak.
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, majd ugrás a sor elejére: HOME.
Bekezdés jelölő eltávolítása: 
Emmet: Elem eltávolítása: CTRL + E, E.
Tartalom 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: <br>.
Összes kijelölése: ALT + ENTER.
Keresés minialkalmazás bezárása: ESC.
Sortörés jelölők törlése: DEL.
Utolsó sor hozzáadása a kijelölésekhez: CTRL + ALT + NUMPAD2.
Emmet: Becsomagolás rövidítéssel: CTRL + B, R.
A szerkesztőmezőbe írd be: p, 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 a programok.html fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: programok, majd ENTER.
Az oldalon található táblázathoz adj táblázatcímet (caption) „Tavaszi programok” szöveggel.
Jelöld ki a feladatleírásból az idézőjelek közötti 
Tavaszi programok 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.
8. Rendezd a táblázat sorait helyszín szerinti ABC sorrendbe.
Megjegyzés: Az utolsó két táblázatsort kell a táblázat elejére mozgatni.
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.
FEL, kétszer, majd JOBBRA, ekkor a kurzor az utolsó táblázatsor záró jelölőjében van.
Ugrás a nyitó jelölőpárra: CTRL + U, P.
Kijelölés kiterjesztése az előző táblázatsor záró jelölőre is: CTRL + ALT + NUMPAD8.
Táblázatsorok kijelölése: ALT + O.
Táblázatsorok kivágása: CTRL + X.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: <tbody.
Keresés minialkalmazás bezárása: ESC.
Ugrás a sor végére: END.
Új sor nyitása: ENTER.
Táblázatsor beillesztése: CTRL + V.
Formázás igazítása: ALT + SHIFT + F.
Mentés: CTRL + S.
Mentsd el és zárd be a programok.html fájlt.
Fájl bezárása: CTRL + F4.
9. Nyisd meg az ajanlo.html fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: ajanlo, majd ENTER.
A Név felirathoz tartozó szövegmező név értéke legyen „nev”, a maximálisan beírható karakterek száma pedig 30.
Megjegyzés: A jelenlegi name érték: text.
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 az input sorra.
ALT + N, a name értékig, írd át: nev.
JOBBRA, SZÓKÖZ, majd írd be: 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 „Kategóriák, amelyekre kíváncsi” szöveghez tartozó jelölőnégyzetekhez vegyél fel egy új jelölőnégyzetet, amelynek a címkéje legyen „Gasztronómia”, és legyen alapértelmezés szerint bejelölt állapotban.
Megjegyzés: A jelölőnégyzetek value értéke: 1, (ami helytelen, mindegyiknek különbözőnek kellene lennie!). 
Jelenleg 5 jelölőnégyzet van.
Ugrás az utolsó jelölőnégyzet sorra:
Ugrás a dokumentum végére: CTRL + END.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: box, majd üss egy ENTER-t.
Keresés minialkalmazás bezárása: ESC.
Ugrás a sor végére: END.
Sortörés jelölő beírása: br, majd TAB.
Új sor nyitása: ENTER.
Írd be az Emmet rövidítést: input:checkbox, majd TAB.
A name érték van kijelölve, írd be: gasztro.
JOBBRA, SZÓKÖZ, majd írd be: value=1.
Megjegyzés: Az értéknél az idézőjeleket nem kell beírni, automatikusan létrejönnek.
ALT + N, az id értékig, JOBBRA, majd BALRA, és írd be: gasztronomia.
JOBBRA, SZÓKÖZ, majd írd be: selected.
Ugrás a sor végére: END.
Írd be: Gasztronómia. Kijelölése: NUMPAD4.
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, írd be: gasztro.
Haladó megoldás: 
Írd be az üres sorba: gastro, és jelöld ki: SHIFT + HOME.
Emmet: Becsomagolás rövidítéssel: CTRL + B, R.
A szerkesztőmezőbe írd be: input:c[name=$# value=1 id=$# checked]+label[for=$#]{ Gasztronómia}, majd ENTER.
Megjegyzés: Kibontáskor a $# értéket behelyettesíti a gastro szóval.
FONTOS! A jelölőnégyzet value értéke nem lehet(ne) azonos!
Mentés: CTRL + S.
11. A Régió mezőjét állítsd be úgy, hogy minden eleme látszódjon, alapértelmezés szerint pedig legyen „Budapest és Pest megye” kiválasztott állapotban.
Megjegyzés: 8 elem van.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: select.
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=8.
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: Budapest.
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: selected.
Mentés: CTRL + S.
Mentsd el és zárd be az ajanlo.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 li elemekre adj meg félkövér betűstílust, valamint 1.2em betűméretet.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: #menu li{.
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: fw:b, majd TAB. 
Vagy írd be: font-weight: bold;
Új sor nyitása: ENTER.
Írd be az Emmet rövidítést: fz:1.2, majd TAB. 
Vagy írd be: font-size: 1.2em;
Mentés: CTRL + S.
13. Adj meg a thead elemen belüli th elemek háttérszínének #060, a betűszínének pedig fehér (white) értékeket.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: thead 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: c:white, majd TAB. 
Vagy írd be: color: white;
Mentés: CTRL + S.
14. A td elemekre határozz meg minimális szélességet, ami 80 pixel. Ugyanitt a függőleges szövegelrendezés felülre történjen.
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: miw:80, majd TAB. 
Vagy írd be: min-width: 80px;
Új sor nyitása: ENTER.
Írd be az Emmet rövidítést: va:t, majd TAB. 
Vagy írd be: vertical-align: top;
Mentés: CTRL + S.
15. A fieldset elemekhez rendelj 15 pixel méretű bélés (padding) é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: p:15, majd TAB. 
Vagy írd be: padding: 15px;
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