8. modul – 35. 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-35, 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 klub célja...” mondattól kezdődő szövegrészt tedd új bekezdésbe.
Megjegyzés: A megadott szöveg előtti sor végén egy sortörés jelölő van, (ez az első sortörés az oldalon). Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: <br>. Keresés minialkalmazás bezárása: ESC. Ugrás a kijelölés elejére: BALRA. Sortörés kijelölése a következő sor elejéig: SHIFT + LE, majd SHIFT + HOME. Írd be: </p><p>. Megjegyzés: A záró bekezdés jelölő esetén a perjel után kiegészül a jelölő. A nyitó bekezdés jelölő beírásakor pedig kiegészül a záró bekezdés jelölővel, ezt vissza kell vonni: CTRL + Z. Mentés: CTRL + S.„A foglalkozások során...” mondat elé szúrj be egy sortörést.
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: A foglalkozások. 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.3. Alakítsd félkövérré a „közel háromszázan” szövegrészt.
Jelöld ki a feladatleírásból az idézőjelek közötti közel háromszázan 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 „stratégiai gondolkodás” szövegrészt pedig tedd dőltté.
Jelöld ki a feladatleírásból az idézőjelek közötti stratégiai gondolkodá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. 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 „csatlakoztak hozzánk” szövegrészre, amely mutasson a Csatlakozás című oldalra (csatlakozas.html).
Jelöld ki a feladatleírásból az idézőjelek közötti csatlakoztak hozzánk 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=csatlakozas.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 csatlakozas.html sorig, kiválasztása: ENTER. Mentés: CTRL + S.Állíts be hiperhivatkozást a „nyitvatartás alatt” szövegrészre is, ez mutasson a kapcsolat.html oldalra.
Jelöld ki a feladatleírásból az idézőjelek közötti nyitvatartás alatt 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=kapcsolat.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 kapcsolat.txt fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: kapcsolat, 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 „Black Knight Sakk Klub” 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. Jelöld ki a feladatleírásból az idézőjelek közötti Black Knight Sakk Klub szöveget, majd másold: CTRL + C. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: /head. Keresés minialkalmazás bezárása: ESC. 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 illeszd be a kimásolt címet: CTRL + V. Mentés: CTRL + S.6. A „Kapcsolat” címsor alatti sorokat alakítsd definíciós listává.
Megjegyzés: Akadálymentesítés mindenképpen szükséges! Az átalakítandó sorokat egy bekezdésbe raktam. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: Kapcsolat. Keresés minialkalmazás bezárása: ESC. LE a következő sorra. Bekezdés tartalmának kijelölése: ALT + O. Keresés minialkalmazás megnyitása: CTRL + F. Keresés a kijelölésben: ALT + L. (Reguláris kifejezés használata: ALT + R.) TAB a Use Regular Expression gombig, ha nincs bejelölve, bejelölése: SZÓKÖZ. Megjegyzés: A definíció sorok vagy számot vagy zárójelet tartalmaznak. SHIFT + TAB a Find szerkesztőmezőig, írd be: [\d|\(] , (írásjelekkel!). Összes kijelölése: ALT + ENTER. Keresés minialkalmazás bezárása: ESC. Ugrás a sorok elejére: HOME. A definíciók köré dd jelölők beszúrása: Emmet: Becsomagolás rövidítéssel: CTRL + B, R. A szerkesztőmezőbe írd be: dd, majd ENTER. Bekezdés tartalmának kijelölése: ALT + O. Keresés minialkalmazás megnyitása: CTRL + F. Keresés a kijelölésben: ALT + L. Reguláris kifejezés használata: még be van kapcsolva! A Find szerkesztőmezőben még az előző feltétel van. Összes kijelölése: ALT + ENTER. Keresés minialkalmazás bezárása: ESC. FEL a következő sorokra. A definiálandó kifejezések köré dt jelölők beszúrása: Emmet: Becsomagolás rövidítéssel: CTRL + B, R. A szerkesztőmezőbe írd be: dt, majd ENTER. Bekezdés tartalmának kijelölése: ALT + O. Bekezdés jelölők cseréje: Emmet: Elem eltávolítása: CTRL + E, E. A definiálandó kifejezések köré dl jelölők beszúrása: Emmet: Becsomagolás rövidítéssel: CTRL + B, R. A szerkesztőmezőbe írd be: dl, majd ENTER. 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 az esemenyek.html fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: esemenyek, majd ENTER.Cseréld le a július 3. dátum melletti sakkfigura (king_b) képét a rook_b.gif képre, az augusztus 19-i esemény sakkfiguráját (queen_b) pedig a queen_w.gif-re.
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: king_b. Keresés minialkalmazás bezárása: ESC. Írd át: rook_b. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: queen_b. Keresés minialkalmazás bezárása: ESC. Írd át: queen_w. Mentés: CTRL + S.8. Rendezd át a táblázat sorait úgy, hogy az események dátum szerint növekvő sorrendben legyenek.
Megjegyzés: Az utolsó két táblázatsort kell az augusztus 19-i sor elé mozgatni. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: július. Keresés minialkalmazás bezárása: ESC. FEL az előző sorra. BALRA, ekkor a nyitó táblázatsor jelölőben van a kurzor. Kurzor bővítése: CTRL + ALT + NUMPAD8. Így egyszerre jelölhető ki a két táblázatsor: ALT + O. Táblázatsorok kivágása: CTRL + X. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: augusztus. Keresés minialkalmazás bezárása: ESC. FEL, kétszer. Táblázatsorok beillesztése: CTRL + V. Formázás igazítása: ALT + SHIFT + F. Mentés: CTRL + S.Mentsd el és zárd be az esemenyek.html fájlt.
Fájl bezárása: CTRL + F4.9. Nyisd meg a csatlakozas.html fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: csatlakozas, majd ENTER.Az itt található űrlap Név feliratához tartozó mezőjét módosítsd úgy, hogy az űrlap név értéke „nev”, a mezőbe írható karakterek maximális száma pedig 30 legyen.
Megjegyzés: A jelenlegi name érték: text. 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 az input sorra. 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. Módosítsd a Születési idő hónap mezőjét úgy, hogy a mező lenyíló legyen, alapértelmezésben pedig a - hónap - érték legyen kiválasztott állapotban.
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: select. Keresés minialkalmazás bezárása: ESC. ALT + N, a size tulajdonság és értékig, ki van jelölve, töröld: DELETE. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: selected. Keresés minialkalmazás bezárása: ESC. Kijelölt szöveg kivágása: CTRL + X. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: - hónap, (KÖTŐJEL és SZÓKÖZ kezdéssel!). Keresés minialkalmazás bezárása: ESC. Ugrás a kijelölés elejére: BALRA. BALRA, ekkor a kurzor az option nyitó jelölőben van. SZÓKÖZ, majd illeszd be a vágólap tartalmát (selected): CTRL + V. Formázás igazítása: ALT + SHIFT + F. Mentés: CTRL + S.11. A Megjegyzés felirathoz tartozó szövegmező sorainak száma legyen 5, a soron belüli karakterek száma pedig 50. Alapértelmezés szerint a következő szöveg legyen a mezőbe írva: „Ha kérdése van, itt teheti fel.”.
Jelöld ki a feladatleírásból az idézőjelek közötti Ha kérdése van, itt teheti fel. 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. BALRA, kétszer, (ekkor a kurzor a nyitó jelölőben van), SZÓKÖZ, majd írd be: cols=50, JOBBRA, SZÓKÖZ és írd be: rows=5. 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. A Find szerkesztőmezőbe illeszd be a kimásolt szöveget: CTRL + V. Mentés: CTRL + S.Mentsd el és zárd be a csatlakozas.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 aktualis osztályú elemek listajelölő típusa legyen négyzetes (square).
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: #menu .aktualis{. Keresés minialkalmazás bezárása: ESC. LE a list-style-type sorig. Sor kijelölése: CTRL + L. Kijelölés felülírása Emmet rövidítéssel: list:s, majd TAB. Vagy írd be: list-style-type: square; Mentés: CTRL + S.13. A jobb azonosítójú elemen belüli h1 elemek szövegének igazítása középre történjen, a betű méretét pedig állítsd az alap betűméret 1,7-szeresére.
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: #jobb h1{. 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: fz:1.7, majd TAB. Vagy írd be: font-size: 1.7em; Mentés: CTRL + S.14. A dt elemekre határozz meg félkövér betűstílust, valamint kiskapitális betűképet.
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: dt{. 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: fw:b, majd TAB. Vagy írd be: font-weight: bold; Új sor nyitása: ENTER. Írd be az Emmet rövidítést: fv:sc, majd TAB. Vagy írd be: font-variant: small-caps; Mentés: CTRL + S.15. A th és td elemeknek adj keret tulajdonságot, amely 1 pixel vastag, pontozott mintázatú és fekete (black) 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-black, majd TAB. Vagy írd be: border: 1px dotted black; Mentés: CTRL + S.16. A submit típusú input elemek háttérszíne legyen #cc6.
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:#cc6, majd TAB. Vagy írd be: background-color: #cc6; 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.