8. modul – 6. 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-6, 
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 második bekezdésben két helyen található „Párizs” szóra, amelyek mutassanak a parizs.html oldalra.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: Párizs SZÓKÖZ.
Megjegyzés: Azért, hogy a találatok között ne legyen a menüsorban lévő Párizs szó is, 
a keresőkifejezés végén üss egy SZÓKÖZT!
Összes előfordulás kijelölése: ALT + ENTER.
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=parizs.html], majd ENTER.
Mentés: CTRL + S.
Alakítsd hiperhivatkozássá a „lépj velem kapcsolatba” szövegrészt is, ez pedig mutasson a Kapcsolat (kapcsolat.html) című oldalra.
Jelöld ki a feladatleírásból az idézőjelek közötti 
lépj velem kapcsolatba 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=kapcsolat.html], majd ENTER.
Vagy:
HTML Tag Wrap: ALT + W.
Írd a kurzor pozíciójába: a href=kapcsolat.html.
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 index.html fájlt.
Fájl bezárása: CTRL + F4.

3. Nyisd meg a london.html fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: london, majd ENTER.
Szúrj be egy horgonyt (könyvjelzőt) top néven közvetlenül a body nyitó jelölő alá.
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: body>.
Keresés minialkalmazás bezárása: ESC.
Ugrás a kijelölés végére: JOBBRA.
LE a következő sorra.
HTML Tag Wrap: ALT + W.
Írd be: a id=top.
Megjegyzés: Az értéknél az idézőjeleket nem kell beírni, automatikusan létrejönnek.
Mentés: CTRL + S.
Alakítsd hiperhivatkozássá az oldal alján található „Vissza a lap tetejére” szöveget, a hivatkozás mutasson az oldal top nevű könyvjelzőjére.
Jelöld ki a feladatleírásból az idézőjelek közötti 
Vissza a lap tetejére 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=#top], majd ENTER.
2. megoldás:
HTML Tag Wrap: ALT + W.
Írd a kurzor pozíciójába: a href=#top.
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 a london.html fájlt.
Fájl bezárása: CTRL + F4.
4. Nyisd meg a parizs.txt fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: parizs, 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 és body nyitó és záró jelölőivel.
Ugrás a dokumentum elejére: CTRL + HOME.
LE a nyitó html jelölőt követő sorig.
Ugrás a sor elejére: HOME.
A head részbe tartozó elemek kijelölése: CTRL + L, háromszor.
A kijelölt terület köré head jelölő beillesztése:
Emmet: Becsomagolás rövidítéssel: CTRL + B, R.
A szerkesztőmezőbe írd be: head, majd ENTER.
A kurzor a head záró jelölő után van.
Kijelölés a dokumentum végéig: CTRL + SHIFT + END.
A html záró jelölő visszavonása a kijelölésből: SHIFT + HOME.
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.
Mentés: CTRL + S.
5. A képek és a képaláírások nem passzolnak össze. Tedd a helyére a képaláírásokat, hogy a megfelelő képek alá kerüljenek.
Megjegyzés: Az oldalon 3 kép van. Rákeresünk az img jelölőkre sorban, az src tulajdonságban lévő név alapján kell a módosításokat elvégezni.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: img.
Keresés minialkalmazás bezárása: ESC.
ALT + N, hallgasd meg a képfájl nevét (arcdetriomphe.jpg), tehát ez lesz a Diadalív.
ALT + N, kétszer, majd JOBBRA kétszer, amíg a Notre Dame szöveg elejére érsz.
Szöveg kijelölése: NUMPAD6, háromszor, írd át: A Diadalív.
Keresés ismétlése: F3.
ALT + N, hallgasd meg a képfájl nevét (eifle2.jpg), tehát ez lesz az Eiffel-torony.
ALT + N, kétszer, majd JOBBRA kétszer, amíg A Diadalív szöveg elejére érsz.
Szöveg kijelölése: NUMPAD6, háromszor, írd át: Az Eiffel-torony.
Keresés ismétlése: F3.
ALT + N, hallgasd meg a képfájl nevét (notre_dame.jpg), tehát ez lesz a Notre Dame.
ALT + N, kétszer, majd JOBBRA kétszer, amíg Az Eiffel-torony szöveg elejére érsz.
Szöveg kijelölése: NUMPAD6, négyszer, írd át: Notre Dame.
Mentés: CTRL + S.
6. Tedd dőltté a „Le jardin” szövegrészt. Szüntesd meg a dőlt stílust a „Rómát már megörökíthetem” szövegrészről.
Jelöld ki a feladatleírásból az idézőjelek közötti 
Le jardin 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: i, majd ENTER.
Vagy: HTML Tag Wrap: ALT + W. Írd be: i.
Jelöld ki a feladatleírásból az idézőjelek közötti 
Rómát már megörökíthetem 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: Elem eltávolítása: CTRL + E, E.
Mentés: CTRL + S.
7. A galeria osztályon belüli képek magasságai legyenek 190 pixelesek.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: img.
Összes előfordulás kijelölése: ALT + ENTER.
Keresés minialkalmazás bezárása: ESC.
Ugrás a kijelölt szöveg végére: JOBBRA.
SZÓKÖZ, majd írd be: height=190.
Megjegyzés: Az értéknél az idézőjeleket nem kell beírni, automatikusan létrejönnek.
Mentés: CTRL + S.
8. A képeknek adj alternatív szöveget, ami ugyanaz legyen, mint a képhez tartozó képaláírás.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: jpg", (az 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ölt szöveg végére: JOBBRA.
ALT + N, háromszor, majd kétszer JOBBRA, ekkor a kurzor a képaláírások előtti sortörésjelölő elején lesz.
Kijelölések a kurzortól a sorvégekig: SHIFT + END (Mivel nem egyforma a szavak száma!)
A sorvégi div zárójelölők kihagyása a kijelölésből: NUMPAD4, háromszor.
Most a képaláírások vannak kijelölve.
Kijelölések másolása: CTRL + C.
A Find szerkesztőmezőbe írd be: img.
Összes előfordulás kijelölése: ALT + ENTER.
Keresés minialkalmazás bezárása: ESC.
Ugrás a kijelölt szövegek végére: JOBBRA.
SZÓKÖZ, írd be: alt=, majd illeszd be a képaláírásokat: CTRL + V.
Megjegyzés: Az értéknél az idézőjeleket nem kell beírni, automatikusan létrejönnek.
Mentés: CTRL + S.
Mentsd el a fájlt weboldalként parizs.html néven és zárd be.
Fájl bezárása: CTRL + F4.
9. Nyisd meg a kapcsolat.html fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: kapcsolat, majd ENTER.

Módosítsd a Név: szöveg alatti beviteli mező jellemzőit a következőképpen: a mező neve legyen nev, a mezőbe alapértelmezetten az „ide írja a nevét” szöveg kerüljön.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: Név.
Keresés minialkalmazás bezárása: ESC.
LE a következő sorra, ez az input elem.
ALT + N, kétszer, JOBBRA, SZÓKÖZ, és írd be: name=nev, JOBBRA, SZÓKÖZ, és írd be: value=ide írja a nevét.
Megjegyzés: Az értéknél az idézőjeleket nem kell beírni, automatikusan létrejönnek.
Mentés: CTRL + S.
10. A többsoros beviteli mező méreteit módosítsd úgy, hogy a sorainak száma 5, a soron belüli karakterek száma 50 legyen. Alapértelmezetten az „ide írja az üzenetét” szöveg jelenjen benne meg.
Jelöld ki a feladatleírásból az idézőjelek közötti 
ide írja az üzenetét 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 textarea jelölők közé: ALT + I, majd BALRA, ekkor a kurzor a nyitó jelölőben lesz.
SZÓKÖZ, és írd be: cols=50, JOBBRA, SZÓKÖZ, és írd be: rows=5.
Megjegyzés: Az értéknél az idézőjeleket nem kell beírni, automatikusan létrejönnek.
Ugrás a textarea jelölők közé: ALT + I.
Illeszd be a kimásolt szöveget: CTRL + V.
Mentés: CTRL + S.
11. Hozz létre egy submit típusú nyomógombot az űrlap alján, amelynek neve ok, a gomb felirata pedig „üzenet küldése” legyen.
Megjegyzés: A nyomógomb helyén jelenleg egy bekezdés van, benne egy nem törhető szóközzel.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be:  .
Keresés minialkalmazás bezárása: ESC.
Írd be az Emmet rövidítést: input:submit, majd TAB, a value értékhez írd be: üzenet küldése,
JOBBRA, SZÓKÖZ, majd írd be: name=ok.
Megjegyzés: Az értéknél az idézőjeleket nem kell beírni, automatikusan létrejönnek.
Vagy:
Írd be az Emmet rövidítést: input:submit[name=ok value="üzenet küldése"], majd TAB.
Mentés: CTRL + S.
Mentsd el és zárd be a kapcsolat.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:
Hozz létre egy új szabályt a hivatkozás jelölő elemekre, és azok link és visited állapotaira: a betű színe legyen #66f és ne legyen aláhúzva.
Ugrás a dokumentum végére: CTRL + END.
Írd be: a, a:link, a:visited{.
Az ENTER leütése után létrejön a záró kapcsos zárójel is a következő sorban.
Írd be az Emmet rövidítést: c:#66f, majd TAB.
Vagy írd be: color:#66f;
Új sor nyitása: ENTER.
Írd be az Emmet rövidítést: td:n, majd TAB.
Vagy írd be: kód: text-decoration: none;
Mentés: CTRL + S.
13. Adj egy új szabályt a hivatkozás jelölő elemek hover állapotára: a betű színe legyen #f66 és aláhúzott.
Ugrás a dokumentum végére: CTRL + END.
Írd be: a:hover{.
Az ENTER leütése után létrejön a záró kapcsos zárójel is a következő sorban.
Írd be az Emmet rövidítést: c:#f66, majd TAB.
Vagy írd be: color: #f66;
Új sor nyitása: ENTER.
Írd be az Emmet rövidítést: td:u, majd TAB.
Vagy írd be: text-decoration: underline;
Mentés: CTRL + S.
14. Módosítsd azt a CSS szabályt, amely azokra az elemekre vonatkozik, amelyek osztálya kep_hely és galeria egyszerre: A margó értékét állítsd 5 pixelre, és töröld a padding értékre vonatkozó értékadást.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: .kep_hely.galeria.
Keresés minialkalmazás bezárása: ESC.
LE a margin sorig.
Sor kijelölése: CTRL + L.
Kijelölése felülírása:
Írd be az Emmet rövidítést: m:5, majd TAB.
Vagy írd be: kód: margin: 5px;
LE a padding sorig.
Sor kijelölése: CTRL + L.
Sor törlése: DELETE.
Mentés: CTRL + S.
15. Szúrj be egy új szabályt: a többsoros beviteli mező háttérszíne legyen #f6f6f6, a betűszín pedig #66f.
Ugrás a dokumentum végére: CTRL + END.
Írd be: textarea{.
Az ENTER leütése után létrejön a záró kapcsos zárójel is a következő sorban.
Írd be az Emmet rövidítést: bgc:#f6f6f6, majd TAB. 
Vagy írd be: background-color: #f6f6f6;
Új sor nyitása: ENTER.
írd be az Emmet rövidítést: c:#66f, majd TAB. 
Vagy írd be: color: #66f;
Mentés: CTRL + S.
16. A submit típusú gomb feliratának betűstílusát állítsd félkövérre.
Ugrás a dokumentum végére: CTRL + END.
Írd be: input[type='submit']{, majd ENTER.
Az ENTER leütése után létrejön a záró kapcsos zárójel is a következő sorban.
Írd be az Emmet rövidítést: fw:b, majd TAB. 
Vagy írd be: font-weight: bold;
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