8. modul – 46. 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-46, 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.Módosítsd a „Köszöntjük Önt!” szöveget a következőre: „Köszönti kedves látogatóit az Ukulele Zeneiskola!” Tedd ezt a sort 1. szintű címsorrá.
Jelöld ki a feladatleírásból az idézőjelek közötti Köszönti kedves látogatóit az Ukulele Zeneiskola! szöveget, majd másold: CTRL + C. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: Köszöntjük. Keresés minialkalmazás bezárása: ESC. Bekezdés tartalmának kijelölése: ALT + O. Illeszd be a kimásolt szöveget: CTRL + V. 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.3. Az „Elérhetőségeinket a”... mondat elé szúrj be egy sortörést.
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: Elérhetőségeinket. Keresés minialkalmazás bezárása: ESC. Ugrás a kijelölés elejére: BALRA. Írd be az Emmet rövidítést: br, majd TAB. Mentés: CTRL + S.A „Kellemes böngészést...” mondat kerüljön új bekezdésbe.
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: Kellemes. 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.Mentsd el és zárd be az index.html fájlt.
Fájl bezárása: CTRL + F4.4. Nyisd meg a kapcsolat.txt fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: kapcsolat, 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.Adj oldalcímet „Ukulele zeneiskola” szöveggel. Rendelj a fájlhoz a styles.css stíluslap állományt.
Megjegyzés: A csatolandó stíluslapnak é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 Ukulele zeneiskola 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: 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. Ú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 cím alatti sorokat szerkeszd definíciós lista típusúvá.
Megjegyzés: Akadálymentesítés mindenképpen szükséges! Az átalakítandó sorokat egy div-be raktam, a definiálandó kifejezések előtt kötőjel és szóköz van, a definíciók elé egy * jelet raktam az együttes kijelölés megkönnyítésére. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmező az aktív, í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. Kijelölések törlése: DELETE. A definiálandó kifejezések köré dt jelölők beszúrása: Emmet: Becsomagolás rövidítéssel: CTRL + B, R. A szerkesztőmezőbe írd be: dt, majd ENTER. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: *, (ALTGR + KÖTŐJEL). Összes előfordulás kijelölése: ALT + ENTER. Keresés minialkalmazás bezárása: ESC. Kijelölések törlése: DELETE. A definíciók köré dd jelölők beszúrása: Emmet: Becsomagolás rövidítéssel: CTRL + B, R. A szerkesztőmezőbe írd be: dd, majd ENTER. Div jelölők eltávolítása: Emmet: Elem eltávolítása: CTRL + E, E. A definiálandó kifejezések köré dl 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. Mentés: CTRL + S.6. Alakítsd hiperhivatkozássá az oldalon szereplő két email címet.
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: @. Összes kijelölése: ALT + ENTER. Keresés minialkalmazás bezárása: ESC. E-mail-címek kijelölése: ALT + O. Emmet: Becsomagolás rövidítéssel: CTRL + B, R. A szerkesztőmezőbe írd be: a, majd ENTER. Megjegyzés: Automatikusan érzékeli, hogy e-mail-címek vannak kijelölve, az a jelölő után, ezt a href attribútumokba be is illeszti. Mentés: CTRL + S.7. Szúrd be a piano.jpg képet a kep_jobbra osztályú elemen belülre. Adj a képnek alternatív szöveget „zongora” értékkel.
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: kep_jobbra. Keresés minialkalmazás bezárása: ESC. Ugrás a bekezdés jelölők közé ALT + I. Írd be az Emmet rövidítést: img[src=piano.jpg alt=zongora], majd TAB. Mentés: CTRL + S.Mentsd el a fájlt weboldalként kapcsolat.html néven és zárd be.
Fájl bezárása: CTRL + F4.8. Nyisd meg a kepzeseink.html fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: kepzeseink, majd ENTER.Az oldalon található táblázatból töröld a Megjegyzés oszlopot, valamint a fuvola sort.
Megjegyzés: A fejléc cellán kívül a törlendő cellákban egy kötőjel van. 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: Megjegyzés|>-. Összes kijelölése: ALT + ENTER. Keresés minialkalmazás bezárása: ESC. Táblázatcella sorok kijelölése: CTRL + L. Sorok törlése: DELETE. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: fuvola. 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. Sorok törlése: DELETE. Mentés: CTRL + S.9. Javítsd a táblázatban a hegedű kezdési idejét május 4-re, a klarinét képzési díját pedig 95 000 Ft-ra.
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: hegedű. Keresés minialkalmazás bezárása: ESC. Ugrás a kijelölése végére: JOBBRA. LE, kétszer, a dátum sorra. Dátum nap kijelölése (1): SHIFT + JOBBRA. Írd át: 4. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: klarinét. Keresés minialkalmazás bezárása: ESC. Ugrás a kijelölése elejére: BALRA. LE, háromszor, az ár sorra. Ár (első karakterének) kijelölése (8): SHIFT + JOBBRA. Írd át: 9. Mentés: CTRL + S.Mentsd el és zárd be az kepzeseink.html fájlt.
Fájl bezárása: CTRL + F4.10. Nyisd meg a vendegkonyv.html fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: vendegkonyv, majd ENTER.Az oldalon lévő űrlapba szúrj be egy űrlapelemet, amelynek „Email” a felirata, a hozzá tartozó űrlapelem pedig egysoros szöveges beviteli mező legyen.
Megjegyzés: Az űrlapelem a Név elem után legyen. A felirat és a beviteli mező egy bekezdésben van, sortöréssel. 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:, egy sortörés és egy text típusú beviteli mező van, melynek name értéke: email. Mentés: CTRL + S.11. Adj magyarázó feliratot (legend) az oldalon lévő mezőcsoportnak a következő szöveggel: „Kérjük, írjon a vendégkönyvbe!”.
Jelöld ki a feladatleírásból az idézőjelek közötti Kérjük, írjon a vendégkönyvbe! szöveget, majd másold: CTRL + C. 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: legend, majd TAB. A kurzor pozíciójába illeszd be a kimásolt szöveget: CTRL + V. Mentés: CTRL + S.Mentsd el és zárd be az vendegkonyv.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 h1 elemek betűméretét állítsd az alap betűméret 1,8-szorosára, a szövegigazítást pedig középre.
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: h1{. 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.8, majd TAB. Vagy írd be: font-size: 1.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.13. A dt elemekben a szöveg betűképe legyen kiskapitális, 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. Ugrás a sor végére: END. Új sor nyitása: ENTER. Írd be az Emmet rövidítést: fw:sc, majd TAB. Vagy írd be: font-variant: small-caps; Ú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 megjegyzes osztályú elemekre a betűméretet állítsd az alap betűméret 0,9-szeresére és dőltté.
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: .megjegyzes{. 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: fz:0.9, majd TAB. Vagy írd be: font-size: 0.9em; Új sor nyitása: ENTER. Írd be az Emmet rövidítést: fs:i, majd TAB. Vagy írd be: font-style: italic; Mentés: CTRL + S.15. A table elemek margóját állítsd be a következőképpen: a felső és alsó értéke legyen 5 pixel, a bal- és jobboldali margók értékét állítsa 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:5-a, majd TAB. Vagy írd be: margin: 5px auto; Mentés: CTRL + S.16. A textarea elemek háttérszínét állítsd #ccf értékre.
Ugrás a dokumentum végére: CTRL + END. Új sor nyitása: ENTER. Írd be: textarea{, 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:#ccf, majd TAB. Vagy írd be: background-color: #ccf; Mentés: CTRL + S.Ide kattintva megtekinthetitek, hogyan kell kinéznie az elkészült weboldalnak. Vissza a feladatsorszámok kiválasztásáhozMents é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.