8. modul – 21. 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-21, 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.A „Honlapunkon szörfölve” kezdetű szövegrésztő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: Honlapunkon (a végére üss egy SZÓKÖZT!). 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.A „Reméljük sikerül...” mondat elé szúrj be egy sortörést.
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: Reméljük. Keresés minialkalmazás bezárása: ESC. Ugrás a kijelölés elejére: BALRA. Írd be az Emmet rövidítést: br, majd TAB. Mentés: CTRL + S.Állíts be hiperhivatkozást a „programokat” szóra, amely mutasson a Programok című oldalra (programok.html).
Jelöld ki a feladatleírásból az idézőjelek közötti programokat 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=programok.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 programok.html sorig, kiválasztása: ENTER. Mentés: CTRL + S.Állíts be hiperhivatkozást az „Ön számára legmegfelelőbb” szövegrészre is, ez mutasson az ajanlo.html oldalra.
Jelöld ki a feladatleírásból az idézőjelek közötti Ön számára legmegfelelőbb 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=ajanlo.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 az ajanlo.html sorig, kiválasztása: ENTER. Mentés: CTRL + S.4. Cseréld le az oldalon található turizmus.jpg képet a falu.jpg képre. Adj alternatív szöveget is a képnek „falu” értékkel.
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: turizmus.jpg. Keresés minialkalmazás bezárása: ESC. A kijelölt szöveget írd át: falu.jpg. JOBBRA, SZÓKÖZ, majd írd be: alt=falu. 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 index.html fájlt.
Fájl bezárása: CTRL + F4.5. Nyisd meg a kapcsolat.txt fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: kapcsolat, 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ó html és head nyitó és záró jelölőivel.
Ugrás a dokumentum elejére: CTRL + HOME. LE a második sorba. 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. Ugrás a dokumentum elejére: CTRL + HOME. LE a második sorba. Kijelölés a dokumentum végéig: CTRL + SHIFT + END. A kijelölt terület köré html jelölő beillesztése: Emmet: Becsomagolás rövidítéssel: CTRL + B, R. A szerkesztőmezőbe írd be: html, majd ENTER. Mentés: CTRL + S.6. Alakítsd át a Kapcsolat címsor alatti sorokat számozatlan felsorolás stílusúvá.
Megjegyzés: Az átalakítandó sorok bekezdés jelölők között vannak, egy részük félkövér jelölők között, összesen 5 listasor van. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: <b>. Összes előfordulás kijelölése: ALT + ENTER. Keresés minialkalmazás bezárása: ESC. Ugrás a sorok elejére: HOME. Bekezdés jelölők eltávolítása: Emmet: Elem eltávolítása: CTRL + E, E. A sorok köré lista 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. A kurzor az első listasorban van. Sorok kijelölése: CTRL + L, ötször. A listasorok köré számozatlan felsorolás jelölők beszúrása: 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 kapcsolat.html néven és zárd be.
Fájl bezárása: CTRL + F4.7. Nyisd meg a programok.html fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: programok, majd ENTER.A táblázat első sorának celláit módosí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. Kijelölés bővítése a thead tartományra: ALT + O. Csere minialkalmazás megnyitása: CTRL + H. Csere csak a kijelöléseben: ALT + L. A Find szerkesztőmező az aktív, írd be: td>. TAB a Replace szerkesztőmezőig, írd be: th>. Csere: CTRL + ALT + ENTER. Csere minialkalmazás bezárása: ESC. Mentés: CTRL + S.8. Rendezd a táblázat sorait a dátum oszlopa szerint növekvő sorrendbe.
Megjegyzés: Az utolsó táblázatsort kell az első sorba áthelyezni. Az áthelyezendő első cella tartalma: április 26. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: április 26. Keresés minialkalmazás bezárása: ESC. FEL a nyitó táblázatsor jelölő sorába, majd BALRA. 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. Mentés: CTRL + S.Mentsd el és zárd be a programok.html fájlt.
Fájl bezárása: CTRL + F4.9. Nyisd meg az ajanlo.html fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: ajanlo, majd ENTER.Szúrj be egy új sort az űrlapba Email cím felirattal, a mező típusa egysoros szöveges beviteli mező legyen.
Megjegyzés: A Név űrlapelem alá kell beszúrni. A címke és a beviteli mező sortöréssel egy bekezdésen belül van. A bekezdés nyitó és záró jelölője külön sorban 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 a záró bekezdés jelölőig. Új sor nyitása: ENTER. Írd be az Emmet rövidítést: p{Email cím}>br+input[name=email], majd TAB. A kód jelentése: Bekezdés (p) elem felvétele, melynek tartalma: Email cím, a bekezdés elemen belül sortörés és egy text típusú input elem létrehozása, az input elem name értéke: email. Mentés: CTRL + S.10 Az űrlapon található jelölőnégyzetekhez tartozó szöveget alakítsd címke (label) típusúvá.
Megjegyzés: Az első jelölőnégyzet name értéke: kultura, összesen négy jelölőnégyzethez kell címkét adni. Minden sor végén van sortörő jelölő! Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: kultura. Keresés minialkalmazás bezárása: ESC. Ugrás a kijelölés elejére: BALRA. Multikurzor a következő 3 sorra: CTRL + ALT + NUMPAD2, háromszor. Name értékek kijelölése: NUMPAD6. Kijelölés másolása: CTRL + C. Input elemek kijelölése: ALT + O. Ugrás a kijelölés végére: JOBBRA. JOBBRA még egyszer, mert a feliratok előtt egy SZÓKÖZ van. Felirat szövegek kijelölése: NUMPAD6. HTML Tag Wrap: ALT + W. Írd be: label for=, a kurzor az idézőjelek között van. Megjegyzés: Az értéknél az idézőjeleket nem kell beírni, automatikusan létrejönnek. Azonosítók beillesztése: CTRL + V. Mentés: CTRL + S.11. Az űrlap végén található nyomógombot módosítsd submit típusúra, a felirata pedig „Küldés” legyen.
Megjegyzés: A gomb jelenleg button típusú, és value értéke nincs. 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. JOBBRA, SZÓKÖZ és írd be: value=Küldés. 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 ajanlo.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ő elemek hover állapota esetén a betűszín legyen #c6c.
Ugrás a dokumentum végére: CTRL + END. Új sor nyitása: ENTER. Írd be: #menu a:hover{, 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: c:#c6c, majd TAB. Vagy írd be: color: #c6c; Mentés: CTRL + S.13. A kep osztályú elemek img gyermekelemeinél a szélesség 300 pixel, a margó mérete 10 pixel legyen.
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: .kep img{. Keresés minialkalmazás bezárása: ESC. Ugrás a sor végére: END. LE a width sorig. Sor kijelölése: CTRL + L. Kijelölés felülírása Emmet rövidítéssel: w:300, majd TAB. Vagy írd be: width: 300px; Új sor nyitása: ENTER. Írd be az Emmet rövidítést: m:10, majd TAB. Vagy írd be: margin: 10px; Mentés: CTRL + S.14. A td elemek alsó kerete legyen 3 pixel vastag, pontozott mintázatú és #060 színű.
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: bdb:3-dotted-#060, majd TAB. Vagy írd be: border-bottom: 3px dotted #060; Mentés: CTRL + S.15. A fieldset elemek bélése (padding) egységesen legyen 15 pixel.
Ugrás a dokumentum végére: CTRL + END. Új sor nyitása: ENTER. Írd be: fieldset{, 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:15, majd TAB. Vagy írd be: padding: 15px; Mentés: CTRL + S.16. A submit típusú input elemek háttérszíne legyen #c6c.
Ugrás a dokumentum végére: CTRL + END. Új sor nyitása: ENTER. Írd be: input[type='submit']{, 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:#c6c, majd TAB. Vagy írd be: background-color: #c6c; 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.