8. modul – 5. 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-5, 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 „Figyelem!” címsor szövegét „Rendelési rend változás!”-ra.
Jelöld ki a feladatleírásból az idézőjelek közötti Rendelési rend változás! szöveget, majd másold: CTRL + C. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: Figyelem! (A felkiáltójelet is írd be!) Keresés minialkalmazás bezárása: ESC. Illeszd be a kimásolt szöveget: CTRL + V. Mentés: CTRL + S.Szúrj be egy új 2. szintű címsort „Rendelési idő” szöveggel a táblázat elé.
Jelöld ki a feladatleírásból az idézőjelek közötti Rendelési idő szöveget, majd a szöveg másolása: CTRL + C. 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 elejére: HOME. Új sor nyitása: ENTER. FEL az üres sorba. Írd be az Emmet rövidítést: h2, majd TAB. A kurzor pozíciójába illeszd be a kimásolt szöveget: CTRL + V. Mentés: CTRL + S.3. A „Július 26-tól augusztus 5-ig” szövegrészt tedd dőltté. A „24 órás sürgősségi” szövegrészt tedd 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: i, majd ENTER. Vagy: HTML Tag Wrap: ALT + W. Írd be: i. Jelöld ki a feladatleírásból az idézőjelek közötti 24 órás sürgősségig 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.4. Egyesítsd a táblázat fejléc celláit a szomszédos üres cellákkal.
Megjegyzés: A fejléc cellák utolsó karaktere egy kettőspont, ezt használom az együttes kijelöléshez. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmező az aktív, írd be: :</th. Összes előfordulás kijelölése: ALT + ENTER. Keresés párbeszédpanel bezárása: ESC. Ugrás a sorok elejére: HOME. Ugrás a th nyitó jelölőnevek végére: CTRL + NUMPAD6. SZÓKÖZ, majd írd be: colspan="2". LE a következő sorokra, ezek a törlendő táblázatsorok. Sorok kijelölése: CTRL + L. Sorok törlése: DELETE. Mentés: CTRL + S.5. A táblázat „Felnőtt betegek részére” részét (az alatta lévő 5 sorral együtt) helyezd át a tábla végére.
Megjegyzés: két helyen elírás van: Előhegyzéses. Megjegyzés: A megadott tartalmú táblázatsor a tbody nyitó jelölő után következik. A címsor 3 sornyi, az 5 további táblázatsor 20 sorban helyezkedik el. Összesen 23 sort kellene kijelölni. Akadálymentesítés nélküli megoldás: Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: Felnőtt. Keresés minialkalmazás bezárása: ESC. 23 sor kijelölés: CTRL + L, 23-szor. Sorok kivágása: CTRL + X. Megjegyzés: A kivágott részt a table záró jelölő elé kell beilleszteni. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: /table. 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. Kivágott tartalom beillesztése: CTRL + V. Akadálymentesítés esetén! Ehhez a három fő csoportot tbody jelölők közé kellene tenni! Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: Felnőtt. Keresés minialkalmazás bezárása: ESC. FEL, kétszer a tbody nyitó jelölő sorába. BALRA, ekkor a kurzor a nyitó tbody jelölőben van. Tbody tartalmának kijelölése: ALT + O. Sorok kivágása: CTRL + X. Megjegyzés: A kivágott részt a table záró jelölő elé kell beilleszteni. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: /table. 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. Kivágott tartalom beillesztése: CTRL + V. 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 szabadsagok.txt fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: szabadsagok, 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.Módosítsd a május, június, július, augusztus sorok alatti felsorolások jelölőit úgy, hogy azok számozatlan felsorolás stílusúak legyenek.
Megjegyzés: Jelenleg a május és június adatok bekezdésekben vannak!!! Ha ez a leírásnak megfelelően javítva van: Csere minialkalmazás megnyitása: CTRL + H. A Find szerkesztőmező az aktív, írd be: ol>. TAB a Replace szerkesztőmezőig, írd be: ul>. Összes előfordulás cseréje: CTRL + ALT + ENTER. Csere ablak bezárása: ESC. Amennyiben a májust, júniust felsorolássá kell alakítani: 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: május:|június: (az írásjeleket is írd be!). Összes előfordulás kijelölése: ALT + ENTER. Keresés minialkalmazás bezárása: ESC. LE, multi kurzor a következő 2-2 sor elé: CTRL + ALT + NUMPAD2, kétszer. Bekezdés jelölők eltávolítása: Emmet: Elem eltávolítása: CTRL + E, E. Listasor 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. Keresés ismétlése: F3. Összes előfordulás kijelölése: ALT + ENTER. LE a következő sorokra. Sorok kijelölése: CTRL + L, kétszer. Listasorok köré számozatlan felsorolás 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.7. Egészítsd ki a fájlt a hiányzó head és body nyitó és záró jelölőivel.
Ugrás a dokumentum elejére: CTRL + HOME. LE a nyitó html jelölőt követő sorig. A head részbe tartozó elemek kijelölése: CTRL + L, háromszor. A kijelölt terület köré head jelölő beillesztése: Emmet: Becsomagolás rövidítéssel: CTRL + B, R. A szerkesztőmezőbe írd be: head, majd ENTER. A kurzor a head záró jelölő után van. 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. Mentés: CTRL + S.Mentsd el a fájlt weboldalként szabadsagok.html néven és zárd be.
Fájl bezárása: CTRL + F4.8. Nyisd meg a hirlevel.html fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: hirlevel, majd ENTER.Állíts be hiperhivatkozást az „írjon címünkre” szövegrészre, amely mutasson a hirlevel@medim.hu email címre úgy, hogy a levél tárgya „feliratkozás” legyen.
Jelöld ki a feladatleírásból a hirlevel@medim.hu szöveget, majd másold: CTRL + C. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: írjon címünkre. Keresés minialkalmazás bezárása: ESC. HTML Tag Wrap: ALT + W. A kurzor pozíciójába írd be: a href=mailto:, majd illeszd be a kimásolt e-mail-címet, folytasd a beírást: ?subject=feliratkozás. Megjegyzés: Az értéknél az idézőjeleket nem kell beírni, automatikusan létrejönnek. Mentés: CTRL + S.Állíts be hiperhivatkozást az „ugyanígy teheti” szövegrészre is, amely ugyanerre az email címre mutasson, de a levél tárgya „leiratkozás” legyen.
Megjegyzés: A vágólapon még az e-mail cím van. 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. Emmet: Becsomagolás rövidítéssel: CTRL + B, R. A szerkesztőmezőbe írd be: a[href="mailto:, majd illeszd be a kimásolt e-mail-címet, folytasd a beírást: ?subject=leiratkozás"], majd ENTER. Megjegyzés: Itt fontos az idézőjelek beírása! Mentés: CTRL + S.9. Javítsd a címsor melletti kép paramétereit a következőképpen: a kép fájlneve envelope.jpg, a megjelenő kép szélessége 150 pixel legyen. Adj alternatív szöveget a képnek Boríték értékkel.
Jelöld ki a feladatleírásból a kép nevét, envelope.jpg, majd másold: CTRL + C. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: img. Kilépés a gyorskeresőből: ESC Ugrás a kép jelenlegi nevére (xyz.jpg): ALT + N, kétszer. Illeszd be a kimásolt szöveget: CTRL + V. JOBBRA, SZÓKÖZ, majd írd be: width=150, JOBBRA, SZÓKÖZ, majd írd be: alt=Boríték. 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 hirlevel.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.Módosítsd a többsoros beviteli mező tulajdonságait úgy, hogy a sorok száma 4, a soron belüli karakterek száma 40 legyen.
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: <textarea. Keresés minialkalmazás bezárása: ESC. Ugrás a kijelölés végére: JOBBRA. SZÓKÖZ, majd írd be: cols=40, JOBBRA, SZÓKÖZ, majd írd be:rows=4. Megjegyzés: Az értéknél az idézőjeleket nem kell beírni, automatikusan létrejönnek. Mentés: CTRL + S.11. Szúrj be egy reset típusú gombot a küldés gomb mellé. A gomb felirata „adatok törlése” legyen.
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: küldés. Keresés minialkalmazás bezárása: ESC. Ugrás a kijelölés végére: JOBBRA. Ugrás az input elem végére: JOBBRA, kétszer. Í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.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 menusor azonosítójú elemre vonatkozó háttérszín legyen #ff9c00.
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: #menusor{. Keresés minialkalmazás bezárása: ESC. LE a background-color sorig. Sor kijelölése: CTRL + L. Kijelölés felülírása Emmet rövidítéssel: bgc:#ff9c00, majd TAB. Vagy írd be: background-color: #ff9c00; Mentés: CTRL + S.Módosítsd az aktiv azonosítójú elemre vonatkozó háttérszínt fehérre (white).
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: #aktiv{. Keresés minialkalmazás bezárása: ESC. LE a background-color sorig. Sor kijelölése: CTRL + L. Kijelölés felülírása Emmet rövidítéssel: bgc:white, majd TAB. Vagy írd be: background-color: white; Mentés: CTRL + S.13. Módosítsd a table, th, td elemekre vonatkozó keret tulajdonságait: a keret legyen folytonos vonalú, 1 pixel vastag és #666 színű.
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 ír be: border: 1px solid #666. Mentés: CTRL + S.14. A táblázat alsó és felső margói legyenek 20 pixel szélesek, a bal- és jobboldali margót pedig állítsd be úgy, hogy a táblázat 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:20-a, majd TAB. Vagy írd be: margin: 20px auto; Mentés: CTRL + S.15. A submit és a reset típusú gombok szélessége legyen 120 pixel, magassága pedig 30 pixel.
Megjegyzés: Az elemre már van tulajdonság megadva. 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+h:30, majd TAB. Vagy írd be: width: 120px; height: 30px Mentés: CTRL + S.16. Azon elemek háttérszíne, amelyek osztálya mezosor és z1, legyen #fef6e7. Azon elemek háttérszíne pedig, amelyek osztálya mezosor és z2, legyen #fffbf4.
Ugrás a dokumentum végére: CTRL + END. Írd be: .mezosor.z1{, 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:#fef6e7, majd TAB. Vagy írd be: background-color: #fef6e7; Ugrás a dokumentum végére: CTRL + END. Írd be: .mezosor.z2{, 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:#fffbf4, majd TAB. Vagy írd be: background-color: #fffbf4; Mentés: CTRL + S.Ide kattintva megtekinthetitek, hogyan kell kinéznie az elkészült weboldalnak. Vissza a feladatsorszámok kiválasztásáhozMentsd 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.