8. modul – 7. 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-7, 
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.
Módosítsd a „Nyitvatartási idő” alatti 7 sor jelölőjét úgy, hogy számozatlan felsorolás stílusú legyen, minden egyes sor egy felsorolás.
Megjegyzés: A formázandó hét sor blockquote jelölők között van.
A sorok végén sortörő jelölők vannak, kivéve az utolsó sort.
Jelöld ki a feladatleírásból az idézőjelek közötti 
Nyitvatartási idő 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.
LE, egy sorral.
Blockquote tartalmának kijelölése: ALT + O.
Blockquote jelölő eltávolítása: CTRL + E, E.
Emmet: Becsomagolás rövidítéssel: CTRL + B, R.
A szerkesztőmezőbe írd be: ul, majd ENTER.
Sortörések kijelölése:
FEL az előző sorra.
Felsorolás tartalmának kijelölése: ALT + O.
Keresés minialkalmazás megnyitása: CTRL + F.
Keresés csak a kijelölésben: ALT + L.
TAB a Find szerkesztőmezőig, írd be: </br>.
Megjegyzés: A munkafájlban még a régi szabály szerint van a sortörőjel írva!
Összes kijelölése: ALT + ENTER.
Keresés ablak bezárása: ESC.
Sortörések törlése: DELETE.
Ugrás a sorok elejére: HOME.
Többsoros kurzor bővítése az utolsó sorra is: CTRL + ALT + NUMPAD2.
Emmet: Becsomagolás rövidítéssel: CTRL + B, R.
A szerkesztőmezőbe írd be: li, majd ENTER.
Mentés: CTRL + S.
Az utolsó, „Szintén új hír” kezdetű szöveg jelölőjét módosítsd egyszerű bekezdés típusúra.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: szintén.
Keresés minialkalmazás bezárása: ESC.
Ugrás a kijelölés elejére: BALRA.
Emmet: Jelölő eltávolítása: CTRL + E, E.
Emmet: Becsomagolás rövidítéssel: CTRL + B, R.
A szerkesztőmezőbe írd be: p, majd ENTER.
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 az elojegyzes.html fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: elojegyzes, majd ENTER.
Tedd félkövérré a „10 multimédiás PC-vel” szövegrészt.
Ugyanebben a bekezdésben tedd dőltté az „internet” szót.
Jelöld ki a feladatleírásból az idézőjelek közötti 
10 multimédiás PC-vel 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, 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: internet.
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.
4. Szúrj be egy képet a „Könyvtárunk” kezdetű bekezdés elejére a következő paraméterekkel: A kép fájlneve pc.jpg, az alternatív szöveg ehhez legyen „PC”.
Adj továbbá osztály jellemzőt a képhez belso értékkel.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: könyvtárunk.
Keresés minialkalmazás bezárása: ESC.
Ugrás a sor elejére: HOME.
BALRA, mivel egy szóköznek lennie kell az Emmet kód kibontásakor.
Írd be: img, majd TAB.
A kurzor az src értéknél van, írd be: pc.jpg.
Ugrás az alt értékhez: ALT + N, JOBBRA, majd BALRA, írd be: PC.
JOBBRA, SZÓKÖZ, majd írd be: class=belso.
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: img[src=pc.jpg alt=PC class=belso], majd TAB.
Mentés: CTRL + S.
Mentsd el és zárd be az elojegyzes.html fájlt.
Fájl bezárása: CTRL + F4.
5. Nyisd meg az olvaso.txt fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: olvaso, 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.
Szúrj be a karakterkódolásról szóló meta elemet, értéke legyen utf-8.
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.
Egészítsd ki a fájlt a weboldal címét beállító jelölővel, a weboldal címe „Könyvtár” legyen.
Megjegyzés: A címet a záró head jelölő előtti sorba kell írni.
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 írd be: Könyvtár.
Mentés: CTRL + S.
6. A „Hamarosan...” helyébe ezt a mondatot írd: „Örömmel értesítjük Olvasóinkat, hogy a megváltozott igényekhez alkalmazkodva új nyitva tartási idő lépett érvénybe idén március 1-jétől.”
Jelöld ki a feladatleírásból az idézőjelek közötti 
Örömmel értesítjük Olvasóinkat, hogy a megváltozott igényekhez alkalmazkodva új nyitva tartási idő lépett érvénybe idén március 1-jétől. szöveget, majd másold: CTRL + C.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: Hamarosan..., (a három pontot is írd be!).
Keresés minialkalmazás bezárása: ESC.
Illeszd be a kimásolt szöveget: CTRL + V.
Mentés: CTRL + S.
7. Állíts be hiperhivatkozást az „itt” szóra, amely mutasson a kezdőoldalra (index.html).
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: itt.
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=index.html], majd ENTER.
Vagy: 
HTML Tag Wrap: ALT + W.
Írd be: a href=.
CTRL + SPACE, LE a index.html sorig, kiválasztása: ENTER.
Mentés: CTRL + S.
Valamint állíts be hiperhivatkozástaz „innen” szóra is, ez pedig a katalogus.html oldalra mutasson.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: innen.
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=katalogus.html], majd ENTER.
Vagy: 
HTML Tag Wrap: ALT + W.
Írd be: a href=.
CTRL + SPACE, LE a katalogus.html sorig, kiválasztása: ENTER.
Mentés: CTRL + S.
Mentsd el a fájlt weboldalként olvaso.html néven és zárd be.
Fájl bezárása: CTRL + F4.
8. Nyisd meg a katalogus.html fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: katalogus, majd ENTER.
Egyesítsd a táblázat középső oszlopában egymás alatt álló „kémia” szövegű cellákat.
A kémia cella mellett álló üres cellában legyen a következő szöveg: „szervetlen kémia”.
Megjegyzés: Az első kémia cellába kell írni az oszlopösszevonást, a másodikat törölni kell.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: td>kémia.
Keresés minialkalmazás bezárása: ESC.
Ugrás a kijelölt szöveg elejére: BALRA.
Ugrás a jelölőnév mögé: CTRL + NUMPAD6.
SZÓKÖZ, majd írd be: rowspan=2.
Megjegyzés: Az értéknél az idézőjeleket nem kell beírni, automatikusan létrejönnek.
Keresés ismétlése: F3.
Ugrás a sor elejére: HOME.
Sor kijelölése: CTRL + L.
Sor törlése: DELETE.
Lépj az üres cella jelölők közé, ALT + I, kétszer, és írd be: szervetlen kémia.
Mentés: CTRL + S.
9. A „jog” szöveget tartalmazó cella tartalmát módosítsd „jogtudományok”-ra.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: jog.
Keresés minialkalmazás bezárása: ESC.
Ugrás a kijelölt szöveg végére: JOBBRA.
Írd be:tudományok.
Mentés: CTRL + S.
A társadalom tudományok és a művészetek között van egy üres sor. E sor celláit töröld ki.
Megjegyzés: Ezek az „üres” cellák nem törhető szóköz kódot tartalmaznak.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: nbsp.
Keresés minialkalmazás bezárása: ESC.
Sor kijelölése: CTRL + L.
Sor törlése: DELETE.
Mentés: CTRL + S.
Mentsd el és zárd be a katalogus.html fájlt.
Fájl bezárása: CTRL + F4.
10. Nyisd meg a hosszabbitas.html fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: hosszabbitas, majd ENTER.
Adj az űrlaphoz egy új szöveges beviteli mezőt tartalmazó űrlapelemet a Név és A dokumentum katalógusszáma közé a következő paraméterekkel: A felirat: Olvasójegy azonosító, az űrlapelem neve: ojaz.
Megjegyzés: A felirat és az input mező is egy bekezdésben van.
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, kétszer, az üres sorba.
Írd be input, majd TAB, JOBBRA, SZÓKÖZ, majd írd be: name=ojaz,
JOBBRA, SZÓKÖZ, majd írd be: value=Ovasójegy azonosító.
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: p>input:text[name=ojaz value="Ovasójegy azonosító"], majd TAB.
Mentés: CTRL + S.
11. Módosítsd a „Hosszabbítás kérés ideje” feliratú űrlapelemet a következők szerint: látszódjon a lista mind az öt sora, alapértelmezetten legyen a 3 nap kiválasztott állapotban.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: select.
Keresés minialkalmazás bezárása: ESC.
JOBBRA, SZÓKÖZ, majd írd be: size=5.
Megjegyzés: Az értéknél az idézőjeleket nem kell beírni, automatikusan létrejönnek.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: 3 nap.
Keresés minialkalmazás bezárása: ESC.
BALRA, kétszer, (ekkor a kurzor a nyitó jelölőben van), SZÓKÖZ, majd írd be: selected.
Mentés: CTRL + S.
Mentsd el és zárd be a hosszabbitas.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ú elemen belüli li elemekre a keret vastagsága legyen 1 pixel, mintázata pontozott, a színe pedig #c57658.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: #menu li{.
Keresés minialkalmazás bezárása: ESC.
LE a border sorig.
Sor kijelölése: CTRL + L.
Kijelölés felülírása Emmet rövidítéssel: bd:1-dt-#c57658, majd TAB.
Vagy írd be: border: 1px dotted #c57658;
Mentés: CTRL + S.
13. A cím azonosítójú elemen belüli h1 elemeknél a betűméretet állítsd 36 pixelre, a betűközt pedig 0.3em értékre.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: #cim h1{.
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:36, majd TAB.
Vagy írd be: font-size: 36px;
Új sor nyitása: ENTER.
Írd be az Emmet rövidítést: lts:0.3e, majd TAB.
Vagy írd be: letter-spacing: 0.3em;
Mentés: CTRL + S.
14. A táblázat th elemeire a háttérszín legyen #006, a betűszín pedig #ff9.
Ugrás a dokumentum végére: CTRL + END.
Írd be: th{, 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:#006, majd TAB. 
Vagy írd be: background-color: #006;
Új sor nyitása: ENTER.
írd be az Emmet rövidítést: c:#ff9, majd TAB. 
Vagy írd be: color: #ff9;
Mentés: CTRL + S.
15. A táblázat th és td elemeinek bélés (padding) méretét határozd meg a következők szerint: felső és alsó legyen 5 pixel, a bal- és jobboldali pedig 20 pixel.
Ugrás a dokumentum végére: CTRL + END.
Írd be: td, th{, 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: p:5-20, majd TAB.
Vagy írd be: padding: 5px 20px;
Mentés: CTRL + S.
16. Az egysoros szöveges beviteli mezők szélessége legyen 200 pixel, a háttérszíne pedig: #faa.
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:200, majd TAB. 
Vagy írd be: width: 200px;
Új sor nyitása: ENTER.
Írd be az Emmet rövidítést: bgc:#faa, majd TAB. 
Vagy írd be: background-color: #faa;
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