Lepke

logo

Feladat

Készíts weblapot a lepkék bemutatására a következő minta és leírás szerint!

  • Hozz létre két weblapot nappali.html/index.html és ejjeli.html néven! 
  • Először a nappali.html oldalt készítsd el! Az oldal háttérszíne DarkSlateGray (#2F4F4F kódú szín)!
  • 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!
  • Az oldal váza, a mintának megfelelően egy téglalap (blokk). A blokk 640 px 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íts be, hogy a kép és a szöveg elrendezése a mintának megfelelő legyen! Állíts be 5-5 px szakasztávolságokat és szakaszmargókat (a szöveg távolságát a blokk szélétől)!
  • Az „A nappali lepke jellemzői” alcím kettes szintű címsor! Az oldal többi karaktere az alapértelmezettnél nagyobb méretű legyen!
  • Szúrd 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ítsd a mintának megfelelően!
  • Gépeld be az „Az éjjeli lepkék” szöveget, alakítsd linkké, amely a ejjeli.html oldalra mutasson! 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úrd be a jel.gif képet úgy, hogy egy sorban legyenek!
  • Készítsd el az ejjeli.html állományt a minta alapján!
  • A blokk háttérszínét állítsd DarkSlateGray-re (#2F4F4F kódú szín) és a szöveg színét fehérre (#FFFFFF kódú)!
  • Szúrd be a lepke képét 1 px kerettel (k3.jpg), és az elrendezést állítsd a mintának megfelelően!
  • Gépeld be az „A nappali lepkék” szöveget a táblázat utolsó bekezdésébe, alakítsd 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úrd be a jel.gif képet úgy, hogy egy sorban legyenek! 
  • Kódolásod helyességét ellenőrizd a w3.org validator and tools oldalának segítségével!

Minta

Nappali lepkék minta
nappali.html
éjjeli lepkék minta
ejjeli.html