Érettségi feladatok - weblapok

Érettségi feladatok - weblapok

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 16113331 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

OKI Követelmény- és Vizsgafejlesztő Központ

Próbaérettségi 2004 – Informatika

15 pont

6

Informatika — középszint

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 (#000080 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 0511

8 / 12

2005. május 19.


Azonosító jel:

Minta Az ősember feladathoz:

osember.html

nean.html

A felhasznált képek forrása: rajz.jpg : http://www.sulinet.hu/tart/cikk/ea/0/9424/1 neanderk.gif : http://www.people.virginia.edu/~rjh9u/neander.html ember.jpg : http://www.sulinet.hu/tart/cikk/ad/0/9231/1


9 / 12

2005. május 19.


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


8 / 12


Azonosító jel:

Minta a Halma feladathoz:

halma.html


9 / 12


Név:............................................................ osztály: .....

3. 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 (#000000 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


8 / 16

2006. február 28.


Név:............................................................ osztály: .....

Minta: dama.html


9 / 16

2006. február 28.


Név:............................................................ osztály: .....

3. 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


8 / 16

2006. május 19.


Név:............................................................ osztály: .....

Minta:

nappali.html

ejjeli.html

A képek forrása: http://www.pwbelg.clara.net/aberrations/abs.html


9 / 16

2006. május 19.


Név:…………………………..………….. osztály:……

3. Energiaforrás 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 (#800000 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 (#800000 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!


8 / 16

2006. november 3.


Név:…………………………..………….. osztály:……

Minta:

metanol.html

gyartas.html

Forrás: Népszabadság, 2005. június 20. alapján 20 pont


9 / 16

2006. november 3.


Név:............................................................ osztály: .....

3. 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


8 / 16

2007. május 18.


Név:............................................................ osztály: .....

Minta: viharmadarak.html:

albatrosz.html:


9 / 16

2007. május 18.


Név: ........................................................... osztály:......

3. Hangya 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


8 / 16

2007. november 6.


Név: ........................................................... osztály:......

Minta: index.html


9 / 16

2007. november 6.


Név: ........................................................... osztály:......

3. Vasúttörténet 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 (#800000 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 „1846. 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


8 / 16

2008. május 27.


Név: ........................................................... osztály:......

Minta a Vasúttörténet feladathoz:


9 / 16

2008. május 27.


Név: ........................................................... osztály:......

3. Bandy 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 (#000000 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


8 / 16

2008. október 31.


Név: ........................................................... osztály:......

Minta a Bandy feladathoz:

tortenet.html

szabaly.html


9 / 16

2008. október 31.


Név: ........................................................... osztály:......

3. Főzelék 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 350-350 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


8 / 16

2009. május 25.


Név: ........................................................... osztály:......

Minta a Főzelék feladathoz:

fozelek.html


9 / 16

2009. május 25.


Név: ........................................................... osztály:......

3. Fényképalbum 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 keszthely.jpg sumeg.jpg aggtelek_s.jpg keszthely_s.jpg sumeg_s.jpg

balaton.jpg kiskunsag.jpg sopron.jpg balaton_s.jpg kiskunsag_s.jpg sopron_s.jpg

bazilika.jpg lanchid.jpg szentendre.jpg bazilika_s.jpg lanchid_s.jpg szentendre_s.jpg

borzsony.jpg matra.jpg veszprem.jpg borzsony_s.jpg matra_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ó (#990000 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 0803

8 / 16

2009. május 25.


Név: ........................................................... osztály:......

13. 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: Fénykép Fénykép neve állomány oldal02.html Balaton balaton.jpg oldal03.html Bazilika bazilika.jpg oldal04.html Börzsöny borzsony.jpg Html oldal neve

„Vissza” link

„Előre” link

oldal01.html oldal03.html oldal02.html oldal04.html 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:


9 / 16

2009. május 25.


Név: ........................................................... osztály:......

3. Házityúk 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 (#003399 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 (#003399 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


8 / 16

2009. október 26.


Név: ........................................................... osztály:......

Minta a Házityúk feladathoz:

tyuk.html

elnevezes.html


9 / 16

2009. október 26.

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!


3 / 12

2007. május 16.


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 www.darts.hu” szöveget! A szöveget igazítsa középre, és betűméretét csökkentse! 30 pont Minta a Darts feladathoz:


4 / 12

2007. május 16.



Azonosító jel:

5 / 12

2007. május 16.

Érettségi feladatok - weblapok

Recommend Documents