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

Vetési varjú

Készítsünk weboldalt a leírás és a minta alapján.

Források


Feladatok


A vetési varjút veszélyeztetettsége és a hirtelen állománycsökkenése miatt a Magyar Madártani és Természetvédelmi Egyesület – a kék vércsével együtt – a 2009-es év madarának választotta. Az Ön feladata, hogy a minta és a leírás alapján a képszerkesztési feladatokat
elvégezze és a vetési varjút bemutató weboldalt elkészítse.

A weboldal és az azon szereplő első kép elkészítéséhez szükséges képállományok a magok.png, labnyom.png, varjukep1.jpg és varjukep2.jpg. A weblap szövegét a varjuforras.txt (UTF-8 kódolású) állomány tartalmazza.

  1. A weblap tetejére beillesztendő képet kell elkészítenie a magok.png és a labnyom.png állományok felhasználásával! Az elkészített képállomány neve fejlec.png legyen!

  2. Az elkészített kép mérete és háttere az elszórt magokat ábrázoló magok.png állományéval egyezzen meg!

  3. Helyezze el a madár lábnyomait a magokat ábrázoló képen a minta szerint, mintha egy magokat szedő madár ment volna végig a hóban! A varjú egyik lábának nyomát a labnyom.png állomány tartalmazza. A lábnyomot kicsinyítse úgy, hogy a másolatok elférjenek a háttérképen! Ügyeljen arra, hogy a bal és jobb lábnyom egymás tükörképei legyenek! A képen 5 lábnyompár legyen!

  4. Készítse el a varjak.html állományt! Az oldal forrásszövegét a varjuforras.txt állományban találja. A böngésző címsorában megjelenő cím szövege „Vetési varjú” legyen!

  5. Az oldal jellemzőinél állítsa be, hogy a háttérszín kékesszürke (#99ACB2 kódú szín), a szöveg színe pedig sötétszürke (#192C32 kódú szín) legyen! A linkek színe minden állapotban narancssárga (#FF6F00 kódú szín) legyen!

  6. Az oldal szerkezetét egy négysoros és háromoszlopos táblázatból alakítsa ki! A táblázat tulajdonságait az alábbiaknak megfelelően állítsa be:
    − a szélesség legyen1006 pontos;
    − az oldalon legyen vízszintesen középre igazított;
    − a táblázat szegély nélküli legyen (mérete 0 képpont);
    − a cellamargó legyen 3 képpont és a cellatávolság alapértelmezett;
    − a harmadik sorának háttérszíne fehér legyen!

  7. Szúrja be a fejlec.png képet a táblázat első sorába! A képnek állítson 1 pontos szegélyt! Ha a képet nem sikerült elkészítenie, akkor használja a potfejlec.png állományt!

  8. Az oldal címét, a „Vetési varjú” szöveget a táblázat második sorába helyezze el, és alakítsa egyes szintű címsor stílusúvá! Alatta a latin név normál bekezdésként, de dőlt betűstílussal jelenjen meg! A szöveget a minta szerint igazítsa!

  9. A harmadik sor középső cellájába a szöveget a varjuforras.txt állományból másolja át! A bekezdéseket készítse el a mintának megfelelően! A mintán látható felsorolásokat hozza létre!

  10. A harmadik sor első cellájába helyezze el a varjukep1.jpg, a harmadik cellájába pedig a varjukep2.jpg képet! Mindkét kép szegély nélküli és vízszintesen középre igazított legyen! Állítsa be, hogy ha az egeret a képekre mozgatjuk a böngészőben, akkor magyarázó szövegek jelenjenek meg a buboréksúgókban! Az első képnél a „levegőben”, a másodiknál a „földön” legyen a felirat! Ehhez a képek megjelenítéséért felelős tageket egészítse ki a következő paraméterrel: title=”levegőben”, illetve title=”földön”!

  11. A táblázat negyedik sorában lévő szöveg címsor stílus beállításait a harmadik sorban lévő szöveg segítségével állítsa be, vagyis:
    − a harmadik sorban aláhúzott szövegek kettes szintű címsor stílussal,
    − a nem aláhúzott szövegek hármas szintű címsor stílussal jelenjenek meg!

  12. A kettes szintű címsor stílusú bekezdésekhez hozzon létre könyvjelzőket, majd készítsen oldalon belüli hivatkozást a harmadik sor középső cellájában lévő három szóra, amire kattintva az oldal szövegének megfelelő részéhez ugorhatunk!

Minta

Figyelmeztetés

Ha Kompozert használsz, állítsd a karakterkódolást utf-8-ra!