8. modul – 47. 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-47, 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.Tedd 1. szintű címsorrá az „Üdvözöljük honlapunkon!”, valamint „A századok ködéből...” sorokat.
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. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: A századok. 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.3. Állíts be hiperhivatkozást a „konyha remekei” szövegrészre, amely mutasson a Specialitások című oldal (spec.html) foetelek könyvjelzőjére.
Megjegyzés: A munkafájlban könyha szó szerepel! (Több helyesírási hiba is van a fájlban!) Jelöld ki a feladatleírásból az idézőjelek közötti konyha remekei 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[href=spec.html#foetelek], 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 bejelentkezes.html sorig, kiválasztása: ENTER. A kurzor pozíciójába írd be: #foetelek. Mentés: CTRL + S.Állíts be hiperhivatkozást az „édességek” szóra is, ez mutasson a Specialitások című oldal (spec.html) desszertek könyvjelzőjére.
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: édességek. 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[href=spec.html#desszertek], 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 bejelentkezes.html sorig, kiválasztása: ENTER. A kurzor pozíciójába írd be: #desszertek. 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 a business.txt fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: business, 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. Adj oldalcímet „Palmerius étterem” szöveggel.
Jelöld ki a feladatleírásból az idézőjelek közötti Palmerius étteremt szöveget, majd másold: CTRL + C. 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. 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 kimásolt címet: CTRL + V. Mentés: CTRL + S.5. Alakítsd számozott felsorolás stílusúvá „A menü tartalma:” alatti sorokat.
Megjegyzés: 5 sort kell átalakítani. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: A menü tartalma. Keresés minialkalmazás bezárása: ESC. LE, kétszer, az első listasorra. Ugrás a sor elejére: HOME. Multi kurzor a sorok elé: CTRL + ALT + NUMPAD2, négyszer. Megjegyzés: A multi kurzorral egyszerre módosítható mind az öt listasor. 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. Listasorok kijelölése: A kurzor az első listasorban van. CTRL + L, négyszer. 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. Mentés: CTRL + S.Mentsd el a fájlt weboldalként business.html néven és zárd be.
Fájl bezárása: CTRL + F4.6. Nyisd meg a spec.html fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: spec, majd ENTER.Szúrj be horgonyt (könyvjelzőt) a Főételek táblázata elé „foetelek” értékkel, valamint a Desszertek táblázata elé „desszertek” értékkel.
Ugrás a dokumentum elejére: CTRL + HOME. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmező az aktív, írd be: Főételek. Keresés minialkalmazás bezárása: ESC. Ugrás a kijelölés elejére: BALRA. BALRA, ekkor a kurzor a nyitó td jelölőben van. SZÓKÖZ, majd írd be: id=foetelek. Megjegyzés: Az értéknél az idézőjeleket nem kell beírni, automatikusan létrejönnek. Nem szükséges a jelölőnek lennie! Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmező az aktív, írd be: Desszertek. Keresés minialkalmazás bezárása: ESC. Ugrás a kijelölés elejére: BALRA. BALRA, ekkor a kurzor a nyitó td jelölőben van. SZÓKÖZ, majd írd be: id=desszertek. 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ázatokban lévő képek megjelenési szélességeit állítsd egységesen 140 pixel értékűre.
Megjegyzés: Jelenleg 135 px a beállítás. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmező az aktív, írd be: 135. Összes előfordulás kijelölése: ALT + ENTER. Keresés minialkalmazás bezárása: ESC. Írd át az értékeket: 140. Mentés: CTRL + S.8. Vond össze a táblázatok fejléc cella sorait a velük szomszédos üres cellákkal.
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmező az aktív, írd be: <th></th>. Összes kijelölése: ALT + ENTER. Keresés minialkalmazás bezárása: ESC. Sorok kijelölése: CTRL + L. Cellasorok törlése: DELETE. FEL az előző sorra, ezek a címeket tartalmazó fejléc cellák. HOME, majd ugrás a jelölőnév végére: CTRL + NUMPAD6. SZÓKÖZ, majd írd be: colspan=2. 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 spec.html fájlt.
Fájl bezárása: CTRL + F4.9. Nyisd meg a foglalas.html fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: foglalas, majd ENTER.Az űrlapon rádiógombokhoz tartozó feliratokat tedd címke (label) típusúvá.
Akadálymentesítés szükséges: feliratok módosítása: mára, holnapra, holnaputánra! Megjegyzés: Az első két sor végén sortörés jelölő van. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: "nap", (az idézőjeleket is írd be!). Keresés minialkalmazás bezárása: ESC. Összes kijelölése: CTRL + F2. ALT + N, az id értékekig, másold: CTRL + C. Ugrás a feliratokig: CTRL + NUMPAD6. Feliratok kijelölése: NUMPAD6. A kijelölésből ki kell venni a két sortörés jelölőt: Keresés minialkalmazás megnyitása: CTRL + F. Keresés csak a kijelölésben: ALT + L. (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: .*[^<br>] , (írásjelekkel!). Összes előfordulás kijelölése: ALT + ENTER. 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 „Személyek száma” felirathoz tartozó űrlapelemet módosítsd úgy, hogy az elem minden értéke látszódjon. Alapértelmezésben az 1. érték legyen kiválasztott állapotban.
Megjegyzés: Összesen 6 elem van a listában. Jelenleg a 2 érték van kiválasztva. A select elem name értéke: szemszam. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: szemszam", (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=6. 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: SZÓKÖZ selected. Keresés minialkalmazás bezárása: ESC. Kijelölés kivágása: CTRL + X. FEL az előző sorba, ez az 1. opció, SZÓKÖZ, majd beillesztés: CTRL + V. Mentés: CTRL + S.11. A nyomógomb név értéke „ok”, a felirata „küldés” legyen.
Megjegyzés: jelenleg a type, a name és a value értéke is submit. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: submit, (ekkor az első előfordulást választja ki, ami a type). Keresés minialkalmazás bezárása: ESC. ALT + N, a name értékig, írd át: ok. ALT + N, a value értékig, írd át: küldés. Mentés: CTRL + S.Mentsd el és zárd be az foglalas.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 kozep osztályú elemekre a szövegigazítás középre történjen.
Ugrás a dokumentum végére: CTRL + END. Új sor nyitása: ENTER. Írd be: #tartalom .kozep{, 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: ta:c, majd TAB. Vagy írd be: text-align: center; Mentés: CTRL + S.13. A th elemekre határozz meg #060 háttérszínt, valamint #fff betűszínt.
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: th{. 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: bgc:#060, majd TAB. Vagy írd be: background-color: #060; Új sor nyitása: ENTER. Írd be az Emmet rövidítést: c:#fff, majd TAB. Vagy írd be: color: #fff; Mentés: CTRL + S.14. A td elemeknek állítsd a bélés (padding) értékét 5 pixelre, függőleges igazítását pedig alulra.
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: p:5, majd TAB. Vagy írd be: padding: 5px; Új sor nyitása: ENTER. Írd be az Emmet rövidítést: va:b, majd TAB. Vagy írd be: vertical-align: bottom; Mentés: CTRL + S.15. A form elemeknek állítsd be a margóját a következőképpen: felül és alul a margó 0 méretű legyen, a bal- és jobboldali margót állítsa 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: form{. 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 legend elemek számára állíts be félkövér betűstílust és 20 pixeles betűméretet.
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: legend{. 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:20, majd TAB. Vagy írd be: font-size: 20px; Új sor nyitása: ENTER. Írd be az Emmet rövidítést: fw:b, majd TAB. V agy írd be: font-weight: bold; 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.