8. modul – 41. 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-41, kiválasztása: ENTER, megnyitása: ENTER.2. Nyisd meg az index.txt nevű fájlt a megadott helyről.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: index, 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 és head nyitó és záró jelölőivel.
Ugrás a dokumentum elejére: CTRL + HOME. LE a második sorba. 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. 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. Mentés: CTRL + S.3. Szúrj be egy sortörést a „Két szinten...” mondat elé.
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: Két szinten. Keresés minialkalmazás bezárása: ESC. Ugrás a kijelölés elejére: BALRA. Írd be az Emmet rövidítést: br, majd TAB. Mentés: CTRL + S.Szúrj be szintén egy sortörést a „Nyitva 0-tól 24...” mondat elé is.
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: Nyitva , (SZÓKÖZT is írj a végére!). Keresés minialkalmazás bezárása: ESC. Ugrás a kijelölés elejére: BALRA. Írd be az Emmet rövidítést: br, majd TAB. Mentés: CTRL + S.4. Tedd félkövérré a „45 db csúcsminőségű” szövegrészt.
Jelöld ki a feladatleírásból az idézőjelek közötti 45 db csúcsminő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: 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 szövegben előforduló „Expresso” szót alakítsa félkövérré és dőltté.
Megjegyzés: A címben és az e-mail-címben is szerepel a megadott szó! Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: Expresso , (SZÓKÖZT is írj a végére!). 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>i, majd ENTER. Mentés: CTRL + S.5. Állíts be hiperhivatkozást a „számos kiegészítő szolgáltatást” szövegrészre, amely mutasson a Szolgáltatásaink című oldalra (szolg.html).
Jelöld ki a feladatleírásból az idézőjelek közötti számos kiegészítő 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. 1. megoldás: Emmet: Becsomagolás rövidítéssel: CTRL + B, R. A szerkesztőmezőbe írd be: a[href=szolg.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 szolg.html sorig, kiválasztása: ENTER. Mentés: CTRL + S.Alakíts hiperhivatkozássá a szövegben előforduló „expresso@expresso.mail.hu” email címet 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.6. Szúrd be az expresso_1.jpg képet a kep osztályú elemen belülre. A képhez rendeljen alternatív szöveget „nyíl” értékkel.
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_1.jpg alt=nyíl], majd TAB. Mentés: CTRL + S.Mentsd el a fájlt weboldalként index.html néven és zárd be.
Fájl bezárása: CTRL + F4.7. Nyisd meg a szolg.html fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: szolg, majd ENTER.Vond össze a táblázat fejléc celláit a velük szomszédos üres cellákkal.
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmező az aktív, írd be: <th></th>. Összes kijelölése: ALT + ENTER. Keresés párbeszédpanel bezárása: ESC. Sorok kijelölése: CTRL + L. Sorok törlése: DELETE. FEL az előző sorba. HOME, CTRL + NUMPAD6, majd SZÓKÖZ, és írd be: colspan=2> Megjegyzés: Az értéknél az idézőjeleket nem kell beírni, automatikusan létrejönnek. Mentés: CTRL + S.8. Módosítsd a „Caffee latte” árát „380 Ft”-ra, a „Capuccino” árát „430 Ft”-ra.
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: Caffee. Keresés minialkalmazás bezárása: ESC. Ugrás a kijelölés elejére: BALRA. LE, a következő sorra. Ár kijelölése: NUMPAD6. Írd át: 380. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: Capuccino. Keresés minialkalmazás bezárása: ESC. Ugrás a kijelölés elejére: BALRA. LE, a következő sorra. Ár kijelölése: NUMPAD6. Írd át: 430. Mentés: CTRL + S.Mentsd el és zárd be az szolg.html fájlt.
Fájl bezárása: CTRL + F4.9. Nyisd meg a kapcs.html fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: kapcs, majd ENTER.Az „Email címe” felirathoz tartozó beviteli mező neve „email”, maximálisan beírható karaktereinek a száma 40 legyen.
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: Email. Keresés minialkalmazás bezárása: ESC. LE, ez az input elem. Imput elem kijelölése: ALT + O. Ugrás a kijelölés végére: JOBBRA. BALRA, ekkor a kurzor az input jelölőben van. SZÓKÖZ, majd írd be: name=email, JOBBRA, SZÓKÖZ, majd írd be: maxlength=40. Megjegyzés: Az értéknél az idézőjeleket nem kell beírni, automatikusan létrejönnek. Mentés: CTRL + S.10. A többsoros beviteli mező sorainak számát módosítsd 4-re, a soron belüli karakterek számát 40-re. A mezőbe alapértelmezetten a következő szöveg szerepeljen: „Itt tegye fel a kérdését!”.
Jelöld ki a feladatleírásból az idézőjelek közötti Itt tegye fel a kérdését! 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 kijelölés elejére: BALRA. BALRA, ekkor a kurzor a nyitó jelölőben van. SZÓKÖZ, majd írd be: cols=40, JOBBRA, SZÓKÖZ, majd írd be: rows=4. Megjegyzés: Az értéknél az idézőjeleket nem kell beírni, automatikusan létrejönnek. Ugrás a textarea jelölők közé: ALT + I. Illeszd be a kimásolt szöveget: CTRL + V. Mentés: CTRL + S.11. Az űrlapon található nyomógomb legyen submit típusú, a gombon a „Küldés” felirat látszódjon.
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, írd át: Küldés. 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 content azonosítójú elemen belüli h1 elemekre határozz meg az alap betűmérethez képest 1,5-szörös méretű betűnagyságot, valamint középre történő szövegigazítást.
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: #content h1{. Keresés minialkalmazás bezárása: ESC. LE a font-size sorig. Sor kijelölése: CTRL + L. Kijelölés felülírása Emmet rövidítéssel: fz:1.5, majd TAB. Vagy írd be: font-size: 1.5em; Új sor nyitása: ENTER. Írd be az Emmet rövidítést: ta:c, majd TAB. Vagy írd be: text-align: center; Mentés: CTRL + S.13. A dt elemekre állíts be 12 pixel méretű margót, és félkövér betűstílust.
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: dt{. 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:12, majd TAB. Vagy írd be: margin: 12px; Ú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.14. A table elemek felső és alsó margója 0 méretű legyen, a bal- és jobboldali margóját állítsd be úgy, hogy az elem középre rendeződjön.
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: m:0-a, majd TAB. Vagy írd be: margin: 0 auto; Mentés: CTRL + S.15. A th és td elemekhez adj keretet, amely 1 pixel vastag, pontozott mintázatú és #ccc színű.
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: th, 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: bd:1-dt-#ccc, majd TAB. Vagy írd be: border: 1px dotted #ccc; Mentés: CTRL + S.16. A text típusú input elemek szélességét állítsd 250 pixelre.
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='text']{, 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: w:250, majd TAB. Vagy írd be: width: 250px; 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.