8. modul – 28. 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-28, 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 „Rendelési rend változás”, valamint a „Rendelési idő” sorainak típusát 2. szintű címsorrá.
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmező az aktív, írd be: Rendelési. Összes kijelölése: ALT + ENTER. Keresés párbeszédpanel bezárása: ESC. Ugrás a kijelölés elejére: BALRA. 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: h2, majd ENTER. Mentés: CTRL + S.3. A „Július 26-tól augusztus 5-ig” szövegrészt alakítsd félkövérré.
Jelöld ki a feladatleírásból az idézőjelek közötti Július 26-tól augusztus 5-ig 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. Mentés: CTRL + S.A „24 órás sürgősségi” szövegrészt pedig tedd dőltté.
Jelöld ki a feladatleírásból az idézőjelek közötti 24 órás sürgősségi 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. Mentés: CTRL + S.4. Vond össze az „Előjegyzéses kontroll” tartalmú (fejléc!)cellát a mellette lévő üres cellával. Tedd ugyanezt az „Előjegyzéses ultrahang” tartalmú cellával is.
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmező az aktív, írd be: Előjegyzéses. Összes kijelölése: ALT + ENTER. Keresés párbeszédpanel bezárása: ESC. Ugrás a kijelölések elejére: BALRA. BALRA, ekkor a kurzor a nyitó th jelölőkön belül van. SZÓKÖZ után írd be: colspan=2. Megjegyzés: Az értéknél az idézőjeleket nem kell beírni, automatikusan létrejönnek. LE a következő cella sorokra. Sorok kijelölése: CTRL + L. Sorok törlése: DELETE. Mentés: CTRL + S.5. Töröld a Felnőtt betegek szombati napra vonatkozó sorát.
Megjegyzés: Csak egy Szombat tartalmú cella van. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: Szombat. Keresés minialkalmazás bezárása: ESC. Táblázatsor kijelölése: FEL, BALRA, majd ALT + O. Táblázatsor törlése: DELETE. Mentés: CTRL + S.Szúrj be egy sort az Előjegyzéses kontroll pénteki napja alá, a cellák tartalma szombat és 8-13 óra között legyenek.
Megjegyzés: Az első péntek sort kell keresni. Ugrás a dokumentum elejére: CTRL + HOME. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: Péntek. Keresés minialkalmazás bezárása: ESC. LE, kétszer a táblázatsor záró jelölő soráig. Új sor nyitása: ENTER. Írd be az Emmet rövidítést: tr>td{Szombat}+td{8-13 óra}, majd TAB. A kód jelentése: táblázatsor felvétele, mely tartalmaz egy táblázatcellát, melynek tartalma: Szombat, és egy másik táblázatcellát, melynek tartalma: 8-13 óra között. Mentés: CTRL + S.Mentsd el és zárd be az index.html fájlt.
Fájl bezárása: CTRL + F4.6. Nyisd meg a hirlevel.txt fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: hirlevel, 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 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 html nyitó jelölőt követő sorra. Két sor kijelölése: CTRL + L, kétszer. Emmet: Becsomagolás rövidítéssel: CTRL + B, R. A szerkesztőmezőbe írd be: head, majd ENTER. FEL az előző sorra. Ugrás a sor végére: END. Új sor megnyitá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. Mentés: CTRL + S.7. Állíts be hiperhivatkozást a „címünkre” szóra, amely mutasson a „hirlevel@medim.hu?subject=feliratkozás” címre.
Jelöld ki a feladatleírásból az idézőjelek közötti hirlevel@medim.hu?subject=feliratkozás szöveget, majd másold: CTRL + C. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: címünkre. 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="mailto: , majd másold be az email-címet, és zárd az emmet kódot: "], majd ENTER. Megjegyzés: Itt az idézőjelek beírása fontos! 2. megoldás: HTML Tag Wrap: ALT + W. Írd be: a href=mailto: . Megjegyzés: Az értéknél az idézőjeleket nem kell beírni, automatikusan létrejönnek. Illeszd be a kimásolt email-címet: CTRL + V. Mentés: CTRL + S.Állíts be hiperhivatkozást az „ugyanígy teheti” szövegrészre, ez mutasson a „hirlevel@medim.hu?subject=leiratkozás” email címre.
Jelöld ki a feladatleírásból az idézőjelek közötti hirlevel@medim.hu?subject=leiratkozás szöveget, majd másold: CTRL + C. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: ugyanígy teheti. 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="mailto: , majd másold be az email-címet, és zárd az emmet kódot: "], majd ENTER. Megjegyzés: Itt az idézőjelek beírása fontos! 2. megoldás: HTML Tag Wrap: ALT + W. Írd be: a href=mailto: . Megjegyzés: Az értéknél az idézőjeleket nem kell beírni, automatikusan létrejönnek. Illeszd be a kimásolt email-címet: CTRL + V. Mentés: CTRL + S.8. Javítsd a h1 címsorba illesztett képfájl nevét. A kép megjelenési szélessége 150 pixel legyen.
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. Ugrás az src értékre: ALT + N, kétszer. CTRL + SZÓKÖZ leütésére, megjelenik a helyes fájlnév, kiválasztása: ENTER. 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 a fájlt weboldalként hirlevel.html néven és zárd be.
Fájl bezárása: CTRL + F4.9. Nyissa meg a szabadsagok.html fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: szabadsagok, majd ENTER.A következő napokon a rendelés szünetel sor alatti felsorolást alakítsd definíciós listává.
A kivitelezhető a megoldás: A bekezdés jelölőket dt jelölőkre, az li jelölőket dd jelölőkre kell cserélni. Az ul jelölőket törölni kell. A div tartalmát kijelölve dl jelölők közé kell csomagolni. Jelöld ki a feladatleírásból az idézőjelek közötti A következő napokon a rendelés szünetel szöveget, majd másold: CTRL + C. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmező az aktív, illeszd be a kijelölést: CTRL + V. Keresés minialkalmazás bezárása: ESC. Ugrás a kijelölés végére: JOBBRA. Div elem tartalmának kijelölése: ALT + O. Hónapok kijelölése, mindegyik s:-ra végződik. Keresés minialkalmazás megnyitása: CTRL + F. Keresés csak a kijelölésben: ALT + L. A Find szerkesztőmezőbe írd be: s:, (írásjellel!). Összes kijelölése: ALT + ENTER. Keresés minialkalmazás bezárása: ESC. Ugrás a kijelölések 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: dt, majd ENTER. LE a következő sorba, ez az első ul nyitó jelölő. Összes előfordulás kijelölése: CTRL + F2. Sorok kijelölése: CTRL + L. Sorok törlése: DELETE. Div elem 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: li>. TAB a Replace mezőig, írd be: dd>. Összes cseréje: CTRL + ALT + ENTER. Csere minialkalmazás bezárása: ESC. Ugrás a(z első dd) sor elejére: HOME. Div elem tartalmának kijelölése: ALT + O. Emmet: Becsomagolás rövidítéssel: CTRL + B, R. A szerkesztőmezőbe írd be: dl, majd ENTER. Mentés: CTRL + S.Mentsd el és zárd be a szabadságok.html fájlt.
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.11. A form jelölőn belüli részt tedd mezőcsoportba (fieldset).
Jelöld ki a feladatleírásból az idézőjelek közötti Töltse ki az alábbi űrlapot! szöveget, majd másold: CTRL + C. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: <form>. Keresés minialkalmazás bezárása: ESC. Ugrás a kijelölés végére: JOBBRA. Form elem tartalmának kijelölése: ALT + O. Emmet: Becsomagolás rövidítéssel: CTRL + B, R. A szerkesztőmezőbe írd be: fieldset, majd ENTER. A kurzor a záró fieldset jelölő mögött van. Ugrás a nyitó fieldset jelölőpárra: CTRL + U, P. Ugrás a sor végére: END. Új sor nyitása: ENTER. Írd be az Emmet rövidítést: legend, majd TAB. A kurzor a nyitó és záró jelölő között van. A Find szerkesztőmezőbe illeszd be a kimásolt szöveget: CTRL + V. Mentés: CTRL + S.
Adj magyarázó feliratot (legend) az űrlaphoz a következő szöveggel: „Töltse ki az alábbi űrlapot!”12. Az űrlap alján lévő nyomógomb mellé vegyél fel egy reset típusú nyomógombot, a gomb felirata „adatok törlése” legyen.
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, írd be: adatok törlése. Mentés: CTRL + S.Mentsd el és zárd be a kapcsolat.html fájlt.
Fájl bezárása: CTRL + F4.13. 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 body elemre a betűtípus család Arial, sans serif legyen, a betűméret 16 pixel.
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: body{. Keresés minialkalmazás bezárása: ESC. LE a font-family sorig. A serif érték kijelölése: ALT + N, kétszer. CTRL + SZÓKÖZ, a listában le az Arial kezdetű sorig, kiválasztása: ENTER. Ugrás a sor végére: END. Új sor nyitása: ENTER. Írd be az Emmet rövidítést: fz:16 majd TAB. Vagy írd be: font-size: 16px; Mentés: CTRL + S.14. A th elemeknek határozz meg 1em méretű bélést (padding), a td elemeknek pedig 0.5em méretű bélést.
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: p:1.0, majd TAB. Vagy írd be: padding: 1em; 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: p:0.5, majd TAB. Vagy írd be: padding: 0.5em; Mentés: CTRL + S.15. A table, th és td elemeknek legyen 1 pixel vastag, folytonos vonalú és #666 színű kerete.
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: table, th, td{. 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-s-#666, majd TAB. Vagy írd be: border: 1px solid #666; Mentés: CTRL + S.16. A submit és reset típusú input elemek szélessége legyen 120 pixel, a háttérszínük pedig #ccc.
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: reset. 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: w:120, majd TAB. Vagy írd be: width: 120px; Új sor nyitása: ENTER. Írd be az Emmet rövidítést: bc:#ccc, majd TAB. Vagy írd be: background-color: #ccc; Mentés: CTRL + S.Ide kattintva megtekinthetitek, hogyan kell kinéznie az elkészült weboldalnak. Vissza a feladatsorszámok kiválasztásáhozMents é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.