8. modul – 22. 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-22, 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 dőltté a „lemezlovas” szót.
Jelöld ki a feladatleírásból az idézőjelek közötti lemezlovas 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, a végére vagy üss egy SZÓKÖZT, vagy TAB a MATCH WHOLE WORD gombig, ha nincs bejelölve, bejelölése SZÓKÖZ. 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.A „Ne habozz, jelentkezz most!” mondat kerüljön új bekezdésbe.
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: Ne habozz. 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. Állíts be hiperhivatkozást a „jelentkezni valamelyik tanfolyamunkra” szövegrészre, amely mutasson a tanfolyamok.html oldalra.
Jelöld ki a feladatleírásból az idézőjelek közötti jelentkezni valamelyik tanfolyamunkra 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=tanfolyamok.html], majd ENTER. Mentés: CTRL + S.Állíts be hiperhivatkozást a „Szakképzett, DMC bajnok oktatóink” szövegrészre is, ez mutasson az Oktatók című oldalra (oktatok.html).
Jelöld ki a feladatleírásból az idézőjelek közötti Szakképzett, DMC bajnok oktatóink 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=oktatok.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 oktatok.html sorig, kiválasztása: ENTER. Mentés: CTRL + S.Mentsd el és zárd be az index.html fájlt.
Fájl bezárása: CTRL + F4.4. Nyisd meg a tanfolyamok.txt fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: tanfolyamok, 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.Adj oldalcímet „DJ Suli” szöveggel.
Megjegyzés: A címnek a head záró jelölő előtt kell lennie. Jelöld ki a feladatleírásból az idézőjelek közötti DJ Suli szöveget, majd másold: CTRL + C. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: /head. Keresés minialkalmazás bezárása: ESC. FEL az előző sorra. Ugrás a sor végére: END. Új sor nyitása: ENTER. Írd be az Emmet rövidítést: title, majd TAB. A kurzor pozíciójába illeszd be a címet: CTRL + V. Mentés: CTRL + S.5. A Tanfolyamok címsor alatti sorokat alakítsa definíciós listává.
Megjegyzés: 3 „definiálandó kifejezés” van egy bekezdésben, ezen belül 2 soros „definíciók” sörtörés jelölőkkel elválasztva. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: <h1>Tanfolyamok. 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. Bekezdés jelölők törlése: CTRL + E, E. 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 lista tartalmába. 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. A Find szerkesztőmezőbe írd be: <br>. Összes előfordulás kijelölése: ALT + ENTER. Keresés minialkalmazás bezárása: ESC. FEL az előző sorokra. Emmet: Becsomagolás rövidítéssel: CTRL + B, R. A szerkesztőmezőbe írd be: dt, majd ENTER. Lista tartalmának kijelölése: ALT + O. Keresés ismétlése: F3. Összes előfordulás kijelölése: ALT + ENTER. Sorok kijelölése: CTRL + L. Következő sorok kijelölése is: CTRL + L. Emmet: Becsomagolás rövidítéssel: CTRL + B, R. A szerkesztőmezőbe írd be: dd, majd ENTER. Mentés: CTRL + S.Ments el a fájlt weboldalként tanfolyamok.html néven és zárd be.
Fájl bezárása: CTRL + F4.6. Nyisd meg az oktatok.html fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: oktatok, majd ENTER.Az oldalon található táblázatnak cseréld meg a két oszlopát.
Megjegyzés: A fejléc cellákat és két táblázatsor celláit kell megcserélni. A táblázatsorok képet tartalmaznak. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: th>. Keresés minialkalmazás bezárása: ESC. Sorok cseréje: ALT + LE. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: img. Keresés minialkalmazás bezárása: ESC. Sorok cseréje: ALT + LE. Haladó megoldás - Sorok cseréje egyszerre: 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: dj.foot, (ez a szöveg az első cellasorokban van.) Jelentése: itt a pont egy bármilyen karaktert jelent, így a DJ Foot és a dj_foot szövegeket is kijelöli. Összes előfordulás kijelölése: ALT + ENTER. Keresés minialkalmazás bezárása: ESC. Sorok cseréje: ALT + LE. Megjegyzés: Keresheted a dj.eye reguláris kifejezést is, de mivel ez a második sorokhoz tartozik, így a sorok cseréje: ALT + FEL. Mentés: CTRL + S.7. Adj alternatív szöveget a táblázatban található két képnek, az értéke ugyanaz legyen, mint a hozzájuk tartozó oszlop fejlécének tartalma.
A Find szerkesztőmező az aktív, írd be: <th>. Összes előfordulás kijelölése: ALT + ENTER. Keresés párbeszédpanel bezárása: ESC. Ugrás a kijelölés végére: JOBBRA. Oszlopfejlécek tartalmának együttes kijelölése: ALT + O. Kifejezések másolása: CTRL + C. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmező az aktív, írd be: img. Összes előfordulás kijelölése: ALT + ENTER. Keresés párbeszédpanel bezárása: ESC. Ugrás a kijelölések végére: JOBBRA. SZÓKÖZ, majd írd be: alt=, és illeszd be a kimásolt kifejezéseket: CTRL + V. 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 oktatok.html fájlt.
Fájl bezárása: CTRL + F4.8. Nyisd meg a kapcsolat.html fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: kapcsolat, majd ENTER.Módosítsd az űrlapon a Név felirathoz tartozó mező paramétereit: a mező neve nev, a maximálisan beírható karakterek száma 30 legyen.
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. LE az input sorra. Input elem kijelölése: ALT + O. Ugrás a kijelölés végére: JOBBRA, majd BALRA, ekkor a kurzor az input elemben van. SZÓKÖZ, majd írd be: name=nev, JOBBRA, SZÓKÖZ, majd írd be: maxlength=30. Megjegyzés: Az értéknél az idézőjeleket nem kell beírni, automatikusan létrejönnek. Mentés: CTRL + S.9. A Tanfolyam rádiógombjai közé vegyél fel egy új rádiógombot, amelynek címkéje Profi legyen.
Megjegyzés: Haladó rádiógomb alá kell felvenni az új rádiógombot. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: Haladó. Keresés minialkalmazás bezárása: ESC. Ugrás a sor végére: END. Új sor nyitása: ENTER. Az előző két rádiógomb mintájára: Írd be az Emmet rövidítést: input[type=radio name=tanfolyam value=profi id=tanfolyam-profi]+label[for=tanfolyam-profi]{ Profi}, majd TAB. Vagy írd be: <input type="radio" name="tanfolyam" value="profi" id="tanfolyam-profi"><label for="tanfolyam-profi"> Profi</label>. Mentés: CTRL + S.Alapértelmezetten legyen a Kezdő rádiógomb bejelölt állapotban.
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: -kezdo", (a kötőjelet és 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: checked. Mentés: CTRL + S.10. Módosítsd az Üzenet beviteli mezőjét többsorossá, a sorok száma 6, a soron belüli karakterek száma pedig 50 legyen.
Megjegyzés: az input elem egy diven belül van. 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 sorra. 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=6, JOBBRA, SZÓKÖZ, majd írd be: cols=50. 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=6 rows=50], majd TAB. Mentés: CTRL + S.11. Az űrlap végén lévő nyomógomb mellé vegyél fel egy másik nyomógombot, amelynek típusa reset, felirata pedig „Törlés”.
Megjegyzés: A nyomógomb egy div-ben van. 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örlés. 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 menu azonosítójú elemen belüli hivatkozás jelölő elemek hover állapota esetén a betűszín legyen vörös (red).
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:red, majd TAB. Vagy írd be: color: red; Mentés: CTRL + S.13. A dt elemek margója legyen 10 pixel, a betűstílus félkövér.
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: dt{. Keresés minialkalmazás bezárása: ESC. LE a margin sorig. Sor kijelölése: CTRL + L. Kijelölés felülírása Emmet rövidítéssel: m:10, majd TAB. Vagy írd be: margin: 10px; Ú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.14. A th és a td elemek 50% szélességűek legyenek és a bennük lévő szöveg balra legyen rendezve.
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: w:50%, majd TAB. Vagy írd be: width: 50%; Írd be az Emmet rövidítést: ta:l, majd TAB. Vagy írd be: text-align: left; Mentés: CTRL + S.15. A reset típusú input elemek betűszíne legyen vörös (red).
Ugrás a dokumentum végére: CTRL + END. Új sor nyitása: ENTER. Írd be: input[type='reset']{, 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:red, majd TAB. Vagy írd be: color: red; Mentés: CTRL + S.16. A fieldset elemek szélessége legyen 680 pixel, a bélésük (padding) pedig 10 pixel.
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: fieldset{. 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: w:680, majd TAB. Vagy írd be: width: 680px; Írd be az Emmet rövidítést: p:10, majd TAB. Vagy írd be: padding: 10px; Mentés: CTRL + S.Ide kattintva megtekinthetitek, hogyan kell kinéznie az elkészült weboldalnak. Vissza a feladatsorszámok kiválasztásáhozMentsd 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.