8. modul – 48. 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-48, 
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.
Vond össze a „Csúcs, hogy...” kezdetű bekezdést az azt követő bekezdéssel, a „Legutóbbi kalandozásom...” mondat elé szúrj be egy sortörést.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: Csúcs.
Keresés minialkalmazás bezárása: ESC.
Bekezdés tartalmának kijelölése: ALT + O.
Ugrás a kijelölés végére: JOBBRA.
Záró bekezdés jelölő kijelölése: SHIFT + END,
írd át: <br>.
LE a következő sorra.
Ugrás a sor elejére: HOME.
Nyitó bekezdés jelölő kijelölése: SHIFT + JOBBRA, háromszor.
Nyitó bekezdés jelölő eltávolítása: DELETE.
Mentés: CTRL + S.
3. Állíts be hiperhivatkozást az oldalon szereplő „Párizs” szó mindkét előfordulására, a hivatkozás mutasson a Párizs című 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ó, 
a keresőkifejezés végén üss egy SZÓKÖZT!
Keresés minialkalmazás bezárása: ESC.
Minden előfordulás kijelölése: CTRL + F2.
Emmet: Becsomagolás rövidítéssel: CTRL + B, R.
A szerkesztőmezőbe írd be: a[href=parizs.html].
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 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.
Rendelj a fájlhoz a styles.css stíluslap állományt. Adj oldalcímet „Jani utazós web site-ja” szöveggel.
Megjegyzés: A címnek a head záró jelölő előtt kell lennie.
Jelöld ki a feladatleírásból az idézőjelek közötti 
Jani utazós web site-ja szöveget, majd másold: CTRL + C.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: /head.
Keresés minialkalmazás bezárása: ESC.
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: 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. 
Ú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 címet: CTRL + V.
Mentés: CTRL + S.
5. Alakítsd félkövérré a szövegben szereplő „Rómát” szót, valamint dőltté a „Le jardin” kifejezést.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: Rómát.
Keresés minialkalmazás bezárása: ESC.
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.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: Le jardin.
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.
Mentés: CTRL + S.
6. Az oldalon lévő táblázat első oszlopát módosítsd fejléc cella típusúvá.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: <tr>.
Keresés minialkalmazás bezárása: ESC.
Összes kijelölése: CTRL + F2.
LE, ezek a cellák tartoznak az első oszlophoz.
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: th, majd ENTER.
Mentés: CTRL + S.
7. Cseréld meg a táblázat két sorát, felül legyenek a képek és alatta a szöveg.
Megjegyzés: A kurzor az előző feladat után az első fejléc cella végén van.
Egy táblázatsor 6 fizikai sorból áll.
Táblázatsor kijelölése: ALT + O.
Cellasorok mozgatása: ALT + LE, hatszor.
Mentés: CTRL + S.
8. Adj alternatív szöveget a táblázatban található képeknek, amely ugyanaz legyen, mint a képekhez tartozó helyszín szövege.
9. A képek megjelenési magasságát egységesen 190 pixelben határozd meg.
Megjegyzés: 3 kép van az oldalon.
Helyszínnevek kijelölése: 
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: Helyszín.
Keresés minialkalmazás bezárása: ESC.
LE az első helyszín sorába.
Multi kurzor a sorok elé: CTRL + ALT + NUMPAD2, kétszer.
Nevek kijelölése: ALT + O.
Nevek másolása: CTRL + C.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: img.
Összes 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=, illeszd be a kimásolt neveket: CTRL + V.
Megjegyzés: Az értéknél az idézőjeleket nem kell beírni, automatikusan létrejönnek.
JOBBRA, SZÓKÖZ, majd írd be: width=190.
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.
10. Nyisd meg a kapcsolat.html fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: kapcsolat, majd ENTER.
Módosítsd az „Üzenet” felirathoz tartozó beviteli mezőt többsorossá, a sorok száma 5, a soron belüli karakterek száma pedig 45 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 beviteli mező sorába.
Input elem kijelölése: ALT + O.
1. megoldás:
Írd be az Emmet rövidítést: textarea, majd TAB.
A kurzor a name értéknél van, írd be: uzenet.
JOBBRA, SZÓKÖZ, majd írd be: cols=55, JOBBRA, SZÓKÖZ, majd írd be: rows=8.
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=8 rows=55], majd TAB.
Mentés: CTRL + S.
11. A nyomógomb mellé vegyél fel egy másik, reset típusú nyomógombot is, amelynek felirata „üzenet törlése” legyen.
Jelöld ki a feladatleírásból az idézőjelek közötti 
üzenet törlése szöveget, majd másold: CTRL + C.
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 a value értéknél van, illeszd be a kimásolt szöveget: CTRL + V.
Mentés: CTRL + S.
Mentsd el és zárd be az 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:
Az oldal azonosítójú elemen belüli hivatkozás jelölő elemekre, és azok link és visited állapotaira alkalmazd a következő szabályokat: a szöveg ne legyen aláhúzott, a betű színének pedig #ffd értéket adj.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: #oldal a:visited{.
Keresés minialkalmazás bezárása: ESC.
LE a color sorig.
Sor kijelölése: CTRL + L.
Kijelölés felülírása Emmet rövidítéssel: c:#ffd, majd TAB. 
Vagy írd be: color: #ffd;
Új sor nyitása: ENTER.
Írd be az Emmet rövidítést: td:n, majd TAB. 
Vagy írd be: text-decoration: none;
Mentés: CTRL + S.
13. A table elemek szélessége legyen 100%.
Ugrás a dokumentum végére: CTRL + END.
Új sor nyitása: ENTER.
Írd be: table{, 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:100%, majd TAB. 
Vagy írd be: width: 100%;
Mentés: CTRL + S.
14. A th és td elemekre a szövegigazítás vízszintesen középre történjen, a függőleges igazítás pedig felülre.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: th, 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: ta:c, majd TAB. 
Vagy írd be: text-align: center;
Új sor nyitása: ENTER.
Írd be az Emmet rövidítést: va:t, majd TAB. 
Vagy írd be: vertical-align: top;
Mentés: CTRL + S.
15. A textarea elemekre határozz meg #f6f6f6 értékű háttérszínt.
Ugrás a dokumentum végére: CTRL + END.
Új sor nyitása: ENTER.
Írd be: textarea{, 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:#f6f6f6, majd TAB. 
Vagy írd be: background-color: #f6f6f6;
Mentés: CTRL + S.
16. A text típusú input elemek szélességét állítsd 300 pixelre.
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.
Ments é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