Érettségi‎ > ‎Gyakorlat‎ > ‎HTML szerkesztés‎ > ‎

Papír

Készítsen weblapot a papír történetének bemutatására a következő minta és leírás szerint! A feladatban egy weboldalt és egy képet kell majd elkészítenie. Az oldal szövegét az UTF-8 kódolású webforras.txt állományban találja. A feladat megoldásához szükséges képek: jel.png és Cai-lun.jpg. A képek használata során ügyeljen arra, hogy azok a vizsgakönyvtár áthelyezése után is helyesen jelenjenek meg! 

Források

Feladatok

  1. A weblaphoz szükséges képet át kell méreteznie és más formátumban kell elmentenie. Képszerkesztő program segítségével a Cai-lun.jpg képet arányosan kicsinyítse le 200 képpont szélességűre és azt mentse Cai-lun_kep.png néven! 

  2. Készítse el a weboldal tetején megjelenő 650×200 képpontos képet a leírás és a minta alapján! A képet cim.png néven mentse! 

  3. A kép háttérszíne sötétbarna RGB(89, 52, 27) kódú szín legyen! Erre írja fehér színnel, minden betűt eltérő betűtípussal, a „Papír” szöveget! A betűk magassága is változó legyen tetszőlegesen 80 és 180 képpont között! Ügyeljen arra, hogy a betűk ne lógjanak ki a képből és ne fedjék egymást! 

  4. Hozzon létre egy weblapot papir.html néven! A weblap tulajdonságait állítsa be a következők szerint:

      a. az oldal háttérszíne legyen szürke (#999999 kódú szín)

      b. a szöveg színe legyen fekete és a linkek minden állapotának színe fehér

      c. a böngésző címsorában megjelenő cím „A papír története” legyen! 

  5. Az oldal alapjának készítsen egy 670 képpont széles, 1 soros és 1 oszlopos, szegély nélküli táblázatot! A táblázat legyen középre igazított, a cellamargó és a cellaköz 2 pontos! A táblázat háttérszínét állítsa fehérre! 

  6. A táblázatba helyezze el a cim.png képet és igazítsa középre! (Ha nem tudta elkészíteni a képet, akkor a helyettes.png állományt illessze be!) A képre állítson be hivatkozást, amely a webforras.txt állomány első sorában, kapcsos zárójelben lévő címre mutasson! 

  7. Ebbe a táblázatba a kép alá készítsen egy középre igazított belső táblázatot, mely 650 képpont széles, 2 soros, 4 oszlopos és szegély nélküli! A táblázat celláinak háttérszíne legyen sötétzöld (#485808 kódú szín)! A cellákat 60 pont magasságúra, a cellamargót és a cellaközt 2 pontosra állítsa! 

  8. A belső táblázat minden cellájában a szöveg vízszintesen középre igazított legyen! Az első sorában vonja össze a cellákat, és ide a forrásszövegből tegye át vagy gépelje be „A papírgyártás története” címet! A címet alakítsa egyes szintű címsor stílusúvá és alkalmazzon fehér betűszínt! 

  9. A második sor celláiba a szöveget a webforras.txt állományból másolja át, vagy gépelje be! A további formázásokat az oldal többi részének elkészítése után tudja elvégezni. 

  10. Az oldal szövegét a webforras.txt állományból másolja át a belső táblázat alá! A bekezdéseket hozza létre a mintának megfelelően! 

  11. A négy alcím szövege kettes szintű címsor stílussal jelenjen meg! Mindegyik elé szúrja be a jel.png állományt a minta szerinti elrendezéssel! Ezekhez a bekezdésekhez hozzon létre oldalon belüli hivatkozási pontot! 

  12. A belső táblázat második sorának celláiban lévő szövegekre készítsen oldalon belüli hivatkozást, amire kattintva az oldal szövegének megfelelő részéhez ugorhatunk! A hivatkozások szövegét az alapértelmezettnél nagyobb betűmérettel és félkövér betűstílussal jelenítse meg! 

  13. A második alcím elé helyezze el a Cai-lun_kep.png képet vízszintesen középre igazítva! Állítsa be alternatív (magyarázó) szövegnek a „Cai-lun képe” kifejezést, és a képet 1 pont vastag kerettel szegélyezze! 

Minta