Egy weboldalt kell készítenie a búbos banka rövidbemutatá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.
FIGYELEM! Lesznek olyanok amit a css-be kell beállítani!
Ahol a feladat másként nem kéri, a formázásibeá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étmagyarra é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! Aweboldal címe („Búbos banka”) 1-esszintű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ásoldalhivatkozá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 astíluslap balkep azonosítójának felhasználásával! Ha a kép fölévisszük az egeret, vagy akép valamiért nem jeleníthetőmeg, akkor mindkét esetben a „Könyv-rajz”szöveg jelenjenmeg!<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 aHTML állományába! A táblázat további beállításait és formázását a következőképpenvé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éselem felhasználásával a „Rend”és a „Család”soroknál a rendszertanielnevezé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útumsegí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 jobbkepazonosítójának felhasználásával! Ha a kép fölévisszük az egeret, vagy a kép valamiért nemjelení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ítsenhivatkozást a minta alapján! A teljes bekezdésre alkalmazza a stíluslap forrasosztá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ítottlegyen!text-align: center;
Nincsenek megjegyzések:
Megjegyzés küldése