8. modul – 42. 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-42, 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 definíciós listává a címsor alatti Cím, Telefon, stb. sorokat.
Megjegyzés: Akadálymentesítés mindenképpen szükséges! Az átalakítandó sorokat egy div-be raktam, a definiálandó kifejezések elé egy * karaktert írtam, a definíciók elé pedig egy #-jelet az együttes kijelölés megkönnyítésére. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: *, (ALTGR + kötőjel). Összes előfordulás kijelölése: ALT + ENTER. Keresés minialkalmazás bezárása: ESC. Kijelölések törlése: DELETE. Emmet: Becsomagolás rövidítéssel: CTRL + B, R. A szerkesztőmezőbe írd be: dt, majd ENTER. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: #, (ALTGR + X). Összes előfordulás kijelölése: ALT + ENTER. Keresés minialkalmazás bezárása: ESC. Kijelölések törlése: DELETE. Emmet: Becsomagolás rövidítéssel: CTRL + B, R. A szerkesztőmezőbe írd be: dd, majd ENTER. Div tartalmának kijelölése: ALT + O. Megjegyzés: Akadálymentesítés nélkül dl tartomány kijelölése: <dt>|<dd>; CTRL + L, kétszer. Div jelölők eltávolítása: 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.3. Állíts be hiperhivatkozást az „üzenet írása itt” szövegrészre, amely mutasson a Kapcsolat című oldalra (kapcsolat.html).
Jelöld ki a feladatleírásból az idézőjelek közötti üzenet írása itt 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=kapcsolat.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 kapcsolat.html sorig, kiválasztása: ENTER. Mentés: CTRL + S.Alakítsd hiperhivatkozássá a szövegben előforduló „info@izzofitneszklub.hu” email címet is.
Jelöld ki a feladatleírásból az idézőjelek közötti info@izzofitneszklub.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.4. Módosítsd a szövegbe beszúrt kép megjelenési méreteit úgy, hogy a szélesség 220 pixel, a magasság 310 pixel legyen. Adj alternatív szöveget a képnek „edzőgép” értékkel.
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 a kijelölés végére: JOBBRA. SZÓKÖZ, majd írd be: width=220, JOBBRA, SZÓKÖZ, majd írd be: height=310, JOBBRA, SZÓKÖZ, majd írd be: alt=edzőgép. Megjegyzés: Az értéknél az idézőjeleket nem kell beírni, automatikusan létrejönnek. 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 szolg.txt fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: szolg, 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. Az oldalcím szövege pedig legyen „Izzó Fitnesz Klub”.
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. Jelöld ki a feladatleírásból az idézőjelek közötti Izzó Fitnesz 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ő sorra. 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 címet: CTRL + V. Mentés: CTRL + S.6. Alakítsd dőltté a „25*100*3 m-es” szövegrészt.
Jelöld ki a feladatleírásból az idézőjelek közötti 25*100*3 m-es 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.A „4 °C-os” szövegrészt pedig tedd félkövérré és dőltté.
Jelöld ki a feladatleírásból az idézőjelek közötti 4 °C-os 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>i, majd ENTER. Mentés: CTRL + S.7. Az oldalon található táblázatnak adj táblázatcímet (caption) „Teremfelelősök beosztása” szöveggel.
Jelöld ki a feladatleírásból az idézőjelek közötti Teremfelelősök beosztása szöveget, majd másold: CTRL + C. 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 kijelölés végére: JOBBRA. Új sor nyitása: ENTER. Írd be az Emmet rövidítést: caption, majd TAB. A kurzor pozíciójába illeszd be a kimásolt címet: CTRL + V. Mentés: CTRL + S.Mentsd el a fájlt weboldalként szolg.html néven és zárd be.
Fájl bezárása: CTRL + F4.8. Nyisd meg a kapcs.html fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: kapcs, majd ENTER.Az oldalon lévő űrlap Név feliratához tartozó beviteli mező paramétereit módosítsd úgy, hogy a név értéke „nev”, a maximálisan beírható karakterek száma pedig 30 legyen.
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, ez az input elem. Input elem kijelölése: ALT + O. Ugrás a kijelölés végére: JOBBRA, majd BALRA, írd be: name=név, 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.9. Az űrlap rádiógombjai közé vegyél fel egy újat, amelynek címkéje „Egyéb” legyen. Alapértelmezés szerint ez a rádiógomb legyen bejelölt állapotban.
Megjegyzés: Az utolsó rádiógomb a szauna. A name értéke: szolg. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: szauna. Keresés minialkalmazás bezárása: ESC. Input elem kijelölése: ALT + O. Bekezdés tartalmának kijelölése: ALT + O. Ugrás a kijelölés végére: JOBBRA. Írd be: br, majd TAB. Új sor nyitása: ENTER. Írd be: input:radio, majd TAB. A kurzor a name értéknél van, írd be:szolg. ALT + N, az id tulajdonságig, érték nincs megadva, ezért JOBBRA, majd BALRA és írd be: egyeb. JOBBRA, SZÓKÖZ, majd írd be: checked. JOBBRA, majd írd be: Egyéb. Címke kijelölése: NUMPAD4. HTML Tag Wrap: ALT + W. Írd: label for=, Megjegyzés: Az értéknél az idézőjeleket nem kell beírni, automatikusan létrejönnek. A kurzor a for értéknél van, írd be: egyeb. Haladó megoldás: Az új sorba írd be: egyeb, majd jelöld ki: SHIFT + HOME. Emmet: Becsomagolás rövidítéssel: CTRL + B, R. A szerkesztőmezőbe írd be: input:r[name=szolg value=$# id=$# checked]+label[for=$#]{ Egyéb}, majd ENTER. Megjegyzés: A $# kód az egyeb szöveget helyettesíti. Mentés: CTRL + S.10. A többsoros beviteli mező sorainak számát módosítsd 6-ra, a soron belüli karakterek számát pedig 60-ra. A mezőbe alapértelmezetten szerepeljen a következő szöveg: „Írjon nekünk vagy üzenjen!”.
Jelöld ki a feladatleírásból az idézőjelek közötti Írjon nekünk vagy üzenjen! 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. ALT + N, a rows értékig, írd át: 6. ALT + N, a cols értékig, írd át: 60. 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. A „Küldés” nyomógomb mellé vegyél fel egy reset típusú nyomógombot is, amelyen „Alaphelyzetbe” felirat szerepeljen.
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: Küldés. Keresés minialkalmazás bezárása: ESC. Input elem kijelölése: ALT + O. Ugrás a kijelölés végére: JOBBRA. Írd be az Emmet rövidítést: input:reset, majd TAB. A kurzor a value értéknél van, írd be: Alaphelyzetbe. 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 menu azonosítójú elemen belüli hivatkozás jelölő elemekre, és azok link és visited állapotára határozz meg fehér (white) betűszínt, a szöveg ne legyen aláhúzva.
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: visited{. Keresés minialkalmazás bezárása: ESC. LE a color sorig. Sor kijelölése: CTRL + L. Kijelölés felülírása Emmet rövidítéssel: c:white, majd TAB. Vagy írd be: color: white; Új sor nyitása: ENTER. Írd be az Emmet rövidítést: td:n, majd TAB. Vagy írd be: text-decoration: none; Mentés: CTRL + S.13. A tartalom azonosítójú elemen belüli h1 elemeknél a betűméret az alap betűméret 1,5-szöröse legyen, a szövegigazítás pedig középre történjen.
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: #tartalom 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: 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.14. A th és td elemek számára határozz meg 5 pixeles felső és alsó, valamint 15 pixeles bal- és jobboldali bélés (padding) értékeket.
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: p:5-15, majd TAB. Vagy írd be: padding: 5px 15px; Mentés: CTRL + S.15. A legend elemekhez rendelj félkövér betűstílust.
Ugrás a dokumentum végére: CTRL + END. Új sor nyitása: ENTER. Írd be: legend{, 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.16. A text típusú input elemek szélességét állítsd 500 pixel méretűre.
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:500, majd TAB. Vagy írd be: width: 500px; 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.