8. modul – 14. 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-14, 
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.
Szúrj be a foresz azonosítójú tartományon belüli szöveg elejére a következő sort: „Kölcsönözzön tőlünk!”. Legyen ez a sor 1. szintű címsor.
Jelöld ki a feladatleírásból az idézőjelek közötti 
Kölcsönözzön tőlünk! szöveget, majd másold: CTRL + C.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: foresz.
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: h1, majd TAB.
A kurzor pozíciójába illeszd be a kimásolt szöveget: CTRL + V.
Mentés: CTRL + S.
3. Tedd új bekezdésbe az „Az árak minden esetben” mondattól kezdődő szöveget.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: Az árak.
Keresés minialkalmazás bezárása: ESC.
Ugrás a kijelölése elejére: BALRA.
Írd be: </, automatikusan kiegészül a bekezdés záró jelölőre.
Írd be: <p>, automatikusan kiegészül a bekezdés záró jelölővel, töröld vissza: CTRL + Z.
Mentés: CTRL + S.
A „Ha Ön már volt ügyfelünk” mondat elé szúrj be egy sortörést.

Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: Ha Ön.
Keresés minialkalmazás bezárása: ESC.
Ugrás a kijelölése elejére: BALRA.
Írd be az Emmet rövidítést: br, majd TAB.
Mentés: CTRL + S.
4. Tedd félkövérré a „Látogasson el hozzánk személyesen” szövegrészt.
Jelöld ki a feladatleírásból az idézőjelek közötti 
Látogasson el hozzánk személyesen 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.
Az „Itt találhat meg minket” szövegrészt alakítsd dőltté.
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: i, majd ENTER.
Vagy: HTML Tag Wrap: ALT + W. Írd be: i.
Mentés: CTRL + S.
5. Állíts be hiperhivatkozást a „Nézze meg autóinkat” szövegrészre, amely mutasson az Autók című oldalra (autok.html).
Jelöld ki a feladatleírásból az idézőjelek közötti 
Nézze meg autóinkat 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=autok.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 az autok.html sorig, kiválasztása: ENTER.
Mentés: CTRL + S.
Állíts be hiperhivatkozást a „kölcsönözze ki” szövegrészre is, ez mutasson a kolcsonzes.html oldalra.
Jelöld ki a feladatleírásból az idézőjelek közötti 
kölcsönözze ki 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=kolcsonzes.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 az kolcsonzes.html sorig, kiválasztása: ENTER.
Mentés: CTRL + S.
Mentsd el és zárd be az index.html oldalt.
Fájl bezárása: CTRL + F4.
6. Nyisd meg a partnerek.txt fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: partnerek, 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.
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.
Mentés: CTRL + S.
Rendeld a fájlhoz a styles.css stíluslapot.
Megjegyzés: A stíluslap csatolását a title utáni sorba írjuk.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: title.
Keresés minialkalmazás bezárása: ESC.
Ugrás a sor végére: END.
Új sor megnyitá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.
7. Adj alternatív szöveget mindkét partner_kep osztályú elemen belüli képnek „reklám” szöveggel.
Megjegyzés: Csak ez a két kép van az oldalon.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: img.
Minden előfordulás kijelölése: ALT + ENTER.
Keresés minialkalmazás bezárása: ESC.
Ugrás a kijelölés végére: JOBBRA.
SZÓKÖZ, majd írd be: alt=reklám.
Megjegyzés: Az értéknél az idézőjeleket nem kell beírni, automatikusan létrejönnek.
Mentés: CTRL + S.
Mentsd el a fájlt weboldalként partnerek.html néven és zárd be.
Fájl bezárása: CTRL + F4.
8. Nyisd meg az autok.html fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: autok, majd ENTER.
Az „A kategóriájú autók” táblázatának sorait rendezd át úgy, hogy az autó teljesítménye szerint csökkenő sorrendben legyenek.
Megjegyzés: 3 táblázatsor cserét kellene végrehajtani, ami időben túl sok.
Egyet cserét írok le: Az A-kategóriában a Rolls-Royce-t kell a nyitó tbody jelölő után beilleszteni.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: Rolls-Royce.
Keresés minialkalmazás bezárása: ESC.
FEL, kétszer a táblázatsor nyitó jelölő sorába.
BALRA, ekkor a kurzor a nyitó táblázatjelölőben van.
Táblázatsor kijelölése: ALT + O.
Táblázatsor kivágása: CTRL + X.
Megjegyzés: A cellákat az első tbody nyitó jelölő után kell beilleszteni.
Ugrás a dokumentum elejére: CTRL + HOME.
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.
Mentés: CTRL + S.
Mentsd el és zárd be az autok.html fájlt.
Fájl bezárása: CTRL + F4.
9. Nyisd meg a kolcsonzes.html fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: kolcsonzes, majd ENTER.
A „Milyen kategóriájú autót szeretne kölcsönözni?” kérdéshez tartozó rádiógombok feliratait alakítsd címke (label) típusúvá.
Megjegyzés: A rádiógombok feliratai: A, B, C. Azonosítójuk: kat_A, kat_B, kat_C.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: kat_, (az alsó kötőjelet is írd be!).
Összes előfordulás kijelölése: ALT + ENTER.
Keresés minialkalmazás bezárása: ESC.
Az azonosítók teljes kijelölése (A, B, C-vel együtt): SHIFT + JOBBRA.
Azonosítók másolása: CTRL + C.
Ugrás a feliratokhoz: CTRL + NUMPAD6.
Feliratok kijelölése: SHIFT + JOBBRA.
A kijelölt feliratok köré label jelölő beillesztése:
HTML Tag Wrap: ALT + W.
Írd: label for=.
Megjegyzés: Az értéknél az idézőjeleket nem kell beírni, automatikusan létrejönnek.
A kimásolt azonosítók beillesztése a for értékekhez: CTRL + V.
Mentés: CTRL + S.
10. „A Milyen típusú autót szeretne kölcsönözni?” kérdéshez tartozó legördülő választóba vegye fel a Maserati-t, mint választható értéket.
Megjegyzés: A típusok névsor szerint vannak, tehát a Ford után kell beilleszteni az új sort.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: Ford.
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: option[value=maserati]{Maserati}, majd TAB.
A kód jelentése: option elem felvétele, melynek value értéke: maserati, tartalma: Maserati.
Mentés: CTRL + S.
Módosítsd a legördülő beállítását úgy, hogy alapértelmezetten a Rolls-Royce érték legyen bejelölt állapotban.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: Rolls-, (a végére a kötőjelet is írd be!)
Keresés minialkalmazás bezárása: ESC.
Ugrás a kijelölés elejére: BALRA.
BALRA, ekkor a kurzor már a nyitó jelölőben van.
SZÓKÖZ, majd írd be: selected.
Mentés: CTRL + S.
11. Módosítsd az űrlap alján található nyomógomb paramétereit a következőképpen: a név tulajdonság értéke gomb legyen, a gomb felirata pedig „űrlap elküldése”.
Jelöld ki a feladatleírásból az idézőjelek közötti 
űrlap elküldése 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.
Ugrás a name értékhez: ALT + N, kétszer írd át: gomb.
ALT + N, kétszer, a value értékhez, illeszd be a kimásolt szöveget: CTRL + V.
Mentés: CTRL + S.
Mentsd el és zárd be a kolcsonzes.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 hivatkozás jelölő elemek hover állapotára a betűszínhez rendelj #00f értéket.
Megjegyzés: Az elemre még nincs tulajdonság megadva.
Ugrás a dokumentum végére: CTRL + END.
Új sor nyitása: ENTER.
Írd be: #menu 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: c:#00f, majd TAB. 
Vagy írd be: color: #00f;
Mentés: CTRL + S.
13. Adj a table elemeknek 2 pixel vastag, folytonos vonalú és #99f színű keretet.
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: bd:2-s-#99f, majd TAB.
Vagy írd be: border: 2px solid #99f;
Mentés: CTRL + S.
14. Módosítsd a td elemekre vonatkozó szabályt: a háttér színe: #ccf és a bennük lévő szöveg felülre rendezett 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.
LE a border sorig.
Sor kijelölése: CTRL + L.
Kijelölés felülírása Emmet rövidítéssel: bgc:#ccf, majd TAB. 
Vagy írd be: background-color: #ccf;
Ú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. Módosítsd a legend elemekre vonatkozó szabályt: a betű mérete az alap betűméret 1,2-szerese legyen és a betű stílusa félkövér.
Megjegyzés: Az elemre már van betűméret beállítva.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: legend{.
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.2, majd TAB. 
Vagy írd be: font-size: 1.2em;
Új sor nyitása: ENTER.
Írd be az Emmet rövidítést: fw:b, majd TAB. 
Vagy írd be: font-weight: bold;
Mentés: CTRL + S.
16. Állítsd be a fieldset elemek margóját úgy, hogy egységesen az elem minden oldalán 10 pixel méretű legyen
Megjegyzés: Az elemre még nincs tulajdonság megadva.
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:10, majd TAB. 
Vagy írd be: padding: 10px;
Mentés: CTRL + S.
Mentsd é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