8. modul – 31. 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-31, 
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 „Üdvözlünk a Hot Salsa Tánciskola honlapján!” sort tedd 1. szintű címsor típusúvá.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: Üdvözlünk.
Keresés minialkalmazás bezárása: ESC.
Ugrás a kijelölés elejére: BALRA.
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.
A „Célunk, hogy a...” szövegrésztő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: Célunk.
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.
3. „A tánc az életstílusunk!” sor elé szúrj be egy bekezdést a következő szöveggel: „Ha felkeltettük érdeklődését, írjon nekünk!.”
Jelöld ki a feladatleírásból az idézőjelek közötti 
Ha felkeltettük érdeklődését, írjon nekünk! szöveget, majd másold: CTRL + C.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: A tánc az.
Keresés minialkalmazás bezárása: ESC.
FEL, ez egy üres sor.
Írd be az Emmet rövidítést: p, majd TAB.
A kurzor pozíciójába illeszd be a kimásolt szöveget: CTRL + V.
Mentés: CTRL + S.
Az „írjon nekünk” szövegrészre állíts be hiperhivatkozást, amely mutasson a kapcsolat.html oldalra.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: írjon nekünk.
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=kapcsolat.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 kapcsolat.html sorig, kiválasztása: ENTER.
Mentés: CTRL + S.
4. Állíts be hiperhivatkozást a „10 professzionális oktatóval” szövegrészre, amely mutasson a tanaraink.html oldalra.
Jelöld ki a feladatleírásból az idézőjelek közötti 
10 professzionális oktatóval 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=tanaraink.html], majd ENTER.
Mentés: CTRL + S.
Állíts be hiperhivatkozást a „számtalan választható táncműfajjal” szövegrészre is, ez mutasson a Táncórák című oldalra (tancorak.html).
Jelöld ki a feladatleírásból az idézőjelek közötti 
számtalan választható táncműfajjal 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=tancorak.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 tancorak.html sorig, kiválasztása: ENTER.
Mentés: CTRL + S.
5. Javítsd ki az oldalon található képfájl nevét. Adj hozzá alternatív szöveget „tánc” értékkel.
Megjegyzés: A hiba az, hogy nincs a képfájlnak kiterjesztése, ennek most gif-nek kell lennie.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: img.
Keresés minialkalmazás bezárása: ESC.
ALT + N, a kép src értékéig.
CTRL + SPACE, a lista tartalmazza a teljes képfájl nevet és kiterjesztést, kiválasztása: ENTER.
JOBBRA, SZÓKÖZ, majd írd be: alt=tánc.
Megjegyzés: Az értéknél az idézőjeleket nem kell beírni, automatikusan létrejönnek.
Mentés: CTRL + S.
Mentsd el és zárd be az index.html fájlt.
	
Fájl bezárása: CTRL + F4.
6. 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 és head nyitó és záró jelölőivel.
	
Ugrás a dokumentum elejére: CTRL + HOME.
LE a második sorba.
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.
Ugrás a sor elejére: 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.
7. Alakítsd számozatlan felsorolás stílusúvá a Tanáraink címsor alatt található sorokat.
Megjegyzés: Az átalakítandó szöveg bekezdés jelölők között van, sortöréssel két sorba van tördelve, az első sorok előtt egy kötőjel és egy szóköz van.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: h1>Tanáraink.
Keresés minialkalmazás bezárása: ESC.
LE a következő sorra, ez a nyitó bekezdés jelölő sora.
Bekezdés 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.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: kötőjel szóköz, (értelemszerűen írásjelekkel).
Összes előfordulás kijelölése: ALT + ENTER.
Keresés minialkalmazás bezárása: ESC.
Sorok kijelölése: CTRL + L, kétszer.
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 a fájlt weboldalként tanaraink.html néven és zárd be.
Fájl bezárása: CTRL + F4.
8. Nyisd meg a tancorak.html fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: tancorak, majd ENTER.
Adj feliratot (caption) a táblázathoz „Időbeosztás” szöveggel.
Megjegyzés: A táblázat feliratot a table nyitó jelölő után kell beilleszteni.
Jelöld ki a feladatleírásból az idézőjelek közötti 
Időbeosztás szöveget, majd másold: CTRL + C.
Ugrás a dokumentum elejére: CTRL + HOME.
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: caption, majd TAB.
A kurzor pozíciójába illeszd be a kimásolt címet: CTRL + V.
Mentés: CTRL + S.
9. Töröld a táblázatból a „Haladó latin felnőtteknek” sort.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: Haladó latin.
Keresés minialkalmazás bezárása: ESC.
FEL, majd BALRA, ekkor a kurzor a nyitó táblázatsor jelölőben van.
Táblázatsor kijelölése: ALT + O.
Sorok kijelölése: CTRL + L.
Táblázatsor törlése: DELETE.
Mentés: CTRL + S.
Cseréld fel egymással a „Bevezető felnőtteknek” és a „Haladó klasszikus felnőtteknek” sorokat.
Megjegyzés: Az utolsó két táblázatsort kell megcserélni, egy táblázatsor 6 fizikális sorból áll.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: Bevezető.
Keresés minialkalmazás bezárása: ESC.
FEL, majd BALRA, ekkor a kurzor a nyitó táblázatsor jelölőben van.
Táblázatsor kijelölése: ALT + O.
Táblázatsor átmozgatása: ALT + LE, hatszor.
Mentés: CTRL + S.
Mentsd el és zárd be a tancorak.html fájlt.
Fájl bezárása: CTRL + F4.
10. Nyisd meg a kapcsolat.html fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: styles, majd ENTER.
Módosítsd az „Üzenet” felirathoz tartozó beviteli mezőt többsorossá, a sorok száma 8, a soron belüli karakterek száma pedig 60 legyen.
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.
ALT + N, az input elemig, 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=8, JOBBRA, SZÓKÖZ, majd írd be: cols=60.
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=8 rows=60], majd TAB.
Mentés: CTRL + S.
11. A submit nyomógomb mellé tegyél egy reset típusú nyomógombot is, ennek felirata töröl 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.
Input 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öröl.
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:
Az li elemek listajelölő típusa legyen négyzetes (square).
Ugrás a dokumentum végére: CTRL + END.
Új sor nyitása: ENTER.
Írd be: li{, 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: list:s, majd TAB. 
Vagy írd be: list-style-type: square;
Mentés: CTRL + S.
13. A table elemeknek legyen kerete, amely 1 pixel vastag folytonos vonalú és fehér (white) szí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.
LE a border sorig.
Sor kijelölése: CTRL + L.
Kijelölés felülírása Emmet rövidítéssel: bd:1-s-white, majd TAB.
Vagy írd be: border: 1px solid white;
Mentés: CTRL + S.
14. A th és td elemekre a felső és alsó bélés (padding) mérete legyen 3 pixel, a bal- és jobboldali pedig 6 pixel.
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: p:3-6, majd TAB.
Vagy írd be: padding: 3px 6px;
Mentés: CTRL + S.
15. A submit és reset típusú input elemeknél a betűk mérete az alap betűméret 1,1-szerese legyen és félkövér.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: reset.
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.1, majd TAB. 
Vagy írd be: font-size: 1.1em;
Ú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. A text típusú input elemeknél a háttérszín legyen sárga (yellow), a betűszín pedig kék (blue).
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: type='text', (az aposztrófokat is írd be!).
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:yellow, majd TAB. 
Vagy írd be: background-color: yellow;
Új sor nyitása: ENTER.
Írd be az Emmet rövidítést: c:blue, majd TAB. 
Vagy írd be: color: blue;
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