Garas Dezső (2025. május)
Kategória: web - emelt szint
Feladat leírása
Garas Dezső igen jelentős magyar színész volt. A közönség nagy része rajongásig szerette,
a szakma elismerte. 2000. augusztus 22-én az elsők között választották meg a Nemzet
Színészének. Ebben a feladatban róla és a Nemzet Színészévé választottakról kell weboldalakat
kialakítania és megformáznia.
Feladata, hogy módosítsa a forrásként kapott állományokat a minta és a leírás alapján.
- A módosítandó állományok neve garas.html és dijazottak.html.
Az UTF-8 kódolású szoveg.txt fájl a weblapok szövegét részben tartalmazza a szövegek formázását is.
A szerepek.jpg kép elkészítéséhez a szerepek mappa 3 képét kell felhasználnia.
A garas.html dokumentum elkészítéséhez a készen kapott kepek/garas2.jpg képet és az elkészítendő szerepek.jpg képet használja fel!
A dijazottak.html megalkotásához szükséges 12 kép pedig a kepek mappában
található.
Ügyeljen arra, hogy a vizsgakönyvtár megoldás mappájának áthelyezése után is helyesen jelenjenek meg a képek!
A weblapot stílusokkal formázva készítse el! Használhatja a stilus.css stíluslapban lévő
előkészített stílusokat, de ezekben még további beállításokat, módosításokat kell tennie.
A megoldás során a formázáshoz csak a stíluslapfájlban vagy fejlécelemekben felsorolt vagy
létrehozott stílusok használhatók, az inline (szövegközi) stílusok megadása nem.
A weblapok átalakítását és formázását a minta és az alábbi leírás alapján végezze el! A közös
jellemzők beállítását a stilus.css fájlban kell megtennie!
Részfeladatok
1. Készítse el a garas.html oldalba beillesztendő 1100×400 képpont méretű, szürkeárnyalatos képet a szerepek mappa képeinek felhasználásával a minta és az alábbi leírás alapján! A képet szerepek.jpg néven mentse! Az elkészítés során ügyeljen a következőkre!
a) A jobb oldali képrészleten a színész feje és kalapja töltse ki a képrészlet nagyobb részét!
b) A képrészletek ne függőleges határoló vonal mentén érintkezzenek, de a két határoló vonal pontosan vagy megközelítőleg párhuzamos legyen!
c) A képet alakítsa szürkeárnyalatossá, és úgy mentse!
2. A stilus.css fájl segítségével állítsa mindkét weblap szövegének betűtípusát talpasra!
3. A garas.html oldal esetén a „Garas Dezső” szöveg jelenjen meg a böngésző címsorában!
4. Az oldalt két téglalap alakú részből építse fel! A felső írott rész Garas Dezső művészi pályafutását mutatja be. Ez a rész legyen világosszürke (#CCC kódú) hátterű, fekete betűszínnel! Az alsó, forrást tartalmazó rész legyen sötétszürke (#757575 kódú) hátterű, fehér betűszínű! Ezek formázásához a tartalom és a forras osztályt használja! Szélességük legyen 700 képpont, vízszintesen kerüljenek az oldal közepére, a belső margóik beállítása legyen azonos a mintának megfelelően!
5. Illessze be a felső és az alsó részbe a szoveg.txt állomány megfelelő sorait!
a) A címet egyes, az alcímeket kettes szintű címsor segítségével alakítsa ki! A címsorok tulajdonságait nem kell módosítania!
b) Állítsa be a többi szöveges tartalom igazítását!
c) Az alsó részhez tartozó forrásmegjelölés a szoveg.txt állományban már HTML--elemekkel tagolt formában szerepel. Alakítsa ki a forráshoz tartozó bekezdéseket!
d) A két részben állítsa be a behúzást a minta szerint!
6. Készítse el a Garas Dezső képét tartalmazó részt! Ennek formázásához az adatok osztályt használja! A terület szélessége 130 képpont, bal oldalának és a szövegnek a távolsága pedig 15 képpont legyen, balról határolja a mintának megfelelő fekete vonal! A garas2.jpg kép szélessége 100 képpont legyen! A képet határolja vékony fehér szegéllyel! Állítsa be, hogy a kép helyettesítő vagy alternatív szövege „Garas Dezső” legyen! A többi tulajdonságot a minta szerint állítsa be! A szöveget be kell gépelnie!
7. Szúrja be az elkészített szerepek.jpg képet a minta szerinti helyre! Ha azt nem készítette el, használja a potkep.jpg képet! A beszúrt kép méretét úgy állítsa be, hogy az a rendelkezésre álló terület teljes szélességét foglalja el! Állítsa be, hogy helyettesítő vagy alternatív szövege „Képek Garas filmjeiből” legyen!
8. A dijazottak.html oldal esetén „A Nemzet Színészei” szöveg jelenjen meg a böngésző címsorában!
9. Az oldal szerkezetét – az előző weblappal egyezően – két téglalap alakú résszel alakítsa ki!
10. Illessze be a felső és az alsó részbe a szoveg.txt állomány megfelelő sorait! Alakítsa ki a címsorokat és a bekezdéseket az előző dokumentumhoz hasonlóan! A bekezdéseket formázza a Garas Dezsőről szóló dokumentummal egyező módon!
11. A cím viselőinek felsorolását ábécérendben kell megjelenítenie a mintának megfelelően, a név mögött zárójelben a cím elnyerésének évét feltüntetve. Ennek a résznek a kialakításához vegyen igénybe szövegszerkesztő vagy táblázatkezelő programot! Figyeljen arra, hogy a színész születési évét el kell távolítania! A születési év minden színész sorában a második évszám.
12. Az első díjazottak táblázatszerű elrendezésének kialakítására az elso osztály szolgál. Módosítsa az osztályt a következők szerint! Csökkentse a karakterméretet az eredeti 80 százalékára! A szöveg igazítását a minta szerint állítsa be!
13. A díjazottak képét formázza Garas Dezső képének formázásával megegyező módon!
14. Készítsen hivatkozást a garas.html dokumentumban a „Nemzet Színésze” szövegre, amely a dijazottak.html dokumentumra mutat! Készítsen hivatkozást a dijazottak.html dokumentumban a „Garas Dezső” szöveg első előfordulására, amely a garas.html dokumentumra mutat! A linkek színe minden állapotban fehér legyen!
