8. modul – 44. 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-44, 
kiválasztása: ENTER, megnyitása: ENTER.
2. Nyisd meg az autok.html nevű fájlt a megadott helyről.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: autok, majd ENTER.
Szúrj be horgonyokat (könyvjelzőket) a táblázatok elé: Az „A kategória” táblázata elé „a”, a „B kategória” táblázata elé „b”, a „C kategória” táblázata elé pedig „c” értékekkel.
Megjegyzés: A kategória nevek félkövér jelölők között vannak.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmező az aktív, írd be: <b>.
Összes kijelölése: ALT + ENTER.
Keresés minialkalmazás bezárása: ESC.
Ugrás a kijelölések végére: JOBBRA.
Kategória nevek kijelölése: SHIFT + JOBBRA.
HTML Tag Wrap: ALT + W.
Írd be: a id=.
Megjegyzés: Az értéknél az idézőjeleket nem kell beírni, automatikusan létrejönnek.
Kategórianevek beillesztése: CTRL + V.
Megjegyzés: A kategórianevek nagybetűsek, át kell alakítani kisbetűssé!
Csak mert így van rendjén.
Kategórianevek kijelölése: SHIFT + BALRA.
Parancskatalógus megnyitása: CTRL + SHIFT + P.
A szerkesztőmezőbe írd be: Transform to Lowercase, majd ENTER.
Mentés: CTRL + S.
3. Az „A kategóriájú” autók táblázatának sorait rendezd át úgy, hogy azok bérleti díj szerint növekvő sorrendben legyenek.
Megjegyzés: A 65 eFt-os Rolls-Royce-t kell a legelső sorba (a nyitó tbody jelölő után), a 80 eFt-os Maseratit a 75 eFt-os Maserati után kell áthelyezni.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: 65.
Keresés minialkalmazás bezárása: ESC.
LE, majd BALRA.
Táblázatsor kijelölése: ALT + O.
Táblázatsor 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.
Kivágott táblázatsor beillesztése: CTRL + V.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: 80.
Keresés minialkalmazás bezárása: ESC.
LE, majd BALRA.
Táblázatsor kijelölése: ALT + O.
Táblázatsor kivágása: CTRL + X.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: 75.
Keresés minialkalmazás bezárása: ESC.
LE, majd új sor nyitása: ENTER.
Kivágott táblázatsor beillesztése: CTRL + V.
Formázás: ALT + SHIFT + F.
Mentés: CTRL + S.
4. A B kategóriájú autók egyikéhez nem tartozik kép. Oda szúrd be az auto_default.gif képet.
Megjegyzés: Egy üres cellába kell a képet beszúrni.
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 kijelölés végére: JOBBRA.
Ugrás a cellajelölők közé: ALT + I.
Írd be az Emmet rövidítést: img[src=auto_default.gif], majd TAB.
Mentés: CTRL + S.
Mentsd el és zárd be az autok.html fájlt.
Fájl bezárása: CTRL + F4.
5. Nyisd meg az index.html fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: index, majd ENTER.
A „Különleges alkalom vagy egy egyszerű hétköznap.” mondatot tedd dőltté.
Jelöld ki a feladatleírásból az idézőjelek közötti 
Különleges alkalom vagy egy egyszerű hétköznap. 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.
Az „Itt találhat meg minket:” szövegrészt pedig alakítsd félkövérré.
Jelöld ki a feladatleírásból az idézőjelek közötti 
Itt találhat meg minket: 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 „Hadd hívjuk fel figyelmét...” 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: Hadd.
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 „Ráadásul ebben az évben...” mondat elé szúrj be egy sortörést.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: Ráadásul.
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.
Állíts be hiperhivatkozást a „B és C kategória” szövegrészre, amely mutasson az Autók című oldal (autok.html) „b” nevű könyvjelzőjére.
Jelöld ki a feladatleírásból az idézőjelek közötti 
B és C kategória 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=autok.html#b], 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 adokveszek.html sorig, kiválasztása: ENTER.
A kurzor pozíciójába írd be: #b.
Mentés: CTRL + S.
Állíts be hiperhivatkozást az „A kategória” szövegrészre is, ez mutasson az Autók oldal (autok.html) „a” nevű könyvjelzőjére.
Jelöld ki a feladatleírásból az idézőjelek közötti 
A kategória 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=autok.html#a], 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 az adokveszek.html sorig, kiválasztása: ENTER.
A kurzor pozíciójába írd be: #a.
Mentés: CTRL + S.
Mentsd el és zárd be az index.html fájlt.
Fájl bezárása: CTRL + F4.
8. Nyisd meg a kolcsonzes.txt fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: kolcsonzes, 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.
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.
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. 
Mentés: CTRL + S.
9. Az oldalon található lenyíló űrlapelem paramétereit módosítsd úgy, hogy az elem minden értéke látszódjon, alapértelmezés szerint pedig az Opel legyen kiválasztott állapotban.
Megjegyzés: Összesen kilenc elem van a lenyílóban.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: select.
Keresés minialkalmazás bezárása: ESC.
JOBBRA, SZÓKÖZ, majd írd be: size=9.
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: opel.
Keresés minialkalmazás bezárása: ESC.
JOBBRA, kétszer, SZÓKÖZ, majd írd be: selected.
Mentés: CTRL + S.
10. A többsoros beviteli mező sorainak számát módosítsd 6-ra, a soron belüli karakterek számát pedig 40-re. Alapértelmezésben a következő szöveg legyen a mezőbe írva: „Írja meg egyéb kívánságait!”
Jelöld ki a feladatleírásból az idézőjelek közötti 
Írja meg egyéb kívánságait! szöveget, majd másold: CTRL + C.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: </textarea.
Keresés minialkalmazás bezárása: ESC.
BALRA, kétszer, (ekkor a kurzor a nyitó jelölőben van).
SZÓKÖZ, majd írd be: cols=40, JOBBRA, SZÓKÖZ, majd írd be: rows=6.
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 nyomógomb mellé vegyél fel egy másik nyomógombot is, ennek adj meg reset típust és „alaphelyzetbe állítás” szövegű feliratot.
Jelöld ki a feladatleírásból az idézőjelek közötti 
alaphelyzetbe állítás szöveget, majd másold: CTRL + C.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: submit.
Keresés minialkalmazás bezárása: ESC.
Input elem kijelölése: ALT + O.
Ugrás a sor végére: JOBBRA.
Írd be az Emmet rövidítést: input:reset, majd TAB.
A kurzor a value értéknél van, illeszd be a kimásolt szöveget: CTRL + V.
Mentés: CTRL + S.
Mentsd el a fájlt weboldalként kolcsonzes.html néven és zárd be.
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 aktiv osztályú hivatkozás jelölő elemek számára adj #00f betűszínt, és aláhúzott szöveget.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: #menu a:aktiv{.
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:#00f, majd TAB. 
Vagy írd be: color: #00f;
Mentés: CTRL + S.
13. A table elemek számára határozz meg 10 pixel felső és alsó margó értéket, a bal- és jobboldali margót á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:10-a, majd TAB.
Vagy írd be: margin: 10px auto;
Mentés: CTRL + S.
14. A caption elemek betűmérete az alap betűméret 1,2-szerese legyen, a háttér színe pedig #aaf.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: caption{.
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.2, majd TAB. 
Vagy írd be: font-size: 1.2em;
Új sor nyitása: ENTER.
Írd be az Emmet rövidítést: bgc:#aaf, majd TAB. 
Vagy írd be: background-color: #aaf;
Mentés: CTRL + S.
15. A text típusú input elemek szélességét állítsd 300 pixel méretűre.
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.
16. Minden input, select és textarea elem számára határozd meg a baloldali margó értékét 30 pixel méretűre.
Ugrás a dokumentum végére: CTRL + END.
Új sor nyitása: ENTER.
Írd be: input, select, textarea{, 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: ml:30, majd TAB. 
Vagy írd be: margin-left: 30px;
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