HTML az alapoktól: A második feladat

Ma megnézünk egy másik érettségi feladatot :)
Ha valami nem érthető kódban, akkor először menj végig az eddig megtanult leckéken, ha utána sem érted, hogy miért van, akkor írj egy hozzászólást.
A feladat innen letölthető. A 3-as a miénk. Kezdjünk is neki:

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

<html>
<head>
</head>
<body>
</body>
</html>

Az oldal háttérszíne legyen DarkGreen (#006400 kódú sötétzöld), a szövegszín pedig maradjon az alapértelmezett! Az oldal linkjeinek színe minden állapotban szintén DarkGreen legyen!

<html>
<head>
</head>
<body style="backgoround-color:#006400" link="#006400" alink="#006400">
</body>
</html>

A böngésző keretén megjelenő cím szövege „Környezetbarát megoldások” legyen!

<html>
<head>
<title>Környezetbarát megoldások</title>
</head>
<body style="backgoround-color:#006400" link="#006400" alink="#006400">
</body>
</html>

A weblap szerkezete egy egysoros, kétoszlopos, középre igazított, 1000 képpont széles, szegély nélküli táblázattal készüljön!

<html>
<head>
<title>Környezetbarát megoldások</title>
</head>
<body style="background-color:#006400" link="#006400" alink="#006400">
<table align="center" width="1000px" border="0">
<tr>
<td></td>
<td></td>
<tr>
</table>
</body>
</html>

A táblázat háttérszíne PaleGreen (#98FB98 kódú világoszöld) legyen! A cellaközt és

cellamargót állítsa 3-ra! Az első oszlop szélessége 150 képpont legyen!

<html>

<head>

<title>Környezetbarát megoldások</title>

</head>

<tr>

<tr>

</table>

</body>

</html>

A táblázat bal oldali cellájába szúrja be a palack.png képet egymás alá négy példányban! A cella tartalma vízszintesen középre és függőlegesen felülre igazított legyen!

<html>
<head>
<title>Környezetbarát megoldások</title>
</head>
<body style="background-color:#006400" link="#006400" alink="#006400">
<table align="center" width="1000px" border="" style="background-color:#98FB98" cellpadding="3" cellspacing="3">
<tr>
<td width="150px" align="center"><img src="palack.png""><img src="palack.png"><img src="palack.png"/><img src="palack.png"></td>
<td></td>
<tr>
</table>
</body>
</html>

A szöveget a kornyezet.txt állományból másolja át a táblázat jobb oldali cellájába, majd a szövegtördelést állítsa be a mintának és az alábbi leírásnak megfelelően! A cím, a „Hogyan lesz a PET palackból polárpulcsi?” szöveg kettes szintű címsor stílussal és DarkGreen (#006400 kódú sötétzöld) betűszínnel jelenjen meg! A másik három alcímet négyes szintű címsor stílussal formázza meg

<html>
<head>
<title>Környezetbarát megoldások</title>
</head>
<body style="background-color:#006400" link="#006400" alink="#006400">
<table align="center" width="1000px" border="" style="background-color:#98FB98" cellpadding="3" cellspacing="3">
<tr>
<td width="150px" align="center"><img src="palack.png""><img src="palack.png"><img src="palack.png"/><img src="palack.png"></td>
<td><h2 style="color:#006400;">Hogyan lesz a PET palackból polárpulcsi? </h2>
<p>Ma...nkért.</p>
<h4>Kevesebb szemét, kevesebb energia, egészségesebb környezet</h4>
<p>A szétválogatva...nyersanyagra van szükségünk. </p>
<h4>Tudtad, hogy</h4>
naponta 7...édországban a hulladék 80-90%-át így dolgozzák fel?
<h4>Mi lesz a szelektíven gyűjtött hulladékból?</h4>
. <p>Sajnos m.épében.</td></p>
<tr>
</table>
</body>
</html>

A mintának megfelelően az első alcím előtt egy 50% széles, középre igazított vonalat szúrjon be!

<html>
<head>
<title>Környezetbarát megoldások</title>
</head>
<body style="background-color:#006400" link="#006400" alink="#006400">
<table align="center" width="1000px" border="" style="background-color:#98FB98" cellpadding="3" cellspacing="3">
<tr>
<td width="150px" align="center"><img src="palack.png""><img src="palack.png"><img src="palack.png"/><img src="palack.png"></td>
<td><h2 style="color:#006400;">Hogyan lesz a PET palackból polárpulcsi? </h2>
<p>Ma...nkért.</p>
<hr width=50% />
<h4>Kevesebb szemét, kevesebb energia, egészségesebb környezet</h4>
<p>A szétválogatva gyűjtött hulla ..nyersanyagra van szükségünk. </p>
<h4>Tudtad, hogy</h4>
naponta 7...édországban a hulladék 80-90%-át így dolgozzák fel?
<h4>Mi lesz a szelektíven gyűjtött hulladékból?</h4>
. <p>Sajnos m.épében.</td></p>
<tr>
</table>
</body>
</html>

Az első alcím után az „A szétválogatva gyűjtött hulladék” szöveget alakítsa linkké, amely a http://www.szelektiv.hu/ oldalra mutat!

<html>
<head>
<title>Környezetbarát megoldások</title>
</head>
<body style="background-color:#006400" link="#006400" alink="#006400">
<table align="center" width="1000px" border="" style="background-color:#98FB98" cellpadding="3" cellspacing="3">
<tr>
<td width="150px" align="center"><img src="palack.png""><img src="palack.png"><img src="palack.png"/><img src="palack.png"></td>
<td><h2 style="color:#006400;">Hogyan lesz a PET palackból polárpulcsi? </h2>
<p>Ma...nkért.</p>
<hr width=50% />
<h4>Kevesebb szemét, kevesebb energia, egészségesebb környezet</h4>
<p><a href="http://www.szelektiv.hu">A szétválogatva gyűjtött hulladék</a>...nyersanyagra van szükségünk. </p>
<h4>Tudtad, hogy</h4>
naponta 7...édországban a hulladék 80-90%-át így dolgozzák fel?
<h4>Mi lesz a szelektíven gyűjtött hulladékból?</h4>
. <p>Sajnos m.épében.</td></p>
<tr>
</table>
</body>
</html>

A második alcím utáni bekezdésekre állítson be számozatlan felsorolást a mintának megfelelő helyen!

<html>

<head>

<title>Környezetbarát megoldások</title>

</head>

<tr>

<td><h2 style="color:#006400;">Hogyan lesz a PET palackból polárpulcsi? </h2>

<p>Ma már a ...ünkért.</p>

<h4>Kevesebb szemét, kevesebb energia, egészségesebb környezet</h4>

<p><a href="http://www.szelektiv.hu">A szétválogatva gyűjtött hulladék</a> újrahasznosítá...an szükségünk. </p>

<h4>Tudtad, hogy</h4>

<ul>

<li>naponta 70 dkg. fejenként (évi 250 kg/fő)?</li>

<li>ennek 50%-a szelektíven gyűjthető és újrahasznosítható?</li>

<li>és egyötöde biológiailag lebontható?</li>

<li>egy tonna ú.nk meg a kivágástól?</li>

<li>a válogatva gyű. újraha.20%-os energia megtakarítás is elérhető?</li>

<li>szelektív.gyártáshoz heted annyi energiára van szükség?</li>

<li>27 db másfél li...

<li>Dániában, Svédors.a hulladék 80-90%-át így dolgozzák fel?</li>

</ul>

<h4>Mi lesz a szelektíven gyűjtött hulladékból?</h4>

<p>Sajnos ...épében.</td></p>

<tr>

</table>

</body>

</html>

A felsorolás után a bala.jpg képet illessze be vízszintesen középre! A képet 1 pont vastag kerettel szegélyezze!

<html>

<head>

<title>Környezetbarát megoldások</title>

</head>

<tr>

<td><h2 style="color:#006400;">Hogyan lesz a PET palackból polárpulcsi? </h2>

<p>Ma már a ...ünkért.</p>

<h4>Kevesebb szemét, kevesebb energia, egészségesebb környezet</h4>

<p><a href="http://www.szelektiv.hu">A szétválogatva gyűjtött hulladék</a> újrahasznosítá...an szükségünk. </p>

<h4>Tudtad, hogy</h4>

<ul>

<li>naponta 70 dkg. fejenként (évi 250 kg/fő)?</li>

<li>ennek 50%-a szelektíven gyűjthető és újrahasznosítható?</li>

<li>és egyötöde biológiailag lebontható?</li>

<li>egy tonna ú.nk meg a kivágástól?</li>

<li>a válogatva gyű. újraha.20%-os energia megtakarítás is elérhető?</li>

<li>szelektív.gyártáshoz heted annyi energiára van szükség?</li>

<li>27 db másfél li...

<li>Dániában, Svédors.a hulladék 80-90%-át így dolgozzák fel?</li>

</ul><p align="center"><img src ="bala.jpg" border="1"></p>

<h4>Mi lesz a szelektíven gyűjtött hulladékból?</h4>

<p>Sajnos ...épében.</td></p>

<tr>

</table>

</body>

</html>

Ezzel készen is van a feladatunk. A szöveget ismét lerövidítettem. A jobb átláthatóságért a táblázat szegélye az utolsó feladatig 1 pont, de az utolsó feladatban eltüntettem. A tagolás ismét borzalmas. A megoldást innen letölthetitek. Holnap egy újabb feladatot fogunk megnézni.

HTML az alapoktól

Oldalak

2011. november 2., szerda

A második feladat

Nincsenek megjegyzések:

Megjegyzés küldése