8. modul – 34. 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-34, 
kiválasztása: ENTER, megnyitása: ENTER.
2. Nyisd meg az index.txt nevű fájlt a megadott helyről.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: index, 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. Rendelj a fájlhoz a styles.css stíluslap állományt.
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.
Megjegyzés: a stíluslap hozzárendelést a head részben kell megadni, nincs jelentősége ezen belül hányadik sorban van.
Ugrás a dokumentum elejére: CTRL + HOME.
LE a nyitó nyitó head jelölőig, 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.
Mentés: CTRL + S.
3. Az „Állásajánlat” sort tedd 2. szintű címsorrá.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: Állásajánlat.
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: h2, majd ENTER.
Mentés: CTRL + S.
A „Jelenleg teljes...” alatti felsorolás stílusát módosítsd számozatlanná.
Megjegyzés: Csak ez az egy számozott felsorolás van az oldalon.
Csere minialkalmazás megnyitása: CTRL + H.
A Find szerkesztőmezőbe írd be: ol>.
TAB a Replace szerkesztőmezőig, írd be: ul>.
Összes cseréje: CTRL + ALT + ENTER.
Csere minialkalmazás bezárása: ESC.	
Mentés: CTRL + S.
4. Állíts be hiperhivatkozást a „Saját készítésű pizzáink” szövegrészre, amely mutasson a pizzak.html oldalra.
Jelöld ki a feladatleírásból az idézőjelek közötti 
Saját készítésű pizzáink 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=pizzak.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 pizzak.html sorig, kiválasztása: ENTER.
Mentés: CTRL + S.
Állíts be hiperhivatkozást a „futárokkal” szóra is, ez mutasson a Megrendelés című oldalra (megrendeles.html).
Jelöld ki a feladatleírásból az idézőjelek közötti 
Írd be: futárokkal.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: írjon nekünk.
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=megrendeles.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 megrendeles.html sorig, kiválasztása: ENTER.
Mentés: CTRL + S.
Mentsd el a fájlt weboldalként index.html néven és zárd be.
Fájl bezárása: CTRL + F4.
5. Nyisd meg a tortenet.html fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: tortenet, majd ENTER.
Az „Eredetileg a pizza...” 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: Eredetileg.
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 modern pizza feltalálását...” mondattól a szöveg kerüljön új bekezdésbe.
Megjegyzés: A megadott szöveg előtti sor végén egy sortörés jelölő van, csak ez az egy 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.
Sortörés kijelölése a következő sor elejéig: 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.
6. „A modern pizza feltalálását” szövegrészt tedd félkövérré.
Jelöld ki a feladatleírásból az idézőjelek közötti 
A modern pizza feltalálását 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.
A „Raffaele Espositónak” szövegrészt alakítsd félkövérré és dőltté.
Jelöld ki a feladatleírásból az idézőjelek közötti 
Raffaele Espositónak 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>i, majd ENTER.
Mentés: CTRL + S.
7. A kep_jobb osztályú elemen belülre szúrd be a pizza_02.jpg képet. A kép megjelenési szélességét állítsd 280 pixelre.
Jelöld ki a kép nevét, pizza_02.jpg, majd másold: CTRL + C.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: kep_jobb.
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=pizza_02.jpg weight=280], majd TAB.
Mentés: CTRL + S.
Mentsd el és zárd be az tortenet.html fájlt.
	
Fájl bezárása: CTRL + F4.
8. Nyisd meg az pizzak.html fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: pizzak, majd ENTER.
Alakítsd az itt található táblázat első sorát fejléc cella típusúvá.
Megjegyzés: A fejléc cellák a thead jelölőn belüli sorban találhatók.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: <thead.
Keresés minialkalmazás bezárása: ESC.
Thead elem tartalmának kijelölése: ALT + O.
Csere minialkalmazás megnyitása: CTRL + H.
Csere csak a kijelölésben: ALT + L.
A Find szerkesztőmező az aktív, írd be: td>.
TAB a Replace szerkesztőmezőig, írd be: th>.
Összes cseréje: CTRL + ALT + ENTER.
Csere minialkalmazás bezárása: ESC.
Mentés: CTRL + S.
9. Javítsd a táblázatban a 45 cm-es gombás pizza árát 2200 Ft-ra, a 32 cm-es kolbászosét pedig 1300 Ft-ra.
Megjegyzés: Az első sor a pizza neve, a második sor a 32 cm-es pizza ára, a harmadik sor a 45 cm-es pizza ára.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: gombás.
Keresés minialkalmazás bezárása: ESC.
Ugrás a kijelölés elejére: BALRA.
LE, kétszer: Ár (2100) kijelölése: CTRL + SHIFT + JOBBRA.
Írd át: 2200, majd üss SZÓKÖZ-t.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: kolbászos.
Keresés minialkalmazás bezárása: ESC.
Ugrás a kijelölés elejére: BALRA.
LE, egyszer: Ár (1250) kijelölése: CTRL + SHIFT + JOBBRA.
Írd át: 1300, majd üss SZÓKÖZ-t.
Mentés: CTRL + S.
Mentsd el és zárd be a pizzak.html fájlt.
Fájl bezárása: CTRL + F4.
10. Nyisd meg a megrendeles.html fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: megrendeles, majd ENTER.
Az oldalon található űrlap egészét tedd egy mezőcsoportba (fieldset). Adj magyarázó feliratot (legend) a mezőcsoportnak „Válasszon pizzát és adja meg adatait!” szöveggel.
Jelöld ki a feladatleírásból az idézőjelek közötti 
Válasszon pizzát és adja meg adatait! 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.
Form elem tartalmának kijelölése: ALT + O.
Ugrás a kijelölés elejére: BALRA.
LE, az ü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, illeszd be a kimásolt szöveget: CTRL + V.
Mentés: CTRL + S.
11. Az űrlap alján található nyomógomb típusát módosítsd submit típusúra, a felirata pedig legyen „megrendelés”.
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: megrendelés.
Mentés: CTRL + S.
Mentsd el és zárd be a megrendeles.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 content azonosítójú elemen belüli h2 elemekre a betű mérete az alap betűméret 1,3-szorosa legyen.
Ugrás a dokumentum végére: CTRL + END.
Új sor nyitása: ENTER.
Írd be: #content h2{, 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.3, majd TAB. 
Vagy írd be: font-size: 1.3em;
Mentés: CTRL + S.
13. A th elemek háttérszíne #c00000 legyen, a betű színe pedig fehér (white).
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:#c00000, majd TAB. 
Vagy írd be: background-color: #c00000;
Ú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 elemekhez rendelj bélés (padding) értékeket, a felső és alsó 5 pixel, a bal- és jobboldali pedig 10 pixel legyen.
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: p:5-10, majd TAB. 
Vagy írd be: padding: 5px 10px;
Mentés: CTRL + S.
15. A legend elemhez 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.
16. A submit típusú input elemekben a betűméret legyen az alap betűméret 1,3-szorosa.
	
Ugrás a dokumentum végére: CTRL + END.
Új sor nyitása: ENTER.
Írd be: input[type='submit']{, 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.3, majd TAB. 
Vagy írd be: font-size: 1.3em;
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