8. modul – 37. 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-37, 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 „Termékeink minőségi...” kezdetű 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: Termékeink. Keresés minialkalmazás bezárása: ESC. FEL az előző sorra. Ugrás a sor végére: END. Sortörés kijelölése: SHIFT + BALRA, négyszer. Í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, hogy...” 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.3. Állíts be hiperhivatkozást a „bármelyik termékünk” szövegrészre, amely mutasson a Szőnyegek című oldalra (szonyegek.html).
Jelöld ki a feladatleírásból az idézőjelek közötti bármelyik termékü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=szonyegek.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 szonyegek.html sorig, kiválasztása: ENTER. Mentés: CTRL + S.Állíts be hiperhivatkozást a „felkeltette érdeklődését” 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 felkeltette érdeklődését 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.4. Nyisd meg az allas.txt fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: allas, 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. Rendelje a fájlhoz a styles.css stíluslap állományt.
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. Ugrás a dokumentum elejére: CTRL + HOME. LE a nyitó html jelölőig, ugrás a sor végére: END. Új sor nyitá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.5. A „Jelenleg teljes munkaidőbe keresünk:” alatti sorokat alakítsd számozott felsorolás stílusúvá.
Megjegyzés: Három átalakítandó sor van, számmal kezdődnek amit fő szöveg követ. 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: \d fő . Összes kijelölése: ALT + ENTER. Keresés minialkalmazás bezárása: ESC. Ugrás a kijelölések elejére: BALRA. 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é számozott felsorolás jelölők beszúrása: A kurzor az első listasorban van. Sorok kijelölése: CTRL + L, háromszor. Emmet: Becsomagolás rövidítéssel: CTRL + B, R. A szerkesztőmezőbe írd be: ol, majd ENTER. Mentés: CTRL + S.Mentsd el a fájlt weboldalként allas.html néven és zárd be.
Fájl bezárása: CTRL + F4.6. Nyisd meg a szonyegek.html fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: szonyegek, majd ENTER.Méretezd át a táblázatban található képek megjelenését úgy, hogy a képek mérete egységesen 80 pixel szélesek legyenek.
Megjegyzés: A képnevekben végén sorszámok szerepelnek. 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: \d.img" , (a záró idézőjelet is írd be!). Összes előfordulás kijelölése: ALT + ENTER. Keresés minialkalmazás bezárása: ESC. Ugrás a kijelölések végére: JOBBRA. SZÓKÖZ, majd írd be: width=80. Megjegyzés: Az értéknél az idézőjeleket nem kell beírni, automatikusan létrejönnek. Mentés: CTRL + S.7. A táblázathoz adj táblázatcímet (caption) „Jelenleg kapható szőnyegek” szöveggel.
Jelöld ki a feladatleírásból az idézőjelek közötti Jelenleg kapható szőnyegek 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.8. Rendezd át a sorokat úgy, hogy megnevezés szerint ABC sorrendben legyenek.
Megjegyzés: Autum a nyitó tbody jelölő után, Spring a záró tbody jelölő elé kell beilleszteni. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: Autumn. Keresés minialkalmazás bezárása: ESC. FEL, majd BALRA, a kurzor a nyitó táblázatsor jelölőben van. Táblázatsor kijelölése: ALT + O. Sor kijelölése: CTRL + L. Táblázatsor kivágása: CTRL + X. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: <tbody. Keresés minialkalmazás bezárása: ESC. LE, majd kétszer HOME. Táblázatsor beillesztése: CTRL + V. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: Spring. Keresés minialkalmazás bezárása: ESC. FEL, majd BALRA, a kurzor a nyitó táblázatsor jelölőben van. Táblázatsor kijelölése: ALT + O. Sor kijelölése: CTRL + L. Táblázatsor kivágása: CTRL + X. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: /tbody. Keresés minialkalmazás bezárása: ESC. HOME kétszer. Táblázatsor beillesztése: CTRL + V. Mentés: CTRL + S.Mentsd el és zárd be a szonyegek.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 Szőnyeg feliratához tartozó űrlapelemet módosítsd úgy, hogy valamennyi értéke látszódjon, alapértelmezetten pedig legyen a Spring kiválasztott állapotban.
Megjegyzés: A szükséges select elem name értéke: szonyeg, a Spring elem name értéke: spring. A listában 5 elem van. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: szonyeg", (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: size=5. Megjegyzés: Az értéknél az idézőjeleket nem kell beírni, automatikusan létrejönnek. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: spring", (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: selected. Mentés: CTRL + S.10. Az „Elektronikus számlát küldjünk?” rádiógombjaihoz tartozó feliratokat alakítsd címke (label) típusúvá.
Megjegyzés: A rádiógombok azonosítói eszamla_ szöveggel kezdődnek. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: eszamla_ (a végére az alsó kötőjelet is írd be!). Összes előfordulás kijelölése: ALT + ENTER. Keresés minialkalmazás bezárása: ESC. Azonosítók teljes kijelölése: NUMPAD6. Azonosítók másolása: CTRL + C. Ugrás a feliratok elejére: CTRL + NUMPAD6. Feliratok kijelölése: NUMPAD6. HTML Tag Wrap: ALT + W. Írd label for, az idézőjeleket nem kell beírni. A kurzor pozíciójába illeszd be a kimásolt azonosítókat: CTRL + V. Mentés: CTRL + S.11. Az űrlap alján található nyomógomb mellé vegyél fel egy reset típusú nyomógombot is, amelynek „alaphelyzet” szövegű felirata legyen.
Megjegyzés: A submit gomb value értéke: megrendelés. 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 value értéknél van, írd be: alaphelyzet. 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: Az alja azonosítójú elemen belüli h1 elemeknél a betűméret az alap betűméret 1,5-szerese legyen, a szöveg elrendezése pedig középre történjen.
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: #alja h1{. Keresés minialkalmazás bezárása: ESC. LE a font-size sorig. Sor kijelölése: CTRL + L. Kijelölés felülírása Emmet rövidítéssel: 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 caption elemeknél a betűméretre az alap betűméret 1,2-szeresét add meg, a betűstílus pedig legyen félkövér.
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: caption{. Keresés minialkalmazás bezárása: ESC. LE a font-size sorig. Sor kijelölése: CTRL + L. Kijelölés felülírása Emmet rövidítéssel: fz:1.2, majd TAB. Vagy írd be: font-size: 1.2em; Új sor nyitása: ENTER. Írd be az Emmet rövidítést: fw:b, majd TAB. Vagy írd be: font-weight: bold; Mentés: CTRL + S.14. A td elemek számára határozz meg 1 pixel vastag, pontozott mintázatú és #ccc színű keretet.
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: bd:1-dt-#ccc, majd TAB. Vagy írd be: border: 1px dotted #ccc; Mentés: CTRL + S.15. A fieldset elemek felső és alsó margóját állítsd 0 méretűre, a bal- és jobboldalit pedig állítsd be úgy, hogy az elem középre rendeződjön.
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: fieldset{. 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: m:0-a, majd TAB. Vagy írd be: margin: 0 auto; Mentés: CTRL + S.16. A text típusú input elemek szélessége legyen 300 pixel.
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á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.