8. modul – 11. 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-11, 
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.
Alakítsd félkövérré a szövegben a „Hot Salsa Tánciskola” szövegrészt.
Megjegyzés: A szöveg három helyen is szerepel! Az oldalon található utolsó előfordulást kell formázni, mely egy bekezdésen belül van!
Jelöld ki a feladatleírásból az idézőjelek közötti 
Hot Salsa Tánciskola szöveget, majd másold: CTRL + C.
Ugrás a dokumentum végére: CTRL + END.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe illeszd be a kijelölt szöveget: CTRL + V.
Visszafelé az első előfordulás kijelölése: ENTER.
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.
Alakítsd dőltté a szöveg végén lévő „A tánc az életstílusunk!” mondatot.
Az előző feladat pozíciójából indulva:
LE a következő sorra, ez a keresett sor.
Bekezdés tartalmának kijelölése: ALT + O.
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.
3. A „Célunk, hogy a minket felkeresők számára...” kezdetű mondattól kezdődő szövegrész 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: </.
Megjegyzés: A perjel beírása után kiegészül a záró bekezdés jelölő.
Üss egy ENTER-t.
Írd be: <p>.
A nyitó bekezdés jelölő beírásakor kiegészül a záró bekezdés jelölővel, ezt vissza kell vonni: CTRL + Z.
Mentés: CTRL + S.
Az „Oktatóink a Budapesten elérhető...” kezdetű mondat elé szúrj be egy sortörést.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: Oktatóink.
Keresés minialkalmazás bezárása: ESC.
Ugrás a kijelölése elejére: BALRA.
Írd be: <br>.
Vagy: írd be br, majd TAB.
Mentés: CTRL + S.
4. Állíts be hiperhivatkozást a „legjobb tanárok” szövegrészre, amely mutasson a tanaraink.html oldalra.
Jelöld ki a feladatleírásból az idézőjelek közötti 
legjobb tanárok 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=tanaraink.html], majd ENTER.
Mentés: CTRL + S.
Állíts be hiperhivatkozást a „profi képzést” szövegrészre is, ez mutasson a táncórákat tartalmazó oldalra (tancorak.html).
Jelöld ki a feladatleírásból az idézőjelek közötti 
profi képzést 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. Határozd meg az oldalon található dancing.gif kép paramétereit a következőképpen: a kép szélessége 150 pixel, magassága 160 pixel legyen. Adj „tánc” néven alternatív szöveget a képhez.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: gif", (az idézőjelet 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: width=150, JOBBRA és SZÓKÖZ, majd írd: height=160, JOBBRA és SZÓKÖZ, majd írd: 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.
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.
7. A cím alatti szövegrészt formázd át úgy, hogy az definíciós lista típusú legyen.
Megjegyzés: Akadálymentesítés szükséges! Javasolt az első sorok végére kettőspont elhelyezése, ezeket használom az együttes kijelöléshez.
LE a Tanáraink címsort követő sorig.
Bekezdés tartalmának kijelölése: ALT + O.
Bekezdés jelölők törlése:
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.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: :, (értelemszerűen írásjellel).
Összes 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.
Emmet: Becsomagolás rövidítéssel: CTRL + B, R.
A szerkesztőmezőbe írd be: dt, majd ENTER.
Keresés ismétlése: F3.
Kettőspontok kijelölése: ALT + ENTER.
Keresés minialkalmazás bezárása: ESC.
LE a következő sorokig.
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.
8. Nyisd meg a tancorak.html fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: tancorak, majd ENTER.
Alakítsd a táblázat első oszlopának celláit fejléc cella típusúvá.
Megjegyzés: Akadálymentesítés szükséges! Javasolt a sorok első cellájának végére kettőspont elhelyezése, ezeket használom az együttes kijelöléshez.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmező az aktív, írd be: :</td (a kettőspontot is írd be!).
Összes előfordulás kijelölése: ALT + ENTER.
Keresés párbeszédpanel bezárása: ESC.
Ugrás a kijelölések elejére: BALRA.
A kijelölt táblázat cella jelölők eltávolítása:
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: th, majd ENTER.
Mentés: CTRL + S.
9. Módosítsd a táblázatban a „Haladó 10-13 éveseknek” első óráját feb. 20-ra, a „Haladó latin felnőtteknek” utolsó óráját jún. 2-re.
Jelöld ki a feladatleírásból az idézőjelek közötti 
Haladó 10-13 éveseknek 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.
LE, kétszer, az első óra sorig. Jelöld ki a 13-at, majd írd át: 20.
Jelöld ki a feladatleírásból az idézőjelek közötti 
Haladó latin felnőtteknek 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.
LE, háromszor, az utolsó óra sorig. Jelöld ki a 9-at, majd írd át: 2.
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: kapcsolat, majd ENTER.
Szúrj be egy új mezőt a Név alá: A címke legyen Email, az ehhez tartozó mező pedig legyen egysoros szöveges beviteli mező.
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{Email}>br+input[name=email], majd TAB.
A kód jelentése: Egy bekezdés (p) elemen, melynek tartalma: Email, majd egy sortörés után egy text típusú beviteli mező van, melynek name értéke: email.
Vagy írd be: <p>Email<br><input type="text" name="email"></p>.
Mentés: CTRL + S.
11. Módosítsd a button nyomógombot submit típusúra, a gombra a mehet felirat kerüljön.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: button.
Keresés minialkalmazás bezárása: ESC.
Írd át a kijelölést: submit.
JOBBRA, SZÓKÖZ, majd írd be: value=mehet.
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 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 dt elemekre határozz meg félkövér betűstílust, valamint kiskapitális betűképet.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: dt{.
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: fw:b, majd TAB. 
Vagy írd be: font-weight: bold;
Új sor nyitása: ENTER.
Írd be az Emmet rövidítést: fv:sc, majd TAB. 
Vagy írd be: font-variant: small-caps;
Mentés: CTRL + S.
13. A tartalom nevű azonosítón belüli h1 elemek betűmérete legyen az alap betűméret 1,5-szerese, valamint középre rendezett.
Megjegyzés: Jelenleg balra rendezés van beállítva.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: #tartalom h1{.
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: ta:c, majd TAB. 
Vagy írd be: text-align: center;
Új sor nyitása: ENTER.
Írd be az Emmet rövidítést: fz:1.5, majd TAB. 
Vagy írd be: font-size: 1.5em;
Mentés: CTRL + S.
14. A caption elemek háttérszíne legyen #bb955b, a betűszín pedig fehér (white).
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: bgc:#bb955b, majd TAB. 
Vagy írd be: background-color: #bb955b;
Írd be az Emmet rövidítést: c:white, majd TAB. 
Vagy írd be: color: white;
Mentés: CTRL + S.
15. A th és a td elemekhez rendelj keret tulajdonságot, amelynek vastagsága 1 pixel, mintázata pontozott, valamint a színe szürke (gray).
Írd be: th, td{.
Az ENTER leütése után létrejön a záró kapcsos zárójel is a következő sorban.
Írd be az Emmet rövidítést: bd:1-dt-gray, majd TAB.
Vagy írd be: border: 1px dotted gray;
Mentés: CTRL + S.
16. Az egysoros szöveges beviteli mező szélessége legyen 300 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.
Í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.
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