8. modul – 9. 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-9, 
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 „Egy óra jellemző ára kb. 18 000 Ft (72 EUR).” mondatot.
Itt a 18 és a 000 közötti, illetve a 000 és a Ft közötti szóközöket cseréld le törhetetlen szóközökké.
Jelöld ki a feladatleírásból az idézőjelek közötti 
Egy óra jellemző ára kb. 18 000 Ft (72 EUR). 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.
Csere minialkalmazás megnyitása: CTRL + H.
A Find szerkesztőmezőbe írd be: SZÓKÖZ 000 SZÓKÖZ, (értelemszerűen írásjelekkel!).
TAB a Replace szerkesztőmezőig, írd be:  000  (a pontosvesszőt is írd be!).
Összes előfordulás cseréje: CTRL + ALT + ENTER.
Csere minialkalmazás bezárása: ESC.
Mentés: CTRL + S.
3. Szúrj be egy új bekezdést? a „Nemzetközi elismertség” cím alatti felsorolás végére, a következő szöveggel: „Ld. még: tanáraink listája”.
A tanáraink listája szövegrészre állíts be hiperhivatkozást, amely mutasson a tanaraink.html oldalra.
Jelöld ki a feladatleírásból az idézőjelek közötti 
Ld. még: tanáraink listája szöveget, majd másold: CTRL + C.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: Nemzetközi.
Keresés minialkalmazás bezárása: ESC.
LE az <ul> sorig.
Felsorolás tartalmának kijelölése: ALT + O.
Ugrás a kijelölés végére: JOBBRA.
FEL, ugrás a sor végére: END.
Új sor nyitása: ENTER.
Írd be az Emmet rövidítést: li, majd TAB.
A kurzor pozíciójába illeszd be a kimásolt szöveget: CTRL + V.
Szöveg kijelölése: ALT + O.
1. megoldás: 
Emmet: Becsomagolás rövidítéssel: CTRL + B, R.
A szerkesztőmezőbe írd be: a[href=tanaraink.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 tanaraink.html sorig, kiválasztása: ENTER.
Mentés: CTRL + S.
4. Keresd meg az oldalon Elvira Sanchez és Anna Krotzmann neveit, és tedd dőltté.
Jelöld ki a feladatleírásból az idézőjelek közötti 
Elvira Sanchez 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.
Jelöld ki a feladatleírásból az idézőjelek közötti 
Anna Krotzmann 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.
Haladó megoldás:
Megjegyzés: Mindkét név egy lista jelölőben van, a nevek két tagúak.
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.
SHIFT + TAB a Find szerkesztőmezőig, írd be: Elvira|Anna.
Összes előfordulás kijelölése: ALT + ENTER.
Keresés minialkalmazás bezárása: ESC.
Vezeték nevek kijelölése is: NUMPAD6, kétszer.
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.
Mentsd el és zárd be az index.html fájlt.
Fájl bezárása: CTRL + F4.
5. Nyisd meg a tanaraink.html fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: tanaraink, majd ENTER.
Módosítsa a „Tanáraink listája” sorhoz tartozó jelölőt 1. szintű címsorrá.
Jelöld ki a feladatleírásból az idézőjelek közötti 
Tanáraink listája 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: Elem eltávolítása: CTRL + E, E.
Emmet: Becsomagolás rövidítéssel: CTRL + B, R.
A szerkesztőmezőbe írd be: h1, majd ENTER.
Mentés: CTRL + S.
Az ez alatt lévő felsorolást alakítsd számozatlan felsorolás stílusúvá.
Megjegyzés: A felsorolás blockquote jelölők között van. A listasorok végén (kivéve az utolsó sort) egy sortörés jelölő van.
LE a következő sorra, ez a nyitó blockquote jelölő sora.
Blockquote tartalmának kijelölése: ALT + O.
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: ul, majd ENTER.
Felsorolás kijelölése: ALT + O.
Keresés minialkalmazás megnyitása: CTRL + F.
Keresés a kijelölésben: ALT + L.
A Find szerkesztőmező az aktív, írd be: <br>.
Összes kijelölése: ALT + ENTER.
Keresés ablak bezárása: ESC.
Sortörő jelölők törlése: DELETE.
Utolsó listasor hozzáadása a kijelöléshez: Multi kurzor a sorok elé: CTRL + ALT + NUMPAD2.
Emmet: Becsomagolás rövidítéssel: CTRL + B, R.
A szerkesztőmezőbe írd be: li, majd ENTER.
Mentés: CTRL + S.
Mentsd el és zárd be a tanaraink.html fájlt.
Fájl bezárása: CTRL + F4.
6. Nyisd meg a kurzusok.txt fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: kurzusok, 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.
Helyezd át a táblázatban a „Svéd haladó” sorát a „Spanyol kezdő” sora után.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmező az aktív, írd be: Svéd haladó.
Keresés párbeszédpanel bezárása: ESC.
FEL, majd BALRA, ekkor a kurzor a nyitó cellasor jelölőben van.
Cellasor kijelölölése: ALT + O.
Sorok kijelölése: CTRL + L.
Táblázatsor kivágása: CTRL + X.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmező az aktív, írd be: Spanyol kezdő.
Keresés minialkalmazás bezárása: ESC.
FEL, majd ugrás a jelölőpárra: CTRL + U, P.
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.
Módosítsd a „Kínai haladó”-t „Kínai kezdő”-re, a hozzá tartozó kezdési időpont november 12. legyen.
Csere minialkalmazás megnyitása: CTRL + H.
A Find szerkesztőmező az aktív, írd be: kínai haladó.
TAB a Preserve Case gombig, ha nincs bejelölve, bejelölése: SZÓKÖZ.
SHIFT + TAB a Replace szerkesztőmezőig, írd be: kínai kezdő.
Csere: ENTER.
Csere minialkalmazás bezárása: ESC.
LE a következő sorra, ez a dátum.
Jelöld ki a jelenlegi dátumot (október 5.): ALT + I, írd át: november 12.
Mentés: CTRL + S.
7. Alakítsd a táblázat első sorának a celláit fejléc cella típusúvá.
Itt a cellaegyesítést szüntesd meg, az egyiknek „Kezdési időpont”, a másiknak „Időtartam” legyen a tartalma.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmező az aktív, írd be: Kezdési.
Keresés párbeszédpanel bezárása: ESC.
FEL az előző sorra.
Cellasor tartalmának kijelölése: CTRL + O.
Csere minialkalmazás megnyitása: CTRL + H.
Keresés a kijelölésben: ALT + L.
(Reguláris kifejezés használata: ALT + R.)
TAB a Use Regular Expression gombig, ha nincs bejelölve, bejelölése: SZÓKÖZ.
SHIFT + TAB a Find szerkesztőmezőig, írd be: td colspan="2"|td, (Az idézőjeleket is írd be!).
TAB a Replace mezőig, írd be: th.
Összes előfordulás cseréje: CTRL + ALT + ENTER.
Keresés párbeszédpanel bezárása: ESC.
Cella tartalmának kijelölés: ALT + O.
Írd át: Kezdési időpont.
Ugrás a sor végére: END.
Új sor nyitása: ENTER.
Írd be az Emmet rövidítést: th{Időtartam}, majd TAB.
Vagy írd be: <th>Időtartam</th>.
Mentés: CTRL + S.
8. Egészítsd ki a fájlt a hiányzó html és head nyitó és záró jelölőivel.
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.
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.
Mentés: CTRL + S.
Mentsd el a fájlt weboldalként kurzusok.html néven és zárd be.
Fájl bezárása: CTRL + F4.
9. Nyisd meg a kapcsolat.html fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: kapcsolat, majd ENTER.
Szúrj be egy új űrlapelemet a Név és a Nyelv, ami érdekli közé. A felirata legyen E-mail-cím:, a beviteli mező típusa pedig legyen egysoros szöveges.
Megjegyzés: Az űrlapelem egy bekezdésben van, ezen belül a felirat és az input elem 1-1- div-ben van.
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.
Ugrás a sor végére: END.
Új sor nyitása: ENTER.
Írd be az Emmet rövidítést: p>div{E-mail-cím:}+div>input[name=email], majd TAB.
A kód jelentése: Egy bekezdés (p) elemen belül van két div elem. Az első divben a felirat (E-mail-cím:), 
a második divben pedig egy text típusú beviteli mező van, melynek name értéke: email.
Mentés: CTRL + S.
10. Egészítsd ki a nyelvek listáját a következő választási lehetőséggel: egyéb.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: /select.
Keresés minialkalmazás bezárása: ESC.
FEL, majd ugrás a sor végére: END.
Új sor nyitása: ENTER.
Írd be az Emmet rövidítést: option[value=egyeb]{egyéb}, majd TAB.
A kód jelentése: option elem felvétele, melynek value értéke: egyeb, tartalma: egyéb.
A kurzor pozíciójába írd be: egyéb.
Mentés: CTRL + S.
Az űrlapelem paramétereit módosítsd úgy, hogy lista helyett legördülő legyen.
Megjegyzés: Jelenleg 10 sor látszik a listából.
Ugrás a dokumentum elejére: CTRL + HOME.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: <select.
Keresés minialkalmazás bezárása: ESC.
ALT + N, amíg a size tulajdonság és érték lesz kijelölve.
Tulajdonság és érték törlése: DELETE.
Mentés: CTRL + S.
11. Módosítsd az Üzenet melletti beviteli mező paramétereit úgy, hogy a sorok száma 5, a soron belüli karakterek száma 40 legyen.
A mezőbe legyen alapértelmezetten a következő szöveg: „Ide írja az üzenetét.”
Jelöld ki a feladatleírásból az idézőjelek közötti 
Ide írja az üzenetét. 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.
Ugrás a kijelölt szöveg végére: JOBBRA.
SZÓKÖZ, majd írd be: cols=40, JOBBRA, SZÓKÖZ, majd írd be: rows=5.
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.
A Find szerkesztőmezőbe illeszd be a kimásolt szöveget: CTRL + V.
Mentés: CTRL + S.
Mentsd el és zárd be a kapcsolat.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 tartalom azonosítójú elem esetén a háttér képe: vonal_fuggoleges.gif legyen, amit y tengely
mentén ismételjen.
Jelöld ki a feladatleírásból az idézőjelek közötti 
vonal_fuggoleges.gif szöveget, majd másold: CTRL + C.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: #tartalom{.
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: bgi, majd TAB. 
A kurzor az url értéknél van. A kurzor pozíciójába illeszd be a kimásolt szöveget.
JOBBRA, SZÓKÖZ, majd írd be: repeat:y.
Vagy írd be: background: url('vonal_fuggoleges.gif') repeat-y;
Mentés: CTRL + S.
13. Egészítsd ki az alja azonosítójú elemre vonatkozó szabályt a következőkkel: betű mérete a szülő elem betűméretének 0.8-szorosa, a szöveg pedig legyen középre igazítva.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: #alja{.
Keresés minialkalmazás bezárása: ESC.
Megjegyzés: Az első találatnál nemcsak a megadott azonosítóra vonatkozó beállítások vannak (olvastasd fel!).
A keresés ismétlése: F3.
Ugrás a sor végére: END.
Új sor nyitása: ENTER.
Írd be az Emmet rövidítést: fz:0.8, majd TAB. 
Vagy írd be: font-size: 0.8em;
Új sor nyitása: ENTER.
Írd be az Emmet rövidítést: ta:c, majd TAB. 
Vagy írd be: text-align: center;
Mentés: CTRL + S.
14. Egészítsd ki a table elemekre vonatkozó szabályt a következőkkel: A felső és alsó margó legyen 10 pixel, a bal- és jobboldali margót pedig á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.
15. Adj keret tulajdonságot a th és td elemeknek: vastagsága legyen 2 pixel, színe fekete (black), a mintázata pedig pontozott.
Megjegyzés: Az elemre már van tulajdonság megadva.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: th, 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: bd:2-dt-black, majd TAB.
Vagy írd be: border: 2px dotted black.
Mentés: CTRL + S.
16. Minden text típusú beviteli mező szélessége legyen 280 pixel.
Megjegyzés: Az elemre még nincs tulajdonság megadva.
Ugrás a dokumentum végére: CTRL + END.
Új sor nyitása: ENTER.
Vagy í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:280, majd TAB. 
Vagy írd be: width: 280px;
Mentés: CTRL + S.
Mentsd el é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