8. modul – 26. 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-26, 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.Tedd a „Cégünk filozófiája” sort 3. szintű címsorrá.
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. (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: Cégünk|Hogyan. Összes kijelölése: ALT + ENTER. Keresés minialkalmazás bezárása: ESC. Ugrás a kijelölés végére: JOBBRA. 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: h3, majd ENTER. Mentés: CTRL + S.
A „Hogyan értük el és tartjuk fenn...” sort tedd szintén 3. szintű címsorrá.3. Alakítsd félkövérré a „Több mint 100 ügyfelünk elégedettségéről személyesen is meggyőződhet.” mondatot.
Jelöld ki a feladatleírásból az idézőjelek közötti Több mint 100 ügyfelünk elégedettségéről személyesen is meggyőződhet. 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 „minimálisan szükséges” technikával szövegrészt pedig tedd dőltté.
Jelöld ki a feladatleírásból az idézőjelek közötti minimálisan szükséges 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. Egészítsd ki a szöveget egy új bekezdéssel, az „Igen gondosan járunk el...” kezdetű bekezdés után, a szöveg pedig ez legyen: „Tekintse meg referenciánkat.”
Megjegyzés: Ez egy hosszú mondat, sortöréssel. Jelöld ki a feladatleírásból az idézőjelek közötti Tekintse meg referenciánkat. szöveget, majd másold: CTRL + C. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: Igen gondosan. Keresés minialkalmazás bezárása: ESC. Ugrás a bekezdés végére: LE, majd END. Új sor nyitása: ENTER. Írd be az Emmet rövidítést: p, majd TAB. A kurzor pozíciójába illeszd be a kimásolt szöveget: CTRL + V. Mentés: CTRL + S.Állíts be hiperhivatkozást az előző a mondatra, amely mutasson a referenciak.html oldalra.
BALRA, amíg a tartalomhoz kerül a kurzor. Bekezdés kijelölése: ALT + O. Emmet: Becsomagolás rövidítéssel: CTRL + B, R. A szerkesztőmezőbe írd be: a[href=referenciak.html], 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 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.Egészítsd ki a fájlt a hiányzó html és body nyitó és záró jelölőivel.
LE a záró head jelölőt követő sorba. Kijelölés a dokumentum végéig: CTRL + SHIFT + END. 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. 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. Mentés: CTRL + S.6. Tedd számozatlan felsorolás stílusúvá a „Vállalati, intézményi referenciák” címsor alatti listát, valamint számozott felsorolás stílusú listává a „Magán megrendelői referenciák” címsor alatti sorokat.
Megjegyzés: A felsorolások 4-4 sorból állnak. A Vállalati lista cégnevekből áll (XYZ, AAA, BBB, CCC), a nevek után egy SZÓKÖZ van majd a cégtípus neve. 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. (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: [YABC] SZÓKÖZ, (a betűket nagybetűvel írd, a végén egy SZÓKÖZ is legyen!). Összes kijelölése: ALT + ENTER. Keresés minialkalmazás bezárása: ESC. Ugrás a kijelölés végére: JOBBRA. Emmet: Becsomagolás rövidítéssel: CTRL + B, R. A szerkesztőmezőbe írd be: li, majd ENTER. Listasorok kijelölése: CTRL + L, négyszer. Emmet: Becsomagolás rövidítéssel: CTRL + B, R. A szerkesztőmezőbe írd be: ul, majd ENTER. Megjegyzés: A Magán lista minden sora tartalmazza a Budapest szót. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: Budapest. Összes kijelölése: ALT + ENTER. Keresés minialkalmazás bezárása: ESC. Ugrás a kijelölés végére: JOBBRA. Emmet: Becsomagolás rövidítéssel: CTRL + B, R. A szerkesztőmezőbe írd be: li, majd ENTER. Listasorok kijelölése: CTRL + L, négyszer. Emmet: Becsomagolás rövidítéssel: CTRL + B, R. A szerkesztőmezőbe írd be: ol, majd ENTER. Mentés: CTRL + S.7. Cseréld le a festes.jpg képet a vodor.jpg képre. A kép alternatív szövege vödör legyen.
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: festes. Keresés minialkalmazás bezárása: ESC. Írd át: vodor. Ugrás az alt értékre: ALT + N, kétszer, írd át: vödör. 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.8. Nyisd meg az arak.html fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: arak, majd ENTER.Töröld a táblázatból a Színhatárképzés sort.
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: Színhatárképzés. Keresés minialkalmazás bezárása: ESC. FEL, majd BALRA, ekkor a kurzor a táblázatsor nyitó jelölőben van. Táblázatsor kijelölése: ALT + O. Sor kijelölése: CTRL + L, (hogy ne maradjon üres sor a törlés után). Táblázatsor törlése: DEL. Mentés: CTRL + S.Cseréld meg a Pácolás és a Lazúrozás sort egymással.
Megjegyzés: A Pácolás sor a Lazúrozás sor alatt van. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: Pácolás. Keresés minialkalmazás bezárása: ESC. FEL, majd BALRA, ekkor a kurzor a táblázatsor nyitó jelölőben van. Táblázatsor kijelölése: ALT + O. Táblázatsor kivágása: CTRL + X. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: Lazúrozás. Keresés minialkalmazás bezárása: ESC. FEL, kétszer. Új sor nyitása: ENTER. Kivágott táblázatsor beillesztése: CTRL + V. Vagy a táblázatsor kijelölése után: ALT + LE, ötször, (ekkor soronként mozog lefelé a kijelölt táblázatsor). Mentés: CTRL + S.9. Módosítsd a táblázat első sorának celláit fejléc cella típusúvá.
Megjegyzés: A sor fejléc cellák a thead jelölőn belüli sorban találhatók. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: <thead>. Keresés minialkalmazás bezárása: ESC. Thead tartomány kijelölése: ALT + O. Csere minialkalmazás megnyitása: CTRL + H. Csere csak 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>. Összes cseréje gombig: CTRL + ALT + ENTER. Csere minialkalmazás bezárása: ESC. Mentés: CTRL + S.A Tapétázás cella osztálya legyen kiemelt.
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: >Tapétázás. Keresés minialkalmazás bezárása: ESC. Ugrás a sor elejére: HOME. CTRL + NUMPAD6, majd SZÓKÖZ, és írd be: class="kiemelt". 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.Szúrj be az űrlapba egy új sort Email cím felirattal, a hozzá tartozó beviteli mező legyen egysoros szöveges.
Megjegyzés: Nincs megadva pontosan hová kell beilleszteni, ezért a Név felirat alá illesztem be. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: Név. Keresés minialkalmazás bezárása: ESC. LE a következő sorra. Ugrás a sor végére: END. Új sor nyitása: ENTER. Írd be az Emmet rövidítést: p{Email cím}>br+input[name=email], majd TAB. A kód jelentése: Bekezdés (p) elem felvétele, melynek tartalma: Email cím, a bekezdés elemen belül sortörés és egy text típusú input elem létrehozása, az input elem name értéke: email. Mentés: CTRL + S.11. Az űrlap alján lévő gomb típusa legyen submit, felirata Küldés.
Megjegyzés: A gomb jelenleg button típusú. 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ékéig, írd át: Küldés. 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 menu azonosítójú elemen belüli hivatkozás jelölő elemek hover állapotára a betű színe 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. LE a color sorra. Sor kijelölése: CTRL + L. Kijelölés felülírása Emmet rövidítéssel: c:red+td:u, majd TAB. Vagy írd be: color: red; text-decoration: underline; Mentés: CTRL + S.13. A table elemek felső és alsó margójának adj 5 pixel értéket, a bal- és jobboldali margó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:5-a, majd TAB. Vagy írd be: margin: 5px auto; Mentés: CTRL + S.14. A kiemelt osztályú td elemek baloldali bélése (padding) legyen 30 pixel, a betűstílus pedig félkövér.
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; Ú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.15. Az ajanlat_form azonosítójú elemen belüli egysoros szöveges beviteli mező szélessége legyen 300 pixel.
Ugrás a dokumentum végére: CTRL + END. Új sor nyitása: ENTER. Írd be: #ajanlat_form 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:300, majd TAB. Vagy írd be: width: 300px; Mentés: CTRL + S.16. Az ajanlat_form azonosítójú elemen belüli meret osztályú elemek szélességét állítsd 70 pixelre.
Ugrás a dokumentum végére: CTRL + END. Új sor nyitása: ENTER. Írd be: #ajanlat_form .meret{, 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:70, majd TAB. Vagy írd be: width: 70px; 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.