8. modul – 3. 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ájlok3, 
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.
Állíts be hiperhivatkozást a „töltse ki az űrlapot” szövegrészre, amely mutasson a „Kapcsolat” című oldalra (kapcsolat.html) úgy, hogy új ablakban nyíljon meg.
Jelöld ki a feladatleírásból az idézőjelek közötti 
töltse ki az űrlapot 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 target=_blank], 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 az kapcsolat.html sorig, kiválasztása: ENTER.
JOBBRA, SZÓKÖZ, majd írd be: target=.
Megjegyzés: Az értéknél az idézőjeleket nem kell beírni, automatikusan létrejönnek.
CTRL + SPACE, az első sor a _blank, kiválasztása: ENTER.
Mentés: CTRL + S.
3. Töröld a táblázat fejléc celláiból az „időbeosztása” szavakat.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be egy SZÓKÖZ után: időbeosztása.
Keresés minialkalmazás bezárása: ESC.
A kijelölt szöveg összes előfordulásának kijelölése: ALT + ENTER.
Keresés minialkalmazás bezárása: ESC.
Összes előfordulás törlése: DELETE.
Mentés: CTRL + S.
4. Egyesítsd a táblázat Versenyúszás, Golf klub, valamint a Football klub celláit a szomszédos üres cellákkal, összesen 7 sort.
Megjegyzés: Az együttes kijelöléshez reguláris kifejezést használok, majd törlöm az üres fejléc cella sorokat.
Keresés minialkalmazás megnyitása: CTRL + F.
(Kis- és nagybetűk megkülönböztetése: ALT + C.)
TAB a Match Case gombig, ha nincs bejelölve, bejelölése: SZÓKÖZ.
(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: <th>[V|G|F].
Megjegyzés: A reguláris kifejezés jelentése:
Egy nyitó fejléc cella jelölő után nagy V, nagy G, vagy nagy F betű van.
Összes előfordulás kijelölése: ALT + ENTER.
Keresés párbeszédpanel bezárása: ESC.
Ugrás a kijelölések elejére: BALRA.
Ugrás a nyitó th jelölő neve után: CTRL + NUMPAD6.
SZÓKÖZ, majd írd be: colspan=7.
Megjegyzés: Az értéknél az idézőjeleket nem kell beírni, automatikusan létrejönnek.
Felesleges cellajelölő sorok törlése:
LE, ez az első üres cellasorra, cellasor kijelölése: CTRL + L.
Összes üres cellasor kijelölése: CTRL + SHIFT + L.
Cella sorok törlése: DEL.
Mentés: CTRL + S.
5. Módosítsd a csütörtöki Versenyúszás-ra, valamint a keddi Football klub-ra vonatkozó cellák tartalmát „Zárva!” értékre.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmező az aktív, írd be: Versenyúszás<.
Keresés minialkalmazás bezárása: ESC.
LE, 15-ször.
Jelöld ki a jelenlegi tartalmat (17.00-18.00): ALT + O, írd át: Zárva!
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmező az aktív, írd be: Football.
Keresés minialkalmazás bezárása: ESC.
LE, 13-szor.
Jelöld ki a jelenlegi tartalmat (10.30-14.30): ALT + O, írd át: Zárva!
Mentés: CTRL + S.
6. Adj osztályt azoknak a celláknak, amelyekben „Zárva!” szöveg szerepel, az osztály értéke legyen kiemelt.
Csere minialkalmazás megnyitása: CTRL + H.
A Find szerkesztőmező az aktív, írd be: <td>Zárva.
TAB a Replace szerkesztőmezőig, írd be: <td class="kiemelt">Zárva.
Megjegyzés: Az idézőjelek beírása itt szükséges!
Összes cseréje: CTRL + ALT + ENTER.
Csere minialkalmazás bezárása: ESC.
Mentés: CTRL + S.
Mentsd el és zárd be az index.html fájlt.
Fájl bezárása: CTRL + F4.
7. Nyisd meg a sport.html fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: sport, majd ENTER.
Módosítsd a „Bayview Golf Klub” és a „Bayview Futball Klub” sorokat 3. szintű címsorrá.
Megjegyzés: A két sor jelenleg bekezdés jelölők között van, és a Klub szót használom az együttes kijelölésre.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmező az aktív, írd be: Klub<
Összes előfordulás kijelölése: ALT + ENTER.
Keresés párbeszédpanel 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: h3, majd ENTER.
Mentés: CTRL + S.
8. Módosítsd az oldalon megjelenő golf.jpg kép megjelenését úgy, hogy szélessége 188, magassága pedig 285 legyen. Adj alternatív szöveget a képhez „Golf” értékkel.
Megjegyzés: A szélesség tulajdonságnak van érték megadva, azt módosítani kell.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: golf.jpg", (a záró idézőjelet is írd be!).
Keresés minialkalmazás bezárása: ESC.
Ugrás a width tulajdonság jelenlegi értékére (150): ALT + N, kétszer, írd át: 188.
JOBBRA, SZÓKÖZ, majd írd be: height=285, JOBBRA, SZÓKÖZ, majd írd be: alt=Golf.
Megjegyzés: Az értéknél az idézőjeleket nem kell beírni, automatikusan létrejönnek.
Mentés: CTRL + S.
Mentse el és zárja be a sport.html fájlt.
Fájl bezárása: CTRL + F4.
9. Nyisd meg a tel.txt fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: tel, 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.
Állíts be hiperhivatkozást „Dr. Mary Green” és „Dr. Nicholas Duggan” nevekre, amelyek mutassanak a mary@xyzmail.hu illetve nicholas@xyzmail.hu email címekre.
Jelöld ki a feladatleírásból a feladatleírásból a Dr. Mary Green 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.
Emmet: Becsomagolás rövidítéssel: CTRL + B, R.
A szerkesztőmezőbe írd be: a[href=mailto:mary@xyzmail.hu], majd ENTER.
Jelöld ki a feladatleírásból a Dr. Nicholas Duggan 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.
Emmet: Becsomagolás rövidítéssel: CTRL + B, R.
A szerkesztőmezőbe írd be: a[href=mailto:nicholas@xyzmail.hu], majd ENTER.
Mentés: CTRL + S.
10. Adj meg karakterkódolásra vonatkozó meta elemet, amely legyen utf-8 kódolású.
Megjegyzés: A karakterkódolást a head páros elemben kell elhelyezni.
Ugrás az elejére: CTRL + HOME.
LE a <head> jelölőig, 
Ugrás a sor végére: END. Új sor nyitása: ENTER.
Írd be az Emmet rövidítést: meta:utf, majd TAB. 
Vagy írd be: <meta charset="UTF-8">.
Mentés: CTRL + S.
Módosítsd az oldal címét „Bayview Szabadidő Központ”-ra.
Jelöld ki a feladatleírásból a Bayview Szabadidő Központ szöveget, majd másold, CTRL + C.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: title.
Keresés minialkalmazás bezárása: ESC.
Ugrás a title jelölők közé: ALT + I.
Illeszd be a kimásolt szöveget: CTRL + V. 
Mentés: CTRL + S.
11. Rendeld a fájlhoz a styles.css stíluslap állományt.
Megjegyzés: a stíluslap hozzárendelést a head részben kell megadni, nincs jelentősége ezen belül hányadik sorban van.
Ugrás a dokumentum elejére: CTRL + HOME.
LE a nyitó nyitó head 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.
Egészítsd ki a fájlt a hiányzó html nyitó és záró jelölőivel.
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.
Mentés: CTRL + S.
Mentsd el a fájlt weboldalként tel.html néven és zárd be.
Fájl bezárása: CTRL + F4.
12. Nyisd meg a kapcsolat.html fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: kapcsolat, majd ENTER.
Az „Ajánlatot szeretnék kérni” szöveg melletti jelölőnégyzet legyen alapértelmezés szerint bejelölt állásban.
Megjegyzés: Ez az egy jelölőnégyzet van.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: checkbox", (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.
Az Üzenet alatti szövegmezőben legyen alapértelmezetten ez a szöveg beírva: „az üzenet szövege”.
Megjegyzés: A textarea beviteli mező alapértelmezett tartalmának a textarea páros jelölők között kell szerepelnie, ezért a záró jelölőt kell kikeresni, majd elé beírni a megadott szöveget.
Jelöld ki a feladatleírásból az idézőjelek közötti 
üzenet szövege 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.
Ugrás a kijelölés elejére: BALRA.
Illeszd be a kimásolt szöveget: CTRL + V.
Mentés: CTRL + S.
Mentsd el és zárd be a kapcsolat.html fájlt.
Fájl bezárása: CTRL + F4.
13. 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 kiemelt osztályú táblázatok celláiban a betűszín legyen vörös (red), a betűstílus félkövér.
Megjegyzés: Egy kis pontosítás: A táblázatok kiemelt osztályú celláiban!
Ugrás a dokumentum végére: CTRL + END.
Írd be: table td.kiemelt{, 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.
Betűszín megadása:
Írd be az Emmet rövidítést: c:red, majd TAB.
Vagy írd be: color: red;
Új sor nyitása: ENTER.
Betűstílus megadása:
Írd be az Emmet rövidítést: fw:b, majd TAB. 
Vagy írd be: font-weight: bold;
Mentés: CTRL + S.
14. Adj keretet a table elemeknek: a felső és baloldali keret legyen 3 pixel vastag, folytonos vonalú és #ccc színű, az alsó és jobboldali pedig 3 pixel vastag, folytonos vonalú és fekete (black) színű.
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 sor végére: END.
Új sor nyitása: ENTER.
Megjegyzés: Először a szegély azonos beállításait adjuk meg, majd a különböző szegélyszíneket.
Írd be az Emmet rövidítést: bd:3-s, majd TAB. Új sor nyitása: ENTER.
Írd be az Emmet rövidítést: bdc:#ccc-black-black-#ccc, majd TAB.
A kibontás után: 
border: 3px solid;
border-color: #ccc black black #ccc;
Mentés: CTRL + S.
15. A cellák és fejléc cellák margói legyenek 0 pixel, a cellabéléseik pedig 7 pixel méretűek.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: table th, table 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: m:0, majd TAB.
Vagy írd be: margin: 0px;
Új sor nyitása: ENTER.
Írd be az Emmet rövidítést: p:7, majd TAB.
Vagy írd be: padding: 7px;
Mentés: CTRL + S.
16. Az urlap azonosítójú elem felső és alsó margója legyen 0 pixel méretű, a bal- és jobboldali margót pedig á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: #urlap{.
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.
Mentsd el é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.

Ide kattintva megtekinthetitek, hogyan kell kinéznie az elkészült weboldalnak.

Vissza a feladatsorszámok kiválasztásához