8. modul – 2. 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-2, kiválasztása: ENTER, megnyitása: ENTER.2. Nyisd meg az inf.html nevű fájlt a megadott helyről.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: inf, majd ENTER.Alakítsd át mindkét táblázat első sorát fejléc cella típusúvá.
Megjegyzés: A fejléc cellák a thead jelölőn belül találhatók. A két táblázatban egyszerre történik a módosítás. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmező az aktív, írd be: thead>. Összes előfordulás kijelölése: ALT + ENTER. Keresés minialkalmazás bezárása: ESC. Mindkét thead elem tartalmának kijelölése: ALT + O. Csere minialkalmazás megnyitása: CTRL + H. Keresés 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.3. Szúrj be mindkét táblázat elejére táblázat feliratot (caption), az első táblázaté legyen Induló járatok, a másodiké Érkező járatok.
Ugrás a dokumentum elejére: CTRL + HOME. 1. táblázat címének felvétele: 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{Induló járatok}, majd TAB. 2. táblázat címének felvétele: Keresés ismétlése: F3. Ugrás a sor végére: END. Új sor nyitása: ENTER. Írd be az Emmet rövidítést: caption{Érkező járatok}, majd TAB. Mentés: CTRL + S.4. Szúrj be egy-egy horgonyt (könyvjelzőt) indulo néven az első táblázat elé, valamint erkezo néven a második táblázat elé.
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmező az aktív, írd be: Induló járatok. Keresés minialkalmazás bezárása: ESC. HTML Tag Wrap: ALT + W. Írd: a id=indulo. Megjegyzés: Az értéknél az idézőjeleket nem kell beírni, automatikusan létrejönnek. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmező az aktív, írd be: Érkező járatok. Keresés minialkalmazás bezárása: ESC. HTML Tag Wrap: ALT + W. Írd: a id=erkezo. Megjegyzés: Az értéknél az idézőjeleket nem kell beírni, automatikusan létrejönnek. Mentés: CTRL + S.5. Szúrj be egy sort az induló járatok táblázatába a 17.30-kor Helsinkibe induló és a 18.45-kor Budapestre induló járat közé a következő adatokkal: Hová: Oslo, Indulás:18.15, Megjegyzés: Minden nap.
Megjegyzés: Csak egy 17.30-as időpont van! Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: 17.30. Keresés minialkalmazás bezárása: ESC. LE, kétszer, a záró táblázatsor jelölő soráig. Új sor nyitása: ENTER. Cellák és tartalom beszúrása: Emmet kóddal: Írd be: tr>td{Oslo}+td{18.15}+td{Minden nap}, majd TAB. A kód jelentése: Egy táblázatsor felvétele, ezen belül 3 cella felvétele, az első cella tartalma Oslo, a második cella tartalma 18.15, a harmadik cella tartalma: Minden nap. Mentés: CTRL + S.Módosítsd a 21.00 órakor Stockholmból érkező járat megjegyzését Hétvégén-re.
Megjegyzés: Csak egy 21.00-ás időpont van! Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: 21.00. Keresés minialkalmazás bezárása: ESC. LE a következő sorra. Cella tartalmának kijelölése (Hétköznapokon): ALT + O. Írd át a kijelölt szöveget: Hétvégén. Mentés: CTRL + S.Mentsd el és zárd be az inf.html fájlt.
Fájl bezárása: CTRL + F4.6. Nyisd meg az index.html fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: index, majd ENTER.A „105 pályát 75 sílift” szövegrészt alakítsd félkövérré.
Jelöld ki a feladatleírásból az idézőjelek közötti 105 pályát 75 sílift 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.Az „izgalmas síprogramokkal” szövegrészt alakítsd dőltté.
Jelöld ki a feladatleírásból az idézőjelek közötti izgalmas síprogramokkal 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. A „Járatinformációk” sort alakítsd 2. szintű címsorrá.
Jelöld ki a feladatleírásból az idézőjelek közötti Járatinformáció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. Bekezdés jelölők eltávolítása: 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.Az induló járatok, és az érkező járatok sorát alakítsd számozatlan felsorolás stílusúvá.
Megjegyzés: Az induló járatok és az érkező járatok sor egymás alatt van, bekezdés jelölők között. Jelöld ki a feladatleírásból az idézőjelek közötti induló járatok 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. A kurzor az első listasorban van. Ugrás a sor elejére: HOME. Multi kurzor a sorok elé: CTRL + ALT + NUMPAD2. Megjegyzés: A multi kurzorral egyszerre módosítható mind a két listasor. 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. Listasorok kijelölése: Ugrás a sor elejére: HOME. Első listasor kijelölése: CTRL + L. Második listasor kijelölése: CTRL + L. 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.8. Állíts be hiperhivatkozást az induló járatok-ra, amely mutasson az inf.html oldal indulo nevű könyvjelzőjére.
Jelöld ki a feladatleírásból az idézőjelek közötti induló járatok szöveget, majd másold: CTRL + C. Ugrás az oldal elejére: CTRL + HOME. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: induló járatok. 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=inf.html#indulo], 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 inf.html sorig, kiválasztása: ENTER. A kurzor pozíciójába írd be: #indulo. Mentés: CTRL + S.Valamint állíts be hiperhivatkozást az érkező járatok-ra, ez mutasson az inf.html oldal erkezo nevű könyvjelzőjére.
Jelöld ki a feladatleírásból az idézőjelek közötti érkező járatok szöveget, majd másold: CTRL + C. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: érkező járatok. 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=inf.html#erkezo], majd ENTER. 2. megoldás: HTML Tag Wrap: ALT + W. Írd be: a href=. CTRL + SPACE, LE az inf.html sorig, kiválasztása: ENTER. A kurzor pozíciójába írd be: #erkezo. Mentés: CTRL + S.9. Adj alternatív szöveget a jet.jpg képhez Járatok értékkel, állítsd a szélességet 200 pixelre.
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: "jet.jpg", (az idézőjeleket is írd be!). Keresés minialkalmazás bezárása: ESC. Ugrás a kijelölés végére: JOBBRA, SZÓKÖZ, majd írd be: alt=Járatok width=200. 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.10. Nyisd meg az ido.txt fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: ido, 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.Rendelj a fájlhoz a styles.css stíluslap állományt.
Megjegyzés: a stíluslap hozzárendelést a head részben kell megadni, nincs jelentősége ezen belül hányadik sorban van. Ugrás a dokumentum elejére: CTRL + HOME. LE a nyitó nyitó head jelölőig, 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. Mentés: CTRL + S.Egészítsd ki a fájlt a hiányzó body nyitó és záró jelölőivel.
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. Mentés: CTRL + S.Mentsd el a fájlt weboldalként ido.html néven és zárd be.
Fájl bezárása: CTRL + F4.11. Nyisd meg a kapcsolat.html fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: kapcsolat, majd ENTER.A rádiógombok közül alapértelmezés szerint az egyéb érték legyen kiválasztott állapotban.
Megjegyzés: A rádiógomb azonosítója: egyeb. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: id="egyeb", (az idézőjeleket is írd be!). Keresés minialkalmazás bezárása: ESC. Ugrás a kijelölt szöveg végére: JOBBRA. SZÓKÖZ, majd írd be: checked. Mentés: CTRL + S.Adj a gombnak feliratot „Üzenet küldése” értékkel.
Megjegyzés: A gomb submit típusú input elemben van. Jelöld ki a feladatleírásból az idézőjelek közötti Üzenet küldése szöveget, majd másold: CTRL + C. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: submit", (a záró idézőjelet is írd be!). Keresés minialkalmazás bezárása: ESC. Ugrás a kijelölt szöveg végére: JOBBRA. SZÓKÖZ, majd írd be: value=, illeszd be a kimásolt feliratot: CTRL + V. 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 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: Add meg az oldal hátterének a ho_hatter.jpg képet, a kép legyen vízszintes és függőleges irányban is ismétlődő.
Megjegyzés: Alapértelmezetten a háttérkép vízszintes és függőleges irányban is ismétlődő, nem kell megadni külön repeat értéket. Jelöld ki a feladatleírásból kép nevét, ho_hatter.jpg, majd másold: CTRL + C. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: body{. 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: bgi, majd TAB. A kurzor az url értéknél van, írj egy aposztrófot, (a másik automatikusan megjelenik), illeszd be a kép nevét: CTRL + V. Vagy írd be: background-image: url('ho_hatter.jpg'); Mentés: CTRL + S.13. A nav azonosítójú elemen belüli ul elemek listajelölőjéhez rendeld a hopehely.png képet.
Jelöld ki a feladatleírásból kép nevét, hopehely.png, majd másold: CTRL + C. Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: #nav ul li{. Keresés minialkalmazás bezárása: ESC. Listajelölő megadása: Ugrás a sor végére: END. Új sor nyitása: ENTER. Írd be az Emmet rövidítést: lisi, majd TAB. Írd be: url, majd írj egy nyitó zárójelet, (a másik automatikusan megjelenik), a kurzor pozíciójába írj egy aposztrófot (a másik automatikusan megjelenik), illeszd be a kép nevét: CTRL + V. Vagy írd be: list-style-image: url('hopehely.png'); Mentés: CTRL + S.14. Adj keretet a table elemeknek: a keret legyen 1 pixel vastag, folytonos vonalú, a színe pedig #fcc.
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: bd:1-s-#fcc, majd TAB. Vagy írd be: border: 1px solid #fcc; Mentés: CTRL + S.15. Állítsd a táblázatok th elemeinek a háttérszínét #f99-re, betűszínét pedig #066-ra.
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: table th{. 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: bgc:#f99, majd TAB. Vagy írd be: background-color: #f99; Új sor nyitása: ENTER. Írd be az Emmet rövidítést: c:#066, majd TAB. Vagy írd be: color: #66f; Mentés: CTRL + S.16. Állítsd a fieldset elemek margóját és a bélését (padding) 10 pixelre.
Keresés minialkalmazás megnyitása: CTRL + F. A Find szerkesztőmezőbe írd be: fieldset{. Keresés minialkalmazás bezárása: ESC. LE a padding sorig. Ugrás a sor elejére: HOME. ALT + N, az értékig, írd át: 10px. LE a margin sorig. Ugrás a sor elejére: HOME. ALT + N, az értékig, írd át: 10px. 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.