8. modul – 23. 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-23, 
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 „gyapjúból” szót tedd félkövérré.
Jelöld ki a feladatleírásból az idézőjelek közötti 
gyapjúból 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 „TIP-TOP Szőnyegház vezetősége” szövegrészt alakítsd dőltté.
Jelöld ki a feladatleírásból az idézőjelek közötti 
TIP-TOP Szőnyegház vezetősége 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 „Termékeink” szóra, amely mutasson a Szőnyegek című oldalra (szonyegek.html).
Jelöld ki a feladatleírásból az idézőjelek közötti 
Termékeink 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=szonyegek.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 szonyegek.html sorig, kiválasztása: ENTER.
Mentés: CTRL + S.
Állíts be hiperhivatkozást a „vevőink között” szövegrészre is, ez mutasson a megrendeles.html oldalra.
Jelöld ki a feladatleírásból az idézőjelek közötti 
vevőink között 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=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 és zárd be az index.html fájlt.
Fájl bezárása: CTRL + F4.
4. Nyisd meg az allas.txt fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: allas, 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 és body nyitó és záró jelölőivel.
LE a záró head jelölőt követő sorba.
Kijelölés a dokumentum végéig: CTRL + SHIFT + END.
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.
Ugrás a dokumentum elejére: CTRL + HOME.
LE a második sorba.
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.
Mentés: CTRL + S.
5. Alakítsd félkövérré a „Jelenleg teljes munkaidőbe keresünk:” sort.
Jelöld ki a feladatleírásból az idézőjelek közötti 
Jelenleg teljes munkaidőbe keresünk: 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.
Alatta a felsorolás legyen számozatlan felsorolás stílusú.
Megjegyzés: Csak ez az egy számozott felsorolás van az oldalon.
Csere minialkalmazás megnyitása: CTRL + H.
A Find szerkesztőmező az aktív, í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.
Mentsd el a fájlt weboldalként allas.html néven és zárd be.
Fájl bezárása: CTRL + F4.
6. Nyisd meg a szonyegek.html fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: szonyegek, majd ENTER.
A táblázatban található képek alternatív szöveg értéke legyen ugyanaz, mint a hozzájuk tartozó sor megnevezés cellájának szövege.
Megjegyzés: A szőnyegek méretében szerepel a SZÓKÖZ és x karakter, ez lesz a közös kijelölés.
E fölötti sorban vannak a szőnyegnevek. A képeknek egy üres alt tulajdonság már meg van adva.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmező az aktív, írd be: SZÓKÖZ x, (írásjellel!).
Összes kijelölése: ALT + ENTER.
Keresés minialkalmazás bezárása: ESC.
FEL, a nevek sorokba.
Nevek kijelölése: ALT + O.
Nevek másolása: CTRL + C.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmező az aktív, írd be: alt=", (a kezdő idézőjelet is!).
Összes kijelölése: ALT + ENTER.
Ugrás a kijelölések végére: JOBBRA.
Nevek beillesztése: CTRL + V.
Mentés: CTRL + S.
7. Módosítsd a táblázat első sorának celláit 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.
8. Cseréld meg a méret és a kategória oszlopot.
Megjegyzés: A Méret cellát és a méreteket tartalmazó cellákat kell kijelölni, melyekben szerepel a SZÓKÖZ és x karakter, ez lesz a közös kijelölés. A kategória ezek alatt van.
Keresés minialkalmazás megnyitása: CTRL + F.
(Reguláris kifejezés használata: ALT + R.)
TAB a Use Regular Expression gombig, ha nincs bejelölve, bejelölése: SZÓKÖZ.
A Find szerkesztőmező az aktív, írd be: Méret|SZÓKÖZ x, (írásjellel!).
Összes kijelölése: ALT + ENTER.
Keresés minialkalmazás bezárása: ESC.
Sorok cseréje: ALT + LE.
Mentés: CTRL + S.
Mentsd el és zárd be a szonyegek.html fájlt.
Fájl bezárása: CTRL + F4.
9. Nyisd meg a megrendeles.html fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: megrendeles, majd ENTER.
A Szőnyeg felirathoz tartozó választómező választható értékeit rendezd ABC sorrendbe.
Megjegyzés: A 1. sorban lévőt eggyel lentebb, az 5. sorban lévőt hárommal fentebb kell mozgatni.
A választómező name azonosítója: szonyeg.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: szonyeg", (a záró idézőjelet is írd be!).
Keresés minialkalmazás bezárása: ESC.
LE, egyszer. Ezt a sort (Flower green), kell eggyel lentebb mozgatni: ALT + LE.
LE, háromszor. Ezt a sort (Brown wave), kell hárommal fentebb mozgatni: ALT + FEL, háromszor.
Mentés: CTRL + S.
10. A Telefonszám mezőjébe maximálisan beírható karakterek száma 15 legyen, alapértelmezetten pedig legyen 06- érték beírva.
Megjegyzés: Az input mező name azonosítója: tel.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: tel", (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: maxlength=15, JOBBRA, SZÓKÖZ, majd írd be: value=06-.
Megjegyzés: Az értéknél az idézőjeleket nem kell beírni, automatikusan létrejönnek.
Mentés: CTRL + S.
11. Az űrlap alján található nyomógomb típusa legyen submit, a felirata pedig „megrendelé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.
ALT + N, kétszer, 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 kozepe azonosítójú elemen belüli hivatkozás jelölő elemek hover állapota esetén a szöveg legyen aláhúzva.
Ugrás a dokumentum végére: CTRL + END.
Új sor nyitása: ENTER.
Írd be: #kozepe a:hover{, 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: td:u, majd TAB. 
Vagy írd be: text-decoration: underline;
Mentés: CTRL + S.
13. A table elemek felső és alsó margója 0 nagyságú legyen, a bal- és jobboldali margókat állítsd be úgy, hogy az elem középre rendeződjön.
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 th elemekben háttérszín #999 legyen és a szöveg balra rendezett.
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:#999, majd TAB. 
Vagy írd be: background-color: #999;
Új sor nyitása: ENTER.
Írd be az Emmet rövidítést: ta:l, majd TAB. 
Vagy írd be: text-align: left;
Mentés: CTRL + S.
15. A legend elemekhez 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 elemek betűmérete legyen az alap betűméret 1,1-szerese.
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.1, majd TAB. 
Vagy írd be: font-size: 1.1em;
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