8. modul – 12. 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-12, 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.A „Bemutatkozás” sort alakítsd 1. szintű címsorrá.
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: Bemutatkozás. Keresés minialkalmazás bezárása: ESC. Bekezdés jelölők törlése: 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.Az „Üdvözöljük fodrászatunkban!” sort töröld ki.
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: Üdv. Keresés minialkalmazás bezárása: ESC. Sor törlése: CTRL + SHIFT + K. Mentés: CTRL + S.3. Alakítsd félkövérré a cím alatti első bekezdés szövegét.
Megjegyzés: A cím alatti első bekezdés egy képet tartalmaz, az ezt követő bekezdést kell formázni! LE, kétszer, a FODOR & BODOR FODRÁSZAT kezdetű sorig. 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: b, majd ENTER. Vagy: HTML Tag Wrap: ALT + W. Írd be: b. Mentés: CTRL + S.A „Szombati napon” kezdetű mondatot tedd félkövérré és dőltté.
LE, kétszer, majd BALRA. 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: b>i, majd 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 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.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 a fájlnak, „Fodor & Bodor fodrászat” néven.
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 Fodor & Bodor fodrászat 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. Alakítsd a szövegben az „Elérhetőség:”-től kezdődő felsorolást definíciós listává.
Megjegyzés: Mindenképpen akadálymentesítésre van szükség! A dt sorok elé egy *-ot, a dd sorok elejére egy ~-jelet raktam, amelyek felül lesznek írva. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: Elérhetőség. Keresés minialkalmazás bezárása: ESC. 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. 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: *, (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. 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: ~. Keresés minialkalmazás bezárása: ESC. Összes előfordulás kijelölése: ALT + ENTER. Keresés minialkalmazás bezárása: ESC. Kijelölések törlése: DELETE. Emmet: Becsomagolás rövidítéssel: CTRL + B, R. A szerkesztőmezőbe írd be: dd, majd ENTER. Mentés: CTRL + S.6. Állíts be hiperhivatkozást a „fodorbodor@fodraszat.hu” email címre.
Jelöld ki a feladatleírásból az idézőjelek közötti fodorbodor@fodraszat.hu 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, majd ENTER. Mentés: CTRL + S.Továbbá állíts be hiperhivatkozást az „on-line felületünkön” szövegrészre is, amely mutasson a Bejelentkezés című oldalra (bejelentkezes.html).
Jelöld ki a feladatleírásból az idézőjelek közötti on-line felületünkön 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=bejelentkezes.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 bejelentkezes.html sorig, kiválasztása: ENTER. Mentés: CTRL + S.7. Szúrd be a comfort.jpg képet a kep_jobbra osztályú p elemen belülre. Állítsd a kép megjelenésének magasságát 180 pixelre.
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: kep. 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=comfort.jpg height=180], majd TAB. Vagy: Írd be: img, majd TAB. Az src értéknél van a kurzor, írd be: comfort.jpg. JOBBRA, SZÓKÖZ, majd írd be: height=180. Megjegyzés: Az értéknél az idézőjeleket nem kell beírni, automatikusan létrejönnek. 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 az arlista.html fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: arlista, majd ENTER.A táblázat első (Szolgáltatásaim-mal kezdődő) sorát alakítsd fejléc cella típusúvá.
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: >Szolgáltatásaim. Keresés minialkalmazás bezárása: ESC. Ugrás a kijelölés elejére: BALRA, ekkor a táblázatcella jelölőben van a kurzor. Táblázatsor tartalmának kijelölése: ALT + O. Csere minialkalmazás megnyitása: CTRL + H. Keresés 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 kijelölés cseréje: CTRL + ALT + ENTER. Csere minialkalmazás bezárása: ESC. Mentés: CTRL + S.9. Vond össze a „Festés” szövegű cellát az alatta lévő üres cellával.
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: >Festés. Keresés minialkalmazás bezárása: ESC. Ugrás a kijelölés elejére: BALRA, ekkor a táblázatcella jelölőben van a kurzor. SZÓKÖZ, majd írd be: rowspan=2. Megjegyzés: Az értéknél az idézőjeleket nem kell beírni, automatikusan létrejönnek. Üres cella törlése: Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmező az aktív, írd be: <td></td>. Keresés minialkalmazás bezárása: ESC. Sor törlése: CTRL + SHIFT + K. Mentés: CTRL + S.Mentsd el és zárd be az arlista.html fájlt.
Fájl bezárása: CTRL + F4.10. Nyisd meg a bejelentkezés.html fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: bejelentkezés, majd ENTER.„A hét mely napjára?” szöveghez tartozó mezőhöz vedd fel a szombat-ot is, mint választható érték.
Megjegyzés: Az utolsó sor a péntek. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: péntek. 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: option[value=Szo]{szombat}. A kód jelentése: option elem felvétele, melynek value értéke: Szo, tartalma: szombat. Vagy írd be: <option value="Szo">szombat</option>. Mentés: CTRL + S.Állítsd be a mezőt úgy, hogy minden sora látszódjon.
Megjegyzés: A szombattal együtt 6 sor van. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: <select. 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=6. Megjegyzés: Az értéknél az idézőjeleket nem kell beírni, automatikusan létrejönnek. Mentés: CTRL + S.11. A submit típusú nyomógomb mellé vegyél fel egy reset típusú nyomógombot is. A gomb felirata „adatok törlése” legyen.
Jelöld ki a feladatleírásból az idézőjelek közötti adatok törlése szöveget, majd másold: CTRL + C. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: submit. Keresés minialkalmazás bezárása: ESC. Nyomógomb 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, illeszd be a kimásolt szöveget: CTRL + V. Mentés: CTRL + S.Mentsd el és zárd be a bejelentkezés.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 dd elemeknél a baloldali bélés (padding) legyen 20 pixel méretű, a betű mérete pedig az alap betűméret 0,9-szerese.
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. LE a padding-left sorig. Sor kijelölése: CTRL + L. Kijelölés felülírása Emmet rövidítéssel: pl:20, majd TAB. Vagy írd be: padding-left: 20px; Új sor nyitása: ENTER. Írd be az Emmet rövidítést: fz:0.9, majd TAB. Vagy írd be: font-size: 0.9em; Mentés: CTRL + S.13. A table elemeknek adj keretet: a keret vastagsága 2 pixel, folytonos vonalú, a színe pedig #eee.
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: bd:2-s-#eee, majd TAB. Vagy írd be: border: 2px solid #eee; Mentés: CTRL + S.14. A kep_jobbra osztályon belüli kép elemek felső margója legyen 5 pixel, jobboldali és alsó margója 20-20 pixel, a baloldali margó pedig 0 pixel.
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: .kep_jobbra img{. 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-20-20-0, majd TAB. Vagy írd be: margin: 5px 20px 20px 0px; Mentés: CTRL + S.15. A caption elemek bélése (padding) legyen egységesen 5 pixel, a betű stílusa félkövér.
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: p:5, majd TAB. Vagy írd be: padding: 5px; Ú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. Az egysoros szöveges beviteli mezők háttérszíne legyen #ccf, a mezőszélesség 300 pixel.
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: input[type='text']{. Keresés minialkalmazás bezárása: ESC. Ugrás a sor végére: END. LE a width sorig. Sor kijelölése: CTRL + L. Kijelölés felülírása Emmet rövidítéssel: w:300, majd TAB. Vagy írd be: width: 300px; Új sor nyitása: ENTER. Í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áhozMentsd é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.