Nézzük is meg a 2011. májusi feladatot.
Innen elérhető. A 2. feladat a miénk.
Van benne egy kis grafika is. Azt nem csináljuk mi most meg. Ajánlom, hogy először mindenki mennyen végig a feladaton maga. Csak az után nézd meg a megoldást itt, ha már kész vagy, vagy ha tényleg nem tudod, hogy mit kell csinálni.
1. Hozzon létre két weblapot történet.html és bush.html néven. MINDKÉT weboldalt - azonos módon- az alábbiak szerint hozza létre:
<html>
<body>
</body>
</html>
Az oldal háttérszíne világosszürke (#E0E0E0 = RGB(224, 224, 224) kódú szín), a szöveg színe fekete, a linkek minden állapotának színe lila (#666584 = RGB(102, 101, 132) kódú szín) legyen!
<html>
<body>
</body>
</html>
Az oldal háttérszíne világosszürke (#E0E0E0 = RGB(224, 224, 224) kódú szín), a szöveg színe fekete, a linkek minden állapotának színe lila (#666584 = RGB(102, 101, 132) kódú szín) legyen!
<html>
<body style="background-color: rgb(224, 224, 224); color:black">
</body>
</html>
Az oldal alapjának készítsen egy 650 képpont széles, 1 soros és 1 oszlopos, szegély nélküli táblázatot! A táblázat legyen középre igazított, a cellamargó és a cellaköz 0 pontos! A táblázat háttérszíne legyen kék (#5C6B7B = RGB(92, 107, 123) kódú szín)
<html>
<body style="background-color: rgb(224, 224, 224); color:black">
<table border="0" width = "650px" align="center" cellpadding="0" cellspacing="0"
style="background-color:rgb(92, 107, 123);">
<tr>
<td></td>
</tr>
</table>
</body>
</html>
Ebbe a táblázatba készítsen egy 600 képpont széles, 4 soros, 4 oszlopos táblázatot! A táblázat vízszintesen legyen középre igazított! A táblázat háttérszíne legyen fehér! A cellamargót 0, a cellaközt 1 képpontosra állítsa!
<html>
<body style="background-color: rgb(224, 224, 224); color:black">
<table border="0" width = "650px" align="center" cellpadding="0" cellspacing="0"
style="background-color:rgb(92, 107, 123);">
<tr>
<td>
<table width="600" align="center" cellpadding="0" cellspacing="1"
style="background-color:white" border="0">
<tr>
<td></td>
<td></td>
<td></rd>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></rd>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></rd>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></rd>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
A belső táblázat első sorában vonja össze a cellákat, és ide illessze be az elkészített cim.png állományt!
<html>
<body style="background-color: rgb(224, 224, 224); color:black">
<table border="0" width = "650px" align="center" cellpadding="0" cellspacing="0"
style="background-color:rgb(92, 107, 123);">
<tr>
<td>
<table width="600" align="center" cellpadding="0" cellspacing="1"
style="background-color:white" border="0">
<tr>
<td colspan="4"><img src ="cim.png"/></td>
</tr>
<tr>
<td></td>
<td></td>
<td></rd>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></rd>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></rd>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
A 2. és 3. sor celláinak háttérszíne legyen világoskék
(#CDDBEB = RGB(205, 219, 235) kódú szín)! A cellák magassága 35 pontos
legyen!
<html>
<body style="background-color: rgb(224, 224, 224); color:black">
<table border="0" width = "650px" align="center" cellpadding="0" cellspacing="0"
style="background-color:rgb(92, 107, 123);">
<tr>
<td>
<table width="600" align="center" cellpadding="0" cellspacing="1"
style="background-color:white" border="0">
<tr>
<td colspan="4"><img src ="cim.png"/></td>
</tr>
<tr style="background-color:rgb(205,219,235);text-
align:center;height:35px;">
<td></td>
<td></td>
<td></rd>
<td></td>
</tr>
<tr style="background-color:rgb(205,219,235);text-
align:center;height:35px;">
<td></td>
<td></td>
<td></rd>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></rd>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
A 2. és 3. sorba a szoveg.txt állomány első két sorában található neveket illessze be a minta szerint! A neveket vízszintesen és függőlegesen igazítsa középre!
<html>
<body style="background-color: rgb(224, 224, 224); color:black">
<table border="0" width = "650px" align="center" cellpadding="0" cellspacing="0"
style="background-color:rgb(92, 107, 123);">
<tr>
<td>
<table width="600" align="center" cellpadding="0" cellspacing="1"
style="background-color:white" border="0">
<tr>
<td colspan="4"><img src ="cim.png"/></td>
</tr>
<tr style="background-color:rgb(205,219,235);text-
align:center;height:35px;">
<td>Vannevar Bush</td>
<td>Paul Baran</td>
<td>J.C.R. Licklider</td>
<td>Lawrence Roberts</td>
</tr>
<tr style="background-color:rgb(205,219,235);text-
align:center;height:35px;">
<td>Robert Metcalfe</td>
<td>Douglas Engelbart</td>
<td>Vinton Cerf</td>
<td>Robert E. Kahn</td>
</tr>
<tr>
<td colspan="4"></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
A táblázat 4. sorában vonja össze a cellákat!
Ezzel megcsináltuk a feladat azon részét, mely mindkét html fájlra vonatkozik. Tehát a kódot átmásoljuk mindkettő fájlunkba. Azonban még koránt sincs vége.
A történet.html lapon a belső táblázat 2. sor első cellájában lévő „Vannevar Bush” névre készítsen linket! A link a bush.html oldalra mutasson!
<html>
<body style="background-color: rgb(224, 224, 224); color:black">
<table border="0" width = "650px" align="center" cellpadding="0" cellspacing="0"
style="background-color:rgb(92, 107, 123);">
<tr>
<td>
<table width="600" align="center" cellpadding="0" cellspacing="1"
style="background-color:white" border="0">
<tr>
<td colspan="4"><img src ="cim.png"/></td>
</tr>
<tr style="background-color:rgb(205,219,235);text-
align:center;height:35px;">
<td><a href="bush.html">Vannevar Bush</a></td>
<td>Paul Baran</td>
<td>J.C.R. Licklider</td>
<td>Lawrence Roberts</td>
</tr>
<tr style="background-color:rgb(205,219,235);text-
align:center;height:35px;">
<td>Robert Metcalfe</td>
<td>Douglas Engelbart</td>
<td>Vinton Cerf</td>
<td>Robert E. Kahn</td>
</tr>
<tr>
<td colspan="4"></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
A belső táblázat 4. sorának összevont cellájába illessze be a szoveg.txt állományból a bevezető részt! A „Bevezető” címet formázza félkövér betűstílussal, és állítson be az alapértelmezettnél nagyobb betűméretet! A cím és a szöveg elrendezése a mintának megfelelő legyen! Ügyeljen a bekezdések kialakítására! A bevezető utolsó mondata előtt lévő „Forrás” szóval kezdődő két sor betűméretét állítsa az alapértelmezettnél kisebbre! Az itt található webcímet alakítsa hivatkozássá, ami az adott lapra mutat!
<html>
<body style="background-color: rgb(224, 224, 224); color:black">
<table border="0" width = "650px" align="center" cellpadding="0" cellspacing="0"
style="background-color:rgb(92, 107, 123);">
<tr>
<td>
<table width="600" align="center" cellpadding="0" cellspacing="1"
style="background-color:white" border="0">
<tr>
<td colspan="4"><img src ="cim.png"/></td>
</tr>
<tr style="background-color:rgb(205,219,235);text-
align:center;height:35px;">
<td><a href="bush.html">Vannevar Bush</a></td>
<td>Paul Baran</td>
<td>J.C.R. Licklider</td>
<td>Lawrence Roberts</td>
</tr>
<tr style="background-color:rgb(205,219,235);text-
align:center;height:35px;">
<td>Robert Metcalfe</td>
<td>Douglas Engelbart</td>
<td>Vinton Cerf</td>
<td>Robert E. Kahn</td>
</tr>
<td colspan="4"><b style="font-size:30px;">Bevezető</b><br/>
<p>Az elmúlt évtizedekben...forgalmat bonyolítják.</p>
<p> Hamarosan kiderült... van szó.</p>
<p>Ahhoz persze... a világon.
<p style="font-size:10px">Forrás<br/>
<a href="http://www.mindentudas.hu/maray/20031201maray2.html?pIdx=1">
http://w...tml?pIdx=1</a><p>
<p>Az alábbiakban ...kialakulásában.</p>
</td>
</table>
</td>
</tr>
</table>
</body>
</html>
A bush.html lapon az elkészített képre (cim.png) állítson be hivatkozást, amely a tortenet.html oldalra mutasson! Ezen a lapon ne legyen hivatkozás Vannevar Bush nevére a belső táblázat második sorában.
<html>
<body style="background-color: rgb(224, 224, 224); color:black">
<table border="0" width = "650px" align="center" cellpadding="0" cellspacing="0"
style="background-color:rgb(92, 107, 123);">
<tr>
<td>
<table width="600" align="center" cellpadding="0" cellspacing="1"
style="background-color:white" border="0">
<tr>
<td colspan="4"><a href="történet.html">
<
img src
="cim.png"/></td>
</a> </tr>
<tr style="background-color:rgb(205,219,235);text-
align:center;height:35px;">
<td>Vannevar Bush</td>
<td>Paul Baran</td>
<td>J.C.R. Licklider</td>
<td>Lawrence Roberts</td>
</tr>
<tr style="background-color:rgb(205,219,235);text-
align:center;height:35px;">
<td>Robert Metcalfe</td>
<td>Douglas Engelbart</td>
<td>Vinton Cerf</td>
<td>Robert E. Kahn</td>
</tr>
<tr>
<td colspan="4"></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
A bush.html oldalra a belső táblázat 4. sor összevont celláiba illessze be a szoveg.txt állományból a Vannevar Bushra vonatkozó szöveget! A nevet és a születési, halálozási dátumot tartalmazó sort formázza félkövér betűstílussal, és állítson be az alapértelmezettnél nagyobb betűméretet! A címet és a szöveget rendezze el a mintának megfelelően! Ügyeljen a bekezdések kialakítására! Vannevar Bush munkásságáról szóló szöveg első bekezdéshez szúrja be a vannevarbush.jpg képet! A képet igazítsa a minta szerint! A képhez állítson 5 pontos jobb és bal margót! A szöveg harmadik bekezdése után középre illessze be a memex.jpg képet!
<html>
<body style="background-color: rgb(224, 224, 224); color:black">
<table border="0" width = "650px" align="center" cellpadding="0" cellspacing="0"
style="background-color:rgb(92, 107, 123);">
<tr>
<td>
<table width="600" align="center" cellpadding="0" cellspacing="1"
style="background-color:white" border="0">
<tr>
<td colspan="4"><a href="történet.html">
<
img src
="cim.png"/></td>
</a> </tr>
<tr style="background-color:rgb(205,219,235);text-
align:center;height:35px;">
<td>Vannevar Bush</td>
<td>Paul Baran</td>
<td>J.C.R. Licklider</td>
<td>Lawrence Roberts</td>
</tr>
<tr style="background-color:rgb(205,219,235);text-
align:center;height:35px;">
<td>Robert Metcalfe</td>
<td>Douglas Engelbart</td>
<td>Vinton Cerf</td>
<td>Robert E. Kahn</td>
</tr>
<td colspan="4"><b style="font-size:30px">Vannevar ...</b><br/>
<img src="vannevarbush.jpg" align="right"/>
<p>Vannevar Bu...b az ARPA.</p>
<p>1945 jú...apjait.</p>
<p>Bush eg... hozzáférést.</p>
<p style="text-align:center"><img src="memex.jpg"/>
<p>A gép igazi ú...más helyeire ugorhatunk.</p>
<p>Munkássága .Web lett. </p>
</td>
</table>
</td>
</tr>
</table>
</body>
</html>
Készen is vagyunk az első mintafeladatunkkal. A szükséges file-ok letölthetők innen. A szöveget az itt lévő forráskódban lerövidítettem (de gondolom észrevettétek :D). A szöveg tördelése kicsit retard lett, de a jelöléseket, záró tag-eket már tanultuk, szóval nem okozhat gondot. A ti oldalatokon a teljes szöveget használjátok. Ha valami nem érthető, akkor nézzétek meg az előző leckéket, vagy kérdezzetek kommentben. Legközelebb egy másik érettségi feladatot fogunk megnézni.
Nincsenek megjegyzések:
Megjegyzés küldése