Egészítsd ki a fájlt a hiányzó body nyitó és záró jelölőivel. Rendeld a fájlhoz a styles.css stíluslap állományt.
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.
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.
5. A „Tanfolyamok” címsor alatti sorokat alakítsd számozatlan felsorolás stílusúvá.
Megjegyzés: A felsorolás egy div-ben található. A listaelemek előtt kötőjel és szóköz van, ezt használom az együttes kijelölésre.
A listaelemek sortöréssel két vagy három sorban vannak, de mindegyik / óra szövegre végződik, a végén egy ponttal.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: <h1>Tanfolyamok.
Keresés minialkalmazás bezárása: ESC.
LE a következő sorra.
Div tartalmának kijelölése: ALT + O.
Keresés minialkalmazás megnyitása: CTRL + F.
Keresés csak a kijelölésben: ALT + L.
A Find szerkesztőmezőbe írd be: KÖTŐJEL SZÓKÖZ (írásjelekkel).
Összes kijelölése: ALT + ENTER.
Keresés minialkalmazás bezárása: ESC.
Kijelölések átírása:<li, (a záró >-jel automatikusan létrejön!).
Kilépés a többsoros kurzorból: ESC.
Keresés minialkalmazás megnyitása: CTRL + F.
Find szerkesztőmezőbe írd be: / óra.
Összes kijelölése: ALT + ENTER.
Keresés minialkalmazás bezárása: ESC.
Ugrás a kijelölések végére: JOBBRA.
Záró li jelölő beírásához elegendő a < jelet beírnod, majd üss egy ENTER-t, automatikusan kiegészül.
Kilépés a többsoros kurzorból: ESC.
Megjegyzés: A diven belül a felsoroláson kívül egy címsor is található, így nem jelölhető ki csak a felsorolás.
Ha a div teljes tartalma köré teszem a számozatlan felsorolás jelölőt, az nem zavarja a felsorolás megjelenését!
Div tartalmának kijelölése: ALT + O.
A kijelölés köré ul jelölők beillesztése:
Emmet: Becsomagolás rövidítéssel: CTRL + B, R.
A szerkesztőmezőbe írd be: ul, majd ENTER.
Mentés: CTRL + S.
Mentsd el a fájlt weboldalként tanfolyamok.html néven és zárd be.
Fájl bezárása: CTRL + F4.
6. Nyisd meg az oktatok.html fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: oktatok, majd ENTER.
Az itt található táblázat első sorát alakítsd fejléc cella típusúvá.
Megjegyzés: A fejléc cellák a thead jelölőn belüli sorban találhatók.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: <thead.
Keresés minialkalmazás bezárása: ESC.
Thead elem tartalmának kijelölése: ALT + O.
Csere minialkalmazás megnyitása: CTRL + H.
Csere csak a kijelölésben: ALT + L.
A Find szerkesztőmező az aktív, í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.
Mentés: CTRL + S.
7. A táblázatban található képek megjelenési szélességeit állítsd 150 pixel méretűre.
Megjegyzés: Az oldalon két kép van, egymás alatt.
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ölés végére: JOBBRA.
SZÓKÖZ, majd írd be: width=150.
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 oktatok.html fájlt.
Fájl bezárása: CTRL + F4.
8. Nyisd meg a kapcsolat.html fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: kapcsolat, majd ENTER.
Az űrlap „Email” feliratához tartozó mező neve „email”, a maximálisan beírható karakterek száma 40 legyen.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: Email.
Keresés minialkalmazás bezárása: ESC.
LE, ez az input elem.
Input elem kijelölése: ALT + O.
Ugrás a kijelölés végére: JOBBRA.
BALRA, SZÓKÖZ, majd írd be: name=email, JOBBRA, SZÓKÖZ, majd írd maxlength=40.
Megjegyzés: Az értéknél az idézőjeleket nem kell beírni, automatikusan létrejönnek.
Mentés: CTRL + S.
9. A „Tanfolyam” rádiógombjai melletti feliratokat alakítsd címke (label) típusúvá.
Megjegyzés: A három rádiógomb id értékére szükség lesz. A rádiógombok name értéke: tanfolyam.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: tanfolyam", (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.
Multi kurzor a sorok elé: CTRL + ALT + NUMPAD2, kétszer.
Megjegyzés: A multi kurzorral egyszerre módosítható mind a három sor.
ALT + N, az id értékiekig, értékek másolása: CTRL + C.
Ugrás a feliratokhoz: CTRL + NUMPAD6.
Feliratok kijelölése: NUMPAD6.
HTML Tag Wrap: ALT + W.
Írd: label for=,
Megjegyzés: Az értéknél az idézőjeleket nem kell beírni, automatikusan létrejönnek.
Illeszd be a kimásolt azonosítókat: CTRL + V.
Mentés: CTRL + S.
10. A többsoros beviteli mező sorainak számát állítsd 5-re, a soron belüli karakterek számát 40-re. Alapértelmezetten a mezőbe „Üzenj valamit!” szöveg legyen beírva.
Jelöld ki a feladatleírásból az idézőjelek közötti
Üzenj valamit! 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.
BALRA, kétszer, ekkor a kurzor a nyitó jelölőben van.
SZÓKÖZ, majd írd be: cols=40, JOBBRA, SZÓKÖZ, majd í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. A nyomógomb típusa legyen submit, a gomb felirata pedig „üzenet küldése”.
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, írd át: üzenet küldése.
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:
A menu azonosítójú elemen belüli hivatkozás jelölő elemekre, illetve azok link és visited állapotára alkalmazd a következő szabályokat: a betűszín legyen #000, a szöveg pedig ne legyen aláhúzva.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: #menu 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:#000, majd TAB.
Vagy írd be: color: #000;
Ú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 szoveg azonosítójú elemen belüli h1 elemek szövegelrendezése középre történjen, a betű méretét pedig az alap betűméret 1,6-szorosában határozd meg.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: #szoveg h1{.
Keresés minialkalmazás bezárása: ESC.
LE a text-align sorig.
Sor kijelölése: CTRL + L.
Kijelölés felülírása Emmet rövidítéssel: ta:c, majd TAB.
Vagy írd be: text-align: center;
Új sor nyitása: ENTER.
Írd be az Emmet rövidítést: fz:1.6, majd TAB.
Vagy írd be: font-size: 1.6em;
Mentés: CTRL + S.
14. A th 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: 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: fz:1.2, majd TAB.
Vagy írd be: font-size: 1.2em;
Mentés: CTRL + S.
Megjegyzés: Jelen beállításokkal a táblázatból kilóg a szöveg!
15. A fieldset elemekre állíts be margó értékeket a következők szerint: a felső és alsó legyen 0 méretű, a bal- és jobboldali margót állítsd be úgy, hogy az elem középre rendeződjön.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: fieldset{.
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: m:0-a, majd TAB.
Vagy írd be: margin: 0 auto;
Mentés: CTRL + S.
16. A text típusú input elemek szélességének adj 300 pixel értéket.
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