8. modul – 15. 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-15, 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.Alakítsd a „Bemutatkozás” sort 1. szintű címsorrá.
Megjegyzés: Ezzel a névvel menüpont is szerepel, de a bekezdésbe írt kifejezést kell keresni. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: p>Bemutatkozás. Keresés minialkalmazás bezárása: ESC. 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.Alakítsd egyszerű bekezdés típusúvá „A Kék Cédrus Faiskola igazgatója” sort.
Megjegyzés: A megadott rész h5-ös címsorban van, és csak ez az egy h5-ös sor van. 1. megoldás: Csere minialkalmazás megnyitása: CTRL + H. A Find szerkesztőmező az aktív, írd be: h5>. TAB a Replace szerkesztőmezőig, írd be: p>. Összes előfordulás cseréje: CTRL + ALT + ENTER. Csere minialkalmazás bezárása: ESC. 2. megoldás: Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: igazgatója. Keresés minialkalmazás bezárása: ESC. Bekezdés kijelölése: ALT + O. 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: p, majd ENTER. Mentés: CTRL + S.3. Állíts be hiperhivatkozást a „Díszcserjéink most kedvezményesen megvásárolhatók” szövegrészre, amely mutasson az akcionk.html oldalra.
Jelöld ki a feladatleírásból az idézőjelek közötti Díszcserjéink most kedvezményesen megvásárolható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. Emmet: Becsomagolás rövidítéssel: CTRL + B, R. A szerkesztőmezőbe írd be: a[href=akcionk.html], majd ENTER. Mentés: CTRL + S.Állíts be hiperhivatkozást a szöveg végén lévő „Kék Cédrus Faiskola” szövegrészre is, ez mutasson az Elérhetőségünk című oldalra (elerhetosegunk.html).
Jelöld ki a feladatleírásból az idézőjelek közötti Kék Cédrus Faiskola 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=elerhetosegunk.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 elerhetosegunk.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 az akcionk.txt fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: akcionk, 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ó head nyitó és záró jelölőivel.
Ugrás a dokumentum elejére: CTRL + HOME. LE a html nyitó jelölők követősorra. Két sor kijelölése: CTRL + L, kétszer. Emmet: Becsomagolás rövidítéssel: CTRL + B, R. A szerkesztőmezőbe írd be: head, majd ENTER. Mentés: CTRL + S.Adj oldalcímet „Kék Cédrus Faiskola” néven.
Megjegyzés: A cím a head záró jelölő előtt kell legyen. Jelöld ki a feladatleírásból az idézőjelek közötti Kék Cédrus Faiskola szöveget, majd másold: CTRL + C. A kurzor most a head zárójelölő sorában áll. 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 kimásolt szöveget: CTRL + V. Mentés: CTRL + S.5. Az „Amennyiben további...” kezdetű mondat új bekezdés helyett csak új sorba kerüljön.
Megjegyzés: A kijelölés előtti nyitó bekezdés jelölőt törölni kell, a kijelölés feletti sor végén lévő záró bekezdésjelölőt cserélni kell sortörésre. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: Amennyiben. Keresés minialkalmazás bezárása: ESC. Ugrás a sor elejére: HOME. Jelöld ki a nyitó bekezdésjelölőt (<p>), SHIFT + JOBBRA, háromszor, majd töröld: DELETE. FEL az előző sorra. Ugrás a sor végére: END. Jelöld ki a záró bekezdésjelölő nevét és a per jelet (/p), BALRA, majd SHIFT + BALRA, kétszer, írd át: br. Mentés: CTRL + S.Szüntesd meg a mondat dőlt stílusát.
Keresés ismétlése: F3. Emmet: Elem eltávolítása: CTRL + E, E. Mentés: CTRL + S.Mentsd el a fájlt weboldalként akcionk.html néven és zárd be.
Fájl bezárása: CTRL + F4.6. Nyisd meg a szolgaltatasaink.html fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: szolgaltatasaink, majd ENTER.A Kertépítés és Szaktanácsadás közötti sorokat alakítsd számozatlan felsorolás stílusúvá, amely a Kertépítés alá legyen beágyazva.
Megjegyzés: A sorok végén sortörés jelölők vannak, kivéve az utolsó listasort. A listasorok előtt egy kötőjel és egy szóköz van. Jelöld ki a feladatleírásból az idézőjelek közötti Kertépítés 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. Lista 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ő az aktív, írd be: <br>. Összes előfordulás kijelölése: CTRL + ALT + ENTER. Keresés minialkalmazás bezárása: ESC. Sortörés jelölők törlése: DELETE. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: KÖTŐJEL SZÓKÖZ (értelemszerűen írásjelekkel!). Összes kijelölése: ALT + ENTER. Keresés minialkalmazás bezárása: ESC. Kötőjel és szóköz törlése: DELETE. A sorok köré lista jelölők beszúrása: Emmet: Becsomagolás rövidítéssel: CTRL + B, R. A szerkesztőmezőbe írd be: li, majd ENTER. A kurzor az első listasorban van. Sorok kijelölése: CTRL + L, négyszer. A listasorok köré számozatlan felsorolás jelölők beszúrása: Emmet: Becsomagolás rövidítéssel: CTRL + B, R. A szerkesztőmezőbe írd be: ul, majd ENTER. Mentés: CTRL + S.Mentsd el és zárd be a szolgaltatasaink.html fájlt.
Fájl bezárása: CTRL + F4.7. Nyisd meg a termekeink.html fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: termekeink, majd ENTER.A termek_kep osztályú elemeken belüli képekhez rendelj alternatív szöveget, amelyek tartalmai legyenek ugyanazok, mint az alattuk lévő, félkövérrel szedett megnevezések.
Megjegyzés: A szükséges kifejezések félkövér jelölők között vannak, ezt használom ki az egyszerre történő módosításhoz. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmező az aktív, írd be: <b>. Keresés párbeszédpanel bezárása: ESC. Minden előfordulás kijelölése: ALT + ENTER. Ugrás a kijelölés végére: JOBBRA. Fa nevek 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, vagy jpg" (az idézőjelt is írd be!). Keresés párbeszédpanel bezárása: ESC. Minden előfordulás kijelölése: ALT + ENTER. Ugrás a kijelölések végére: JOBBRA. SZÓKÖZ, majd írd be: alt=. Megjegyzés: Az értéknél az idézőjeleket nem kell beírni, automatikusan létrejönnek. Illeszd be a kimásolt kifejezéseket: CTRL + V. Mentés: CTRL + S.Mentsd el és zárd be a termekeink.html fájlt.
Fájl bezárása: CTRL + F4.8. Nyisd meg az elerhetosegunk.html fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: elerhetosegunk, majd ENTER.Szúrd be a kep osztályú elemen belülre a garden.jpg képet. A kép megjelenési szélessége 280 pixel legyen.
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=garden.jpg width=280], majd TAB. Mentés: CTRL + S.9. Módosítsd az Email, valamint a Tárgy feliratokhoz tartozó beviteli mező paramétereit úgy, hogy a beírható maximális karakterszám 50 legyen.
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: email"|targy", (az idézőjeleket is írd be!). Összes előfordulás kijelölése: ALT + ENTER. Megjegyzés: Így már csak a két szükséges name érték lesz kijelölve. Keresés párbeszédpanel bezárása: ESC. JOBBRA, SZÓKÖZ, majd írd be: maxlength=50. Megjegyzés: Az értéknél az idézőjeleket nem kell beírni, automatikusan létrejönnek. Mentés: CTRL + S.10. Módosítsd az Üzenet melletti beviteli mező paramétereit úgy, hogy a sorok száma 6, a soron belüli karakterek száma 45 legyen.
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 name értéknél van a kurzor, írd be: uzenet. JOBBRA, SZÓKÖZ, majd írd be: rows=6. JOBBRA, SZÓKÖZ, majd írd be: cols=45. 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=45], majd TAB. Mentés: CTRL + S.11. Módosítsd az űrlap végén a nyomógombot submit típusúra, a gomb felirata pedig „üzenet küldése” legyen.
Megjegyzés: A gomb jelenleg button típusú. Jelöld ki a feladatleírásból az idézőjelek közötti üzenet küldése szöveget, majd másold: CTRL + C. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: button. Keresés minialkalmazás bezárása: ESC. Írd át a kijelölést: submit. ALT + N, a value értékig, illeszd be a kijelölt szöveget. CTRL + V. Mentés: CTRL + S.Mentsd el és zárd be az elerhetosegunk.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 állapotában a szöveg legyen aláhúzott.
Megjegyzés: Az elemre még nincs tulajdonság megadva. 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: td:u, majd TAB. Vagy írd be: text-decoration: underline; Mentés: CTRL + S.13. A h2 elemek betűmérete legyen az alap betűméret 1,2-szerese.
Megjegyzés: Az elemre még nincs tulajdonság megadva. Ugrás a dokumentum végére: CTRL + END. Új sor nyitása: ENTER. Írd be: h2{, 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:1.2, majd TAB. Vagy írd be: font-size: 1.2em; Mentés: CTRL + S.14. Módosítsd a termek_kep osztályra vonatkozó szabályt: a szövegigazítás legyen középre rendezett, a bélés (padding) értéke egységesen 5 pixel.
Ugrás a dokumentum végére: CTRL + END. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: .termek_kep{. Keresés minialkalmazás bezárása: ESC. LE a text-align sorig. Sor kijelölése: CTRL + L. Kijelölés felülírása Emmet rövidítéssel: ta:c, majd TAB. Vagy írd be: text-align: center; Új sor nyitása: ENTER. Írd be az Emmet rövidítést: p:5, majd TAB. Vagy írd be: padding: 5px; Mentés: CTRL + S.15. A fildset elemek div gyermekelemeinél a felső és alsó margó mérete legyen 20 pixel, a bal- és jobboldali margó pedig 0 pixel.
Ugrás a dokumentum végére: CTRL + END. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: fieldset div{. 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:20-0, majd TAB. Vagy írd be: margin: 20px 0; Mentés: CTRL + S.16. A submit típusú nyomógombok háttérszíne legyen #cfc.
Megjegyzés: Az elemre még nincs tulajdonság megadva. Ugrás a dokumentum végére: CTRL + END. Új sor nyitása: ENTER. Írd be: input[type='submit']{, 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:#cfc, majd TAB. Vagy írd be: background-color: #cfc; 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.