8. modul – 8. 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-8, 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 századok ködéből...” szöveget 1. szintű címsorrá.
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: századok. Keresés minialkalmazás bezárása: ESC. Ugrás a kijelölés végére: JOBBRA. Emmet: Jelölő 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.A felette lévő bekezdésben keresd meg az „Asztalfoglalás” szót. Ezt alakítsd hiperhivatkozássá, amely mutasson az Asztalfoglalás (foglalas.html) című oldalra.
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: Asztalfoglalás, a végén üss egy SZÓKÖZt. 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=foglalas.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 foglalas.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.3. Nyisd meg a spec.html fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: spec, majd ENTER.Módosítsd az ételek képeinek megjelenési tulajdonságait úgy, hogy mindhárom kép szélessége 135 pixel legyen. Ügyelj arra, hogy a képek méretarányai ne torzuljanak.
Megjegyzés: Ahhoz, hogy a képek méretarányai ne torzuljanak, ha van height vagy width érték megadva, akkor azt törölni kell, ehhez viszont egyenként meg kell vizsgálni a kép jelölők attribútumait. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: img. Keresés minialkalmazás bezárása: ESC. ALT + N-el, lépkedj végig a tulajdonságokon, ha akár magasság, akár szélesség érték van, azt jelöld ki és töröld. Keresés ismétlése: F3. ALT + N-el, lépkedj végig a tulajdonságokon, ha akár magasság, akár szélesség érték van, azt jelöld ki és töröld. Keresés ismétlése: F3. ALT + N-el, lépkedj végig a tulajdonságokon, ha akár magasság, akár szélesség érték van, azt jelöld ki és töröld. Ugrás a dokumentum elejére: CTRL + HOME. Keresés ismétlése: F3. Összes előfordulás kijelölése: CTRL + F2. Most mind a három sorban ki van jelölve a keresett img szöveg. Ugrás a kijelölések végére: JOBBRA. SZÓKÖZ, majd írd be: width=135. Megjegyzés: Az értéknél az idézőjeleket nem kell beírni, automatikusan létrejönnek. Kilépés a többsoros kurzorból: ESC. HALADÓ megoldás: 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: height="\d*". Jelentése: height attribútum kijelölése, bármilyen szám értékkel. Összes előfordulás kijelölése: ALT + ENTER. Keresés minialkalmazás bezárása: ESC. Height attribútumok törlése: DELETE. 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: width="\d*". Jelentése: width attribútum kijelölése, bármilyen szám értékkel. Összes előfordulás kijelölése: ALT + ENTER. Keresés minialkalmazás bezárása: ESC. Width attribútumok törlése: DELETE. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: img. Ö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. SZÓKÖZ, majd írd be: width=135. Megjegyzés: Az értéknél az idézőjeleket nem kell beírni, automatikusan létrejönnek. Mentés: CTRL + S.4. Szúrj be horgonyt (könyvjelzőt) a „Levesek” szó elé levesek néven, valamint a „Desszertek” szó elé desszertek néven.
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: Levesek. Keresés minialkalmazás bezárása: ESC. HTML Tag Wrap: ALT + W. Írd: a id=levesek. Megjegyzés: Az értéknél az idézőjeleket nem kell beírni, automatikusan létrejönnek. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmező az aktív, írd be: Desszertek. Keresés minialkalmazás bezárása: ESC. HTML Tag Wrap: ALT + W. Írd: a id=desszertek. Megjegyzés: Az értéknél az idézőjeleket nem kell beírni, automatikusan létrejönnek. Mentés: CTRL + S.5. Alakítsd át a táblázatok első sorainak celláit fejléc cella típusúvá. Egyesítsd ezeket a cellákat a velük szomszédos üres cellákkal.
Megjegyzés: A fejléc cellákká alakítandó cellák után egy-egy üres cella van, ezt használom az együttes módosításhoz. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmező az aktív, írd be: <td></td>. Összes előfordulás kijelölése: ALT + ENTER. Keresés párbeszédpanel bezárása: ESC. Sorok kijelölése: CTRL + L. 1. megoldás: Kijelölt sorok törlése: DELETE. FEL a fejléc cellává alakítandó sorokra. A cellasorok körüli táblázatcella jelölők eltávolítása: Emmet: Elem eltávolítása: CTRL + E, E. A cellasorok köré fejléc cella jelölők beszúrása, cellaösszevonással: Emmet: Becsomagolás rövidítéssel: CTRL + B, R. A szerkesztőmezőbe írd be: th[colspan=2], majd ENTER. 2. megoldás: A sorok kijelölése után: 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 colspan="2". Összes előfordulás cseréje: CTRL + ALT + ENTER. SHIFT + TAB a Find szerkesztőmezőig, írd be: /td. TAB a Replace szerkesztőmezőig, írd be: /th. Összes előfordulás cseréje: CTRL + ALT + ENTER. Csere ablak bezárása: ESC. Mentés: CTRL + S.6. Töröld a Levesek táblázatból a Fahéjas szilvaleves sort.
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmező az aktív, írd be: Fahéjas. Keresés párbeszédpanel bezárása: ESC. FEL, majd BALRA, ekkor a nyitó cellasor jelölőben van a kurzor. Cellasor kijelölése: ALT + O. Sorok kijelölése: CTRL + L. Táblázatsor törlése: DELETE. Mentés: CTRL + S.Módosítsd a Szarvas tokány zöldséges bundában árát 5500 Ft-ra.
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmező az aktív, írd be: Szarvas. Keresés párbeszédpanel bezárása: ESC. Ugrás a kijelölt szöveg elejére: BALRA. LE az árat tartalmazó sorba. Ár kijelölése: NUMPAD6. Ár módosítása: 5500. Mentés: CTRL + S.Mentsd el és zárd be a spec.html fájlt.
Fájl bezárása: CTRL + F4.7. Nyisd meg a business.txt fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: business, 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.Tedd félkövérré „A menü tartalma:” szöveget.
Jelöld ki a feladatleírásból az idézőjelek közötti A menü tartalma: (a kettőspontot is jelöld ki!) 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: b, majd ENTER. 2. megoldás: HTML Tag Wrap: ALT + W. Írd be: b. Mentés: CTRL + S.A menü tartalma: sor alatt lévő felsorolást alakítsd számozatlan felsorolás stílusúvá.
Megjegyzés: a „felsorolás” pre jelölők között van, a felsorolások előtt pedig egy kötőjel és egy szóköz van. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: A menü tartalma. Keresés minialkalmazás bezárása: ESC. Vagy: Az előző feladat után: LE a következő sorra, ez a nyitó pre jelölő sora. Pre tartalmának kijelölése: ALT + O. Pre 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: ul, majd ENTER. A kurzor a záró ul jelölő után van. FEL az előző sorra. Felsorolás 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: 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. 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.8. Állíts be hiperhivatkozást „A nap levese” sorra, amely mutasson a Specialitások című oldal (spec.html) Levesek táblázatához tartozó (levesek) könyvjelzőre.
Jelöld ki a feladatleírásból az idézőjelek közötti A nap levese 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=spec.html#levesek], 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 spec.html sorig, kiválasztása: ENTER. A kurzor pozíciójába írd be: #levesek. Mentés: CTRL + S.Állíts be hiperhivatkozást a „Fagylalt vagy sütemény” sorra is, ez pedig a Specialitások (spec.html) című oldal Desszertek táblázatához tartozó (desszertek) könyvjelzőre mutasson.
Jelöld ki a feladatleírásból az idézőjelek közötti Fagylalt vagy sütemény 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=spec.html#desszertek], 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 spec.html sorig, kiválasztása: ENTER. A kurzor pozíciójába írd be: #desszertek. Mentés: CTRL + S.9. Egészítsd ki a fájlt a hiányzó head és body nyitó és záró jelölőivel.
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. A kurzor a head záró jelölő után van. Kijelölés a dokumentum végéig: CTRL + SHIFT + END. A html záró jelölő visszavonása a kijelölésből: SHIFT + HOME. A kijelölt terület köré body jelölő beillesztése: Emmet: Becsomagolás rövidítéssel: CTRL + B, R. A szerkesztőmezőbe írd be: body, majd ENTER. Mentés: CTRL + S.Mentsd el a fájlt weboldalként business.html néven és zárd be.
Fájl bezárása: CTRL + F4.10. Nyisd meg a foglalas.html fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: foglalas, majd ENTER.Alakítsd át a Személyek száma melletti űrlapelemet, hogy az legördülő választóelem legyen. A választható lehetőségeket bővítse ki úgy, hogy 1 és 6 közötti szám bármelyikét ki lehessen választani.
A legördülő listában jelenleg 1 és 2 szám választható. Jelöld ki a feladatleírásból az idézőjelek közötti Személyek száma 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. Ugrás a kijelölés elejére: BALRA. LE a nyitó select sorig. Ugrás a sor elejére: HOME. ALT + N, amíg a size="3" attribútum lesz kijelölve. Töröld: DELETE. LE, amíg elhangzik: <option value="2">2</option>. Ugrás a sor végére: END. Új sor nyitása: ENTER. Írd be az Emmet rövidítést: option[value=$@3]{$@3}*4, majd TAB. A kód jelentése: Option elemek létrehozása, melyek value értéke 3-mal kezdődik, valamint tartalmuk is 3-mal kezdődik, és ebből legyen 4 darab. Mentés: CTRL + S.11. A „Füstmentes helyet kérek” melletti űrlapelemet módosítsd jelölőnégyzet típusúvá. A jelölőnégyzet alapértelmezés szerint legyen bejelölt állapotú.
Megjegyzés: Jelenleg választógomb. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: füstmentes. Keresés minialkalmazás bezárása: ESC. Ugrás a sor elejére: HOME. JOBBRA, ekkor már a kurzor az input jelölőn belül van. ALT + N, a type tulajdonság értékéig (radio), írd át: checkbox. JOBBRA, SZÓKÖZ, majd írd be: checked. Mentés: CTRL + S.Mentsd el és zárd be a foglalas.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 kep_alairva osztályú elemek betűtípusa legyen serif, mérete 11 pixel.
Ugrás a dokumentum végére: CTRL + END. Írd be: .kep_alairva{, 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: ff:s, majd TAB. Vagy írd be: font-family: serif; Új sor nyitása: ENTER. Írd be az Emmet rövidítést: fz:11, majd TAB. Vagy írd be: font-size: 11px; Mentés: CTRL + S.13. Egészítsd ki a td elemekre illeszkedő szabályt a következővel: az alsó keret legyen 1 pixel vastag, #888 színű és pontozott mintázatú.
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 sor végére: END. Új sor nyitása: ENTER. Írd be az Emmet rövidítést: bb:1-dotted-#888, majd TAB. Vagy írd be: border-bottom: 1px dotted #888; Mentés: CTRL + S.14. Egészítsd ki a th elemekre illeszkedő szabályt a következővel: a háttér színe legyen #060, a betű színe pedig #fff.
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: th{. 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:#060, majd TAB. Vagy írd be: background-color: #060; Új sor nyitása: ENTER. Írd be az Emmet rövidítést: c:#fff, majd TAB. Vagy írd be: color: #fff; Mentés: CTRL + S.15. Az űrlap legend elemeknél a betű mérete legyen 20 pixel, a betűstílusa pedig félkövér.
Ugrás a dokumentum végére: CTRL + END. Írd be: legend{, 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: fz:20, majd TAB. Vagy írd be: font-size: 20px; Ú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. Egészítsd ki a form elemre vonatkozó szabályt: az elem szélessége legyen 900 pixel, a bal- és jobboldali margókat pedig állítsd be úgy, hogy az elem doboza középen helyezkedjen el.
Megjegyzés: Az elemre már van tulajdonság megadva. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: th{. 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:900, majd TAB. Vagy írd be: width: 900px; Új sor nyitása: ENTER. Írd be az Emmet rövidítést: m:0-a, majd TAB. Vagy írd be: margin: 0 auto; 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.