8. modul – 29. 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-29, 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.A Nyitvatartási idő alatti sorokat formázd számozatlan felsorolás stílusúvá.
Megjegyzés: Az átalakítandó sorok egy bekezdésben vannak, sortörésekkel, előtte és utána egy-egy üres sorral. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: Nyitvatartási. Keresés minialkalmazás bezárása: ESC. LE, kétszer az első listasorra. Bekezdés tartalmának kijelölése: ALT + O. Bekezdés 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. FEL, az előző sorra. Tartalom 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 kijelölése: ALT + ENTER. Csere minialkalmazás bezárása: ESC. Kijelöl sortörés jelölők törlése: DELETE. Kurzor bővítése az utolsó listasorra is: CTRL + ALT + NUMPAD2. 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. Mentés: CTRL + S.3. Egészítsd ki a felsorolást: Szombat: 9.00 - 14.00, valamint Vasárnap: Zárva sorokkal.
LE, a Péntek sorig. Ugrás a sor végére: END. Új sor nyitása: ENTER. Írd be az Emmet rövidítést: li{Szombat: 9.00 - 14.00}+li{Vasárnap: Zárva}, majd TAB. Mentés: CTRL + S.Mentse el és zárja be az index.html fájlt.
Fájl bezárása: CTRL + F4.4. Nyisd meg az elojegyzes.txt fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: elojegyzes, 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. Adj oldalcímet Könyvtár szöveggel.
Ugrás a dokumentum elejére: CTRL + HOME. LE a html nyitó jelölőt 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. FEL az előző sorba. 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 írd be: Könyvtár. Mentés: CTRL + S.5. Módosítsd a szöveg elején lévő „Előjegyzés” sor típusát egyszerű bekezdésről 1. szintű címsorrá, a félkövér tulajdonságát pedig töröld.
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: b>Előjegyzés. Keresés minialkalmazás bezárása: ESC. Félkövér jelölő eltávolítása: Emmet: Elem eltávolítása: CTRL + E, E. Bekezdés jelölő 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: h1, majd ENTER. Mentés: CTRL + S.6. Alakítsd félkövérré a „10 multimédiás PC-vel” szövegrészt, az „internet” szót pedig dőltté.
Jelöld ki a feladatleírásból az idézőjelek közötti 10 multimédiás PC-vel 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. HTML Tag Wrap: ALT + W. Írd át a jelölőt: b. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: internet. Keresés minialkalmazás bezárása: ESC. HTML Tag Wrap: ALT + W. Írd át a jelölőt: i. Mentés: CTRL + S.7. Javítsd a cím alatti képfájl nevét, és adj alternatív szöveget a képnek PC értékkel.
Megjegyzés: A hiba az, hogy nincs a képfájlnak kiterjesztése, ennek most jpg-nek kell lennie. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: img. Keresés minialkalmazás bezárása: ESC. Ugrás az src értékre: ALT + N, kétszer. CTRL + SZÓKÖZ, a listában megjelenik a képfájl neve a kiterjesztéssel együtt, kiválasztása: ENTER. Megjegyzés: Az src és a class között nincs szóköz, egybe van az egész írva! Emiatt: JOBBRA, majd SZÓKÖZ kétszer, és BALRA, majd írd be: alt=PC. Megjegyzés: Az értéknél az idézőjeleket nem kell beírni, automatikusan létrejönnek. Mentés: CTRL + S.Mentsd el a fájlt weboldalként elojegyzes.html néven és zárd be.
Fájl bezárása: CTRL + F4.8. Nyisd meg a katalogus.html fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: katalogus, majd ENTER.A táblázat első sorának celláit alakítsd fejléc cella típusúvá.
Megjegyzés: A 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 elem tartalmának kijelölése: ALT + O. Csere minialkalmazás megnyitása: CTRL + H. Keresés 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: CTRL + ALT + ENTER. Csere ablak bezárása: ESC. Mentés: CTRL + S.9. Töröld a táblázatból az egyéb, fel nem sorolt művészetek tartalmú sort.
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: egyéb, (a vesszőt is írd be!). Keresés minialkalmazás bezárása: ESC. FEL, majd BALRA a nyitó táblázatsor jelölőbe. Táblázatsor kijelölése: ALT + O. Sorok kijelölése: CTRL + L. Sorok törlése: DELETE. Megjegyzés: A művészetek és az egyéb művészetek cellákba lévő cellavonások értéke a sor törlése után nagyobb lesz, mint a valóban összevont cellák száma, de ez a megjelenést nem befolyásolja. Mentés: CTRL + S.Mentsd el és zárd be a katalogus.html fájlt
Fájl bezárása: CTRL + F4.10. Nyisd meg a hosszabbitas.html fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: hosszabbitas, majd ENTER.A „Hosszabbítás kérés” ideje szöveghez tartozó mező paramétereit módosítsd úgy, hogy minden sora látszódjon, és alapértelmezetten a 2 nap érték legyen kiválasztott állapotban.
Megjegyzés: A választható értékek száma: 5. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: select. Keresés minialkalmazás bezárása: ESC. Ugrás a kijelölése végére: JOBBRA. SZÓKÖZ, majd írd be: size=5. Megjegyzés: Az értéknél az idézőjeleket nem kell beírni, automatikusan létrejönnek. Megjegyzés: A 2 nap értéke: 2. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: 2", (a záró idézőjelet is írd be!). Keresés minialkalmazás bezárása: ESC. Ugrás a kijelölése végére: JOBBRA. SZÓKÖZ, majd írd be: selected. Mentés: CTRL + S.11. Az „Egyéb megjegyzés” szöveghez tartozó mező legyen többsoros beviteli mező, a sorok száma 6, a soron belüli karakterek száma pedig 35 legyen.
Megjegyzés: A beviteli mező name értéke: megjegyzes. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: megjegyzes. Keresés minialkalmazás bezárása: ESC. Input elem kijelölése: ALT + O. 1. megoldás: Írd be az Emmet rövidítést: textarea, majd TAB. A kurzor a name értéknél van, írd be: megjegyzes. JOBBRA, SZÓKÖZ majd írd be: rows=6, JOBBRA, SZÓKÖZ, majd írd be: cols=35. 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=megjegyzes cols=6 rows=35], majd TAB. Mentés: CTRL + S.Mentsd el és zárd be a hosszabbitas.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 cim azonosítójú elemen belüli h1 elemek a betűköze 0.3em, a betűméret 36 pixel legyen.
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: #cim h1{. 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: lts:0.3, majd TAB. Vagy írd be: letter-spacing: 0.3em; Új sor nyitása: ENTER. Írd be az Emmet rövidítést: fz:36 majd TAB. Vagy írd be: font-size: 36px; Mentés: CTRL + S.13. A menu azonosítójú elemen belüli li elemeknek legyen 1 pixel vastag, pontozott mintázatú és #c57658 színű kerete.
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: #menu li{. 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-#c57658, majd TAB. Vagy írd be: border: 1px dotted #c57658; Mentés: CTRL + S.14. A th elemeknek legyen a háttérszíne #006, a betűszíne pedig #ff9.
Megjegyzés: Az elemre már van háttérszín 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. LE a background-color sorig. Sor kijelölése: CTRL + L. Kijelölés felülírása Emmet rövidítéssel: bgc:#006, majd TAB. Vagy írd be: background-color: #006; Új sor nyitása: ENTER. Írd be az Emmet rövidítést: c:#ff9, majd TAB. Vagy írd be: color: #ff9; Mentés: CTRL + S.15. A td elemekben a szöveg felülre legyen rendezve, a betűszínt pedig állítsd be #333 színűre.
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: va:t, majd TAB. Vagy írd be: vertical-align: top; Új sor nyitása: ENTER. Írd be az Emmet rövidítést: c:#333, majd TAB. Vagy írd be: color: #333; Mentés: CTRL + S.16. A submit típusú mezők betűstílusát állítsd félkövérre.
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: 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.