2011. november 3., csütörtök

A paprika csíp...

Folytatjuk az érettségi feladatok gyakorlását. Ezeknek nem az a célja, hogy átmenjünk az érettségin, hanem az eddig megtanult tag-ek, attribútumok és értékek gyakorlása. Jövő héttől folytatjuk a W3-as tananyagot. Utána pedig áttérünk a CSS-re.

A mai feladat itt található. A mi részünk a 2B. Álljunk is neki.


Hozzon létre egy állományt, amelynek neve legyen index.html!


<html>
<body>

</body>
</html>



Az oldal háttérszíne legyen papayawhip (#FFEFD5 kódú szín) és a szövegszín saddlebrown (#8B4513 kódú szín)!


<html>
<body style="background-color:#ffefd5; color:#8b4513;">
</body>
</html>





A szöveget a  forras.txt állományból másolja át, és a szövegtördelést állítsa be a mintának megfelelően!
A cím („Ismered a legcsípősebbet?”) egyes, a három alcím kettes szintű címsor stílussal jelenjen meg!
A cím elé, azzal egy sorba szúrja be a szines.jpg képet! A képre állítson be 1 pontos keretet és 10 pontos szövegtől mért távolságot!


<html>
<body style="background-color:#ffefd5; color:#8b4513;">
<h1><img src="szines.jpg" border="1" style="margin-right:10px;">Ismered a legcsípősebbet? </h1>
<h2>Bemutatása</h2>
<p>A paprika ...ban termesztik.</p>
<h2>Fajtái</h2>
<p>Öt faját, de sok változattal termesztik szerte a világon</p>
Közönséges paprika
Cserjés paprika
Kínai paprika
Bogyós paprika
Szőrös paprika
<h2>Csípősség</h2>
<p>A paprika csíp... érezhető már.</p>
Paprika Csípősség (Scoville érték)
zöldpaprika 0
a kevésbé csípős hazai paprikák 500-1000
csípős paprikák 1500-2500
a mexikói Serrano chili 5000-20000
</body>
</html>

 A böngésző keretén megjelenő cím szövege „Paprika” legyen!


<html>
        <head>
<title>Paprika</title>
</head>
<body style="background-color:#ffefd5; color:#8b4513;">
<h1><img src="szines.jpg" border="1" style="margin-right:10px;">Ismered a legcsípősebbet? </h1>
<h2>Bemutatása</h2>
<p>A paprika ...ban termesztik.</p>
<h2>Fajtái</h2>
<p>Öt faját, de sok változattal termesztik szerte a világon</p>
Közönséges paprika
Cserjés paprika
Kínai paprika
Bogyós paprika
Szőrös paprika
<h2>Csípősség</h2>
<p>A paprika csíp... érezhető már.</p>
Paprika Csípősség (Scoville érték)
zöldpaprika 0
a kevésbé csípős hazai paprikák 500-1000
csípős paprikák 1500-2500
a mexikói Serrano chili 5000-20000
</body>
</html>


Az öt paprikafajtára állítson számozatlan felsorolást!  A felsorolás első paprikafajtáját, a „Közönséges paprika” nevet alakítsa a sok.jpg képre mutató linkké!


<html>
        <head>
<title>Paprika</title>
</head>
<body style="background-color:#ffefd5; color:#8b4513;">
<h1><img src="szines.jpg" border="1" style="margin-right:10px;">Ismered a legcsípősebbet? </h1>
<h2>Bemutatása</h2>
<p>A paprika ...ban termesztik.</p>
<h2>Fajtái</h2>
<p>Öt faját, de sok változattal termesztik szerte a világon</p>
<ul>
<li><a href="sok.jpg">Közönséges paprika</a></li>
<li>Cserjés paprika</li>
<li>Kínai paprika</li>
<li>Bogyós paprika</li>
<li>Szőrös paprika</li>
</ul>
<h2>Csípősség</h2>
<p>A paprika csíp... érezhető már.</p>
Paprika Csípősség (Scoville érték)
zöldpaprika 0
a kevésbé csípős hazai paprikák 500-1000
csípős paprikák 1500-2500
a mexikói Serrano chili 5000-20000
</body>
</html>


Az oldal végén a csípősséget kifejező adatokat foglalja táblázatba a mintának megfelelően! 
a. A táblázat legyen 300 pont széles, 1 pontos szegélyű és középre igazított! 
b. A táblázat két oszlopból álljon! A jobb oldali oszlop 120 pont széles legyen! 
c. A paprikafajták erősségét a második oszlopban a cellák háttérszínével is ábrázolja! Alkalmazzon világos árnyalatokat a jó olvashatóságért! A 2. cellától kezdve lefelé a cellák háttérszíne legyen zöld, sárga, piros és lila! 






<html>
        <head>
<title>Paprika</title>
</head>
<body style="background-color:#ffefd5; color:#8b4513;">
<h1><img src="szines.jpg" border="1" style="margin-right:10px;">Ismered a legcsípősebbet? </h1>
<h2>Bemutatása</h2>
<p>A paprika ...ban termesztik.</p>
<h2>Fajtái</h2>
<p>Öt faját, de sok változattal termesztik szerte a világon</p>
<ul>
<li><a href="sok.jpg">Közönséges paprika</a></li>
<li>Cserjés paprika</li>
<li>Kínai paprika</li>
<li>Bogyós paprika</li>
<li>Szőrös paprika</li>
</ul>
<h2>Csípősség</h2>
<p>A paprika csíp... érezhető már.</p>
<table width="300px" align="center" border="1">
<tr>
<td>Paprika</td>
<td width="120px" align="center">Csípősség<br/> (Scoville érték)</td>
</tr>
<tr>
<td>zöldpaprika</td>
<td align="center" style="background-color:#00FA9A;">0</td>
</tr>
<tr>
<td>a kevésbé csípős hazai paprikák</td>
<td align="center" style="background-color:#FFFFE0;">500-1000</td>
</tr>
<tr>
<td>csípős paprikák</td>
<td align="center" style="background-color:#FF6347;">1500-2500</td>
</tr>
<tr>
<td>a mexikói Serrano chili</td>
<td align="center" style="background-color:#DDA0DD;">5000-20000</td>
</tr>
</table>
</body>
</html>




És kész a feladat. Nem is olyan nehéz ugye? Ha valamit nem értesz, akkor keress vissza az előző leckékben, ha azután sem megy, akkor írj egy kommentet. A feladat megoldása innen letölthető.




Nincsenek megjegyzések:

Megjegyzés küldése