8. modul – 20. 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-20, 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 számozatlan felsorolás stílusúvá az oldal alján található „15 perc...600 Ft” három sorát.
Megjegyzés: A listasorok dd jelölőn belül találhatók, minden sor végén van egy Ft szöveg, két sor végén egy sortörés jelölő, az utolsó listasor végén pedig a záró dd jelölő van. Csere minialkalmazás megnyitása: CTRL + H. (Kis- és nagybetűk megkülönböztetése: ALT + C.) TAB a Match Case gombig, ha nincs bejelölve, bejelölése: SZÓKÖZ. SHIFT + TAB a Find szerkesztőmezőig, írd be: Ft<br>. TAB a Replace szerkesztőmezőbe, írd be: Ft. Összes cseréje: CTRL + ALT + ENTER. Keresés minialkalmazás bezárása: ESC. Keresés minialkalmazás megnyitása: CTRL + F. (Kis- és nagybetűk megkülönböztetése: ALT + C.) TAB a Match Case gombig, ha nincs bejelölve, bejelölése: SZÓKÖZ. SHIFT + TAB a Find szerkesztőmezőig, írd be: Ft. Összes kijelölése: ALT + ENTER. Keresés ablak bezárása: ESC. Ugrás a kijelölések végére: JOBBRA. Listasorok kijelölése: SHIFT + HOME. Emmet: Becsomagolás rövidítéssel: CTRL + B, R. A szerkesztőmezőbe írd be: li, majd ENTER. Listasorok kijelölése: LE, kétszer. Utolsó listasor kijelölése: ALT + O. Előző két listasor hozzáadása a kijelöléshez: SHIFT + FEL, kétszer. 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.Tedd félkövérré a „Nyitva 0-tól 24 óráig!!!” szövegrészt.
Jelöld ki a feladatleírásból az idézőjelek közötti Nyitva 0-tól 24 óráig!!! 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: b, majd ENTER. Vagy: HTML Tag Wrap: ALT + W. Írd be: b. Mentés: CTRL + S.Alakítsd dőltté a „10% kedvezményt” szövegrészt.
Jelöld ki a feladatleírásból az idézőjelek közötti 10% kedvezményt 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: i, majd ENTER. Vagy: HTML Tag Wrap: ALT + W. Írd be: i. Mentés: CTRL + S.4. Állíts be hiperhivatkozást a „szolgáltatást” szóra, amely mutasson a szolg.html oldalra.
Jelöld ki a feladatleírásból az idézőjelek közötti szolgáltatást 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=szolg.html], majd ENTER. Mentés: CTRL + S.Állíts be hiperhivatkozást továbbá az „expresso@expresso.mail.hu” email címre is.
Jelöld ki a feladatleírásból az idézőjelek közötti expresso@expresso.mail.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.Mentsd el és zárd be az index.html fájlt.
Fájl bezárása: CTRL + F4.5. Nyisd meg a szolg.txt fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: szolg, 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ó body nyitó és záró jelölőivel.
Ugrás a dokumentum elejére: CTRL + HOME. LE a záró head jelölőt követő sorba. 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.Rendelj a fájlhoz a styles.css stíluslap állományt.
Megjegyzés: a stíluslap hozzárendelést a head részben kell megadni, nincs jelentősége ezen belül hányadik sorban van. Ugrás a dokumentum elejére: CTRL + HOME. LE a nyitó head sorig, 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.6. Alakítsd fejléc cellává a táblázat azon celláit, ahol a táblázat két oszlopa össze van vonva.
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmező az aktív, írd be: colspan. Összes kijelölése: ALT + ENTER. Keresés párbeszédpanel bezárása: ESC. Sorok kijelölése: CTRL + L. Csere minialkalmazás megnyitása: CTRL + H. Keresés csak a kijelölésekben: ALT + L. A Find szerkesztőmező az aktív, írd be: td. TAB a Replace szerkesztőmezőig, írd be: th. Összes cseréje: CTRL + ALT + ENTER. Keresés párbeszédpanel bezárása: ESC. Mentés: CTRL + S.7. A táblázat Kávé alatti, Egyéb szolgáltatások feletti sorait rendezd ár szerint növekvő sorrendbe.
Megjegyzés: A Caffee latte sort kell a Kávé sor után helyezni, majd az egymás alatti Eszpresszó és Ír kávé sorokat kell a Cappuccino sor alá helyezni. Egy táblázatsorban két cellaelem van. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: Caffee. 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. Kijelölt sorok kivágása: CTRL + X. Keresés minialkalmazás megnyitása: CTRL + F. (Kis- és nagybetűk megkülönböztetése: ALT + C.) TAB a Match Case gombig, ha nincs bejelölve, bejelölése: SZÓKÖZ. SHIFT + TAB a Find szerkesztőmezőig, írd be: Kávé. Keresés minialkalmazás bezárása: ESC. LE a záró táblázatsor jelölőig. Új sor nyitása: ENTER. Kivágott sorok beillesztése: CTRL + V. Eszpresszó és Ír kávé táblázatsorok kijelölése: Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: Eszpresszó. Keresés minialkalmazás bezárása: ESC. LE, kétszer, a záró táblázatsor jelölőig. BALRA, kétszer, a kurzor a záró táblázatjelölőben van. Kurzor bővítése a következő nyitó táblázatsor jelölőre: CTRL + ALT + NUMPAD2. Táblázatsorok kijelölése: ALT + O. Kijelölt táblázatsorok kivágása: CTRL + X. Kilépés a többsoros kurzorból: ESC. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: Cappuccino. Keresés minialkalmazás bezárása: ESC. LE, kétszer, a záró táblázatsor jelölőig. Új sor nyitása: ENTER. Kivágott sorok beillesztése: CTRL + V. Mentés: CTRL + S.Mentsd el a fájlt weboldalként szolg.html néven és zárd be.
Fájl bezárása: CTRL + F4.8. Nyisd meg a kapcs.html fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: kapcs, majd ENTER.Szúrd be az expresso_2.jpg képet a kep osztályú elemen belülre. 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=expresso_2.jpg width=280], majd TAB. Mentés: CTRL + S.9. Módosítsd a Neve felirathoz tartozó mező paramétereit a következőképpen: a mező neve nev, a maximálisan beírható karakterek száma 30 legyen.
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: Neve. Keresés minialkalmazás bezárása: ESC. LE az input mezőig. ALT + N, a name értékig, írd át: nev. JOBBRA, SZÓKÖZ, majd írd be: maxlength=30. Megjegyzés: Az értéknél az idézőjeleket nem kell beírni, automatikusan létrejönnek. Mentés: CTRL + S.10. A „Kérdése” felirathoz tartozó mező legyen többsoros beviteli mező, a sorainak száma 6, a soron belüli karakterek száma pedig 40 legyen.
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: Kérdése: , (a kettőspontot is írd be!). Keresés minialkalmazás bezárása: ESC. LE, a következő sorra. Input elem kijelölése: ALT + O. 1. megoldás: Írd be az Emmet rövidítést: textarea, mad TAB. A kurzor a name értéknél van, írd be: kerdes. JOBBRA, SZÓKÖZ majd írd be: rows=6, JOBBRA, SZÓKÖZ, majd írd be: cols=40. 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=kerdes cols=6 rows=40], majd TAB. Mentés: CTRL + S.11. Az űrlapon található rádiógombok melletti feliratokat alakítsd címke (label) típusúvá.
Megjegyzés: a rádió gombok azonosítói: hirlevel_igen és hirlevel_nem. 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: hirlevel_\w* . Jelentése: hirlevel_ kezdetű szövegek. Összes előfordulás kijelölése: ALT + ENTER. Keresés minialkalmazás bezárása: ESC. Azonosítók másolása: CTRL + C. Ugrás a feliratokhoz: CTRL + NUMPAD6. Feliratok kijelölése: NUMPAD6. A kijelölt feliratok köré label jelölő beillesztése: HTML Tag Wrap: ALT + W. Írd: label for=. Megjegyzés: Az értéknél az idézőjeleket nem kell beírni, automatikusan létrejönnek. A kimásolt azonosítók beillesztése a for értékekhez: CTRL + V. Mentés: CTRL + S.Mentsd el és zárd be a kapcs.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 nav azonosítójú elemeken belüli hivatkozás jelölő elemek hover állapotánál a betűszín legyen vörös (red).
Ugrás a dokumentum végére: CTRL + END. Új sor nyitása: ENTER. Írd be: #nav 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: c:red, majd TAB. Vagy írd be: color: red; Mentés: CTRL + S.13. A thead elemek th gyermekelemei esetén a betűkép kiskapitális legyen, a háttér színe pedig #ccc.
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: thead 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: fv:sc, majd TAB. Vagy írd be: font-variant: small-caps; Új sor nyitása: ENTER. Írd be az Emmet rövidítést: bgc:#ccc, majd TAB. Vagy írd be: background-color: #ccc; Mentés: CTRL + S.14. A tbody elemek th gyermekelemeinél a betűköz legyen 0,3em méretű.
Ugrás a dokumentum végére: CTRL + END. Új sor nyitása: ENTER. Írd be: tbody th{, 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: lts:0.3, majd TAB. Vagy írd be: letter-spacing: 0.3em; Mentés: CTRL + S.15. A th és td elemeknek határozzon meg bélés (padding) méretet: a felső és alsó 8 pixel, a bal- és jobboldali pedig 20 pixel méretű legyen.
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: thead 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: p:8-20, majd TAB. Vagy írd be: padding: 8px 20px. Mentés: CTRL + S.16. A legend elemeknél a betűk stílusa legyen félkövér.
Ugrás a dokumentum végére: CTRL + END. Új sor nyitása: ENTER. Í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: fw:b, majd TAB. Vagy írd be: font-weight: bold; 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.