8. modul – 16. 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-16, 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 félkövérré az „5000 irodalmi, 800 tudományos, valamint több mint 2000 mesekönyv” szövegrészt.
Jelöld ki a feladatleírásból az idézőjelek közötti 5000 irodalmi, 800 tudományos, valamint több mint 2000 mesekönyv 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.Tedd dőltté az „árverést tartunk” szövegrészt.
Jelöld ki a feladatleírásból az idézőjelek közötti árverést tartunk 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.3. Alakítsd számozatlan felsorolás stílusúvá az „Üzletünkben a következő...” cím alatti felsorolást.
Megjegyzés: Az átalakítandó szöveg bekezdés jelölők között van, a sorok végén sortörés jelölővel, kivéve az utolsó sort. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: Üzletünkben. Keresés ablak bezárása: ESC. LE a következő sorra, ez a nyitó bekezdés jelölő sora. Bekezdés kijelölése: ALT + O. Bekezdés jelölők törlése: Emmet: Elem eltávolítása: CTRL + E, E. Számozatlan felsorolás jelölők beszúrása: Emmet: Becsomagolás rövidítéssel: CTRL + B, R. A szerkesztőmezőbe írd be: ul, majd ENTER. A kurzor a felsorolás záró jelölő után van. FEL az előző sorba. Felsorolás kijelölése: ALT + O. Sortörés jelölők törlése: 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 cseréje: CTRL + ALT + ENTER. Listasorok kijelölése: Megjegyzés: A listasorok előtt egy kötőjel és szóköz van. A Find szerkesztőmező az aktív, az előző keresőfeltétel kijelölése: SHIFT + HOME. Írd át: KÖTŐJEL SZÓKÖZ, (értelemszerűen írásjelekkel!). Összes előfordulás kijelölése: ALT + ENTER. Keresés ablak bezárása: ESC. Kijelölések törlése: DELETE. 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.4. Állíts be hiperhivatkozást a „katalógusunkban talál” szövegrészre, amely mutasson a Katalógus című oldalra (katalogus.html).
Jelöld ki a feladatleírásból az idézőjelek közötti katalógusunkban talál 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=katalogus.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 katalogus.html sorig, kiválasztása: ENTER. Mentés: CTRL + S.Állíts be hiperhivatkozást a „rendelje meg” szövegrészre is, ez mutasson a megrendeles.html oldalra.
Jelöld ki a feladatleírásból az idézőjelek közötti rendelje meg 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=megrendeles.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 megrendeles.html sorig, kiválasztása: 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 az adokveszek.txt fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: adokveszek, 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 és body nyitó és záró jelölőivel.
Ugrás a dokumentum elejére: CTRL + HOME. LE a nyitó html jelölőt követő sorig. Ugrás a sor elejére: HOME. A head részbe tartozó elemek kijelölése: CTRL + L, háromszor. A kijelölt terület köré head jelölő beillesztése: Emmet: Becsomagolás rövidítéssel: CTRL + B, R. A szerkesztőmezőbe írd be: head, majd ENTER. A kurzor a head záró jelölő után van. Kijelölés a dokumentum végéig: CTRL + SHIFT + END. A html záró jelölő visszavonása a kijelölésből: SHIFT + HOME. 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. Mentés: CTRL + S.6. Alakítsd definíciós listává a az „Adok-Veszek” cím alatti felsorolást.
A lista bekezdés jelölők között van. A dt záró jelölők meg vannak adva, a dd sorok végén (kivéve az utolsó sorokat), sortörő jel van. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: h1>Adok. Keresés minialkalmazás bezárása: ESC. LE, kétszer. Bekezdés tartalmának kijelölése: ALT + O. Bekezdés jelölők törlése: CTRL + E, E. A kijelölt terület köré definíciós lista jelölők beillesztése: Emmet: Becsomagolás rövidítéssel: CTRL + B, R. A szerkesztőmezőbe írd be: dl majd ENTER. A kurzos a definíciós lista záró jelölő után van. FEL az előző sorba. Definíciós lista tartalmának 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őbe írd be: <br>. Összes előfordulás kijelölése: ALT + ENTER. Keresés minialkalmazás bezárása: ESC. Sortörő jelölők törlése: DELETE. Kijelölések bővítése lefelé még egy sorral: CTRL + ALT + NUMPAD2. Dd jelölők beillesztése a többsoros kurzor sorokba: Emmet: Becsomagolás rövidítéssel: CTRL + B, R. A szerkesztőmezőbe írd be: dd, majd ENTER. A kurzor az első dd sor végén van. Definíciós lista tartalmának 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őbe írd be: </dt>. Összes előfordulás kijelölése: ALT + ENTER. Keresés minialkalmazás bezárása: ESC. Záró dt jelölők törlése: DELETE. A kijelölt sorok köré dt jelölő beszúrása: Emmet: Becsomagolás rövidítéssel: CTRL + B, R. A szerkesztőmezőbe írd be: dt, majd ENTER. Mentés: CTRL + S.Mentsd el a fájlt weboldalként adokveszek.html néven és zárd be.
Fájl bezárása: CTRL + F4.7. Nyisd meg a katalogus.html fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: katalogus, majd ENTER.Módosítsd a táblázat első sorának celláit 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. A Find szerkesztőmező az aktív, írd be: td>. TAB a Replace szerkesztőmezőig, írd be: th>. Összes előfordulás cseréje: CTRL + ALT + ENTER. Csere minialkalmazás bezárása: ESC. Mentés: CTRL + S.8. Szúrd be a táblázat alatt található konyv osztályú elemen belülre a konyvek.gif képfájlt. Adj alternatív szöveget a képnek „könyvek” értékkel.
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: konyv. 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=konyvek.gif alt=könyvek], majd TAB. Mentés: CTRL + S.Mentsd el és zárd be a katalogus.html fájlt.
Fájl bezárása: CTRL + F4.9. Nyisd meg a megrendeles.html fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: megrendeles, majd ENTER.Szúrj be az űrlaphoz magyarázó feliratot (legend) a következő szöveggel: „Töltse ki az alábbi űrlapot!”.
Jelöld ki a feladatleírásból az idézőjelek közötti Töltse ki az alábbi űrlapot! szöveget, majd másold: CTRL + C. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: <form>. Keresés minialkalmazás bezárása: ESC. Ugrás a kijelölt szöveg végére: JOBBRA. Új sor nyitása: ENTER. Írd be az Emmet rövidítést: legend, majd TAB. A kurzor pozíciójába illeszd be a kimásolt szöveget: CTRL + V. Mentés: CTRL + S.10. Vegyél fel egy új rádiógombot a Kategória címszó mellé, a gombhoz tartozó címke „Szépirodalmi mű” legyen.
Megjegyzés: Az új rádiógomb name értéke: kategoria, value és id értéke, valamint a label jelölő for értéke: szepirodalom legyen. Az utolsó rádiógomb a Lexikon. Jelöld ki a feladatleírásból az idézőjelek közötti Szépirodalmi mű szöveget, majd másold: CTRL + C. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: Lexikon. 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: input:radio, majd TAB. Megjegyzés: Az alapértelmezett Emmet rövidítésben a value attribútum nem szerepel! Ugrás a sor végére: END, majd BALRA. Írd be: value=. Megjegyzés: Az értéknél az idézőjeleket nem kell beírni, automatikusan létrejönnek. Ugrás a sor végére: END. SZÓKÖZ, majd írd be: az Emmet rövidítést: label, majd TAB. Ugrás a label jelölők közé: ALT + I. A kurzor pozíciójába illeszd be a kimásolt szöveget: CTRL + V. Jelöld ki a sort: CTRL + L. Csere minialkalmazás megnyitása: CTRL + H. Keresés a kijelölésben: ALT + L. A Find szerkesztőmező az aktív, írd be: "". TAB a Replace szerkesztőmezőig, írd be: "szepirodalom", (az idézőjeleket is írd be!). Összes cseréje: CTRL + ALT + ENTER. Csere minialkalmazás bezárása: ESC. Haladó megoldás: Írd be az új, üres sorba: szepirodalom, jelöld ki a szót: SHIFT + HOME. Emmet: Becsomagolás rövidítéssel: CTRL + B, R. A szerkesztőmezőbe írd be: input:r[name=$# value=$# id=$#]+{ }+label[for=$#]{Szépirodalmi mű}, majd ENTER. Megjegyzés: A $# értékeket behelyettesíti a szepirodalom szóval! Mentés: CTRL + S.A rádiógombok közül alapértelmezetten legyen az „Életrajz” bejelölt állapotban.
Megjegyzés: A rádiógomb azonosítója: eletrajz. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: eletrajz", (a záró idézőjelet is írd be!). Keresés minialkalmazás bezárása: ESC. Ugrás a kijelölés végére: JOBBRA. SZÓKÖZ, majd írd be: checked. Mentés: CTRL + S.11. Állítsd be az Üzenet felirat melletti szövegmezőt a következőképpen: sorok száma 8, a soron belüli karakterszám 40 legyen. Alapértelmezetten a következő szöveg legyen a szövegmezőbe beleírva: „Itt üzenhet nekünk.”
Megjegyzés: A szövegmező name értéke: uzenet. Jelöld ki a feladatleírásból az idézőjelek közötti Itt üzenhet nekünk. szöveget, majd másold: CTRL + C. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: uzenet", (a záró idézőjelet is írd be!). Keresés minialkalmazás bezárása: ESC. Ugrás a kijelölés végére: JOBBRA. SZÓKÖZ, majd írd be: cols=40, JOBBRA, SZÓKÖZ, majd írd be: rows=8. 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. Illeszd be a kimásolt szöveget: CTRL + V. Mentés: CTRL + S.Mentsd el és zárd be a megrendeles.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 tartalom azonosítójú elem h2 gyermekeleménél a betűméret legyen az alap betűméret 1,2-szerese.
Ugrás a dokumentum végére: CTRL + END. Új sor nyitása: ENTER. Írd be: #tartalom 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.2, majd TAB. Vagy írd be: font-size: 1.2em; Mentés: CTRL + S.13. A table elemek felső és alsó margóinak nagysága legyen 20 pixel, a bal- és jobboldali margót pedig állítsd be úgy, hogy az elem középre rendeződjön.
Ugrás a dokumentum végére: CTRL + END. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: table{. Keresés minialkalmazás bezárása: ESC. LE a margin sorig. Sor kijelölése: CTRL + L. Kijelölés felülírása Emmet rövidítéssel: m:20-a, majd TAB. Vagy írd be: margin: 20px auto; Mentés: CTRL + S.14. Módosítsd a th elemre vonatkozó megjelenítési szabályt: a háttér színének #800, a betűszínnek pedig #ff0 értéket adjon meg.
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 color sorig. Sor kijelölése: CTRL + L. Kijelölés felülírása Emmet rövidítéssel: c:#f00, majd TAB. Vagy írd be: color: #f00; Új sor nyitása: ENTER. Írd be az Emmet rövidítést: bgc:#800, majd TAB. Vagy írd be: background-color: #800; Mentés: CTRL + S.15. A fieldset elemekhez adj bélés (padding) értéket, amely egységesen 20 pixel legyen.
Megjegyzés:Ilyen elem egyik oldalon sincs! Ugrás a dokumentum végére: CTRL + END. Új sor nyitása: ENTER. Írd be: fieldset{, 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: p:20, majd TAB. Vagy írd be: padding: 20px; Mentés: CTRL + S.16. Az egysoros szöveges beviteli mező szélességét határozd meg 300 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:300, majd TAB. Vagy írd be: width: 300px; Mentés: CTRL + S.Ide kattintva megtekinthetitek, hogyan kell kinéznie az elkészült weboldalnak. Vissza a feladatsorszámok kiválasztásáhozMentsd é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.