8. modul – 24. 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-24, 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 a „MAZ-ZOO Vadaspark” sort 1. szintű címsorrá, az alatta lévő „Bemutatkozás” sort 2. szintű címsorrá.
Megjegyzés: A MAZ-ZOO szöveg több helyen is szerepel, a bekezdést kell módosítani. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: p>MAZ. 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. 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: h1, majd ENTER. LE a következő sorra, ez a Bemutatkozás sor. BALRA, ekkor a kurzor a záró bekezdés jelölőn belül van. Jelöld ki a jelölő nevét: SHIFT + BALRA. Írd át a jelölő nevét: h2. A Nyitó jelölőben a név automatikusan módosul a beírtra. Mentés: CTRL + S.3. Állíts be hiperhivatkozást a „szabadidőprogramok” szóra, amely mutasson a Programok című oldalra (programok.html).
Jelöld ki a feladatleírásból az idézőjelek közötti szabadidőprogramok 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=programok.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 programok.html sorig, kiválasztása: ENTER. Mentés: CTRL + S.Állíts be hiperhivatkozást a „vadfajok bemutatására” szövegrészre is, ez mutasson a tudasteszt.html oldalra.
Jelöld ki a feladatleírásból az idézőjelek közötti vadfajok bemutatására 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=tudasteszt.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 tudasteszt.html sorig, kiválasztása: ENTER. Mentés: CTRL + S.4. Szúrd be a zsiraf.jpg-t a kep osztályú elemen belülre. Adj alternatív szöveget a képnek: „a park kedvence, Zsolti a zsiráf”.
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=zsiraf.jpg alt="a park kedvence, Zsolti a zsiráf"], majd TAB. Megjegyzés: Az alt értéknél szükséges az idézőjelek használata, mivel az érték szóközöket tartalmaz. 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ó html nyitó és záró jelölőivel.
Ugrás a dokumentum elejére: CTRL + HOME. LE a nyitó head jelölő sorába. 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.Rendeld a fájlhoz a styles.css stíluslap állományt.
Megjegyzés: A stíluslap csatolását a title előtti sorba írjuk. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: title. Keresés minialkalmazás bezárása: ESC. FEL az előző sorra. Ugrás a sor végére: END. Új sor megnyitá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 félkövérré és dőltté a szövegben előforduló két telefonszámot.
Megjegyzés: A telefonszámok 06-tal kezdődnek, szóközt, kötőjelet vagy per jelet, valamint számokat tartalmaznak. Akadálymentesítésként lehetne egyforma alakban kiírni őket! 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: 06(\s|-|/|\d)* , (írásjelekkel!). Összes kijelölése: ALT + ENTER. Keresés minialkalmazás bezárása: ESC. A rag előtti kötőjelek kijelölésének visszavonása: SHIFT + BALRA. Emmet: Becsomagolás rövidítéssel: CTRL + B, R. A szerkesztőmezőbe írd be: b>i, majd ENTER. Mentés: CTRL + S.Mentsd el a fájlt weboldalként kapcsolat.html néven és zárd be.
Fájl bezárása: CTRL + F4.7. Nyisd meg a programok.html fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: programok, majd ENTER.A táblázatban vond össze a „Hollókunyhó játszóház” szöveget tartalmazó cellát az alatta található üres cellákkal.
Megjegyzés: 4 oszlop cellát kell összevonni. Csere minialkalmazás megnyitása: CTRL + H. A Find szerkesztőmezőbe írd be: td>Holló. TAB a Replace szerkesztőmezőig. A Replace szerkesztőmezőbe írd be: td rowspan="4">Holló. Összes előfordulás cseréje: CTRL + ALT + ENTER. Csere szerkesztőmező bezárása: ESC. Üres cellák kijelölése: Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: <td></td>. Összes kijelölése: ALT + ENTER. Keresésere párbeszédpanel bezárása: ESC. Sorok kijelölése: CTRL + L. Sorok törlése: DELETE. Mentés: CTRL + S.8. A táblázat első sorának celláit módosítsd fejléc cella típusúra.
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. 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: CTRL + ALT + ENTER. Csere minialkalmazás bezárása: ESC. Mentés: CTRL + S.Mentsd el és zárd be a programok.html fájlt.
Fájl bezárása: CTRL + F4.9. Nyisd meg a tudasteszt.html fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: tudasteszt, majd ENTER.A „Melyik a legnagyobb élő madár?” kérdéshez tartozó rádiógombok feliratait alakítsd címke (label) típusúvá.
Megjegyzés: A rádiógombok name értéke: nagymadar, ezt használom az együttes kijelöléshez. Az első rádiógombhoz már tartozik címke. A sorok végén sortörés elem van. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: nagymadar", (a záró idézőjelet is írd be!). Keresés minialkalmazás bezárása: ESC. LE a következő sorra. Többsoros kurzor hozzáadása a következő 2 sorra: CTRL + ALT + NUMPAD2, kétszer. ALT + N, az azonosítók értékéig. Azonosítók másolása: CTRL + C. Ugrás a feliratok elejére: CTRL + NUMPAD6. Megjegyzés: A feliratok 1 vagy 2 szóból állnak. Kijelölés a sor végéig: SHIFT + END. A br jelölő kijelölésének visszavonása: SHIFT + BALRA, négyszer. HTML Tag Wrap: ALT + W. Írd be: label for=, a kurzor az idézőjelek között van. Megjegyzés: Az értéknél az idézőjeleket nem kell beírni, automatikusan létrejönnek. Azonosítók beillesztése: CTRL + V. Mentés: CTRL + S.10. A „Melyik az egyetlen lábujjhegyen járó emlősállat?” kérdés választómezőjét egészítsd ki az alpakka választási lehetőséggel.
Megjegyzés: A select elem name értéke: labujjhegy. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: labujjhegy. 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: option[value=alpakka]{alpakka}, majd TAB. A kód jelentése: option elem létrehozása, melynek value értéke és tartalma is: alpakka. Mentés: CTRL + S.Módosítsd a mező paramétereit úgy, hogy minden értéke látszódjon.
Előző keresés ismétlése: F3. Ugrás a kijelölés végére: JOBBRA. JOBBRA, SZÓKÖZ, és írd be: size=4. Megjegyzés: Az értéknél az idézőjeleket nem kell beírni, automatikusan létrejönnek. Mentés: CTRL + S.11. A „Melyik a kedvenc állatod és miért?” kérdés beviteli mezőjét módosítsd többsorossá, a sorok száma 6, a soron belüli karakterszám pedig 50 legyen.
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: kedvenc. Keresés minialkalmazás bezárása: ESC. LE kétszer, ez az input mező sora. Input elem kijelölése: ALT + O. Írd be az Emmet rövidítést: textarea, majd TAB. A kurzor a name értéknél van, írd be: kedvenc. JOBBRA, SZÓKÖZ majd írd be: rows=6, JOBBRA, SZÓKÖZ, majd írd be: cols=50. 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=kedvenc cols=6 rows=50], majd TAB. Mentés: CTRL + S.Mentsd el és zárd be a tudasteszt.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:
Ugrás a dokumentum végére: CTRL + END. Új sor nyitása: ENTER. Írd be: #fo h2{, 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: fz:1.3, majd TAB. Vagy írd be: font-size: 1.3em; Mentés: CTRL + S.
A fo azonosítójú elemen belüli h2 elemekre a betűméret legyen az alap betűméret 1,3-szorosa.13. A kep osztályú elemeken belüli img elemeknek legyen keretük, amely 2 pixel széles, folytonos vonalú és sárga (yellow) színű.
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: .kep img{. 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:2-s-yellow, majd TAB. Vagy írd be: border: 2px solid yellow; Mentés: CTRL + S.14. A table elemekhez rendeljen #fff háttérszínt.
Ugrás a dokumentum végére: CTRL + END. Új sor nyitása: ENTER. Írd be: table{, 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:#fff, majd TAB. Vagy írd be: background-color: #fff; Mentés: CTRL + S.15. A td elemek minimális szélessége legyen 100 pixel, az itt lévő szöveg pedig legyen felülre rendezve.
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: miw:100, majd TAB. Vagy írd be: min-width: 100px; Új sor nyitása: ENTER. Írd be az Emmet rövidítést: va:t, majd TAB. Vagy írd be: vertical-align: top; Mentés: CTRL + S.16. A textarea elemekben a betűszín legyen kék (blue).
Ugrás a dokumentum végére: CTRL + END. Új sor nyitása: ENTER. Írd be: textarea{, 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:blue, majd TAB. Vagy írd be: color: blue; 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.