8. modul – 43. 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-43, kiválasztása: ENTER, megnyitása: ENTER.2. Nyisd meg az index.txt nevű fájlt a megadott helyről.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: index, 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 és body nyitó és záró jelölőivel.
LE a záró head jelölőt követő sorba. Kijelölés a dokumentum végéig: CTRL + SHIFT + END. 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. Ugrás a dokumentum elejére: CTRL + HOME. LE a második sorba. 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.3. Tedd 1. szintű címsorrá az „Üdvözöljük a Patina Antikvárium weboldalán!” sort.
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: Üdvözöljük. 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. Emmet: Becsomagolás rövidítéssel: CTRL + B, R. A szerkesztőmezőbe írd be: h1, majd ENTER. Mentés: CTRL + S.Az „Üzletünkben a következő műfajok közül választhat:” sort pedig alakítsd 2. szintű címsorrá.
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: Üzletünkben. 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. Emmet: Becsomagolás rövidítéssel: CTRL + B, R. A szerkesztőmezőbe írd be: h2, majd ENTER. Mentés: CTRL + S.4. A „Jelenleg mintegy...” mondattól a szöveg kerüljön új bekezdésbe.
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: Jelenleg. Keresés minialkalmazás bezárása: ESC. Ugrás a kijelölés elejére: BALRA. Í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 „Reméljük, sikerül...” mondat elé szúrj be egy sortörést.
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: Reméljük. 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.5. Állíts be hiperhivatkozást a „bővítjük választékunkat” 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 bővítjük választékunkat 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 „szeretettel várunk” szövegrészre is, ez mutasson az adokveszek.html oldalra.
Jelöld ki a feladatleírásból az idézőjelek közötti szeretettel várunk 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=adokveszek.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 adokveszek.html sorig, kiválasztása: 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.6. Nyisd meg az adokveszek.html fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: adokveszek, majd ENTER.Alakítsd számozatlan felsorolás stílusúvá az „Adok” alatti sorokat, számozott felsorolássá a „Veszek” alatti sorokat.
Megjegyzés: Az Adok alatti átalakítandó rész egy bekezdésben van sortörésekkel, a listaelemek előtt kötőjel és szóköz van. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: Adok<, (a kisebb jelet is írd be!). Keresés minialkalmazás bezárása: ESC. LE a következő sorra, ez a nyitó bekezdésjelölő sora. 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. A Find szerkesztőmező az aktív, írd be: <br>. Összes kijelölése: ALT + ENTER. Keresés minialkalmazás bezárása: ESC. Sortörés jelölők törlése: DELETE. Kurzor bővítése a következő sorra: CTRL + ALT + NUMPAD2. Ugrás a sorok elejére: HOME. Kötőjel és szóköz kijelölése: NUMPAD6. 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. A listasorok körüli bekezdés jelölők eltávolítása: Lista tartalmának kijelölése: ALT + O. Emmet: Elem eltávolítása: CTRL + E, E. A listasorok köré 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 Veszek alatti rész számozatlan felsorolás, ezt kell módosítani. LE a Veszek sorig, majd LE a nyitó számozatlan listajelölőig. A listasorok körüli bekezdés jelölők eltávolítása: Lista tartalmának kijelölése: ALT + O. Emmet: Elem eltávolítása: CTRL + E, E. A listasorok köré számozott felsorolás jelölők beszúrása: Emmet: Becsomagolás rövidítéssel: CTRL + B, R. A szerkesztőmezőbe írd be: ol, majd ENTER. Vagy: BALRA, majd ul jelölő név kijelölése: NUMPAD4, írd át: ol. Megjegyzés: A záró jelölőben automatikusan megtörténik a név módosítása. Mentés: CTRL + S.7. Szúrd be a konyv.gif képet a konyv2 osztályú elemen belülre. A kép megjelenési szélességét állítsd 150 pixelre.
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: konyv2. Keresés minialkalmazás bezárása: ESC. Ugrás bekezdés jelölők közé: ALT + I. Írd be az Emmet rövidítést: img[src=konyv.gif width=150], majd TAB. Mentés: CTRL + S.Mentsd el és zárd be az adokveszek.html fájlt.
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.Az itt található táblázatnak adj táblázatcímet (caption) „Katalógus - június” szöveggel.
Jelöld ki a feladatleírásból az idézőjelek közötti Katalógus - június 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 és zárd be az 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.Az űrlap rádiógombjaihoz tartozó szövegeket tedd címke (label) típusúvá.
Megjegyzés: a rádió gombok name értéke: kategoria. Összesen 5 rádiógomb van. Az első sorhoz van címke. A sorok végén sortörés jelölők vannak. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: kategoria", (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. LE a következő sorra. Multi kurzor a sorok elé: CTRL + ALT + NUMPAD2, háromszor. Megjegyzés: A multi kurzorral egyszerre módosítható mind a négy sor. ALT + N, az id azonosító értékekig, másold: CTRL + C. Ugrás a feliratokhoz: CTRL + NUMPAD6. Kijelölés a sorok végéig: SHIFT + END. A sortörő jelölők kijelölésének visszavonása: NUMPAD2, háromszor. 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. Az „Üzenet” felirathoz tartozó mezőt módosítsd többsoros beviteli mezővé, a sorok száma 8, a soron belüli karakterszám 40 legyen.
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: Üzenet. Keresés minialkalmazás bezárása: ESC. LE, a beviteli mező sorába. 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: uzenet, JOBBRA, SZÓKÖZ, majd írd be: rows=8, JOBBRA, SZÓKÖZ, majd írd be: cols=40. 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=uzenet cols=8 rows=40], majd TAB. Mentés: CTRL + S.11. A küldés nyomógomb mellé vegyél fel egy másik nyomógombot, amely reset típusú, felirata pedig „törlés” legyen.
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: submit. 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: törlés. Mentés: CTRL + S.Mentsd el és zárd be az 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ú elemen belüli h1 elemekre alkalmazz az alap betűmérethez képest 1,5-szörös betűméretet, valamint középre történő szövegigazítást.
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.13. A td elemek számára határozz meg 8 pixeles felső és alsó, valamint 3 pixeles bal- és jobboldali bélés (padding) értéket.
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: td{. Keresés minialkalmazás bezárása: ESC. LE a padding sorig. Sor kijelölése: CTRL + L. Kijelölés felülírása Emmet rövidítéssel: p:8-3, majd TAB. Vagy írd be: padding: 8px 3px; Mentés: CTRL + S.14. A pros osztályú elemeken belüli td elemekre határozz meg #ffc háttérszínt.
Ugrás a dokumentum végére: CTRL + END. Új sor nyitása: ENTER. Írd be: .pros td{, 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:#ffc, majd TAB. Vagy írd be: background-color: #ffc; Mentés: CTRL + S.15. A legend elemek 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: 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 submit típusú input elemekhez rendelj #fcc háttérszín értéket.
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:#fcc, majd TAB. Vagy írd be: background-color: #fcc; 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.