8. modul – 13. 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-13, 
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.
Az „Üdvözlöm Önt...” kezdetű sort tedd 1. színű címsorrá.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: Üdvözlöm.
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.
A „Reméljük...” kezdetű mondattól kezdődő szövegrész kerüljön új bekezdésbe.
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: </, automatikusan kiegészül a bekezdés záró jelölőre.
Írd be: <p>, automatikusan kiegészül a bekezdés záró jelölővel, töröld vissza: CTRL + Z.
Mentés: CTRL + S.
3. Állíts be hiperhivatkozást az „eszközökről és szerelékekről” szövegrészre, amely mutasson az Eszközök című oldalra (eszkozok.html).
Jelöld ki a feladatleírásból az idézőjelek közötti 
eszközökről és szerelékekrő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=eszkozok.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 az eszkozok.html sorig, kiválasztása: ENTER.
Mentés: CTRL + S.
Állíts be hiperhivatkozást az „Addig is írjon nekünk” szövegrészre is, ez mutasson az informacio.html oldalra.
Jelöld ki a feladatleírásból az idézőjelek közötti 
Addig is írjon nekü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=informacio.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 az informacio.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 idojaras.txt fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: idojaras, 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.
5. Tedd a „Holnap” valamint a „Holnapután” szövegű sorokat 2. szintű címsorrá.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmező az aktív, írd be: Holnap.
Ö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: h2, majd ENTER.
Mentés: CTRL + S.
6. A Vízhőmérséklet: sorokat mindkét helyen tedd félkövérré.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmező az aktív, írd be: Vízhőmérséklet.
Összes előfordulás kijelölése: ALT + ENTER.
Keresés párbeszédpanel bezárása: ESC.
Bekezdések tartalmának kijelölése: ALT + O.
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.
Mentsd el a fájlt weboldalként idojaras.html néven és zárd be.
Fájl bezárása: CTRL + F4.
7. Nyisd meg az eszkozok.html fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: eszkozok, majd ENTER.
A táblázatban található három képhez adj alternatív szöveget „horgászbot” szöveggel.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmező az aktív, írd be: img.
Minden előfordulás kijelölése: ALT + ENTER.
Keresés minialkalmazás bezárása: ESC.
Ugrás a kijelölés végére: JOBBRA.
SZÓKÖZ, majd írd be: alt=horgászbot.
Megjegyzés: Az értéknél az idézőjeleket nem kell beírni, automatikusan létrejönnek.
Kilépés a többsoros kurzorból: ESC.
Mentés: CTRL + S.
8. Adj táblázatcímet a táblázathoz, a cím szövege: „Minőségi horgászbotok kedvező áron!” legyen.
Megjegyzés: A címet a table nyitójelölő után kell beírni.
Jelöld ki a feladatleírásból az idézőjelek közötti 
Minőségi horgászbotok kedvező áron! 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 sor végére: END.
Ú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 kijelölt szöveget: CTRL + V.
Mentés: CTRL + S.
Mentsd el és zárd be az eszkozok.html fájlt.
Fájl bezárása: CTRL + F4.
9. Nyisd meg az informacio.html fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: informacio, majd ENTER.
A kategoria nevű mező paramétereit módosítsd úgy, hogy a mező mindhárom értéke látszódjon.
Megjegyzés: Ez egy select mező.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: select.
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=3.
Megjegyzés: Az értéknél az idézőjeleket nem kell beírni, automatikusan létrejönnek.
Mentés: CTRL + S.
Alapértelmezetten az „egyéb kérdés” érték legyen bejelölt állapotban.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: egyéb kérdés.
Keresés minialkalmazás bezárása: ESC.
BALRA kétszer, ekkor a kurzor a nyitó jelölőn belül van.
SZÓKÖZ, majd írd be: selected.
Mentés: CTRL + S.
10. Módosítsd az „Üzenet” melletti mezőt úgy, hogy egysoros helyett többsoros beviteli mező legyen. A mező sorainak száma 7, a soronkénti karakterszám pedig 50 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 következő sorra.
Ugrás a sor elejére: HOME.
Input elem kijelölése: ALT + O.
1. megoldás: 
Írd be az Emmet rövidítést: textarea, majd TAB.
A name értéknél van a kurzor, írd be: uzenet.
JOBBRA, SZÓKÖZ, majd írd be: rows=7.
JOBBRA, SZÓKÖZ, majd írd be: cols=50.
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=7 rows=50], majd TAB.
Mentés: CTRL + S.
11. Módosíts a nyomógomb típusát submit típusúra, a gomb felirata „üzenet küldése” legyen.
Megjegyzés: A gomb jelenleg button típusú.
Jelöld ki a feladatleírásból az idézőjelek közötti 
üzenet küldése szöveget, majd másold: CTRL + C.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: button.
Keresés minialkalmazás bezárása: ESC.
Írd át a kijelölést: submit.
ALT + N, a value értékig, illeszd be a kimásolt szöveget. CTRL + V.
Mentés: CTRL + S.
Mentsd el és zárd be az informacio.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 menu azonosítójú li elemekre a lista jelölője ne jelenjen meg.
Ugrás a dokumentum végére: CTRL + END.
Új sor nyitása: ENTER.
Írd be: #menu li{, 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: list:n, majd TAB. 
Vagy írd be: list-style-type: none;
Mentés: CTRL + S.
13. A caption jelölők betű stílusa legyen félkövér, a betűköz pedig 0.4em méretű.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: caption{.
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: fw:b, majd TAB. 
Vagy írd be: font-weight: bold;
Új sor nyitása: ENTER.
Írd be az Emmet rövidítést: lts:0.4, majd TAB. 
Vagy írd be: letter-spacing: 0.4em;
Mentés: CTRL + S.
14. A td elemeknek adj alsó keretet, amely 1 pixel vastag, pontozott mintázatú és #666 színű.
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: bb:1-dotted-#666, majd TAB.
Vagy írd be: border-bottom: 1px dotted #666;
Mentés: CTRL + S.
15. A legend elemek betűmérete 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: 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: fz:1.2, majd TAB. 
Vagy írd be: font-size:1.2em;
Mentés: CTRL + S.
16. Állíts be háttérszínt a submit típusú nyomógombokra, a szín #ccf legyen.
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:#ccf, majd TAB. 
Vagy írd be: background-color: #ccf;
Mentés: CTRL + S.
Mentsd é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