8. modul – 30. 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-30, 
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.
Az „Egyedülálló módszertan...” szövegrésztől a szöveget tedd új bekezdésbe. 
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: Egyedülálló.
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 mai napig...” szövegrész elé tegyél sortörést.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: A mai.
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.
3. Alakítsd félkövérré és dőltté „Elvira Sanchez” és „Anna Krotzmann” neveit.
Megjegyzés: a két név egymás alatti sorban van.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: Elvira.
Keresés minialkalmazás bezárása: ESC.
Ugrás a kijelölés elejére: BALRA.
Kijelölés bővítése a következő sorra is: CTRL + ALT + NUMPAD2.
Nevek kijelölése: NUMPAD6, háromszor.
Emmet: Becsomagolás rövidítéssel: CTRL + B, R.
A szerkesztőmezőbe írd be: b>i, majd ENTER.
Mentés: CTRL + S.
4. Állíts be hiperhivatkozást a „tanáraink listája” szövegrészre, amely mutasson a tanaraink.html oldalra.
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 írd be: ugyanígy teheti.
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=tanaraink.html], majd ENTER.
Mentés: CTRL + S.
Állíts be hiperhivatkozást a „tervezett kurzusaink” szövegrészre is, ez mutasson a Kurzusok című oldalra (kurzusaink.html).
Jelöld ki a feladatleírásból az idézőjelek közötti 
tervezett kurzusaink szöveget, majd másold: CTRL + C.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: ugyanígy teheti.
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=kurzusaink.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 kurzusaink.html sorig, kiválasztása: ENTER.
Mentés: CTRL + S.
Mentse el és zárja be az index.html fájlt.
	
Fájl bezárása: CTRL + F4.
5. Nyisd meg a tanaraink.txt fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: tanaraink, 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íluslap állományt.
Megjegyzés: A stíluslap csatolását a title előtti 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.
FEL az előző sorra.
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.
6. Alakítsd definíciós listává a Tanáraink listája alatti felsorolást.
Megjegyzés: A definíciós lista egy bekezdésben van. A dt elemek neveket tartalmaznak, tehát van bennük nagybetű,
a dd sorok tantárgyakat tartalmaznak, kisbetűvel írva.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: listája.
Keresés minialkalmazás bezárása: ESC.
LE a következő sorra. A kurzor a bekezdésen belül van.
Bekezdés tartalmának kijelölése: ALT + O.
Bekezdés jelölők eltávolítása: 
Emmet: Elem eltávolítása: CTRL + E, E.
A listasorok köré definíciós lista jelölők beszúrása:
Emmet: Becsomagolás rövidítéssel: CTRL + B, R.
A szerkesztőmezőbe írd be: dl, majd ENTER.
FEL az előző sorra, a kurzor a definíciós listán belül van.
Lista tartalmának kijelölése: ALT + O.
Keresés minialkalmazás megnyitása: CTRL + F.
Keresés csak 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.
(Kis- és nagybetűk megkülönböztetése: ALT + C.)
TAB a Match Case gombig, ha nincs bejelölve, bejelölése: SZÓKÖZ.
SHIFT + TAB a Find szerkesztőmezőig, írd be: [A-Z].* , (írásjelekkel!).
Összes kijelölése: ALT + ENTER.
Ekkor a neveket tartalmazó sorok vannak kijelölve.
Keresés minialkalmazás bezárása: ESC.
HTML Tag Wrap: ALT + W.
Írd be: dt.
LE a következő sorokra.
Emmet: Becsomagolás rövidítéssel: CTRL + B, R.
A szerkesztőmezőbe írd be: dd, majd ENTER.
Mentés: CTRL + S.
Mentsd el a fájlt weboldalként tanaraink.html néven és zárd be.
Fájl bezárása: CTRL + F4.
7. Nyisd meg a kurzusok.html fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: kurzusok, majd ENTER.
A táblázat első sorának celláit módosítsd fejléc cella típusúra.
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. Töröld a táblázatból a görög haladó sort.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: görög haladó.
Keresés minialkalmazás bezárása: ESC.
FEL, majd BALRA, ekkor a kurzor a nyitó táblázatsor jelölőn belül van.
Táblázatsor kijelölése: ALT + O.
Sorok kijelölése: CTRL + L.
Sorok törlése: DELETE.
Mentés: CTRL + S.
Módosítsd a görög kezdő óraszámát 3*3 órára. 
Megjegyzés: A jelenlegi érték: 2*5.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: 2*5, (a csillag karakter: ALT GR + KÖTŐJEL!).
Keresés minialkalmazás bezárása: ESC.
Írd át a kijelölést: 3*3.
Mentés: CTRL + S.
Mentsd el és zárd be a kurzusok.html fájlt.
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.
A „Nyelv, ami érdekli” szöveghez tartozó mező paramétereit módosítsd úgy, hogy a választó minden sora látszódjon, valamint engedélyezve legyen egyszerre több lehetőség kiválasztása is.
Megjegyzés: 9 opció van felsorolva.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: select" , (a záró idézőjelt 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: size=9, JOBBRA, SZÓKÖZ, majd írd be: multiple.
Megjegyzés: Az értéknél az idézőjeleket nem kell beírni, automatikusan létrejönnek.
Mentés: CTRL + S.
10. Az Üzenet beviteli mezőjét módosítsd többsorossá, a sorok száma legyen 4, a soron belüli karakterek száma pedig 40.
Megjegyzés: A beviteli mező name értéke: uzenet.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: Üzenet.
Keresés minialkalmazás bezárása: ESC.
LE, az input elemre.
Input elem kijelölése: ALT + O.
1. megoldás:
Írd be az Emmet rövidítést: textarea, majd TAB.
A kurzor a name értéknél van, írd be: uzenet.
JOBBRA, SZÓKÖZ majd írd be: rows=4, JOBBRA, SZÓKÖZ, majd írd be: cols=40.
Megjegyzés: Az értéknél az idézőjeleket nem kell beírni, automatikusan létrejönnek.
2. megoldás:
Írd be az Emmet rövidítést: textarea[name=uzenet cols=4 rows=40], majd TAB.
Mentés: CTRL + S.
11. Tegyél a submit nyomógomb mellé egy reset típusú nyomógombot is, a gomb felirata törlés legyen.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: submit.
Keresés minialkalmazás bezárása: ESC.
Submit elem kijelölése: ALT + O.
Ugrás a kijelölés végére: JOBBRA.
Írd be az Emmet rövidítést: input:reset, majd TAB.
A kurzor a value értéknél van, írd be: törlés.
Mentés: CTRL + S.
Mentse el és zárja 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 menu azonosítójú elem aktiv osztájú elemeiben a listajelölő típusa négyzetes (square) legyen, a betűstílus félkövér.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: #menu .aktiv{.
Keresés minialkalmazás bezárása: ESC.
LE a list-style-type sorig.
Sor kijelölése: CTRL + L.
Kijelölés felülírása Emmet rövidítéssel: list:s, majd TAB. 
Vagy írd be: list-style-type: square;
Ú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.
13. A table elemek felső és alsó margója 10 pixel legyen, a bal- és jobboldali margót állítsd be úgy, hogy az elem középre igazodjon.
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: 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 th és a td elemeknek legyen 2 pixel vastag, pontozott mintázatú és fekete (black) színű kerete.
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.
15. A text típusú input elemek szélessége legyen 280 pixel.
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:280, majd TAB. 
Vagy írd be: width: 280px;
Mentés: CTRL + S.
16. A submit típusú input elemek háttérszíne #ccc legyen.
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: bgc:#ccc, majd TAB. 
Vagy írd be: background-color: #ccc;
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