8. modul – 17. 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-17, kiválasztása: ENTER, megnyitása: ENTER.2. Nyisd meg az index.txt nevű fájlt a megadott helyről.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: index, 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. Rendelj a fájlhoz a styles.css stíluslapfájlt.
Megjegyzés: A stíluslapfájl a munkafájlban már hozzá van rendelve! Ugrás a dokumentum elejére: CTRL + HOME. LE a html nyitó jelölők 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. Mentés: CTRL + S.3. Módosítsd az „Üdvözöljük a...” szöveggel kezdődő sort 1. szintű címsorrá, valamint az „Állásajánlat” sort 2. szintű címsorrá.
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: Üdvözöljük. 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: h1, majd ENTER. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: Állásajánlat. 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: h2, majd ENTER. Mentés: CTRL + S.4. Állíts be hiperhivatkozást a „pizzafélék” szóra, amely mutasson a Pizzák című oldalra (pizzak.html).
Jelöld ki a feladatleírásból az idézőjelek közötti pizzafélék 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=pizzak.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 pizzak.html sorig, kiválasztása: ENTER. Mentés: CTRL + S.Állíts be hiperhivatkozást a „leggyorsabb futárokkal” szövegrészre is, ez mutasson a megrendeles.html oldalra.
Jelöld ki a feladatleírásból az idézőjelek közötti leggyorsabb futárokkal 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=megrendeles.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 megrendeles.html sorig, kiválasztása: ENTER. Mentés: CTRL + S.Mentsd el a fájlt weboldalként index.html néven és zárd be.
Fájl bezárása: CTRL + F4.5. Nyisd meg a tortenet.html fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: tortenet, majd ENTER.Szúrj be sortörést „A pizzát Vergilius” kezdetű mondat elé.
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: A pizzát. Keresés minialkalmazás bezárása: ESC. Ugrás a kijelölése elejére: BALRA. Írd be az Emmet rövidítést: br, majd TAB. Mentés: CTRL + S.„A modern pizza feltalálását...” kezdetű mondattól a szöveg kerüljön új bekezdésbe.
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: A modern. 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.6. Alakítsd félkövérré a „napjaink egyik legkedveltebb” szövegrészt.
Jelöld ki a feladatleírásból az idézőjelek közötti napjaink egyik legkedveltebb 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 „Raffaele Espositónak” szövegrészt pedig tedd dőltté.
Jelöld ki a feladatleírásból az idézőjelek közötti Raffaele Espositónak 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.7. Szúrd be a pizza_02.jpg képet a kep_jobb osztályú elemen belülre. Adj a képnek alternatív szöveget „pizza” néven.
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: kep_jobb. Keresés minialkalmazás bezárása: ESC. Ugrás a bekezdés jelölők közé: ALT + I. Írd be az Emmet rövidítést: img[src=pizza_02.jpg alt=pizza], majd TAB. Mentés: CTRL + S.Mentsd el és zárd be a tortenet.html fájlt.
Fájl bezárása: CTRL + F4.8. Nyisd meg a pizzak.html fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: pizzak, majd ENTER.Szúrj be a táblázat elejére táblázat feliratot (caption) „Pizzáink ezen a héten” szöveggel.
Megjegyzés: A táblázat feliratot a table nyitó jelölő után kell beilleszteni. Jelöld ki a feladatleírásból az idézőjelek közötti Pizzáink ezen a héten szöveget, majd másold: CTRL + C. Ugrás a dokumentum elejére: CTRL + HOME. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: <table>. 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: caption, majd TAB. A kurzor pozíciójába illeszd be a kimásolt címet: CTRL + V. Mentés: CTRL + S.9. Rendezd át a táblázat sorait úgy, hogy a pizzák elnevezéseik szerint ABC sorrendben legyenek egymás alatt.
Megjegyzés: az Alexandra sort az első sorba, a nyitó tbody jelölő után, a Vegetáriánus sort az utolsó sorba, a záró tbody jelölő elé kell áthelyezni. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: Alexandra. Keresés minialkalmazás bezárása: ESC. FEL, majd BALRA, a kurzor a nyitó táblázatsor jelölőben van. Táblázatsor kijelölése: ALT + O. Táblázatsor kivágása: CTRL + X. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: <tbody>. Keresés minialkalmazás bezárása: ESC. Ugrás a sor végére: END. Új sor nyitása: ENTER. Táblázatsor beillesztése: CTRL + V. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: Vegetáriánus. Keresés minialkalmazás bezárása: ESC. FEL, majd BALRA, a kurzor a nyitó táblázatsor jelölőben van. Táblázatsor kijelölése: ALT + O. Táblázatsor kivágása: CTRL + X. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: /tbody>. 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. Táblázatsor beillesztése: CTRL + V. Mentés: CTRL + S.Mentsd el és zárd be a pizzak.html fájlt.
Fájl bezárása: CTRL + F4.10. Nyisd meg a megrendeles.html fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: megrendeles, majd ENTER.A méretre vonatkozó rádiógombok feliratait alakítsd címke (label) típusúvá.
Megjegyzés: Az egyik gomb azonosítója: meret_32, a másiké meret_45. Keresés minialkalmazás megnyitása: CTRL + F. (Reguláris kifejezés használata: ALT + R.) TAB a Use Regular Expression gombig, ha nincs bejelölve, bejelölése: SZÓKÖZ. SHIFT + TAB a Find szerkesztőmezőig, írd be: meret_\d*. Megjegyzés: Jelentése: meret_ szöveg után bármilyen szám lehet. Így már csak a két szükséges azonosító érték lesz kijelölve. Összes kijelölése: ALT + ENTER. Keresés párbeszédpanel bezárása: ESC. Kijelölés másolása: CTRL + C. Ugrás a rádiógomb feliratok elé: CTRL + NUMPAD6. Feliratok kijelölése: SHIFT + END. A kijelölt feliratok köré label jelölő beillesztése: 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. A kurzor a for értéknél van, a kimásolt azonosítók illeszt be: CTRL + V. Mentés: CTRL + S.11. A telefonszámhoz tartozó beviteli mező paramétereit módosítsd úgy, hogy a neve tel legyen, a mezőben megadható maximális karakterszám pedig 15.
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: Telefonszám. Keresés minialkalmazás bezárása: ESC. ALT + N, a name értékig, írd át: tel. JOBBRA, SZÓKÖZ, majd írd be: maxlength=15. 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 a megrendeles.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 content azonosítójú elem h1 gyermekelemeire a betű mérete legyen az alap betűméret 1,5-szerese és középre rendezett.
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: #content 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.5, majd TAB. Vagy írd be: font-size: 1.5em; Mentés: CTRL + S.13. A table elemek felső és alsó margóját állítsd 0 méretűre, a bal- és jobboldali margót pedig á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: table{. 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.14. A td elemeknek adj keretet, amely 1 pixel vastag, pontozott mintázatú és #c00000 színű.
Megjegyzés: Az elemre van tulajdonság megadva. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: 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: bd:1-dt-#c00000, majd TAB. Vagy írd be: border: 1px dotted #c00000; Mentés: CTRL + S.15. Rendelj a fieldset elemekhez egységesen 10 pixel bélés (padding) értéket, valamint az elem szélességét 500 pixelben határozd meg.
Megjegyzés: Az elemre van tulajdonság megadva. 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: p:10, majd TAB. Vagy írd be: padding: 10px; Új sor nyitása: ENTER. Írd be az Emmet rövidítést: w:500, majd TAB. Vagy írd be: width: 500px; Mentés: CTRL + S.16. Az egysoros szöveges beviteli mező szélességét méretezd 300 pixel nagyságúra.
Megjegyzés: Az elemre még nincs tulajdonság megadva. 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.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.