Érettségi feladatok - weblapok

Átírás

1 Érettségi feladatok - weblapok

2 OKI Követelmény- és Vizsgafejlesztő Központ Próbaérettségi 2004 Informatika 3. Himnusz Az Európai Unió1986 óta Ludwig van Beethoven IX. szimfóniájának kórustételét, az Örömódát választotta hivatalos himnuszának, melynek szövegét Friedrich Schiller írta. Készítsen weblapot a zenemű bemutatására a következő leírás szerint! Hozzon létre két állományt, amelyek neve legyen euhimnusz.html és szoveg.html! Az oldalak szövegét az oda.txt és reszlet.txt állományban találja. A feladat megoldásához szükséges képek: beethoven.gif és schiller.jpg. a) Mind a két oldal háttérszíne darkblue (#00008B vagy 139 kódú szín). A címek, az egyikben Örömóda, a másikban Örömóda (részlet), egyes szintű címsor legyen fehér színnel. A böngésző keretén megjelenő cím Európai himnusz, illetve A himnusz szövege. b) Az oldalak további részét 1 sorból és 2 oszlopból álló, keret nélküli, wheat (#F5DEB3 vagy kódú) háttérszínű táblázat adja. A cellák kerete ne látszódjon és a szöveg a cellák szélétől 5 pontnyira legyen! c) A szoveg.html-ben a táblázat az ablak szélességének 60%-a és középre igazított legyen! d) A baloldali cellába a schiller.jpg képet, a jobb oldaliba a reszlet.txt állomány szövegét, az Örömóda első két versszakát helyezze! e) Az euhimnusz.html-ben a táblázat az ablak szélességének 90%-át töltse ki, és középre igazított legyen! f) A bal oldali cellába a beethoven.gif képet, a jobb oldaliba az oda.txt szövegét helyezze! g) A szöveg idézet, ezért a forrás címét ( Hangversenykalauz ) igazítsa jobbra! h) A Schiller szavaira kifejezést alakítsa linkké, amely a szoveg.html-re mutasson! Minta: euhimnusz.html, szoveg.html 5

3 OKI Követelmény- és Vizsgafejlesztő Központ Próbaérettségi 2004 Informatika 15 pont 6

4

5

6 Azonosító jel: 3. Az ősember Készítsen weblapot az ősember leletek bemutatására a következő leírás szerint! Hozzon létre két állományt, amelyek neve legyen osember.html és nean.html! Az oldalak szövegét az osforras.txt állományban találja egymás után. A feladat megoldásához szükséges képek: ember.jpg, neanderk.gif, rajz.jpg, bal_nyil.gif. 1. Mind a két oldal háttérszíne moccasin (#FFE4B5 kódú szín) és a szöveg színe navy (# kódú szín). 2. A cím az egyiken Az ősember, a másikon A neandervölgyi ember egyes szintű címsor legyen, középre igazítva! A böngésző keretén megjelenő cím tartalma egyezzen meg az előzőekkel! 3. Az osember.html-ben a cím után helyezze el az ember.jpg képet középre, 1 pont vastagon keretezve! Az oldalra beillesztendő két bekezdést az osforras.txt állományból veheti át. 4. Az első bekezdésben az egy fosszilis csontvázat szavakat alakítsa linkké, amely a másik állományra, a nean.html-re mutasson! 5. A mintának megfelelően középre igazítva szúrja be a rajz.jpg képet, majd a második bekezdést balra igazítva helyezze el az oldalon! 6. A nean.html-ben a címet egy 400 pont széles, középre igazított vonallal emelje ki! 7. A vonal után egy 700 pont széles, keret nélküli, középre igazított táblázatot hozzon létre! 8. A bal oldali cellába a neanderk.gif képet, a jobb oldaliba az osforras.txt utolsó bekezdését helyezze! 9. Az oldal végére, balra helyezze el a bal_nyil.gif képet, és alakítsa linkké, amellyel az osember.html lapra mehet át! 15 pont gyakorlati vizsga / május 19.

7 Azonosító jel: Minta Az ősember feladathoz: osember.html nean.html A felhasznált képek forrása: rajz.jpg : neanderk.gif : ember.jpg : gyakorlati vizsga / május 19.

8 Azonosító jel: 3. Halma Készítsen weblapot a halma társasjáték bemutatására a következő leírás szerint! Hozzon létre egy állományt, amelynek neve legyen halma.html! Az oldal szövegét a halmaforras.txt állományban találja. A feladat megoldásához szükséges képek: babu.jpg, halma.gif, halmaugr.gif. 1. Az oldal háttérszíne indianred (#CD5C5C kódú szín). 2. A cím ( Halma ) egyes szintű címsor legyen középre igazítva! A böngésző keretén megjelenő cím szövege is ez legyen! 3. Az oldal többi részének váza, a mintának megfelelően táblázattal készüljön! A táblázat 80% széles, középre igazított, 1 pontos szegélyű és a háttérszíne darksalmon (#E9967A kódú szín) legyen! 4. A táblázat első sorában a bal oldali cellába helyezze el a babu.jpg képet középre, 1 pont vastagon keretezve! A jobb oldali cellába illessze be a megfelelő szöveget a halmaforras.txt állományból (1 2. bekezdés)! 5. Az alsó cellában a játék szabályai olvashatók. Kettes szintű címsor stílusú A játék szabályai: szöveg. A szabályokat felsorolással tagolja! 6. Az Ugrani is szabad szavakat alakítsa linkké, amely a halmaugr.gif képre mutasson! 7. A mintának megfelelően, a játékszabályok után a kép a kettő és a négy játékosú táblát ábrázolja! A halma.gif képállományt szúrja be úgy, hogy az középen jelenjen meg! 15 pont gyakorlati vizsga / 12

9 Azonosító jel: Minta a Halma feladathoz: halma.html gyakorlati vizsga / 12

10 Név:... osztály: Török dámajáték Készítsen weblapot a török dáma társasjáték bemutatására a következő leírás szerint! Hozzon létre egy állományt, amelynek neve legyen dama.html! Az oldal szövegét a szoveg.txt állományban találja. A feladat megoldásához szükséges képek: jatek.jpg, konyv.jpg, t1.gif és t2.gif. A megoldás során figyeljen arra, hogy a hivatkozások más környezetben is működjenek! 1. Az oldal háttérszíne indigo (#4B0082 kódú szín) és a szövegszín black (# kódú szín) kivétel, ha egy szövegegységre ettől eltérőt ad meg a feladat. 2. A cím, Török dámajáték, egyes szintű címsor, lightskyblue (#87CEFA kód) színű és középre igazított. A böngésző keretén megjelenő cím szövege is ez legyen! 3. Az oldal többi részének váza, a mintának megfelelő táblázattal készüljön! A táblázat 80% széles, középre igazított, 1 pontos szegélyű és a háttérszíne lightskyblue (#87CEFA kódú szín). 4. A táblázat első sorában a bal oldali cellába helyezze el a jatek.jpg képet 1 pont vastagon keretezve! A jobb oldali cellába illessze be a megfelelő szöveget a szoveg.txt állományból és a mintának megfelelően tördelje bekezdésekre! 5. A Kétszemélyes játék kettes szintű címsor stílusú. 6. A Forrás: Zdzisław Nowak: A malomtól a góig szöveget alakítsa linkké, amely a konyv.jpg képre mutasson! 7. Az alsó cellában a játék szabályai olvashatók. A szabályokat felsorolással tagolja a mintának megfelelő 4 pontba! 8. A mintának megfelelően, a játékszabályok után a képek az induló felállást és egy lépést mutatnak a táblán. A t1.gif és a t2.gif képállományokat szúrja be úgy egy keret nélküli táblázatba, hogy azok egymás mellett szimmetrikusan jelenjenek meg! 15 pont gyakorlati vizsga / február 28.

11 Név:... osztály:... Minta: dama.html gyakorlati vizsga / február 28.

12 Név:... osztály: Lepke Készítsen weblapot a nappali és az éjjeli lepkék bemutatására a következő leírás szerint! Készítse el a nappali.html állományt, és módosítsa a források között megtalálható ejjeli.html fájlt! Az oldalak szövegét a szoveg.txt állományban találja. A feladat megoldásához szükséges képek: hatter.jpg, k1.jpg, k2.jpg, k3.jpg, jel.gif. 1. Először a nappali.html oldalt készítse el! Az oldal háttérszíne DarkSlateGray (#2F4F4F kódú szín). 2. A cím, Nappali vagy éjjeli lepke?, egyes szintű címsor, fehér színű és középre igazított. A böngésző keretén megjelenő cím szövege is ez. 3. Az oldal váza, a mintának megfelelően egy táblázat. A táblázat 640 pont széles, középre igazított, szegély nélküli és a háttérképe a hatter.jpg. Annyi sort és oszlopot állítson be, hogy a kép és a szöveg elrendezése a mintának megfelelő legyen! Állítson 5-5 pontos cellatávolságot és cellamargót (a szöveg távolságát a cella szélétől)! 4. A A nappali lepke jellemzői alcím kettes szintű címsor. Az oldal többi karaktere az alapértelmezettnél nagyobb méretű legyen! 5. Szúrja be a két lepke képét 1 pontos kerettel (k1.jpg és k2.jpg) és a szoveg.txt-ből a megfelelő szövegrészeket! Az elrendezést állítsa a mintának megfelelően! 6. Gépelje be Az éjjeli lepkék szöveget, alakítsa linkké, amely a módosítandó állományra mutasson (ejjeli.html)! A link, az aktív link és a látogatott link egyformán fekete színű legyen! Az így elkészített link elé szúrja be a jel.gif képet úgy, hogy egy sorban legyenek! 7. Módosítsa a félig kész ejjeli.html állományt! Az oldal szerkezetét adó táblázat, benne a szöveg és a címek készen vannak, azokon nem kell változtatni. 8. A táblázat háttérszínét állítsa DarkSlateGray-re (#2F4F4F kódú szín) és a szöveg színét fehérre (#FFFFFF kódú)! 9. Szúrja be a lepke képét 1 pontos kerettel (k3.jpg), és az elrendezést állítsa a mintának megfelelően! 10. Gépelje be A nappali lepkék szöveget a táblázat utolsó bekezdésébe, alakítsa linkké, amely az első állományra mutasson (nappali.html)! A link, az aktív link és a látogatott link egyformán fehér színű legyen! Az így elkészített link elé szúrja be a jel.gif képet úgy, hogy egy sorban legyenek! 15 pont gyakorlati vizsga / május 19.

13 Név:... osztály:... Minta: nappali.html ejjeli.html A képek forrása: gyakorlati vizsga / május 19.

14 3. Energiaforrás Név:.... osztály: Készítsen weblapot Oláh György magyar származású Nobel-díjas kémikus egy kutatási témájának bemutatására a következő leírás szerint! Hozzon létre két állományt, amelyek neve legyen metanol.html és gyartas.html! Az oldalak szövegét a forras1.txt és a forras2.txt állományban találja. A feladat megoldásához szükséges képek: logo.gif, olah.jpg és mol3d.jpg. A megoldás során figyeljen arra, hogy a hivatkozások más környezetben is működjenek! 1. Először a metanol.html oldalt készítse el! Az oldal háttérszíne és a szöveg színe maroon (# kódú szín). 2. Az oldal váza, a mintának megfelelően egy táblázat. A táblázat 80% széles, középre igazított, 1 pontos szegélyű és a háttérszíne antiquewhite (#FAEBD7 kódú szín). 3. A cím a jobb oldali cellában, Metanol a jövő energiaforrása, egyes szintű címsor, középre igazított. A böngésző keretén megjelenő cím szövege is ez. 4. A táblázat első sorában a bal oldali cellába helyezze el a logo.gif képet középre, 1 pont vastagon keretezve! 5. Az alsó cellába illessze be a megfelelő szöveget a forras1.txt állományból! 6. A mintának megfelelően szúrja be a tudós fényképét (olah.jpg)! 7. Oláh György nevét az egyik előfordulásánál tegye vastagítottá! 8. A szövegtörzs második bekezdésének elején található A metanol szöveget alakítsa linkké és az elkészítendő állományra mutasson (gyartas.html)! 9. Készítse el a gyartas.html állományt! Az oldal háttérszíne antiquewhite (#FAEBD7 kódú szín), a szöveg színe maroon (# kódú). 10. A cím ( Metanol ) egyes szintű címsor, a képpel együtt középre igazított. A molekula modell képe a mol3d.jpg, a szöveg a forras2.txt állományban van. A molekula képét 1 pont vastagon keretezze be! gyakorlati vizsga / november 3.

15 Név:.... osztály: Minta: metanol.html gyartas.html Forrás: Népszabadság, június 20. alapján 20 pont gyakorlati vizsga / november 3.

16 Név:... osztály: Albatrosz Készítsen weblapokat a viharmadarak bemutatására a következő leírás szerint! A feladat megoldásához szükséges a viharmadarak.txt, az albatrosz.txt állomány és a következő képek: alba1.jpg, alba2.jpg. A megoldás során a viharmadarak.html és az albatrosz.html állomány elkészítése a feladat. 1. Hozzon létre egy weblapot viharmadarak.html néven! 2. Az oldal háttérszíne lightskyblue (#87CEFA kódú szín) és a szöveg színe darkblue (#00008B kódú szín). 3. A cím Viharmadár-félék (Procellariidae) egyes szintű címsor. A böngésző keretén megjelenő cím szövege is ez. 4. Az oldal szövegét a viharmadarak.txt állományból illessze be! 5. A szöveg legyen sorkizárt elrendezésű! 6. Az ismertető után gépelje be a forrás megjelölését: Forrás: Rózsa Lajos - Madarak! Ezt a bekezdést igazítsa jobbra! 7. A szövegtörzsben található vándoralbatrosz szöveget alakítsa linkké, és az mutasson az elkészítendő másik állományra (albatrosz.html)! 8. Készítse el az albatrosz.html állományt! Az oldal háttérszíne az előző oldalhoz hasonlóan lightskyblue (#87CEFA kódú szín) és a szöveg színe darkblue (#00008B kódú szín). 9. Az oldal váza egy táblázat. A táblázat 90% széles, kerete nincs. A táblázatnak két sora legyen! Az első sorban két cella legyen, a másodikban pedig egy! Ennek a cellának a szélessége a felette levő kettő együttes szélességével egyezzen meg! 10. A táblázat első sorában helyezze el a címet és a képet egymás mellé a két cellába! 11. A cím ( Vándoralbatrosz ) egyes szintű címsor és balra igazított az első cellában. A böngésző keretén megjelenő cím szövege is ez. 12. A jobb oldali cellába, jobbra igazítva, helyezze el az alba1.jpg képet! 13. A táblázat második sorában található cella szövege az albatrosz.txt állományban található. Ezt tegye sorkizárttá! 14. Ebbe a cellába helyezze el az alba2.jpg képet a mintának megfelelően! 15. A forrás megjelölését tartalmazó bekezdést igazítsa jobbra! 15 pont gyakorlati vizsga / május 18.

17 Név:... osztály:... Minta: viharmadarak.html: albatrosz.html: gyakorlati vizsga / május 18.

18 3. Hangya Név:... osztály:... Készítsen weblapot az erdei vöröshangyák bemutatására a következő leírás és minta szerint! Az oldal szövegét a hangya.txt állományban találja. A feladat megoldásához szükséges képek: boly.jpg, hangyakep.gif, vorosh.jpg. 1. Hozza létre az index.html állományt! 2. Az oldal háttérszíne narancssárga, #F09838 kódú szín és a szövegszín barna, #A03028 kódú szín, kivéve, ha egy szövegegységre ettől eltérőt ad meg a feladat. 3. Az oldal vázát, a mintának megfelelően, táblázattal készítse el! A táblázat legyen 800 pont széles, két oszlopos, szegély nélküli! (A sorok számát, esetlegesen a cellaösszevonásokat célszerűen válassza meg.) A cellatávolság, valamint a cellaszegély 0 értékű, és a háttérszíne világossárga, #FFECC0 kódú szín. 4. A táblázat bal oldali oszlopa 150 pont széles legyen! 5. A bal oldali oszlopba egymás alá, középre igazítva, 4 példányban szúrja be a hangyakep.gif képet! 6. A szöveget a hangya.txt állományból másolja át a táblázat jobb oldali oszlopába! 7. A cím Az erdei vöröshangya nagy betűméretű, vastagított és középre igazított. A böngésző keretén megjelenő cím szövege is ez legyen! 8. Az első bekezdésben a bolyokban szót alakítsa linkké, amely a boly.jpg képre mutasson! 9. Szúrja be középre igazítva az első bekezdés után a vorosh.jpg képet! 10. A forrás szöveg végén olvasható Tudtad? és az azt követő bekezdést helyezze át előbbre a mintának megfelelően! Az új helyen a szöveg középen, 300 pont széles, az oldal háttérszínével egyező színű téglalapban, középre igazítva jelenjen meg! A szöveg színe a téglalapban egységesen világossárga, #FFECC0 kódú szín. A Tudtad? bekezdés kettes szintű címsor stílusú legyen! 15 pont gyakorlati vizsga / november 6.

19 Név:... osztály:... Minta: index.html gyakorlati vizsga / november 6.

20 3. Vasúttörténet Név:... osztály:... A mellékelt vasuttort.txt állomány a magyarországi vasúthálózat kialakulásának kezdeteiről, a gőzvasút fénykoráról szól. A feladat megoldásához használja a lovasut.jpg és mozd1846.jpg képeket! 1. Készítsen vasuttort.html néven weblapot! A weboldal háttérszíne silver (#C0C0C0 kódú szín), a szöveg színe maroon (# kódú szín) legyen! 2. A vasuttort.txt állomány szövegét jelenítse meg a weboldalon! Szükség esetén alakítsa ki és/vagy távolítsa el a felesleges bekezdéseket, és igazítsa balra a szöveget! 3. Az első bekezdés, A vasút évszázada legyen egyes szintű címsor, középre igazítva! A böngésző keretén megjelenő cím is ez legyen! 4. A második bekezdést a mintának megfelelően sortöréssel alakítsa ki! A hivatkozás az idézett weblapra mutasson! 5. A szöveg három fejezetet tartalmaz. A fejezetcímek: Az első lépések, Kossuth és Széchenyi a közlekedésért, A gőzmozdony nagy korszaka. Legyenek ezek a címek kettes szintű címsorok! 6. Az első fejezet elé írja ki a címeket, alakítsa felsorolássá és tegyen rá oldalon belüli hivatkozásokat, amelyek a megfelelő fejezetekre mutatnak! 7. A Hazánk első valóban és az ezt követő bekezdést helyezze el egy kétcellás táblázat bal oldali cellájában! A másik cellába illessze be a lovasut.jpg képet! 8. A táblázat szélessége az ablak 100%-a, ezen belül a jobb oldali cella 300 képpont szélességű legyen! A táblázatnak se és a képnek se legyen szegélye! 9. A következő bekezdésben az július 15 és pest váci szakasz szövegeket emelje ki félkövéren! Az A vonal megnyitásakor bekezdés második mondatát alakítsa dőlt betűssé! 10. Az A vonal megnyitásakor és az ezt követő két bekezdést helyezze el egy az előzővel teljesen megegyező formátumú táblázatba! A jobb oldali cellába helyezze el a mozd1846.jpg képet! 15 pont gyakorlati vizsga / május 27.

21 Név:... osztály:... Minta a Vasúttörténet feladathoz: gyakorlati vizsga / május 27.

22 3. Bandy Név:... osztály:... A bandy téli sport, mely a jéghokihoz, a focihoz és a gyeplabdához hasonlít. A sport történetének és szabályainak bemutatására készítsen két weblapot! A weblapok készítéséhez forrásként a tortenet.txt, szabaly.txt, gorog.gif, jatekos.jpg és a csik.jpg állományokat, illetve a megadott mintát használja fel! A szövegfájlok UTF-8 kódolásúak. 1. Hozzon létre két weblapot tortenet.html és szabaly.html néven! Mindkét weblap következő tulajdonságai egyezzenek meg a két lapon: a. A böngésző címsorában megjelenő cím BANDY legyen! b. Az oldal háttérszíne, a szöveg színe és a linkek minden állapotának színe legyen fekete (# kódú)! c. Készítsen egy 2 2-es táblázatot! A táblázat legyen középre igazított, 800 pont széles! A háttérszíne legyen narancssárga (#FF5A18 kódú)! Állítson be 2 pontos szegélyt és 10 pontos cellamargót! d. A táblázat első sorában vonja össze a cellákat, és ide illessze be a csik.jpg képet! e. A második sor első cellájának szélességét állítsa 140 pontosra! A cella tartalmát igazítsa függőlegesen felülre a mintának megfelelően! f. Ebbe a cellába írja be és formázza a mintának megfelelően A bandy története és A bandy szabályai szöveget! A megfelelő szöveget alakítsa a másik oldalra mutató linkké! 2. A tortenet.html lapon az elkészített egységes táblázat második sorának második cellájába írja be a A bandy története szöveget, majd formázza egyes szintű címsor stílussal, és helyezze vízszintesen középre! 3. A cím alá illessze be a tortenet.txt állományból a szöveget! A szöveg legyen sorkizárt igazítású! 4. Helyezze el és igazítsa a szövegben a gorog.gif képet a mintán látható módon! A kép szövegtől való vízszintes távolságát állítsa 5 pontosra! 5. A szabaly.html oldalon az elkészített egységes táblázat második sorának második cellájában írja be a A bandy szabályai szöveget, és formázza a tortenet.html oldalon lévő címmel megegyező módon! 6. A cím alá illessze be a szabaly.txt állományból a szöveget! Állítson be felsorolást a szabályokat leíró bekezdésekre! 7. A mintának megfelelően illessze be és igazítsa a jatekos.jpg képet! 15 pont gyakorlati vizsga / október 31.

23 Informatika középszint Név:... osztály:... Minta a Bandy feladathoz: tortenet.html szabaly.html gyakorlati vizsga / október 31.

24 3. Főzelék Név:... osztály:... Készítsen weblapot a főzelékfélék fogyasztásának bemutatására a következő minta és leírás szerint! Az oldal szövegét a fozalap.txt állományban találja. A feladat megoldásához szükséges képek: spenot.jpg, spenot1.jpg, spenot2.jpg, lencse.jpg és kelkaposzta.jpg. A képek használata során ügyeljen arra, hogy azok a vizsgakönyvtár áthelyezése után is helyesen jelenjenek meg! 1. Hozzon létre egy állományt, amelynek neve legyen fozelek.html! 2. Az oldal háttérszíne legyen AliceBlue (#F0F8FF kódú szín) és a szövegszín DarkSlateGray (#2F4F4F kódú szín)! 3. A böngésző keretén megjelenő cím szövege is Főzelék legyen! 4. A szöveget a fozalap.txt állományból másolja át, és a szövegtördelést állítsa be a mintának megfelelően! 5. A cím egy egysoros és háromoszlopos, 900 képpont széles, szegély nélküli táblázattal készüljön! A cellaközt és cellamargót állítsa 0-ra a táblázat összes cellájára! Az első és utolsó oszlop szélessége képpont legyen! A bal és a jobb oldali cellában a spenot1.jpg, illetve a spenot2.jpg, a középsőben az egyes szintű címsor stílusú Főzelék felirat jelenjen meg vízszintesen a cella közepére igazítva! 6. A címet követő bekezdésben a példák között a spenót szót alakítsa linkké, mely a spenot.jpg képre mutasson! 7. Készítsen egy kétsoros és kétoszlopos, 80 % széles, középre igazított táblázatot, amelynek 1 pontos szegélye legyen! Első sorának celláiba helyezze el a lencse.jpg és a kelkaposzta.jpg képeket, és a második sor celláiba írja be a képaláírásokat a minta alapján! Minden cellatartalom vízszintesen középre igazítva jelenjen meg! 8. A Készítése alcím kettes szintű címsor stílussal jelenjen meg! 9. Az alapanyagfajtákra állítson számozatlan felsorolást a mintának megfelelő helyen! 15 pont gyakorlati vizsga / május 25.

25 Név:... osztály:... Minta a Főzelék feladathoz: fozelek.html gyakorlati vizsga / május 25.

26 3. Fényképalbum Név:... osztály:... Egyre több fényképünk van digitális formában. Ezek rendezéséhez és webes megjelenítéséhez webalbumokat készíthetünk. A következőkben az index.html állományból kiindulva kell egy webalbumot elkészítenie. A megoldás során a következő állományokat kell felhasználnia: index.html, feltolt.html és a kepek mappában lévő képek. aggtelek.jpg balaton.jpg bazilika.jpg borzsony.jpg keszthely.jpg kiskunsag.jpg lanchid.jpg matra.jpg sumeg.jpg sopron.jpg szentendre.jpg veszprem.jpg aggtelek_s.jpg balaton_s.jpg bazilika_s.jpg borzsony_s.jpg keszthely_s.jpg kiskunsag_s.jpg lanchid_s.jpg matra_s.jpg sumeg_s.jpg sopron_s.jpg szentendre_s.jpg veszprem_s.jpg A vizsgakönyvtárában legyen a megoldáshoz szükséges összes állomány és a kepek mappa. Egészítse ki a webalbum fő oldalát, az index.html oldalt az alábbiak szerint! 1. Az oldal háttérszíne vöröses árnyalatú (#F5856D kódú szín), a szöveg színe bordó (# kódú szín), a link és a meglátogatott link színe pedig szürke (#CCCCCC kódú szín) legyen! 2. Az oldal címe legyen Magyarországi képek. A cím legyen egyes szintű címsor és középre igazított! 3. A cím alá készítsen egy 60% széles, középre igazított vonalat! 4. Az index.html oldalon található egy 3 soros és 4 oszlopos táblázat. A táblázat tulajdonságainál állítsa be a következőket: a. A kerete legyen egy pontos. b. A táblázat háttérszíne legyen fehér (#FFFFFF kódú szín). c. A cellamargó legyen 5 pontos és a cellaköz 1 pont. 5. Készítsen egy weboldalt az első kép nagyobb méretben való megmutatására! Az oldalt mentse oldal01.html néven! 6. Az oldal01.html oldal háttérszíne, szöveg színe és a hivatkozások színe egyezzen meg az index.html oldaléval. 7. Az oldal elejére készítsen 1 soros és 3 oszlopos, keret nélküli táblázatot! A táblázat legyen 60% széles és középre igazított! 8. Írja be a cellákban sorban a Vissza, Főoldal és a Előre szavakat! A beírt szavakat igazítsa a cellán belül vízszintesen középre! 9. Készítsen hivatkozást a Főoldal szóra, ami az index.html oldalra, illetve az Előre szóra, ami az oldal02.html oldalra mutat! 10. Helyezzen el egy egysoros táblázatot az előző alá, amely egyezzen meg az index.html oldalon lévő táblázat első sorával! 11. A táblázat alá írja be az Aggtelek szót! A beírt szót igazítsa középre, növelje meg betűméretét és formázza félkövér stílussal! 12. A beírt szöveg alá illessze be középre az aggtelek.jpg képet! A képnek állítson be 1 pont vastag keretet! gyakorlati vizsga / május 25.

27 Név:... osztály: Az oldal01.html oldal alapján készítse el az oldal02.html, oldal03.html és oldal04.html oldalakat! Az oldalakon az Előre és a Vissza szavakon lévő hivatkozásokat, illetve a fénykép fölött lévő szavakat cserélje le az alábbi táblázat alapján: Html oldal neve Fénykép Fénykép neve állomány Vissza link Előre link oldal02.html Balaton balaton.jpg oldal01.html oldal03.html oldal03.html Bazilika bazilika.jpg oldal02.html oldal04.html oldal04.html Börzsöny borzsony.jpg oldal03.html feltolt.html 14. A név alatt megjelenő kép az oldal02.html oldalon a balaton.jpg, az oldal03.html-en a bazilika.jpg, az oldal04.html-en pedig a borzsony.jpg legyen! 15 pont Minta az Fényképalbum feladathoz: gyakorlati vizsga / május 25.

28 3. Házityúk Név:... osztály:... Készítsen weblapot a házityúk bemutatására a következő leírás és minta szerint! Az elkészítendő állományok a tyuk.html és az elnevezes.html. Az oldalak szövegét a hazityuk.txt nevű, UTF-8 kódolású állományban találja. A feladat megoldásához szükséges képek: hatter.jpg, kakas_kep.gif, tyuk_kep.gif és nagy_kep.gif. 1. Először a tyuk.html oldalt készítse el! Az oldal háttérképe a hatter.jpg, a szöveg színe sötétkék (# kódú) szín legyen! 2. Az oldal váza, a mintának megfelelően középen, egy 700 képpont széles, sárgásfehér (#EEEECC kódú) színnel kitöltött téglalap legyen, amelyben a szöveg és a képek jelenjenek meg! 3. A cím ( A házityúk ) legyen egyes szintű címsor és középre igazított! A böngésző keretén megjelenő cím szövege is ez legyen! 4. A címmel egy sorban a téglalap bal szélén a tyuk_kep.gif, a jobb szélén a kakas_kep.gif legyen a mintának megfelelően! 5. Az oldal szövegét a hazityuk.txt állományból a mintának megfelelően illessze be! 6. A Háziasítás és eredete alcím legyen kettes szintű címsor stílusú! 7. A házityúk kialakulásában részt vevő fajok felsorolásként jelenjenek meg! 8. A szövegtörzs végén az Elnevezés szöveget igazítsa jobbra és alakítsa linkké, amely mutasson a másik elkészítendő állományra (elnevezes.html)! 9. Készítse el az elnevezes.html állományt! Az oldal háttérszíne sárgásfehér (#EEEECC kódú), a szöveg színe sötétkék (# kódú) szín legyen! 10. A cím ( Elnevezés ) egyes szintű címsor legyen! A böngésző keretén megjelenő cím ebben az esetben is A házityúk legyen! 11. Az oldal szövegét a hazityuk.txt forrásállomány végéről másolja át! 12. Az elnevezések magyarázatát felsorolással jelenítse meg, a neveket pedig félkövér stílussal emelje ki! A házityúk latin neve legyen dőlt stílusú! 13. Szúrja be a cím után a szöveg mellé jobb oldalra a nagy_kep.gif képet, 1 képpontos szegéllyel! 15 pont gyakorlati vizsga / október 26.

29 Név:... osztály:... Minta a Házityúk feladathoz: tyuk.html elnevezes.html gyakorlati vizsga / október 26.

30 Informatika emelt szint Azonosító jel: 1. Darts A darts az egyik legnépszerűbb sport, és remek kikapcsolódás is. Sok helyen lehet gyakorolni, játszani. A következő dokumentummal ezt a játékot mutatjuk be. A játék bemutatásához szükséges fájlok a következők: keret.jpg, menu.png, baldart.jpg, dart.jpg, eszkozok.txt, jatekok.txt, tortenet.txt, versenyszab.pdf. A feladat során 4 weblapot kell készíteni a leírás és a minták alapján. Mindegyik oldal tetején ugyanaz a kép és keret jelenjen meg! Az oldalak tetején megjelenő rész elkészítése: 1. A baldart.jpg állomány tükrözésével készítse el a jobbdart.jpg állományt! 2. Az egységes fejléc elkészítéséhez a keret.jpg képet igazítsa középre, szélességét állítsa 800 pontosra! 3. Az elkészített baldart.jpg és jobbdart.jpg képet illessze be a keretkép alá: bal oldalra a baldart.jpg, jobb oldalra a jobbdart.jpg képet! A két kép egymás mellett, szimmetrikusan, középen helyezkedjen el! 4. A weboldalak háttérszíne egységesen világos drapp színű, #E7D9B6 kódú legyen! A betűszín legyen piros színű, #CC0000 kódú! Menüpontok elkészítése: 5. A menu.png másolásával és tükrözésével készítse el a bekezdés melletti keretet! A segédvonalak meghosszabbításával különítse el a mezőket egymástól! 6. A felső és a harmadik sor háttérszínét állítsa sötétzöld, RGB (14, 88, 29) kódú színűre! A második és negyedik sor, illetve a menü melletti rész háttérszíne egyezzen meg az egységes háttérszínnel, RGB (231, 217, 182)! 7. A betűk színét állítsa a sötétzöld háttérnél a másik háttérszínre és fordítva! A keret széle és a menüpontokat elválasztó egyenesek legyenek piros színűek, RGB (204, 0, 0) kódúak! 8. A minta szerinti szövegeket készítse el Times New Roman vagy Nimbus Roman betűtípussal, 22 pontos mérettel és félkövér stílussal! 9. Vágja szét külön állományokba az egyes menüpontokat. A darts története részt mentse menu1.png néven; a Játékok részt menu2.png; a Szabályok részt menu3.png; az Eszközök részt pedig menu4.png néven! Weboldalak elkészítése: 10. Hozzon létre az egységes fejléccel egy darts.html lapot! Erre a lapra kell a menüpontokat elhelyezni! A menüpontokat tartalmazó állományokat az elkészült fejrész alá, középre helyezze el! gyakorlati vizsga / május 16.

31 Informatika emelt szint Azonosító jel: 11. Készítsen mindegyik képre hivatkozást! A menu1.png képre kattintva a tortenet.html lapot, a menu2.png képre kattintva a jatekok.html lapot, a menu4.png-re kattintva pedig az eszkozok.html lapot nyissa meg! A menu3.png képre kattintva a versenyszabályzatot bemutató versenyszab.pdf állomány jelenjen meg! (Amennyiben nem készítette el a menü képeket, használja a potmenu.png állományt!) 12. A darts történetét bemutató tortenet.html oldal tetejére helyezze el az egységes keretet! A keret.jpg képre kattintva a darts.html oldalt mutassa a böngésző! (Ezt a további oldalaknál is állítsa be!) 13. Az elkészült fejrész alá írja be a A JÁTÉK TÖRTÉNETE szöveget. Ezt helyezze középre, és állítson be egyes szintű címsor stílust! 14. A darts történetét bemutató szöveget másolja be a tortenet.txt fájlból! A beillesztett szövegben!! jelöli a bekezdéseket. Tördelje ezek szerint a szöveget, és törölje a!! jeleket! A szöveg legyen sorkizárt! 15. A jatekok.html oldalon az elkészített fejrész alá középre igazítottan, egyes szintű címsor stílussal formázza DARTS JÁTÉKOK szöveget! 16. Ez alá a mintának megfelelően illessze be a jatekok.txt fájl tartalmát az oldalra! A legkedveltebb játékok neveit tagolja felsorolással, és emelje ki félkövér stílussal! A felsorolás után húzzon egy 2 pont vastag, 90% széles sötétzöld, #0E581D színkódú vonalat, amit igazítson középre! 17. A játékok nevét formázza hármas szintű címsor stílussal! 18. Az eszkozok.html lapon az elkészített keret alá a html kódba illessze be az eszkozok.txt fájlban lévő kódrészletet! (A kódrészlet egy táblázat és a benne lévő szöveg leírását tartalmazza.) 19. A dart.jpg képet szúrja be a "Soft szakág esetén" szöveg fölé! 20. Írja be a beszúrt táblázat alá új bekezdésbe a Forrás: Magyar Darts Szövetség honlapja szöveget! A szöveget igazítsa középre, és betűméretét csökkentse! Minta a Darts feladathoz: 30 pont gyakorlati vizsga / május 16.

32 Informatika emelt szint Azonosító jel: gyakorlati vizsga / május 16.