8. modul – 1. 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-1, 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 karakterkódolás típusát utf-8-ra.
Megjegyzés: A karakterkódolást a head páros elemben kell elhelyezni. LE a <head> jelölőig, Ugrás a sor végére: END. Új sor nyitása: ENTER. Írd be az Emmet rövidítést: meta:utf, majd TAB. Vagy írd be: <meta charset="UTF-8">. Mentés: CTRL + S.Módosítsd az oldal címét Kovács és Fiai Kft.-re.
Jelöld ki a feladatleírásból az idézőjelek közötti Kovács és Fiai Kft. szöveget, majd másold: CTRL + C. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: title. Keresés minialkalmazás bezárása: ESC. Ugrás a title jelölők közé: ALT + I. Illeszd be a kimásolt címet: CTRL + V. Mentés: CTRL + S.3. Állíts be hiperhivatkozást a kedvező ár szövegrészre, amely mutasson az arak.html oldalra.
Jelöld ki a feladatleírásból az idézőjelek közötti kedvező ár 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=arak.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 arak.html sorig, kiválasztása: ENTER. Mentés: CTRL + S.Töröld a hiperhivatkozást a Minőség, megbízhatóság szövegrészről.
Jelöld ki a feladatleírásból az idézőjelek közötti Minőség, megbízhatóság 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: Elem eltávolítása: CTRL + E, E. 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 referenciak.txt fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: referenciak, 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.A Vállalati, intézményi referenciák alatti négy sort formázd számozott felsorolás stílusúvá.
Megjegyzés: A formázandó négy sor bekezdés jelölők között van. Minden sor végén sortörés jelölő van. Jelöld ki a feladatleírásból az idézőjelek közötti Vállalati, intézményi referenciák 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 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 eltávolítása: Emmet: Elem eltávolítása: CTRL + E, E. Számozott felsorolás jelölők beszúrása a kijelölés köré: Emmet: Becsomagolás rövidítéssel: CTRL + B, R. A szerkesztőmezőbe írd be: ol, majd ENTER. A kurzor a záró számozott felsorolás jelölő mögött van. FEL, ekkor a kurzor az utolsó listasorban van. Számozott felsorolás jelölő tartalmának kijelölése: ALT + O. Keresés minialkalmazás megnyitása: CTRL + F. Keresés 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. Sortörés jelölők törlése: DELETE. Kijelölt sorok köré listajelölő beszúrása: Emmet: Becsomagolás rövidítéssel: CTRL + B, R. A szerkesztőmezőbe írd be: li, majd ENTER. Mentés: CTRL + S.A Magán megrendelői referenciák alatti négy sort formázd számozatlan felsorolás stílusúvá.
Megjegyzés: A formázandó négy sor felett és alatt egy-egy bekezdés jelölő van. Minden sor végén sortörő jelölő van. Jelöld ki a feladatleírásból az idézőjelek közötti Magán megrendelői referenciák 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 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 eltávolítása: Emmet: Elem eltávolítása: CTRL + E, E. Számozatlan felsorolás jelölők beszúrása a kijelölés köré: Emmet: Becsomagolás rövidítéssel: CTRL + B, R. A szerkesztőmezőbe írd be: ul, majd ENTER. A kurzor a záró számozatlan felsorolás jelölő mögött van. BALRA, ekkor a kurzor záró számozatlan felsorolás jelölőben van. Számozatlan felsorolás jelölő tartalmának kijelölése: ALT + I. Keresés minialkalmazás megnyitása: CTRL + F. Keresés 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. Sortörés jelölők törlése: DELETE. Kijelölt sorok köré listajelölő beszúrása: Emmet: Becsomagolás rövidítéssel: CTRL + B, R. A szerkesztőmezőbe írd be: li, majd ENTER. Mentés: CTRL + S.5. A Referenciák címsor alatti kép (festes.jpg) tulajdonságait módosítsd úgy, hogy a szélessége 130 pixel legyen, és adj festés értékkel alternatív szöveget a képhez.
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: festes.jpg", (a záró 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=130, JOBBRA, SZÓKÖZ, majd írd: alt=festés. Megjegyzés: Az értékeknél az idézőjeleket nem kell beírni, automatikusan létrejönnek. Mentés: CTRL + S.6. Rendeld a fájlhoz a styles.css stíluslap állományt.
Megjegyzés: A csatolandó stíluslapot a head jelölőn belül kell megadni. DE!! Ennek a hiányzó jelölőnek a felvétele csak a következő feladat lesz! Ezért most a html nyitó jelölő után veszünk fel egy sort, ahová beírjuk a hivatkozást. Ugrás a dokumentum elejére: CTRL + HOME. LE a nyitó html jelölőig, 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. Mentés: CTRL + S.Egészítsd ki a fájlt a hiányzó head nyitó és záró jelölőivel.
Ugrás a dokumentum elejére: CTRL + HOME. LE a html nyitó jelölőt követő sorra. Három sor kijelölése: CTRL + L, háromszor. Emmet: Becsomagolás rövidítéssel: CTRL + B, R. A szerkesztőmezőbe írd be: head, majd ENTER. Mentés: CTRL + S.Mentsd el a fájlt weboldalként referenciak.html néven és zárd be.
Fájl bezárása: CTRL + F4.7. Nyisd meg az arak.html fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: arak, majd ENTER.Egyesítsd a táblázat celláit a szomszédos üres cellákkal minden olyan sorban, ahol a cella osztálya kiemelt értékű.
Megjegyzés: A módosításokat 4 helyen kell elvégezni, és 3-3 cellát kell összevonni. Csere minialkalmazás megnyitása: CTRL + H. A Find szerkesztőmező az aktív, írd be: "kiemelt", (az idézőjeleket is írd be!). TAB a Replace szerkesztőmezőig, írd be: "kiemelt" colspan="3". Összes cseréje: CTRL + ALT + ENTER. Csere minialkalmazás bezárása: ESC. Felesleges cella jelölők törlése: Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: <td></td>. Összes előfordulás kijelölése: ALT + ENTER. Keresés minialkalmazás bezárása: ESC. Sorok kijelölése: CTRL + L. Kijelölt sorok törlése: DELETE. Mentés: CTRL + S.8. Módosítsd az Impregnálás tartalmú cellák melletti árakat 150-ről 180-ra, az akciós árat pedig 100-ról 120-ra.
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmező az aktív: Impregnálás. Keresés minialkalmazás bezárása: ESC. Ugrás a kijelölés elejére: BALRA. LE a következő sorra, keresd meg és jelöld ki a jelenlegi értéket (150): CTRL + SHIFT + JOBBRA, majd írd át: 180, majd SZÓKÖZ. LE a következő sorra, keresd meg és jelöld ki a jelenlegi értéket (100): CTRL + SHIFT + BALRA, majd írd át: 120, majd SZÓKÖZ. Mentés: CTRL + S.9. Szúrj be egy horgonyt (könyvjelzőt) tapeta néven a Tapétázás szövegű cellába.
Ugrás a dokumentum elejére: CTRL + HOME. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmező az aktív, írd be: >Tapétázás. Keresés minialkalmazás bezárása: ESC. Ugrás a kijelölés végére: JOBBRA. Cella tartalmának kijelölése: ALT + O. HTML Tag Wrap: ALT + W. Írd: a id=tapeta. Megjegyzés: Az értéknél az idézőjeleket nem kell beírni, automatikusan létrejönnek. Mentés: CTRL + S.Állíts be hiperhivatkozást a Figyelmükbe ajánljuk a tapétázással kapcsolatos árainkat mondatra, amely mutasson a tapeta nevű könyvjelzőre.
Jelöld ki a feladatleírásból az idézőjelek közötti Figyelmükbe ajánljuk a tapétázással kapcsolatos árainkat 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=#tapeta], majd ENTER. Mentés: CTRL + S.Mentsd el és zárd be az arak.html fájlt.
Fájl bezárása: CTRL + F4.10. Nyisd meg az ajanlat.html fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: ajanlat, majd ENTER.A Tapétázás rádiógomb alatti három rádiógombhoz adj címkéket (label) a többi rádiógomb címkéihez hasonló módon.
Megjegyzés: A három rádiógomb: Glettelés, Csiszolás, Egyéb, az azonosítójuk pedig a szavak kisbetűs, ékezet nélküli változata. Megjegyzés: Mivel az input elemek tulajdonságai azonos sorrendben vannak megadva, a type és a name értékek azonos hosszúságúak minden input sorban, a value érték viszont már mind különbözik, a value értéket használom az együttes kijelölésre, A value és az id értékek megegyeznek. Az első gletteles szóra keresek. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: gletteles. Keresés minialkalmazás bezárása: ESC. Ugrás a kijelölés elejére: BALRA. Multi kurzor a sorok elé: CTRL + ALT + NUMPAD2, kétszer. Megjegyzés: A multi kurzorral egyszerre módosítható mind a három sor. Azonosítók kijelölése: NUMPAD6. Azonosítók másolása: CTRL + C. Input elem kijelölése: ALT + O. Ugrás a kijelölés végére: JOBBRA. A kurzor a feliratok előtt van. Megjegyzés: A feliratok egy-egy szóból állnak. Feliratok kijelölése: NUMPAD6. HTML Tag Wrap: ALT + W. A szerkesztőmezőbe írd be: label for=. Megjegyzés: Az értékeknél az idézőjeleket nem kell beírni, automatikusan létrejönnek. Illeszd be a kimásolt azonosítókat: CTRL + V. Mentés: CTRL + S.11. A többsoros beviteli mező értékébe alapértelmezetten legyen ez a szöveg beírva: egyéb megjegyzéseit ide írja.
Megjegyzés: A textarea beviteli mező alapértelmezett tartalmának a textarea páros jelölők között kell szerepelnie. Jelöld ki a feladatleírásból az idézőjelek közötti egyéb megjegyzéseit ide írja szöveget, majd másold: CTRL + C. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: textarea. Keresés minialkalmazás bezárása: ESC. Ugrás a textarea jelölők közé: ALT + I. Illeszd be a kimásolt szöveget: CTRL + V. Mentés: CTRL + S.A mező sorainak száma legyen 5, a soron belüli karakterek száma pedig 40.
Megjegyzés: a munkafájl tartalmaz rows (2) és cols (10) értéket, ezeket kell kikeresni, és módosítani. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: rows. Keresés minialkalmazás bezárása: ESC. Ugrás a rows tulajdonság értékére (2): ALT + N, írd át: 5. Ugrás a cols tulajdonság értékére (10): ALT + N, kétszer, írd át: 40. Mentés: CTRL + S.Mentsd el és zárd be az ajanlat.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 body elemhez rendelt betű típusa legyen tahoma, sans-serif, a háttérszín pedig #fff2e8.
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: body. Keresés minialkalmazás bezárása: ESC. Ugrás a kijelölt sor végére: END. Új sor nyitása: ENTER. Betűtípus megadása: Írd be az Emmet rövidítést: ff, majd TAB. Ekkor a kibontott kód: font-family: serif; A serif érték ki van jelölve. Kiterjesztett listamező megnyitása: CTRL + SZÓKÖZ. LE a Verdana, Geneva, Tahoma, sans-serif sorig, kiválasztása: ENTER. Háttérszín beállítása: Írd be az Emmet rövidítést: bgc:#fff2e8, majd TAB. Mentés: CTRL + S.13. Módosítsd a menu azonosítójú elemen belüli hivatkozás jelölő elemek hover állapotát a következők szerint: a betűszín legyen vörös (red), és aláhúzott.
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: #menu a:hover{. Keresés minialkalmazás bezárása: ESC. Betűszín módosítása: LE a color sorig. Ugrás a sor elejére: HOME. ALT + N, amíg az érték lesz kijelölve, írd át: red. Emmet rövidítéssel: c:red, majd TAB. Aláhúzás módosítása: LE a text-decoration sorig. Ugrás a sor elejére: HOME. ALT + N, amíg az érték lesz kijelölve, írd át: underline, majd TAB. Emmet rövidítéssel: td:u, majd TAB. Mentés: CTRL + S.14. Adj keretet a kep osztályú elemeknek, a keret vastagsága legyen 2 pixel, a mintázata pontozott, a színe pedig vörös (red).
Megjegyzés: Az elemre már van keret tulajdonság megadva. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: .kep{. Keresés minialkalmazás bezárása: ESC. Keret módosítása: LE a border sorig. Sor kijelölése: CTRL + L. Kijelölés felülírása Emmet rövidítéssel: bd:2-dt-red, majd TAB. Vagy írd be: border: 2px dotted red; Mentés: CTRL + S.15. Módosítsd a táblázatok celláinak cellabélés értékét: felülre és alulra 4 pixel, balra és jobbra 20 pixel értékeket rendelj.
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: td{. Keresés minialkalmazás bezárása: ESC. Ugrás a kijelölt sor végére: END. Cellabélés módosítása: LE a padding sorig. Sor kijelölése: CTRL + L. Kijelölés felülírása Emmet rövidítéssel: p:4-20, majd TAB. Vagy írd be: padding: 4px 20px; Mentés: CTRL + S.16. A kiemelt osztályú cellák baloldali bélését állítsd 30 pixelre.
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: td.kiemelt{. 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: pl:30, majd TAB. Vagy írd be: padding-left: 30px; Mentés: CTRL + S.Az ajanlat_form azonosítójú elemeken belül a meret osztályú input elem szélessége legyen 70 pixel.
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: #ajanlat_form input.meret{. Keresés minialkalmazás bezárása: ESC. LE a width sorig. Ugrás a sor elejére: HOME. ALT + N, amíg az érték lesz kijelölve, írd át: 70px, majd ENTER. Emmet rövidítéssel: w:70, majd TAB. Mentés: CTRL + S.Ide kattintva megtekinthetitek, hogyan kell kinéznie az elkészült weboldalnak. Vissza a feladatsorszámok kiválasztásáhozMents 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.