Alakítsd 2. szintű címsorrá az „Ideális pálya minden sízőnek”, valamint a „Járat információk” sorokat.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: Ideális.
Keresés minialkalmazás bezárása: ESC.
Bekezdés tartalmának kijelölése: ALT + O.
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.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: információ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: h2, majd ENTER.
3. Tedd félkövérré és dőltté a „105 pályát 75 sílift” szövegrészt.
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.
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>i, majd ENTER.
Mentés: CTRL + S.
Az „izgalmas síprogramokkal” szövegrészről vedd le a dőlt típussá alakító jelölőket.
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: Elem eltávolítása: CTRL + E, E.
Mentés: CTRL + S.
4. Cseréld le a jet.jpg képet a timetable.jpg képre. Határozd meg a kép megjelenési szélességét 250 pixel méretűre.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: jet.
Keresés minialkalmazás bezárása: ESC.
A kijelölt szöveget írd át: timetable.
ALT + N, a width értékig, írd át: 250.
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 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.
Egészítsd ki a fájlt a hiányzó body nyitó és záró jelölőivel. Adj oldalcímet „White Valley sípálya” értékkel.
Ugrás a dokumentum elejére: CTRL + HOME.
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.
Jelöld ki a feladatleírásból az idézőjelek közötti
White Valley sípálya szöveget, majd másold: CTRL + C.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: /head.
Keresés minialkalmazás bezárása: ESC.
FEL az előző sorba.
Ugrás a sor végére: END.
Új sor nyitása: ENTER.
Írd be az Emmet rövidítést: title, majd TAB.
A kurzor pozíciójába illeszd be a kimásolt címet: CTRL + V.
Mentés: CTRL + S.
6. Javítsd ki a szövegben a „decembertől egészen márciusig” szövegrészt a következőre: „novembertől egészen februárig”.
Jelöld ki a feladatleírásból az idézőjelek közötti
decembertől egészen márciusig 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.
Töröld a kijelölt szöveget: DELETE.
Jelöld ki a feladatleírásból az idézőjelek közötti
novembertől egészen februárig szöveget, majd másold: CTRL + C.
A kurzor pozíciójába illeszd be a kimásolt szöveget: CTRL + V.
Mentés: CTRL + S.
Javítsd továbbá a „Márciustól októberig” szöveget erre: „Februártól novemberig”.
Jelöld ki a feladatleírásból az idézőjelek közötti
Márciustól októberig 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.
Töröld a kijelölt szöveget: DEL.
Jelöld ki a feladatleírásból az idézőjelek közötti
Februártól novemberig szöveget, majd másold: CTRL + C.
A kurzor pozíciójába illeszd be a kimásolt szöveget: CTRL + V.
Mentés: CTRL + S.
7. Állíts be hiperhivatkozást a „Jelentkezzen időben, nehogy lemaradjon!” mondatra, amely mutasson a Kapcsolat című oldalra (kapcsolat.html).
Jelöld ki a feladatleírásból az idézőjelek közötti
Jelentkezzen időben, nehogy lemaradjon! 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=kapcsolat.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 kapcsolat.html sorig, kiválasztása: ENTER.
Mentés: CTRL + S.
Állíts be hiperhivatkozást a „különjáratokat” szóra is, ez mutasson az inf.html oldalra.
Jelöld ki a feladatleírásból az idézőjelek közötti
különjáratokat 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=inf.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 inf.html sorig, kiválasztása: 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.
8. Nyisd meg az inf.html fájlt.
Ugrás fájlhoz: CTRL + P, a parancssorba írd be: inf, majd ENTER.
Az oldalon lévő táblázatokból töröld a Zürichből 12.00 órakor érkező, valamint az Oslóba 12.15-kor induló járatokat.
Megjegyzés: A munkafájlban: Zurich és Oslo szerepel!
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: Zurich.
Keresés minialkalmazás bezárása: ESC.
Keresés ismétlése: F3.
LE, ellenőrizd az időpontot, ha 12.00, akkor megfelelő helyen vagy.
Táblázatsor kijelölése: ALT + O, négyszer.
Táblázatsor törlése: DELETE.
Megjegyzés: Az első Oslo találatot 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: Oslo.
Keresés minialkalmazás bezárása: ESC.
LE, ellenőrizd az időpontot, ha 12.15, akkor megfelelő helyen vagy.
Táblázatsor kijelölése: ALT + O, négyszer.
Táblázatsor törlése: DELETE.
Haladó megoldás:
Keresés reguláris kifejezéssel: Z.*\W.*12|O.*\W.*12 .
Majd, FEL és BALRA, táblázatsorok kijelölése: ALT + O, majd CTRL + L.
Sorok törlése: DELETE.
Mentés: CTRL + S.
9. Módosítsd a Zürichbe 16.20-kor induló járat indulási idejét 15.00 órára.
Megjegyzés: A munkafájlban: Zurich szerepel!
Megjegyzés: A második Zurich találatot kell keresni.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: Zurich.
Keresés minialkalmazás bezárása: ESC.
Keresés ismétlése: F3.
LE, ellenőrizd az időpontot, ha 16.20, akkor megfelelő helyen vagy.
Ugrás a kijelölés elejére: BALRA.
Jelenlegi időpont kijelölése: ALT + O.
Írd át: 15.00.
Mentés: CTRL + S.
Helyezd át ezt a sort úgy, hogy a járatok időrendi sorrendben legyenek.
Táblázatsor kijelölése: ALT + O, négyszer.
Táblázatsor kivágása: CTRL + X.
Megjegyzés: A Stockholm - 15.30 táblázatsor elé kell helyezni.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: Stockholm.
Keresés minialkalmazás bezárása: ESC.
LE, ellenőrizd az időpontot, ha 15.30, akkor megfelelő helyen vagy.
Ha nem, keresés ismétlése: F3, időpont ellenőrzése, amíg a megfelelő helyen nem vagy.
LE kétszer, a záró cella jelölőig.
Új sor nyitása: ENTER.
Táblázatsor beillesztése: CTRL + V.
Mentés: CTRL + S.
Mentsd el és zárd be az inf.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.
Az űrlapon lévő rádiógombok közé vegyél fel egy újat, amelynek címkéje „Egyéb” legyen. Alapértelmezetten az „Információ kérés” legyen bejelölt állapotban.
Megjegyzés: Az utolsó rádiógomb a Reklamáció.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: Reklamáció.
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: input:radio[name=tema value=egyeb id=egyeb]+label[for=egyeb]{Egyéb}, majd TAB.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: Információ kérés.
Keresés minialkalmazás bezárása: ESC.
BALRA, kétszer, ekkor a kurzor a nyitó jelölőben van.
SZÓKÖZ, majd írd be: checked.
Mentés: CTRL + S.
11. Az „Üzenet” felirathoz tartozó beviteli mezőt módosítsd többsorossá, a sorainak száma 5, a sorokon belüli karakterszáma 50 legyen.
Megjegyzés: A beviteli mező name értéke: uzenet.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: Üzenet.
Keresés minialkalmazás bezárása: ESC.
LE a beviteli mező sorába.
Input elem kijelölése: ALT + O.
1. megoldás:
Írd be az Emmet rövidítést: textarea, majd TAB.
A kurzor a name értéknél van, írd be: uzenet.
JOBBRA, SZÓKÖZ, majd írd be: cols=50, JOBBRA, SZÓKÖZ majd írd rows=5.
Megjegyzés: Az értéknél az idézőjeleket nem kell beírni, automatikusan létrejönnek.
2. megoldás:
Írd be az Emmet rövidítést: textarea[name=uzenet cols=5 rows=50], majd TAB.
Mentés: CTRL + S.
Mentsd el és zárd be az 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 nav azonosítójú elemen belüli hivatkozás jelölőelemekre, valamint azok link és visited állapotára állítsd a betűszínt sárgára (yellow), a szöveg pedig ne legyen aláhúzva.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: #nav a:visited{.
Keresés minialkalmazás bezárása: ESC.
LE a color sorig.
Sor kijelölése: CTRL + L.
Kijelölés felülírása Emmet rövidítéssel: c:yellow, majd TAB.
Vagy írd be: color: yellow;
Új sor nyitása: ENTER.
Írd be az Emmet rövidítést: td:n, majd TAB.
Vagy írd be: text-decoration: none;
Mentés: CTRL + S.
13. A header azonosítójú elemen belüli h1 elemekre határozz meg 25 pixel méretű betűközt, valamint középre történő szövegigazítást.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: #header h1{.
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: lts:25, majd TAB.
Vagy írd be: letter-spacing: 25px;
Új sor nyitása: ENTER.
Írd be az Emmet rövidítést: ta:c, majd TAB.
Vagy írd be: text-align: center;
Mentés: CTRL + S.
14. A table elemek szélességére állítsd be 500 pixelt, a háttérszínre pedig #fff0f0 értéket.
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: w:500, majd TAB.
Vagy írd be: width: 500px;
Új sor nyitása: ENTER.
Írd be az Emmet rövidítést: bgc:#fff0f0, majd TAB.
Vagy írd be: background-color: #fff0f0;
Mentés: CTRL + S.
15. A th elemekre határozz meg 5 pixel felső és alsó, valamint 10 pixel bal- és jobboldali bélés (padding) értékeket.
Keresés minialkalmazás megnyitása: CTRL + F.
A Find szerkesztőmezőbe írd be: 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: p:5-10, majd TAB.
Vagy írd be: padding: 5px 10px;
Mentés: CTRL + S.
16. A text típusú input elemek szélességét állítsd 450 pixel nagyságúra.
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:450, majd TAB.
Vagy írd be: width: 450px;
Mentés: CTRL + S.
Ments é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.
Ide kattintva megtekinthetitek, hogyan kell kinéznie az elkészült weboldalnak.
Vissza a feladatsorszámok kiválasztásához