b bos banka 20 pont12ainformatika.uw.hu/bubosbanka/bubosbanka.pdf · alakítson ki egy 10 soros, 2...
TRANSCRIPT
Búbos banka 20 pont A következő feladatban egy weboldalt kell készítenie a búbos banka rövid bemutatására a feladatleírás és a minta szerint. A feladat megoldása során a következő állományokat kell
felhasználnia: upuepo_01.png, upuepo_02.png, forras.txt, tablaforras.txt, bubos.css.
Ahol a feladat másként nem kéri, a formázási beállításokat a bubos.css stílusállományban
végezze el!
1. Hozzon létre HTML oldalt bubosbanka.html néven! Állítsa be az oldal nyelvét magyarra és a kódolását UTF-8-ra!
<meta charset="utf-8"> 2. A böngésző címsorában megjelenő cím „Búbos banka” legyen!
<title>Búbos banka</title>
3. A weboldal fejrészében helyezzen el hivatkozást a bubos.css stíluslapra! <link rel="stylesheet" type="text/css" href="bubos.css">
4. Az oldal törzsébe másolja be az UTF-8 kódolású forras.txt állomány tartalmát!
5. Alakítsa ki a címet, alcímeket a minta szerint! A weboldal címe („Búbos banka”) 1-es szintű címsor, az alcímek („Leírás és életmód”, „Élőhelye, költése” és „Adatok”) pedig 2- es szintű címsorok legyenek! <h1>Búbos banka</h1> h2>Leírás és életmód</h2> <h2>Élőhelye, költése</h2> <h2>Adatok</h2> 6. Alakítsa ki a szöveg bekezdéseit a minta szerint! A dokumentum végén a forrásoldal hivatkozásának címét is tartalmazó szöveget is helyezze egy bekezdésbe!
7. A „Leírás és életmód” alcím mellett helyezze el az upuepo_01.png képet és formázza a
stíluslap balkep azonosítójának felhasználásával! Ha a kép fölé visszük az egeret, vagy a kép valamiért nem jeleníthető meg, akkor mindkét esetben a „Könyv-rajz” szöveg jelenjen meg! <img id="balkep" src="upuepo_01.png" alt="Köny-rajz" title="Köny-rajz"> 8. Alakítson ki egy 10 soros, 2 oszlopos táblázatot a minta és a leírás szerint az „Adatok” alcím
után! A táblázat vázát a tablaforras.txt állományban találja. Másolja ezt be a HTML
állományába! A táblázat további beállításait és formázását a következőképpen végezze el! a. A táblázat végére szúrjon be 2 sort a minta szerint! b. Az 1., 5. és 8. sorban alkalmazzon vízszintesen cellaösszevonást! colspan="2" c. Mozgassa át a szövegeket az utolsó két sor celláiba a minta szerint! A sortörés elem felhasználásával a „Rend” és a „Család” soroknál a rendszertani elnevezések magyar és latin neveit törje külön sorba a minta szerint! <br>
d. Az összevont celláknál alkalmazza a fejsor osztálykijelölőt!
e. Az összevont celláknál a megfelelő HTML tagnél elhelyezett style attribútum segítségével
igazítsa középre a szöveget! <td style="text-align: center;" class="fejsor" colspan="2">Elnevezés</td>
9. A táblázat mellé helyezze el az upuepo_02.png képet és formázza a stíluslap jobbkep azonosítójának felhasználásával! Ha a kép fölé visszük az egeret, vagy a kép valamiért nem jeleníthető meg, akkor mindkét esetben a „Éhes fiókák” szöveg jelenjen meg! <img id="jobbkep" src="upuepo_02.png" alt="Éhes fiókák" title="Éhes fiókák"> 10. A táblázat alatti forrásmegjelölést tartalmazó bekezdésben lévő URL-re készítsen hivatkozást
a minta alapján! A teljes bekezdésre alkalmazza a stíluslap forras osztálykijelölőjét! <p class="forras">Forrás: <a href="http://www.mme.hu/magyarorszagmadarai/madaradatbazis-upuepo" target="_blank">http://www.mme.hu/magyarorszagmadarai/madaradatbazis-upuepo</a></p> 11. A következő beállításokat, módosításokat a stíluslap megfelelő kijelölőinél végezze el!
a. A weboldal háttérszíne #E7E7FF színkódú világoskék színű legyen! background-color: #e7e7ff;
b. A dokumentumban a szövegszín #1D1D4E színkódú mélykék színű legyen! color: #1d1d4e;
c. Minden kép körül 1 px vastagságú, folytonos #1D1D4E színkódú mélykék színű szegélyvonal legyen! border: 1px solid #1d1d4e;
d. A balkep azonosítójú elem szélessége 200 pixel legyen!
width: 200px;
e. A forras osztályba sorolt elemek szövege vízszintesen középre igazított legyen! text-align: center; MINTA: (A megoldás szövegének tagolása felbontástól függően eltérhet a képen láthatótól.)
Megoldás (HTML) <!DOCTYPE HTML> <html>
<head> <title>Búbos banka</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="bubos.css"> </head> <body> <h1>Búbos banka</h1> <img id="balkep" src="upuepo_01.png" alt="Köny-rajz" title="Köny-rajz"> <h2>Leírás és életmód</h2> <p>Hosszútávú vonuló, a telet Afrikában tölti. Főként rovarokat, férgeket, hernyókat, tücsköket, bogarakat, sáskát, vagyis csak állati eredetű táplálékot fogyaszt. Röpte lepkeszerűen hullámzó. Táplálékkeresés közben sokat mozog a talajon, ilyenkor kevésbé feltűnő. Az állattartó telepek körül találkozhatunk vele leggyakrabban, mert a szerves trágyában előforduló rovarokat, férgeket előszeretettel fogyasztja. A mezőgazdaság intenzívvé válása kedvezőtlenül hat az állomány nagyságára. A kisparcellás, extenzív mezőgazdaság növelésével pozitív hatást érhetünk el a faj elterjedésében.</p> <h2>Élőhelye, költése</h2> <p>Hazánkban a sűrű, zárt erdők kivételével mindenütt előfordulhat, de leginkább a mozaikos mezőgazdasági területeket, gyümölcsösöket, szőlősöket, puhafás ligeterdőket kedveli. Kisebb településeken, falvakban is sokszor látni, akár költhet is az épületek (fészerek, ólak, istállók) kisebb üregeiben. Harkályok odúit szívesen elfoglalja, de kidőlt, korhadt fák üregeiben, kőrakásokban, üregekben bárhol költhet, akár a talajszintben is. Az 5-10 piszkosfehér tojáson kizárólag a tojó kotlik, a hím a táplálékot hordja, a fiókák etetésében viszont mindkét szülő részt vesz. A népnyelv büdös bankának, vagy szurtos dudunak is hívja, mivel a fiókák veszélyérzet esetén bűzös ürüléket juttatnak vélt, vagy valós támadójukra. Ezen kívül maga a költőüreg is elég sok ürüléket tartalmaz, melyet a fiókák ürítenek ki magukból.</p> <h2>Adatok</h2> <img id="jobbkep" src="upuepo_02.png" alt="Éhes fiókák" title="Éhes fiókák"> <table> <tr> <td style="text-align: center;" class="fejsor" colspan="2">Elnevezés</td> </tr> <tr> <td>Magyar név</td> <td>Búbos banka</td> </tr> <tr> <td>Tudományos név</td> <td>Upupa epops</td> </tr> <tr> <td>Angol név</td> <td>Eurasian Hoopoe</td> </tr> <tr> <td style="text-align: center;" class="fejsor" colspan="2">Rendszertan</td> </tr> <tr> <td>Rend</td> <td>Szalakótaalakúak<br> Coraciiformes</td> </tr> <tr> <td>Család</td> <td>Bankafélék<br> Upupidae</td>
</tr> <tr> <td style="text-align: center;" class="fejsor" colspan="2">Védelem</td> </tr> <tr> <td>Védelmi státusz </td> <td>védett</td> </tr> <tr> <td>Természetvédelmi érték</td> <td>50000 Ft</td> </tr> </table> <p class="forras">Forrás: <a href="http://www.mme.hu/magyarorszagmadarai/madaradatbazis-upuepo" target="_blank">http://www.mme.hu/magyarorszagmadarai/madaradatbazis-upuepo</a></p> </body> </html>
Megoldás (CSS) body{ padding: 15px; background-color: #e7e7ff; color: #1d1d4e; } h1{ text-align: center; } p{ margin: 5px; text-align: justify; } #balkep{ float: left; width: 200px; margin-right: 15px; } #jobbkep{ float: right; width: 400px; margin: 10px; } table{ box-shadow: 5px 5px 7px #1D1D4E; }
td{ border: 1px dotted #1D1D4E; padding: 2px 16px 2px; } td:first-child { font-weight: bold; text-align: right; } td:nth-child(2) { font-style: italic; text-align: left; } .fejsor{ text-align: center; background-color: #1D1D4E; color: #E7E7FF; } .forras{ margin: 15px 75px 0px; padding-top: 5px; border-top: 1px solid #1D1D4E; font-style: italic; text-align: center; } img{ box-shadow: 5px 5px 7px #1D1D4E; border: 1px solid #1d1d4e; }