8. modul – 49. 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-49, 
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.
Alakítsd félkövérré és dőltté a szövegben található „Ponta de Sagres” és az „Algarve” kifejezéseket.
Jelöld ki a feladatleírásból az idézőjelek közötti 
Ponta de Sagres 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: b>i, majd ENTER.
Jelöld ki a feladatleírásból az idézőjelek közötti 
Algarve szöveget, majd másold: CTRL + C.
Keresés minialkalmazás megnyitása: CTRL + F.
illeszd be a kimásolt szöveget: CTRL + V, és írj egy szóközt a végére.
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>i, majd ENTER.
Mentés: CTRL + S.
3. Állíts be hiperhivatkozást a „foglalja le” szövegrészre, amely mutasson a Foglalás című oldalra (foglalas.html).
Jelöld ki a feladatleírásból az idézőjelek közötti 
foglalja le 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=foglalas.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 a foglalas.html sorig, kiválasztása: ENTER.
Mentés: CTRL + S.
Állíts be hiperhivatkozást a „Lépjen velünk kapcsolatba” szövegrészre is, ez mutasson a kapcsolat.html oldalra
Jelöld ki a feladatleírásból az idézőjelek közötti 
Lépjen velünk 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.
1. megoldás:
Emmet: Becsomagolás rövidítéssel: CTRL + B, R.
A szerkesztőmezőbe írd be: a[href=kapcsolat.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 a kapcsolat.html sorig, kiválasztása: ENTER.
Mentés: CTRL + S.
4. Állítsd be az oldalon található hotel.jpg kép megjelenési magasságát 164 pixelre. Adj alternatív szöveget a képnek „Cape Hotel” értékkel.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: hotel.jpg", (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: height=164, JOBBRA, SZÓKÖZ, majd írd be: alt=Cape Hotel.
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.
5. Nyisd meg a szolg.txt fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: szolg, 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ó body nyitó és záró jelölőivel. Adj oldalcímet „Cape Hotel” értékkel.
Ugrás a dokumentum elejére: CTRL + HOME.
LE a záró head jelölőt követő sorba.
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.
Jelöld ki a feladatleírásból az idézőjelek közötti 
Cape Hotel 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ő sorba.
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.
6. A „Szolgáltatásaink” alatti sorokat alakítsd számozatlan felsorolás stílusúvá.
Megjegyzés: 9 sort kell átalakítani.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: Szolgáltatásaink.
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, nyolcszor.
Megjegyzés: A multi kurzorral egyszerre módosítható mind a kilenc 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, kilencszer.
A listasorok köré számozatlan felsorolás jelölők beszúrása:
Emmet: Becsomagolás rövidítéssel: CTRL + B, R.
A szerkesztőmezőbe írd be: ul, majd ENTER.
Mentés: CTRL + S.
7. Javítsd az oldalon található képfájl nevét, a megjelenési szélességét pedig 425 pixelben határozd meg.
Megjegyzés: A hiba az, hogy nincs a képfájlnak kiterjesztése, ennek most jpg-nek kell lennie.
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, az src értékig.
CTRL + SPACE, a listában a helyes fájlnév szerepel. Kiválasztása: ENTER.
JOBBRA, SZÓKÖZ, majd írd be: width=425.
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 szolg.html néven és zárd be.
Fájl bezárása: CTRL + F4.
8. Nyisd meg a szobak.html fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: szobak, majd ENTER.
„A fürdőszoba...” kezdetű mondat elé szúrj be egy sortörést.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: A fürdőszoba.
Keresés minialkalmazás bezárása: ESC.
Ugrás a kijelölés elejére: BALRA.
Írd be az Emmet rövidítést: br, majd TAB.
Mentés: CTRL + S.
„Az alábbi táblázat...” kezdetű mondat pedig kerüljön új bekezdésbe.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: Az alábbi.
Keresés minialkalmazás bezárása: ESC.
Ugrás a kijelölés elejére: BALRA.
Írd be: </p><p>.
Megjegyzés: A záró bekezdés jelölő esetén a perjel után kiegészül a jelölő. 
A nyitó bekezdés jelölő beírásakor pedig kiegészül a záró bekezdés jelölővel, ezt vissza kell vonni: CTRL + Z.
Mentés: CTRL + S.
9. Az oldalon lévő táblázat első sorát és első oszlopát alakítsd fejléc cella típusúvá.
Megjegyzés: Az első oszlopban egy kötőjel található, előtte és mögötte egy-egy szóközzel.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmező az aktív, írd be: <table>.
Keresés minialkalmazás bezárása: ESC.
LE, kétszer, a nyitó táblázatsor jelölőig.
Ugrás a kijelölés végére: JOBBRA.
Táblázatsor tartalmának kijelölése: ALT + O.
Csere minialkalmazás megnyitása: CTRL + H.
Keresés csak a kijelölésben: ALT + L.
A Find szerkesztőmezőbe írd be: td>.
TAB a Replace szerkesztőmezőig, írd be: th>.
Összes cseréje: CTRL + ALT + ENTER.
Csere minialkalmazás bezárása: ESC.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmező az aktív, írd be: SZÓKÖZ KÖTŐJEL SZÓKÖZ, (természetesen írásjelekkel).
Összes kijelölése: ALT + ENTER.
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: th, majd ENTER.
Mentés: CTRL + S.
Mentsd el és zárd be az szobak.html fájlt.
Fájl bezárása: CTRL + F4.
10. Nyisd meg a foglalas.html fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: foglalas, majd ENTER.
A „Hotel” felirathoz tartozó űrlapelemet módosítsd úgy, hogy minden értéke látszódjon, alapértelmezésben pedig a „Cape Hotel” legyen kiválasztott állapotban.
Megjegyzés: Összesen 4 elem van a listában. A űrlapelem name értéke: hotel.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: name="hotel", (az idézőjeleket 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=4.
Megjegyzés: Az értéknél az idézőjeleket nem kell beírni, automatikusan létrejönnek.
LE, kétszer, a Cape Hotel sorig.
Visszalépés a nyitó option jelölőbe: ALT + O, majd BALRA, kétszer.
SZÓKÖZ, és írd be: selected.
Mentés: CTRL + S.
11. A „Különleges kérések” felirathoz tartozó beviteli mező legyen többsoros, sorainak száma 5, a soron belüli karakterek száma pedig 50 legyen.
Megjegyzés: A beviteli mező name értéke: keres.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: Különleges.
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: keres.
JOBBRA, SZÓKÖZ, majd írd be: cols=50, JOBBRA, SZÓKÖZ majd írd rows=5.
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=keres cols=5 rows=50], majd TAB.
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 h3 elemekre a betűméretet határozd meg 24 pixelben, a szövegigazítás pedig középre történjen.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: #tartalom h3{.
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:24, majd TAB. 
Vagy írd be: font-size: 24px;
Új sor nyitása: ENTER.
Í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 elemekhez rendelj 5 pixel méretű felső és alsó, valamint 10 pixel bal- és jobboldali bélés (padding) értékeket.
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: p:5-10, majd TAB. 
Vagy írd be: padding: 5px 10px;
Mentés: CTRL + S.
14. A td elemeknél a szöveg jobbra igazodjon.
Ugrás a dokumentum végére: CTRL + END.
Új sor nyitása: ENTER.
Írd be: td{, 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:r, majd TAB. 
Vagy írd be: text-align: right;
Mentés: CTRL + S.
15. A caption elemekben a betűvastagság legyen félkövér.
Ugrás a dokumentum végére: CTRL + END.
Új sor nyitása: ENTER.
Írd be: caption{, 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: fw:b, majd TAB. 
Vagy írd be: font-weight: bold;
Mentés: CTRL + S.
16. A submit típusú nyomógombok szélességét állítsd 80 pixel méretűre.
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: w:80, majd TAB. 
Vagy írd be: width: 80px;
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