Alapadatok
Év, oldalszám:2005, 133 oldal
Nyelv:magyar
Letöltések száma:1620
Feltöltve:2006. október 24.
Méret:1 MB
Intézmény:
-
Megjegyzés:
Csatolmány:-
Letöltés PDF-ben:Kérlek jelentkezz be!
Nincs még értékelés. Legyél Te az első!
Mit olvastak a többiek, ha ezzel végeztek?
Tartalmi kivonat
INTERNET TECHNOLÓGIÁK - példatár TARTALOMJEGYZÉK Tartalomjegyzék Bevezető XHTML JavaScript CSS XHTML és CSS átfogó feladatok XML PHP XHTML, CSS és PHP átfogó feladatok Hasznos linkek I II 1 35 43 61 83 90 122 129 I INTERNET TECHNOLÓGIÁK - példatár BEVEZETŐ A példatár az Internet technológiák XHTML, JavaScript, CSS, XML és PHP témaköreinek feladataival foglalkozik. Az Internet technológiák elnevezésű tantárgy keretében a hallgatók megismerkednek a Web programozás alapjaival, a dinamikus weboldalak készítésének technikájával. A példatár tananyaga teljes egészében megegyezik Dr. Mester Gyula Web programozás tankönyvének tananyagával. A kézirat elektronikus formában a következő honlapokon található http://www.prowebingcom/expert http://www.gmesterwebcom/e-tananyag Čović Zlatko chole@prowebing.com Szabadka, 2005.0415 II INTERNET TECHNOLÓGIÁK - példatár 1 INTERNET TECHNOLÓGIÁK - példatár 1. Feladat Készítsen
egy egyszerű XHTML dokumentumot, amely deklarációs részt, a fejlécet és törzs jelölőelemet tartalmaz. Írja ki a Hello World! szöveget (1 ábra) 1. ábra Megoldás: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Példa 01</title> </head> <body> Hello World! </body> </html> Az 1. feladat kódrészlete 2. Feladat Készítsen egy XHTML dokumentumot, amely megjeleníti a Hello World! szöveget. Egy új bekezdést is hozzon létre (2. ábra) 2. ábra 2 INTERNET TECHNOLÓGIÁK - példatár Megoldás: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Példa 02</title> </head> <body> Hello World! <p>Ez egy új bekezdés (paragrafus).</p> </body> </html> A 2. feladat kódrészlete 3. Feladat Készítsen XHTML dokumentumot, amely kiírja a diákok személyi adatait. Használja a következő jelölőelemeket: strong, br, b, p, em, i, u, address (3. ábra) 3. ábra Megoldás: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Példa 03</title> </head> <body> 3 INTERNET TECHNOLÓGIÁK -
példatár <strong>Személyi adatok</strong> <br /><br /> <b>Diákok:</b> <p> <em>Benkő Róbert <br /> Partizanska 16 </em> <br /> <i>Szabadka</i> <br /> <u>024-444-444</u> <br /><br /> <address> Nagy István <br /> Bajai út 334 <br /> Szabadka </address> </p> </body> </html> A 3. feladat kódrészlete 4. Feladat Készítsen XHTML dokumentumot, amely megjelenít két vízszintes vonalat és a Matrix szöveget kiírja hat címszinten (4. ábra) 4. ábra 4 INTERNET TECHNOLÓGIÁK - példatár Megoldás: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head>
<title>Példa 04</title> </head> <body> <hr /> <h1>Matrix</h1> <h2>Matrix</h2> <h3>Matrix</h3> <h4>Matrix</h4> <h5>Matrix</h5> <h6>Matrix</h6> <hr /> </body> </html> A 4. feladat kódrészlete 5. Feladat Készítsen XHTML dokumentumot, amely megfelel az adott ábrának. Használja a következő jelölőelemeket: hr, big, code, small. Tetszőlegesen használja a title atribútumot (5. ábra) 5. ábra Megoldás: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> 5 INTERNET TECHNOLÓGIÁK - példatár <title>Példa 05</title> </head> <body> <hr /> <big
title="MATRIX IS EVERYWHERE!">MATRIX - Future is now!</big> <br /> <code> 01010110101001110101010100001 00111010011010110100010 11010101101001010 010101010101 1101010 1101 10 0 <br /> System error?! </code> <br /> <b>End is not here!</b> <small>End is not here!</small> <hr /> </body> </html> Az 5. feladat kódrészlete 6. Feladat Készítsen XHTML dokumentumot, amely kiírja az ábrán lévő szöveget. Használja a h2, sup és sub jelölőelemeket (6. ábra) 6. ábra Megoldás: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Példa 06</title> </head> <body> <h2>E=mc
<sup>2</sup> 6 INTERNET TECHNOLÓGIÁK - példatár <br /> Víz=H<sub>2</sub>0 </h2> </body> </html> A 6. feladat kódrészlete 7. Feladat Szerkessze meg az ábrán látható két részre osztott XHTML dokumentumot. Használja a div, dfn, cite, pre, blockquote jelölőelemeket és az id attribútumot (7. ábra) 7. ábra Megoldás: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Példa 07</title> </head> <body> <div id="program"> <dfn>A PHP rövidítés a Hypertext Preprocessor elnevezésbõl ered.</dfn> <br /><br /> <cite>PHP program </cite> <pre> mt
srand((double)microtime()*1000000); $length=mt rand(5,8); $down=97; 7 INTERNET TECHNOLÓGIÁK - példatár $up=122; $i=0; $password=""; </pre> </div> <div id="definicio"> <blockquote > A PHP rövidítés a Hypertext Preprocessor elnevezésbõl ered. A PHP forrásprogram elkészített forráskódját elõször interpreter segítségével értelmezzük és a programfutás alatt lefordítjuk a számítógép gépi kódjára. </blockquote> </div> </body> </html> A 7. feladat kódrészlete 8. Feladat Készítse el az ábra szerinti XHTML dokumentumot. Használja a következő jelölőelemeket: acronym, tt, code, kbd, samp, var, ins, del. Tetszőlegesen alkalmazza a title attribútumot (8. ábra) 8. ábra Megoldás: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Példa 08</title> </head> <body> <acronym title="Hypertext Preprocessor">PHP</acronym> program. <br /><br /> <tt> echo ("Hello World"); </tt> <br /><br /> <code> 8 INTERNET TECHNOLÓGIÁK - példatár $sql="update adatok set varos=Szabadka where nev=Istvan"; </code> <br /><br /> <kbd> $result = mysql query($sql) or die("Error!"); </kbd> <br /><br /> <samp> define("pi",3.14); </samp> <br /><br /> <var>$pi=3.14</var> <br /><br /> <ins>by John</ins> <br /> <del>www.tfqcom</del> </body> </html> A 8. feladat kódrészlete 9. Feladat
Készítsen XHTML dokumentumot, amelyben a következő hiperhivatkozások szerepelnek: - második oldalra (masodik.html) - http://www.vtssuacyu Webcímére (9 ábra) 9. ábra Megoldás: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Példa 09</title> </head> <body> <h2>Híperhivatkozások</h2> <br /> <a href="masodik.html">Híperhivatkozás a második oldalra</a> <br /> <br /> <a href="http://www.vtssuacyu">wwwvtssuacyu</a> 9 INTERNET TECHNOLÓGIÁK - példatár </body> </html> A 9. feladat kódrészlete 10. Feladat Készítsen XHTML dokumentumot, amelyben a következő hiperhivatkozások
szerepelnek - az oldalon található horgonyok - a portfolío horgony http://www.vtssuacyu Webcímen található (10 ábra) 10. ábra Megoldás: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Példa 10</title> </head> <body> <a href="#ek">- e-kereskedelem</a> <br /> <a href="#ik">- internetes kereskedelem</a> <br /> <a href="http://www.vtssuacyu#portfolio">- portfolio</a> <br /><br /> 10 INTERNET TECHNOLÓGIÁK - példatár <a name="ek"> <big>E-kereskedelem</big> <br /><br /> Az e-kereskedelem lebonyolítása különbözo eszközök
felhasználásával történhet. A forgalom jelentos része Interneten keresztül bonyolódik le, illetve, mobiltelefonnal kombinálva lehetséges a tranzakciók jóváhagyása (SMS). A jövoben a mobiltelefonok e-kereskedelemben betöltött szerepe is egyre jelentosebb szerepet fog játszani. </a> <br /><br /> <br /><br /> <a name="ik"> <big>Internetes kereskedelem</big> <br /><br /> Az Internetes kereskedelemnek két formáját különböztetjük meg. -Business-to-business (B2B) Vállalatok közötti kereskedelem -Business-to-costumer (B2C) Kereskedo és vásárló közötti kereskedelem </a> </body> </html> A 10. feladat kódrészlete 11. Feladat Készítsen XHTML dokumentumot, amely eredeti méretében megjelenít egy képet balra igazítva (11. ábra) 11. ábra Megoldás: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Példa 11</title> </head> <body> <img src="it.gif" border="1" width="170" height="170" id="kep" alt="world" align="left" /> </body> </html> 11 INTERNET TECHNOLÓGIÁK - példatár Az 11. feladat kódrészlete 12. Feladat Készítsen XHTML dokumentumot, amely megjelenít egy sorszámozatlan listát (12. ábra) 12. ábra Megoldás: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head>
<title>Példa 12</title> </head> <body> <p style="color:blue;font-size:20px;font-family:Verdana;">Internet technológiák </p> <ul> <li>xhtml</li> <li>css</li> <li>xml</li> <li>php</li> <li>java</li> </ul> </body> </html> A 12. feladat kódrészlete 12 INTERNET TECHNOLÓGIÁK - példatár 13. Feladat Készítsen XHTML dokumentumot, amelyben megjelenít egy sorszámozott listát (13. ábra). 13. ábra Megoldás: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head><title>Példa 13</title></head> <body> Internet technológiák <ol>
<li>xhtml</li> <li>css</li> <li>xml</li> <li>php</li> <li>java</li> </ol> </body> </html> A 13. feladat kódrészlete 14. Feladat Készítsen XHTML dokumentumot, amely ábrán látható listaszerkezetet készít (14. ábra) 13 INTERNET TECHNOLÓGIÁK - példatár 14. ábra Megoldás: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Példa 14</title> </head> <body> Internet technológiák <ol> <li>xhtml</li> <li>css</li> <ol start="5"> <li>php</li> <li>java</li> </ol> <li>xml</li> </ol> </body>
</html> A 14. feladat kódrészlete 15. Feladat Készítsen XHTML dokumentumot, amely az ábra szerinti leíró listát készít. Használja a következő jelölőelemeket: dl, dt, dd (15. ábra) 14 INTERNET TECHNOLÓGIÁK - példatár 15. ábra Megoldás: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Példa 15</title> </head> <body> <strong>INTERNET TECHNOLÓGIÁK</strong> <dl> <dt><b>XHTML</b></dt> <dd><i>Az XHTML (Extensible HyperText Markup Language) egy strukturaban gazdag jelolonyelv, amely a megjelenitest a stiluslapokra bizza, modularis alapokra epul es egyuttmukodik az XML (Extensible Markup Language)
alapu felhasznaloi alkalmazasokkal.</i></dd> <dt><b>PHP</b></dt> <dd><i>A PHP rövidítés a Hypertext Preprocessor elnevezésbõl ered.</i></dd> </dl> </body> </html> A 15. feladat kódrészlete 16. Feladat Hozzon létre egy XHTML dokumentumot, amely az ábrán látható táblázatot jeleníti meg (16. ábra) 15 INTERNET TECHNOLÓGIÁK - példatár 16. ábra Megoldás: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Példa 16</title> </head> <body> <table border="1" align="center"> <caption>táblázat</caption> <tr> <td>VTS</td>
<td>MFI</td> </tr> </table> </body> </html> A 16. feladat kódrészlete 17. Feladat Készítsen XHTML dokumentumot, amely az ábrán látható táblázatot jeleníti meg (17. ábra). 17. ábra 16 INTERNET TECHNOLÓGIÁK - példatár Megoldás: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Példa 17</title> </head> <body> <table border="1" align="center"> <caption>táblázat</caption> <tr> <td>VTS</td> <td>MFI</td> <td>MFI</td> </tr> <tr> <td>VTS</td> <td>MFI</td> <td>MFI</td> </tr> </table>
</body> </html> A 17. feladat kódrészlete 18. Feladat Készítsen XHTML dokumentumot, amely az ábrán látható táblázatot jeleníti meg (18. ábra). 18. ábra 17 INTERNET TECHNOLÓGIÁK - példatár Megoldás: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Példa 18</title> </head> <body> <table border="1" align="center"> <caption><b>Diákok</b></caption> <thead> <tr> <th>Név</th> <th>Vezetéknév</th> <th>Szak</th> </tr> </thead> <tfoot> <tr> <th>Név</th> <th>Vezetéknév</th> <th>Szak</th>
</tr> </tfoot> <tbody> <tr> <td>Péter</td> <td>Nagy</td> <td>Villamosság</td> </tr> <tr> <td>István</td> <td>Kiss</td> <td>Gépész</td> </tr> <tr> <td>Aurel</td> <td>Hunyadi</td> <td>Informatika</td> </tr> </tbody> </table> </body> </html> A 18. feladat kódrészlete 19. Feladat Készítsen XHTML dokumentumot, amely az ábrán látható táblázatot jeleníti meg (19. ábra). 18 INTERNET TECHNOLÓGIÁK - példatár 19. ábra Megoldás: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Példa 19</title>
</head> <body> <table border="1" align="center"> <caption><b>XHTML táblázat</b></caption> <thead> <tr> <th>Információ</th> <th>Kép</th> </tr> </thead> <tbody> <tr> <td>Péter</td> <td rowspan="2"><img src="panic.jpg" border="0" id="kep" width="175" height="240" alt="PANIC!" /></td> </tr> <tr> <td>Program</td> </tr> </tbody> 19 INTERNET TECHNOLÓGIÁK - példatár </table> </body> </html> A 19. feladat kódrészlete 20. Feladat Hozzon létre olyan XHTML dokumentumot, amely az ábrán látható táblázatot jeleníti meg (20. ábra) 20. ábra Megoldás: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Példa 20</title> </head> <body> <table border="1" align="center"> <caption><b>Kreditpontok</b></caption> <thead> <tr> <td>ZHTML</td> <td>CSS</td> <td>PHP</td> </tr> </thead> <tbody> <tr> <td colspan="3">max 30 pont</td> </tr> </tbody> </table> </body> </html> A 20. feladat kódrészlete 20 INTERNET TECHNOLÓGIÁK - példatár 21. Feladat Hozzon létre olyan XHTML dokumentumot, amely az ábrán látható táblázatot jeleníti meg (21. ábra) 21. ábra Megoldás: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Példa 21</title> </head> <body> <table border="1" align="center" cellpadding="2" cellspacing="0"> <caption><b>Pályázat</b></caption> <thead> <tr> <th>Cég</th> <th>Munka</th> <th colspan="2" align="left">Határidõ</th> </tr> </thead> <tfoot> <tr> <td colspan="4" align="center"> <strong>www.itjobshu</strong></td> </tr> </tfoot> <tbody> <colgroup align="center" span="2" valign="middle" /> <tr> <td><i>Westnet</i> </td> <td>Web developer</td> 21
INTERNET TECHNOLÓGIÁK - példatár <td>2004.1111</td> <td rowspan="4"> <img src="left.gif" alt="kep" id="kep" /> </td> </tr> <tr> <td><i>ProWebing</i></td> <td>Web programmer</td> <td>2004.1210</td> </tr> <tr> <td><i>NetPro</i></td> <td>System Administrator</td> <td>2004.1229</td> </tr> <tr> <td><i>Web Max</i></td> <td>System Administrator</td> <td>2004.1230</td> </tr> </tbody> </table> </body> </html> A 21. feladat kódrészlete 22. Feladat Készítsen XHTML dokumentumot, amely (22. ábra) az ábrán látható keretekkel osztja fel a lapot 22. ábra Megoldás: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3org/TR/xhtml1/DTD/xhtml1-framesetdtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> 22 INTERNET TECHNOLÓGIÁK - példatár <head> <title>Példa 22</title> </head> <frameset rows="25%,75%"> <frame src="keret1.html" /> <frame src="keret2.html" /> </frameset> </html> A 22. feladat kódrészlete 23. Feladat Készítsen XHTML dokumentumot, amely az ábrán látható keretekkel osztja fel a lapot (23. ábra) 23. ábra Megoldás: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-framesetdtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Példa 23</title> </head> <frameset
cols="25%,*,50%"> <frame src="keret1.html" /> <frame src="keret2.html" /> <frame src="keret3.html" /> </frameset> </html> A 23. feladat kódrészlete 24. Feladat Hozzon létre XHTML dokumentumot, amely az ábrán látható keretekkel osztja fel a lapot (24. ábra) A kódrészlet tartalmazza az össz lehetséges attribútumokat 23 INTERNET TECHNOLÓGIÁK - példatár 24. ábra Megoldás: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-framesetdtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Példa 24</title> </head> <frameset rows="25%,*"> <noframes> <body> <!-- no frames for your browser --> </body> </noframes> <frame
id="keret1" name="keret1" scrolling="auto" frameborder="1" <frameset cols="25%,*"> <frame id="keret2" name="keret2" frameborder="1" /> <frame id="keret3" name="keret3" frameborder="1" /> </frameset> </frameset> </html> src="keret1.html" noresize="noresize" /> src="keret2.html" scrolling="no" src="keret3.html" scrolling="no" A 24. feladat kódrészlete 25. Feladat Szerkesszen XHTML dokumentumot, amely az ábrán látható keretekkel osztja fel a lapot (25. ábra) A kódrészlet tartalmazza az össz lehetséges attribútumokat 24 INTERNET TECHNOLÓGIÁK - példatár 25. ábra Megoldás: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3org/TR/xhtml1/DTD/xhtml1-framesetdtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Példa 25</title> </head> <frameset cols="25%,*"> <noframes> <body> <!-- no frames for your browser --> </body> </noframes> <frame id="keret1" name="keret1" scrolling="auto" frameborder="1" <frameset rows="25%,*"> <frame id="keret2" name="keret2" frameborder="1" /> <frame id="keret3" name="keret3" frameborder="1" /> </frameset> </frameset> </html> src="keret1.html" noresize="noresize" /> src="keret2.html" scrolling="no" src="keret3.html" scrolling="no" A 25. feladat kódrészlete 26. Feladat Készítsen XHTML dokumentumot,
amely Weboldalon belüli keretet hoz létre (26. ábra) 25 INTERNET TECHNOLÓGIÁK - példatár 26. ábra Megoldás: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-framesetdtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Példa 26</title> </head> <body> <p><h1>Internet</h1></p> <iframe id="keret" name="keret" src="12.html" width="200" height="100" scrolling="auto" frameborder="1"></iframe> </body> </html> A 26. feladat kódrészlete 27. Feladat Szerkesszen XHTML dokumentumot, amely megjelenít egy Java-applet-et (27. ábra) 27. ábra 26 INTERNET TECHNOLÓGIÁK - példatár Megoldás: <?xml version="1.0"
encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Példa 27</title> </head> <body> <object codetype="application/java" classid="java:ap1.class" width="300" height="100"></object></body> </html> A 27. feladat kódrészlete 28. Feladat Készítsen egy bejelentkezési űrlapot szerkesztő XHTML dokumentumot. A mégsem gomb szerepe az legyen, hogy törölje az addig beírtakat és visszaállítsa az alapértelmezett adatokat. Az küld gomb a beírt adatokat küldje el az editphp szkriptnek, amely feldolgozza az űrlapon megadott adatot (28. ábra) 28. ábra Megoldás: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Példa 28</title> </head> <body> <form id="urlap" name="urlap" method="post" action="edit.php"> felhasználó név:<input type="text" id="fnev" name="fnev" maxlength="10" size="10"/> <br /> 27 INTERNET TECHNOLÓGIÁK - példatár jelszó:<input type="password" id="fjelszo" name="fjelszo" maxlength="8" size="8" /> <br /> <input type="submit" id="gomb" name="gomb" value="kûld" /> <input type="reset" id="gombr" name="gombr" value="mégsem" /> </form>
</body> </html> A 28. feladat kódrészlete 29. Feladat Készítsen egy kérdőívet szerkesztő XHTML dokumentumot. A kép a beírt adatokat küldje el az edit.php szkriptnek, amely feldolgozza az űrlapon megadott adatot (29 ábra) 29. ábra Megoldás: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Példa 29</title> </head> <body> <form id="urlap" name="urlap" method="post" action="edit.php"> Melyik Web programozási nyelvet használja? <br /> <br /> <input type="radio" id="pnyelv" name="pnyelv" checked="checked" value="php" />PHP <br /> <input
type="radio" id="pnyelv" name="pnyelv" value="asp" />ASP <br /> 28 INTERNET TECHNOLÓGIÁK - példatár <input type="radio" id="pnyelv" name="pnyelv" value="java" />JAVA <br /> <input type="radio" id="pnyelv" name="pnyelv" value="perl" />PERL <br /> <br /> <input type="image" id="gomb" name="gomb" src="link.gif" width="30" height="20" border="1" alt="kûld"/> </form> </body> </html> A 29. feladat kódrészlete 30. Feladat Készítsen egy kérdőívet szerkesztő XHTML dokumentumot. A mégsem gomb szerepe az legyen, hogy visszaállítsa az alapértelmezett adatokat. Az küld gombnak pedig az, hogy a beírt adatokat elküldje az edit2.php szkriptnek, amely feldolgozza az űrlapon megadott adatot (30. ábra) 30. ábra
Megoldás: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Példa 30</title> </head> <body> <form id="urlap" name="urlap" method="post" action="edit2.php"> Melyik a kedvenc Web keresõje? <br /> <br /> <input type="checkbox" id="webk" name="webk" value="google" checked="checked" />www.googlecom 29 INTERNET TECHNOLÓGIÁK - példatár <br /> <input type="checkbox" id="webk" name="webk" value="yahoo" />www.yahoocom <br /> <input type="checkbox" id="webk" name="webk"
value="lycos" />www.lycoscom <br /> <input type="checkbox" id="webk" name="webk" value="vizsla" />www.vizslahu <br /> <br /> <input type="submit" id="gomb" name="gomb" value="kûld" /> <input type="reset" id="gombr" name="gombr" value="mégsem" /> </form></body></html> A 30. feladat kódrészlete 31. Feladat Készítsen egy képküldésre képes űrlapot szerkesztő XHTML dokumentumot. A mégsem gomb szerepe az legyen, hogy visszaállítsa az alapértelmezett adatokat. Az küld gombnak pedig az, hogy a beírt adatokat elküldje a kep.php szkriptnek, amely feldolgozza az űrlapon megadott adatot (31. ábra) 31. ábra Megoldás: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Példa 31</title> </head> <body> <form id="urlap" method="post" action="kep.php" enctype="multipart/formdata"> Kûld el a képedet! <br /> <br /> kép:<input type="file" id="kep" /> 30 INTERNET TECHNOLÓGIÁK - példatár <br /> <br /> <input type="submit" id="gomb" value="kûld" /> <input type="reset" id="gombr" value="mégsem" /> </form> </body> </html> A 31. feladat kódrészlete 32. Feladat Készítsen XHTML dokumentumot, amely legördülő menüt tartalmazó kérdőívet szerkeszt. A mégsem gomb szerepének az kell lennie, hogy az visszaállítsa az alapértelmezett adatokat. Az
küld gombnak pedig, hogy a beírt adatokat elküldje a filmphp szkriptnek, amely feldolgozza az űrlapon megadott adatot (32. ábra) 32. ábra Megoldás: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Példa 32</title> </head> <body> <form id="urlap" name="urlap" method="post" action="film.php" > Melyik filmet láttad? Tõbbet is megjelõlhetsz! <br /> <br /> <select id="film" name="film" multiple="multiple" size="3"> <optgroup label="sci-fi" > <option value="matrix">Matrix</option> <option
value="terminator">Terminator</option> 31 INTERNET TECHNOLÓGIÁK - példatár <option value="starwars">StarWars</option> </optgroup> <optgroup label="haborus"> <option value="d-day">D-Day</option> <option value="dirty dozen">Dirty Dozen</option> <option value="black hawk down">Black Hawk Down</option> </optgroup> </select> <br /> <br /> <input type="submit" id="gomb" name="gomb" value="kûld" /> <input type="reset" id="gombr" id="gombr" value="mégsem" /> </form> </body> </html> A 32. feladat kódrészlete 33. Feladat Készítsen egy kérdőívet szerkesztő XHTML dokumentumot. A mégsem gomb tegye lehetővé az alapértelmezett adatok visszaállítását, küld gomb pedig a beírt adatok elküldését az iro.php
szkriptnek, amely feldolgozza az űrlapon megadott adatot (33 ábra). 33. ábra Megoldás: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> 32 INTERNET TECHNOLÓGIÁK - példatár <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Példa 33</title> </head> <body> <form id="urlap" name="urlap" method="post" action="iro.php"> Írj véleményt a www.yahoocom oldalról!<br /><br /> <fieldset> <legend>www.yahoocom</legend> <textarea id="megjegyzes" name="megjegyzes" rows="10" cols="40" ></textarea> <br /><br /> <input type="submit" id="gomb" name="gomb"
value="kûld" /> <input type="reset" id="gombr" name="gombr" value="mégsem" /> <br /><br /> </fieldset> </form> </body> </html> A 33. feladat kódrészlete 34. Feladat Készítsen egy regisztrációs űrlapot szerkesztő XHTML dokumentumot megfelelő alapértelmezett beállításokkal. Az űrlapon a képen látható objektumok szerepeljenek A mégsem gomb törölje az addig beírtakat, és állítsa vissza az alapértelmezett adatokat. A küld gomb a beírt adatokat küldje a regisztracio.php szkriptnek, amely feldolgozza az űrlapon megadott adatot (34. ábra) 34. ábra 33 INTERNET TECHNOLÓGIÁK - példatár Megoldás: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml"
xml:lang="hu" lang="hu"> <head> <title>Példa 34</title> </head> <body> <form id="urlap" name="urlap" method="post" action="regisztracio.php" enctype="multipart/form-data"> Regisztráld magad, írd be az összes adatod!<br /> <br /> <fieldset> <legend><strong>Személyi adatok</strong></legend> <label>vezetéknév:</label> <input type="text" id="vnev" name="vnev" /> <br /> <label>név:</label> <input type="text" id="nev" name="nev" /> <br /> <label>e-mail:</label> <input type="text" id="email" name="email" /> <br /> <label>jelszó:</label> <input type="password" id="jelszo" name="jelszo" /> <br />
<label>kép:</label><input type="file" id="kep" name="kep" /> <br /> <br /> <label>operációs rendszer:</label> <input type="checkbox" id="or" name="or" value="windows" />windows <input type="checkbox" id="or" name="or" value="linux" />linux <br /> <br /> <label>megjegyzések</label> <br /> <textarea id="megjegyzes" name="megjegyzes" rows="3" cols="20" ></textarea> <br /> <br /> <input type="submit" id="gomb" name="gomb" value="kûld" /> <input type="reset" id="gombr" name="gombr" value="mégsem" /> <br /> <br /> </fieldset> </form> </body> </html> A 34. feladat kódrészlete 34 INTERNET
TECHNOLÓGIÁK - példatár 35 INTERNET TECHNOLÓGIÁK - példatár 35. Feladat Készítsen olyan XHTML dokumentumot, amely a csatolt JavaScript program segítségével kiírja a Hello World szöveget és egy üdvözlő üzenetet is megjelenít a bevitt név részére. (35. ábra) 35. ábra Megoldás: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Példa 35</title> <noscript> Az ön böngészõje nem támogatja a JavaScriptet! </noscript> <script type="text/javascript" src="script.js"> <!-//--> </script> </head> <body> <br /> <br /> Hello from XHTML!<br /><br /> <form name="udvozlet"
id="udvozlet" onsubmit="szia();" > <input type="text" name="nev" id="nev" /> <input type="submit" value="Személyes üdvözlet" /> </form> 36 INTERNET TECHNOLÓGIÁK - példatár </body> </html> A 35. feladat kódrészlete document.write("<strong><i>Hello from JavaScript!</i></strong>"); function szia() { var t=document.formsudvozletnevvalue; alert("Szia "+t); } A script.js szövegállománya 36. Feladat Készítsen egy olyan XHTML dokumentumot, amely a JavaScript segítségével kiírja a Hello to my homepage szöveget, amikor a böngésző beolvassa a Web oldalt. Az dokumentum egy űrlapot foglaljon magába. Az űrlap tartalmazzon egy szövegmezőt (szak), küld és mégsem gombokat. A küld gomb megnyomásával JavaScript írja ki a szak nevét a bevitt szöveg részére. (36 ábra) 36. ábra Megoldás: <?xml
version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> 37 INTERNET TECHNOLÓGIÁK - példatár <head> <title>Példa 36</title> <noscript> Az ön böngészõje nem támogatja a JavaScriptet! </noscript> <script type="text/javascript"> <!-function udvozlet() { var uzenet="The best place for you!"; window.alert("Hello to my homepage"); window.status=uzenet; } //--> </script> </head> <body onload="udvozlet();"> Java Script: <i>onload</i> <form name="form1" onreset="alert(Legjob választas)" onsubmit="alert(document.formsform1szakvalue)"> <p>Melyik szakon vagy?<br /> <input
type="text" name="szak" value="Informatika" size="25" onchange="alert(megváltoztatd az érteket)" /></p> <p> <input type="submit" value="küld" name="submit1" /> <input type="reset" value="mégse" name="reset1" /> </p></form> </body> </html> A 36. feladat kódrészlete 37. Feladat Készítsen XHTML dokumentumot, amely az onmouseover, onmouseout, onmouseup és onmousedown JavaScript eseményszkriptek segítségével manipulál a képpel (37. ábra) 37. ábra 38 INTERNET TECHNOLÓGIÁK - példatár Megoldás: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu">
<head> <title>Példa 37</title> <noscript> Az ön böngészõje nem támogatja a JavaScriptet! </noscript> <script type="text/javascript" > <!-var d=new Date(); var ido=d.getHours(); if (ido<10) document.bgColor="#ffffff"; else document.bgColor="#ff0000"; function valt kepet() { document.kepsrc="link2gif"; document.kepalt="kep 2"; window.status="Ez itt az masodik kep"; } function visza kepet() { document.kepsrc="link1gif"; document.kepalt="kep 1"; window.status="Ez itt az elso kep"; } function norm() { document.kepsrc="link3gif"; document.kepalt="kep 3"; window.status="Ez itt az 3 kep"; } //--> //--> </script> </head> <body> Java Script: <i> onmouseover, onmouseout, onmouseup & onmousedown</i> <br /><br /> <img src="link1.gif" name="kep"
alt="kep 1" onmouseover="valt kepet()" onmouseout="visza kepet()" onmouseup="valt kepet()" onmousedown="norm()"/> </body> </html> A 37. feladat kódrészlete 39 INTERNET TECHNOLÓGIÁK - példatár 38. Feladat Készítsen XHTML dokumentumot, amely az onclick, ondblclick, onkeypress és onkeydown JavaScript eseményszkripteket. Az oldal tartalmazzon egy gombot, amely segítségével kinyomtathatjuk az oldalt (38. ábra) 38. ábra Megoldás: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Példa 38</title> <noscript> Az ön böngészõje nem támogatja a JavaScriptet! </noscript> <script
type="text/javascript" > <!-function printpage() { window.print() } s1 = new String(myform.myTextvalue) function changeBg1() { 40 INTERNET TECHNOLÓGIÁK - példatár var r=Math.random()*5; szin=Math.round(r); document.bgColor="#ff"+szin+"f"+szin+"f"; } function changeBg2() { document.bgColor="#0000ff"; } //--> </script> </head> <body> Java Script: <i> onclick, ondblclick, onkeypress & onkeydown</i> <br /><br /> <img src="click.gif" id="kep" ondblclick="height=height+10" /> <br /><br /> <input type="button" value="Nyomtast ki az oldalt" onclick="printpage()" /> <form action="38.html" method="post" id="myform" name="myform"> <label>megjegyzés</label><input type="text" name="szoveg"
onkeypress="changeBg1()" onkeydown="changeBg2()" /> </form> </body> </html> A 38. feladat kódrészlete 39. Feladat Készítsen XHTML dokumentumot, amely eseményszkripteket használ (39. ábra) onfocus, onblur és onselect JavaScript 39. ábra 41 INTERNET TECHNOLÓGIÁK - példatár Megoldás: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Példa 39</title> <noscript> Az ön böngészõje nem támogatja a JavaScriptet! </noscript> <script type="text/javascript" language="JavaScript"> s1 = new String(myform.myTextvalue) function valtfocust() { s1 = "Focusban vagyok!" document.myformmyTextvalue =
s1toUpperCase() } function kifocus() { alert("Elhagyta az elozoleg fokuszalt elemet"); } </script> </head> <body> Java Script: <i> onfocus, onblur & onselect</i> <br /><br /> <form name="myform" id="myform"> <label>focus 1:</label><input type="text" name="myText" value="Adj focust!" onfocus = "valtfocust()" onblur="kifocus()" /> <br /><br /> <label>focus 2:</label><input type="text" /> <br /> <label>selected text</label> <input type="text" name="or" value="windows" onselect="alert(választatál szöveget);"/> <br /> </form> </body> </html> A 39. feladat kódrészlete 42 INTERNET TECHNOLÓGIÁK - példatár 43 INTERNET TECHNOLÓGIÁK - példatár 40. Feladat Készítsen olyan XHTML dokumentumot,
amely kiírja az ábrán lévő szöveget. A szöveg formázására használja a beépített stíluslapot (40. ábra) 40. ábra Megoldás: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Példa 40</title> <style type="text/css"> h1,h2{ font-family:Verdana; color:#0000ff; font-size:16px; } h3{ font-family:Arial; color:red; font-size:20px; } </style> </head> <body> <h1>Welcome to the Internet technologies</h1> <h2>Polytechnical Engineering College, Subotica</h2> <h3>www.vtssuacyu</h3> </body> </html> A 40. feladat kódrészlete 44 INTERNET TECHNOLÓGIÁK - példatár 41. Feladat Készítsen XHTML
dokumentumot, amely kiírja az ábrán látható szöveget (41.1 ábra). Állítsa be a scrollbar színeit (412 ábra) A szöveg formázására alkalmazzon csatolt stíluslapot. 41.1 ábra 41.2 ábra A scrollbar részei 45 INTERNET TECHNOLÓGIÁK - példatár Megoldás: body { scrollbar-face-color: #F9F6CC; scrollbar-highlight-color: #F9F6CC; scrollbar-shadow-color: #000000; scrollbar-3dlight-color: #000000; scrollbar-arrow-color: #000000; scrollbar-track-color: #F9F6CC; scrollbar-darkshadow-color: #F9F6CC; background-color:#F9F6CC; } h1,h2{ font-family:Verdana; color:#0000ff; font-size:16px; } h3{ font-family:Arial; color:#ff0000; font-size:20px; } A style41.css szövegállománya <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu"
lang="hu"> <head> <title>Példa 41</title> <link type="text/css" rel="stylesheet" href="style41.css" /> </head> <body> <h1>Welcome to the Internet technologies</h1> <h2>Polytechnical Engineering College, Subotica</h2> <h3>www.vtssuacyu</h3> </body> </html> A 41. feladat kódrészlete 42. Feladat Készítsen XHTML dokumentumot, amely kiírja az ábrán látható szöveget. A szöveg formázására használja a jelölőelembe rendelt stíluslapot(42. ábra) 46 INTERNET TECHNOLÓGIÁK - példatár 42. ábra Megoldás: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Példa
42</title> </head> <body style="background-color:#F9F6CC;"> <h1 style="font-family:Tahoma;color:#0000ff;font-size:20px;">Internet technologiak</h1> <h2 style="font-family:Verdana;color:#000000;fontsize:18px;">www.vtssuacyu</h2> </body> </html> A 42. feladat kódrészlete 43. Feladat Készítse el a mellékelt Weblapot az XHTML és a CSS technológiák alkalmazásával. A Weblap tartalmazzon csatolt stíluslapot, 2 stílusosztályt, egy sorszámozatlan listát és egy képet (43. ábra) 47 INTERNET TECHNOLÓGIÁK - példatár 43. ábra Megoldás: body { background-color:#818181; } .masodik{ font-family:Arial; } .harmadik{ font-family:Verdana; font-size:12px; color:#ffffff; } ol{ list-style-type:upper-roman; font-family:Verdana; color:#e5e5e5; font-size:12px; } A style43.css szövegállománya <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Példa 43</title> <link type="text/css" rel="stylesheet" href="style43.css" /> 48 INTERNET TECHNOLÓGIÁK - példatár </head> <body> <img src="logopw.gif" alt="Prowebing" width="720" height="139" /><br /> <span class="harmadik">Professional <span class="masodik">web engineering</span> </span><br /> <ol> <li>dynamic web applications</li> <li>e-commerce solutions</li> <li>web design</li> <li>graphical design</li> </ol> </body> </html> A 43. feladat kódrészlete 44. Feladat Készítse el a mellékelt Weblapot az XHTML és a CSS
technológiák alkalmazásával. A Weblap tartalmazzon csatolt stíluslapot és 4 stílusdefiníciót (44. ábra) 44. ábra Megoldás: body{ background-color:#44ddff; } h2 { font-family:Verdana; font-size:x-large; font-style:normal; font-weight:bold; color:#0000ff; } p{ font-family:Tahoma; 49 INTERNET TECHNOLÓGIÁK - példatár font-size:10pt; font-style:oblique; font-weight:leighter; color:#000000; } b{ font-family:Courier,Arial; font-size:10pt; font-style:italic; color:green; } A style44.css szövegállománya <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Példa 44</title> <link type="text/css" rel="stylesheet" href="style44.css" /> </head>
<body> <h2>E-ügyvitel várható fejlodése</h2><p> Az elemzok szerint a világ összes e-ügyvitel forgalma növekszik, annak ellenére, hogy 2000-ben USA-ban tokefeltöltés hiánya miatt több Internetes kereskedo cég tönkrement.</p> <b>E-ügyvitel várható fejlodése</b> </body> </html> A 44. feladat kódrészlete 45. Feladat Készítse el a mellékelt Weblapot az XHTML és a CSS technológiák alkalmazásával. A Weblap tartalmazzon csatolt stíluslapot és 3 stílusdefiníciót (45. ábra) 45. ábra 50 INTERNET TECHNOLÓGIÁK - példatár Megoldás: body { background-color:#ffff00; } h1 { font-family:Verdana; font-size:x-large; font-variant:small-caps; letter-spacing:4; color:#ff0000; } p { font-family:Arial; font-size:10pt; line-height:2; color:#000000; } A style45.css szövegállománya <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Példa 45</title> <link type="text/css" rel="stylesheet" href="style45.css" /> </head> <body> <h1>AZ e-ügyviteli RENDSZer</h1> <p> Az elektronikus ügyviteli rendszer 3 fő részből áll. <br /> - Elektronikus áruház <br /> - Elektronikus bank <br /> - Elektronikus pénztárca, (hitelkártya) egyéb fizetési formák. </p> </body> </html> A 45. feladat kódrészlete 46. Feladat Készítse el a mellékelt Weblapot az XHTML és a CSS technológiák alkalmazásával. A Weblap tartalmazzon csatolt stíluslapot és 4 stílusdefiníciót (46. ábra) 51 INTERNET TECHNOLÓGIÁK - példatár 46. ábra Megoldás: body { background-color:#FDC689; } h1 {
font-family:Verdana; font-size:x-large; text-decoration:overline; text-align:left; text-indent:10; color:#ff0000; } h4 { text-align:right; text-decoration:underline; } p { font-family:Arial; font-size:10pt; text-align:justify; color:#000000; } A style46.css szövegállománya <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> 52 INTERNET TECHNOLÓGIÁK - példatár <title>Példa 46</title> <link type="text/css" rel="stylesheet" href="style46.css" /> </head> <body> <h1>PHP</h1> <p> Lehetővé teszi, hogy a lap szerzője a szkript kódok normál weboldalakba való beillesztésével hozza létre a dinamikus tartalmat. A php számos
előre definiált függvényt tartalmaz, amelyek segítségével adatbázisok és levelezökiszolgálók kezelhetők, PDF dokumentumok és képek hozhatók létre stb. A php lapot az elérésekor a kiszolgáló minden estben értelmezi, a szkriptek végrehajtásának eredményét összeilleszti a lap statikus tartalmával és kombinált végeredményt küldi vissza a böngészőnek. </p> <h4>Szabadka 2003</h4> </body> </html> A 46. feladat kódrészlete 47. Feladat Készítse el a mellékelt Weblapot az XHTML és a CSS technológiák alkalmazásával, amely kiírja az ábrán lévő szöveget. A Weblap tartalmazzon csatolt stíluslapot és 3 stílusdefiníciót (47. ábra) 47. ábra Megoldás: body { background-color:#f7a0a3; } 53 INTERNET TECHNOLÓGIÁK - példatár h1 { font-family:Verdana; font-size:x-large; text-decoration:underline; text-align:center; text-indent:10; text-transform:lowercase; color:red; background-color:rgb(255,255,0); } p {
font-family:Arial; font-size:10pt; text-align:justify; text-transform:uppercase; color:rgb(0,0,0); background-color:white; margin-left: 0.3cm; margin-right: 0.3cm; } 47.1 ábra A style47css szövegállománya <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Példa 47</title> <link type="text/css" rel="stylesheet" href="style47.css" /> </head> <body> <h1>PHP</h1> <p> Lehetövé teszi, hogy a lap szerzöje a szkript kódok normál weboldalakba való beillesztésével hozza létre a dinamikus tartalmat. A php számos elöre definiált függvényt tartalmaz, amelyek segítségével adatbázisok és levelezökiszolgálók kezelhetök,
PDF dokumentumok és képek hozhatók létre stb. A php lapot az elérésekor a kiszolgáló minden estben értelmezi, a szkriptek végrehajtásának eredményét összeilleszti a lap statikus tartalmával és kombinált végeredményt küldi vissza a böngészönek. </p> </body> </html> A 47. feladat kódrészlete 48. Feladat Készítse el a mellékelt Weblapot az XHTML és a CSS technológiák alkalmazásával. A Weblap tartalmazzon csatolt stíluslapot, 2 stílusdefiníciót és egy háttérképet amely a tartalommal együtt gördíthető (48. ábra) 54 INTERNET TECHNOLÓGIÁK - példatár 48. ábra Megoldás: body { background-color:#ffffff; background-image:url(itbg.gif); background-repeat:no-repeat; background-attachment:scroll; } pre { font-family:Arial; font-size:10pt; text-align:justify; color:rgb(0,0,0); background-color:transparent; margin-left: 2cm; margin-right: 2cm; } A style48.css szövegállománya <?xml version="1.0"
encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Példa 48</title> <link type="text/css" rel="stylesheet" href="style48.css" /> </head> 55 INTERNET TECHNOLÓGIÁK - példatár <body> <pre> # browser # [ejtsd: brauzö] {magyarul: böngészõ} Hálózati kliensprogram World-Wide Web (és egyéb) szolgáltatások megtekintéséhez; tulajdonképpen egy HTML nézegetõ (pl. Netscape, Internet Explorer). </pre> </body> </html> A 48. feladat kódrészlete 49. Feladat Készítse el a mellékelt Weblapot az XHTML és a CSS technológiák alkalmazásával. A Weblap tartalmazzon csatolt stíluslapot, 2 stílusdefiníciót és egy fixen beállított
háttérképet (49. ábra) 49. ábra Megoldás: body { background-color:#ffffff; 56 INTERNET TECHNOLÓGIÁK - példatár background-image:url(itbg2.gif); background-repeat:no-repeat; background-attachment:fixed; } pre { font-family:Tahoma; font-size:10pt; text-align:justify; color:rgb(0,0,0); background-color:transparent; margin-left: 2cm; margin-right: 2cm; } A style49.css szövegállománya <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Példa 49</title> <link type="text/css" rel="stylesheet" href="style49.css" /> </head> <body> <pre> # browser # [ejtsd: brauzö] {magyarul: böngészõ} Hálózati kliensprogram World-Wide Web (és
egyéb) szolgáltatások megtekintéséhez; tulajdonképpen egy HTML nézegetõ (pl. Netscape, Internet Explorer). # cache # [ejtsd: kes] {magyarul: gyorsítótár, átmeneti tároló(?)} A korábban letöltött vagy használt állományok, adatok átmeneti tárolására használt memória- vagy lemezterület. Amennyiben újra szükség van rájuk, a ~ területrõl gyorsabban elõhívhatók, mint az eredeti helyükrõl. Az Interneten a távoli szerverekrõl letöltött állományok helyi gépen/gépeken való ideiglenes tárolására használják a ~ technikát. </pre> </body> </html> A 49. feladat kódrészlete 57 INTERNET TECHNOLÓGIÁK - példatár 50. Feladat Készítse el a mellékelt Weblapot az XHTML és a CSS technológiák alkalmazásával. A Weblap tartalmazzon csatolt stíluslapot, 9 stílusdefiníciót, egy stílusosztályt, 3 hiperhívatkozást és 1 képet (50. ábra) 50. ábra Megoldás: body { background-color:#80a5d2; } img {
border-style:dashed; border-color:#ffffff; } table { border-style:dashed; border-color:#000000; border-width:2px; background-color:#e5e5e5; } p { text-align:center; } p.cim{ font-family:Tahoma; color:#000000; font-size:12px; 58 INTERNET TECHNOLÓGIÁK - példatár font-weight:bold; } ol { list-style-type:circle; } a:link { font-family:Tahoma; color:#818181; font-size:12px; font-weight:bold; } a:activ { font-family:Tahoma; color:#000000; background-color:#ffffff; font-size:12px; font-weight:bold; } a:hover { font-family:Tahoma; color:#000000; background-color:#ffffff; font-size:12px; font-weight:bold; } a:visited { font-family:Tahoma; color:#000000; background-color:#ffffff; font-size:12px; font-weight:bold; } A style50.css szövegállománya <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html
xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Példa 50</title> <link type="text/css" rel="stylesheet" href="style50.css" /> </head> <body> <p> <img src="link.gif" id="kep" alt="Internet" width="150" height="99" border="5" /> <br /><br /> <table cellpadding="5"> <tr> 59 INTERNET TECHNOLÓGIÁK - példatár <td> <p class="cim">Academic Network of Subotica</p> <ol> <li><a href="http://www.vtssuacyu" title="www.vtssuacyu">http://wwwvtssuacyu</a></li> <li><a href="http://www.gfsuacyu" title="www.gfsuacyu">http://wwwgfsuacyu</a></li> <li><a href="http://www.eccfsuacyu"
title="www.eccfsuacyu">http://wwweccfsuacyu</a></li> </ol> </td> </tr> </table> </p> </body> </html> Az 50. feladat kódrészlete 60 INTERNET TECHNOLÓGIÁK - példatár 61 INTERNET TECHNOLÓGIÁK - példatár 51. Feladat A CSEHTMLValidator segítségével készítse el a mellékelt Weblapot az XHTML és a CSS technológiák alkalmazásával (51. ábra) 51. ábra Feladatmegadás A Weblap tartalmazzon: - XHTML-1.0-Transitional DTD-t, - csatolt stíluslapot, - 2 stílusosztályt, - 8 stílusdefiníciót, - 4 hiperhívatkozást és - egy képet. Mutassa be a feladatok XHTML és CSS forráskódjait, valamint a Weblapot a böngészőben. Megoldás: body { background-color:#ffffff; background-image:url(bg.gif); background-repeat:repeat; 62 INTERNET TECHNOLÓGIÁK - példatár background-attachment:fixed; } table{ border-style:dashed; border-color:#000000; border-width:2px; background-color:#ffffff; } th{
font-family:Tahoma; font-size:14px; background-color:#000000; color:#ffffff; } tfoot{ background:#e5e5e5; color:#000000; } .elso { font-family:Verdana; font-size:12px; font-style:italic;} .masodik { font-family:Verdana; font-size:12px; } a:link { font-family:Tahoma; color:#000000; font-size:12px; font-weight:bold; } a:activ { font-family:Tahoma; color:#000000; background-color:#ffffff; font-size:12px; font-weight:bold; } a:hover { font-family:Tahoma; color:#ffffff; background-color:#000000; font-size:12px; font-weight:bold; } a:visited { font-family:Tahoma; 63 INTERNET TECHNOLÓGIÁK - példatár color:#000000; background-color:#ffffff; font-size:12px; font-weight:bold; } A style51.css stíluslap szövegállománya <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml"
xml:lang="hu" lang="hu"> <head> <title>Példa 51 - XHTML és CSS átfogó feladat</title> <link type="text/css" rel="stylesheet" href="style51.css" /> </head> <body> <table width="650" align="center"> <thead> <tr> <th colspan="2">Weblinkeket frissíto eszközt fejlesztettek ki brit diákok</th></tr> </thead> <tfoot> <tr> <td colspan="2" align="center"> | <a href="h.html">home</a> | <a href="dhtml">download</a> | <a href="j.html">játekok</a> | <a href="ahtml">aktuális</a> |</td></tr> </tfoot> <tbody> <tr> <td> <span class="elso">Az alkotói által Peridotnak elnevezett alkalmazás automatikusan átvizsgálja egy cég számítógépein lévo linkeket,
majd abban az esetben, ha az adott oldal elérhetosége megváltozott, frissíti oket.</span> <span class="masodik"> <br /><br /> Az eszközt brit egyetemisták fejlesztették ki az IBM-nél, és amint azt ok maguk elmondták róla a BBC-nek nyilatkozva, képes nemcsak az idoközben eltávolított weboldalakra mutató, hanem a kontextusnak nem megfelelo tartalmakhoz kalauzoló linkek kiszurésére és frissítésére is. A Peridot úgy muködik, hogy folyamatosan eltárolja a linkek által elérheto oldalak alapveto tulajdonságait, így azonnal képes érzékelni a jelentosebb tartalmi változásokat, sot azok mértékét is. Az eszköz a céges hálózatokat, illetve weboldalakat fenntartó társaságok számára egyformán fontos lehet. Elobbieknek azért, mert az a körülmény, hogy dolgozóik munka közben mindig hozzájussanak a szükséges információkhoz, ugyanakkor ne kelljen elévült adatokkal dolgozniuk, kiemelt fontossággal bír.
Másrészt az olyan vállalatok számára, amelyek ügyfeleik irányában nagy hangsúlyt fektetnek saját megbízhatóságukra, egy rossz, vagy hibás oldalra vezeto link komoly presztízsveszteséggel járhat. A Peridot abban tér el a már létezo hasonló alkalmazásoktól, hogy a hibás linket nemcsak azonosítja, hanem korrigálni is képes azt. </span> 64 INTERNET TECHNOLÓGIÁK - példatár </td> <td><img src="hir.gif" id="kep" alt="computer" width="233" height="350" /> </td></tr> </tbody> </table> </body> </html> Az 51. feladat kódrészlete 52. Feladat A CSEHTMLValidator segítségével készítse el a mellékelt Weblapot az XHTML és a CSS technológiák alkalmazásával (52. ábra) 52. ábra Feladatmegadás A Weblap tartalmazzon: - XHTML-1.0-Transitional DTD-t, - csatolt stíluslapot, - 4 stílusosztályt, - 11 stílusdefiníciót, 65 INTERNET
TECHNOLÓGIÁK - példatár - 4 hiperhívatkozást és 2 képet. Mutassa be a feladatok XHTML és CSS forráskódjait, valamint a Weblapot a böngészőben. Megoldás: body { background-color:#02ADE5; margin:0; } table{ border-style:solid; border-color:#000000; border-width:2px; border-right-color: #000000; border-right-width: 10px; background-color:#e5e5e5; border-collapse:collapse; } td { vertical-align:top; } td.head { background-image:url(logo.gif); background-repeat:no-repeat; background-attachment:fixed; color:#ffffff; height:200px; vertical-align:bottom; text-align:right; } td.down { background-image:url(down.gif); background-repeat:no-repeat; background-attachment:fixed; height:20px; } h2 { color:#000000; text-decoration:underline; text-align:center; } h3 { color:#818181; font-style:italic; font-family:Arial; } 66 INTERNET TECHNOLÓGIÁK - példatár ul { list-style-type:square; } hr { height:10px; color:#818181; } .elso { font-family:Tahoma; font-size:12px;
font-weight:bold; color:#ED1C24; } .masodik { font-family:Verdana; font-size:12px; } a:link { font-family:Tahoma; color:#ffffff; font-size:11px; font-weight:bold; } a:activ { font-family:Tahoma; color:#ffffff; background-color:#000000; font-size:11px; font-weight:bold; } a:hover { font-family:Tahoma; color:#ffffff; background-color:#000000; font-size:11px; font-weight:bold; } a:visited { font-family:Tahoma; color:#ffffff; background-color:#000000; font-size:11px; font-weight:bold; } A style52.css stíluslap szövegállománya <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 67 INTERNET TECHNOLÓGIÁK - példatár "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Példa 52 - XHTML és CSS átfogó feladat</title> <link
type="text/css" rel="stylesheet" href="style52.css" /> </head> <body> <table width="700" align="left" cellpadding="0" cellspacing="0"> <tbody> <tr> <td colspan="2" class="head"> <a href="index.php">home</a> | <a href="chartsphp">charts</a> | <a href="members.php">members</a> | <a href="contact.php">contact</a> </td> </tr> <tr> <td> <span class="elso"> <h2>Euro Dance charts</h2> <ul> <li>The Boogie Pimps - Somebody to love</li> <li>The Freestylers - Push up</li> <li>Armand Van Helden - My my my</li> <li>ATB - Ecstasy</li> <li>Danzel - Pump it up!</li> </ul> </span> </td> <td width="400"> <span
class="masodik"> <h3>News</h3> <hr /> Third chapter in Belgrade Coffee Shop series is a slightly different affair. Three years after Volume 1, the scene has matured and diversified, and a number of new names are put on the map, making their way to this album. Generally more dancefloor oriented than it’s predecessors, Belgrade Coffee Shop 3 widens a perspective on current Serbian electronic scene. <hr /> <br /> </span> </td> </tr> <tr> <td colspan="2" class="down"></td> </tr> </tbody> </table> </body> </html> Az 52. feladat kódrészlete 68 INTERNET TECHNOLÓGIÁK - példatár 53. Feladat A CSEHTMLValidator segítségével készítse el a mellékelt Weblapot az XHTML és a CSS technológiák alkalmazásával (53. ábra) 53. ábra Feladatmegadás A Weblap tartalmazzon: - XHTML-1.0-Transitional DTD-t, - csatolt stíluslapot, - 2 stílusosztályt, - 13
stílusdefiníciót, - 4 hiperhívatkozást (kép keresztül) és - 6 képet. Mutassa be a feladatok XHTML és CSS forráskódjait, valamint a Weblapot a böngészőben. Megoldás: body { background-color:#5674B9; background-image:url(bg2.gif); background-repeat:repeat-x; 69 INTERNET TECHNOLÓGIÁK - példatár background-attachment:fixed; margin:5; } table{ border-style:solid; border-color:#e5e5e5; border-width:1px; background-color:#311E1A; border-collapse:collapse; } td { vertical-align:top; } td.kep { vertical-align:middle; } h4 { color:#ffff00; font-family:Arial; } td.tartalom { font-family:Arial; font-size:11px; color:#ffffff; border-style:dashed; border-color:#e5e5e5; border-width:1px; background-color:#311E1A; } a:link { font-family:Tahoma; color:#ffffff; font-size:11px; font-weight:bold; } a:activ { font-family:Tahoma; color:#ffffff; background-color:#000000; font-size:11px; font-weight:bold; } a:hover { font-family:Tahoma; color:#ffffff; background-color:#000000;
font-size:11px; font-weight:bold; } 70 INTERNET TECHNOLÓGIÁK - példatár a:visited { font-family:Tahoma; color:#ffffff; background-color:#000000; font-size:11px; font-weight:bold; } A style53.css stíluslap szövegállománya <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Példa 53 - XHTML és CSS átfogó feladat</title> <link type="text/css" rel="stylesheet" href="style53.css" /> </head> <body> <table width="650" align="center" cellpadding="10" cellspacing="0"> <tbody> <tr><td class="kep"> <a href="http://www.gamescom/chefs" ><img
src="chefsgif" alt="Superstar Chefs" id="ck" width="97" height="73" /></a> </td> <td class="tartalom"><h4>Superstar Chefs</h4> On every level there is a golden key, in order to get it you must collect all the fruits on the screen. When the key comes falling down from the sky you can pick it up and it will take you to the next level. </td> <td width="190" rowspan="4"> <img src="games.gif" alt="Games review!" id="gk" width="180" height="382" /></td> </tr> <tr> <td class="kep"> <a href="http://www.gamescom/egypt" ><img src="egyptgif" alt="Bricks of Egypt" id="ek" width="97" height="73" /></a> </td> <td class="tartalom"> <h4>Bricks of Egypt</h4> Brick breaking action,
based on a strong egyptian theme. 3 difficulty settings makes this great game suit everyone! </td> </tr> <tr> <td class="kep"> <a href="http://www.gamescom/joe" ><img src="joegif" alt="Gold Miner Joe" id="jk" width="97" height="73" /></a> </td> <td class="tartalom"> <h4>Gold Miner Joe</h4> Get ready for a gold-collecting adventure! This scrolling platform game takes you through mysterious mines filled with treasures and bonus items. </td> 71 INTERNET TECHNOLÓGIÁK - példatár </tr> <tr><td class="kep"> <a href="http://www.gamescom/pirates" ><img src="piratesgif" alt="Pirates" id="pk" width="97" height="73" /></a> </td> <td class="tartalom"> <h4>Pirates</h4> A unique mix of an exciting pirate
adventure and a classic brickmatching game. Search the tropical jungles, castle dungeons and islands for treasures. </td></tr> </tbody> </table> </body> </html> Az 53. feladat kódrészlete 54. Feladat A CSEHTMLValidator segítségével készítse el a mellékelt Weblapot az XHTML és a CSS technológiák alkalmazásával. A mégsem gomb szerepe az legyen, hogy törölje az addig beírtakat, és visszaállítsa az alapértelmezett adatokat. Az küld gombnak pedig, hogy a beírt adatokat elküld a regisztracio.php szkriptnek, amely feldolgozza az űrlapon megadott adatot (54. ábra) 54. ábra 72 INTERNET TECHNOLÓGIÁK - példatár Feladatmegadás A Weblap tartalmazzon: - XHTML-1.0-Transitional DTD-t, - csatolt stíluslapot, - 6 stílusdefiníciót, - 2 stílusosztályt és - egy képet. Mutassa be a feladatok XHTML és CSS forráskódjait, valamint a Weblapot a böngészőben. Megoldás: body { background-color:#000000; margin:5; } table{
border-style:solid; border-color:#e5e5e5; border-width:0px; background-color:#000000; border-collapse:collapse; } strong { color:#ff0000; font-family:Arial; font-size:12px; } td.kerdoiv { font-family:Arial; font-size:11px; color:#ffffff; } label,textarea { margin-left: 0.3cm; margin-right: 0.3cm; } .gomb { border-style:solid; border-color:#ff0000; border-width:1px; background-color:#e5e5e5; margin-left: 0.3cm; font-family:Arial; font-size:11px; color:#ff0000; } 73 INTERNET TECHNOLÓGIÁK - példatár fieldset{ border-style:solid; border-color:#ff0000; border-width:1px; } input,textarea{ border-style:solid; border-color:#ff0000; border-width:1px; background-color:#e5e5e5; font-family:Arial; font-size:11px; } A style54.css stíluslap szövegállománya <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html
xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Példa 54 - XHTML és CSS átfogó feladat</title> <link type="text/css" rel="stylesheet" href="style54.css" /> </head> <body> <table width="650" align="center" cellpadding="10" cellspacing="0"> <tbody> <tr> <td class="kerdoiv"> <form id="urlap" name="urlap" method="post" action="regisztracio.php"> <strong>Regisztráld magad, írd be az õsszes adatod!</strong><br /> <br /> <fieldset> <legend><strong>Személyi adatok</strong></legend> <label>vezetéknév:</label> <input type="text" id="vnev" name="vnev" /> <br /> <label>név:</label> <input type="text"
id="nev" name="nev" /> <br /> <label>e-mail:</label> <input type="text" id="email" name="email" /> <br /> <label>jelszó:</label> <input type="password" id="jelszo" name="jelszo" /> <br /> <br /> <label>megjegyzések</label> <br /> <textarea id="megjegyzes" name="megjegyzes" rows="3" cols="20" ></textarea> <br /> <br /> <input type="submit" id="gomb" name="gomb" value="küld" class="gomb" /> 74 INTERNET TECHNOLÓGIÁK - példatár <input type="reset" id="gombr" name="gombr" value="mégsem" class="gomb"/> <br /> <br /> </fieldset> </form></td> <td width="300"> <img src="robo.gif"
alt="Future Web developer" id="frobo" name="frobo" width="300" height="300" /></td> </tr> </tbody> </table> </body> </html> Az 54. feladat kódrészlete 55. Feladat A CSEHTMLValidator segítségével készítse el a mellékelt Weblapot az XHTML és a CSS technológiák alkalmazásával (55. ábra) 55. ábra 75 INTERNET TECHNOLÓGIÁK - példatár Feladatmegadás A Weblap tartalmazzon: - XHTML-1.0-Transitional DTD-t, - csatolt stíluslapot, - 10 stílusdefiníciót, - 5 stílusosztályt és - 2 képet. Mutassa be a feladatok XHTML és CSS forráskódjait, valamint a Weblapot a böngészőben. Megoldás: body { background-color:#000000; background-image:url(images/player.jpg); background-repeat:no-repeat; background-attachment:fixed; } table{ border-style:dotted; border-color:#ffffff; border-width:5px; } td.nba { font-size:12px; font-family:Verdana; color:#000000; text-indent:30;
line-height:2; text-align:justify; } th{ font-family:Tahoma; font-size:14px; background-color:#000000; color:#ffffff; } td.slika { background-image:url(images/logo.gif); font-family:verdana; color:#000000; font-size:12px; } tfoot{ background:#e5e5e5; color:#000000; } 76 INTERNET TECHNOLÓGIÁK - példatár h3 { text-decoration:underline; } td.tekst { color:#000000; font-size:12px; font-family:Tahoma; text-align:center; line-height:1; } td.tekst2 { background-color:#0088ff; color:#ffffff; font-size:12px; font-family:Tahoma; text-indent:20; text-align:center; } td.link { background-image:url(images/nike.gif); background-repeat:repeat; color:#ffffff; } caption{ color:#ffffff; text-decoration:underline; font-weight:bold; font-family:Verdana; } a:link { font-family:Tahoma; color:#ffffff; font-size:12px; font-weight:bold; text-decoration:none; } a:activ { font-family:Tahoma; color:#ffffff; font-size:12px; font-weight:bold; } a:hover { font-family:Tahoma; color:#ffffff;
background-color:#ff0000; text-decoration:none; font-size:12px; 77 INTERNET TECHNOLÓGIÁK - példatár font-weight:bold; } a:visited { font-family:Tahoma; color:#ffffff; text-decoration:none; font-size:12px; font-weight:bold; } A style55.css stíluslap szövegállománya <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Példa 55 - XHTML és CSS átfogó feladat</title> <link type="text/css" rel="stylesheet" href="style55.css" /> </head> <body> <table cellpadding="0" cellspacing="0" align="right" width="400" border="0"> <caption>bAsKeTbAlL</caption> <tr> <td
align="left" bgcolor="#ffffff" class="nba"> The NBA Entertainment League is a private, invitation-only entertainment industry basketball league. The league is made up of many of Hollywood’s top actors, musicians, directors, producers, and agents. </td> <td rowspan="3" align="center" width="100" class="link"><a href="1.html">players</a><br /><a href="2html">teams</a><br /><a href="3.html">statistics</a><br /> </td></tr> <tr> <td class="tekst2" align="center" bgcolor="#ffffff"> <a href="http://www.nbacom">wwwnbacom</a> </td> </tr> <tr><td bgcolor="#ffffff" align="center" class="tekst"> <br /> The All-Stars are coming to K-Marts neighborhood. (NBAE/Getty Images)<br /> <h3>You
Pick the Stars!</h3> </td></tr> </table> </body> </html> Az 55. feladat kódrészlete 78 INTERNET TECHNOLÓGIÁK - példatár 56. Feladat A CSEHTMLValidator segítségével készítse el a mellékelt Weblapot az XHTML és a CSS technológiák alkalmazásával (56. ábra) 56. ábra Feladatmegadás A Weblap tartalmazzon: - XHTML-1.0-Transitional DTD-t, - csatolt stíluslapot, - 4 stílusdefiníciót, - 4 stílusosztályt és - 2 képet. Mutassa be a feladatok XHTML és CSS forráskódjait, valamint a Weblapot a böngészőben. Megoldás: body { background-color:#ff0000; background-image:url(images/bg.gif); 79 INTERNET TECHNOLÓGIÁK - példatár background-repeat:repeat; background-attachment:fixed; } table{ border-style:solid; border-color:#000000; border-width:5px; background-color:#ffffff; } th{ font-family:Tahoma; font-size:14px; background-color:#000000; color:#ffffff; } img.slika { border-style:solid; border-color:#000000;
border-width:5px; } td.slika1 { background-color:#ff0000; font-family:verdana; color:#000000; font-size:12px; } ol{ list-style-type:upper-alpha; } td.tekst2 { color:#ff0000; font-size:12px; font-family:Tahoma; text-indent:20; text-align:left; } td.link { background-color:#ff0000; color:#ffffff; } a:link { font-family:Tahoma; color:#ffffff; font-size:12px; font-weight:bold; } a:activ { font-family:Tahoma; 80 INTERNET TECHNOLÓGIÁK - példatár color:#ffffff; background-color:#000000; font-size:12px; font-weight:bold; } a:hover { font-family:Tahoma; color:#ffffff; font-size:20px; font-weight:bold; } a:visited { font-family:Tahoma; color:#ffffff; font-size:12px; font-weight:bold; background-color:transparent; } A style56.css stíluslap szövegállománya <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html
xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Példa 56 - XHTML és CSS átfogó feladat</title> <link type="text/css" rel="stylesheet" href="style56.css" /> </head> <body> <table cellpadding="0" cellspacing="0" align="center" width="660" border="0"> <tr> <td width="200" align="right" rowspan="2" class="slika1"> In this game, Sint Nicolaas has been robbed! The thieves have taken his big sack full of presents and gingerbread cookies. In their run, however, the they arent careful and presents start dropping out of the sack. Now Sint only has to collect the fallen gingerbread and presents and bring them to the right chimney. </td> <td colspan="2" class="link" align="right"> <a
href="3.html">download</a> * <a href="2.html">members</a> * <a href="4.html">charts</a> </td> </tr> <tr> <td class="tekst" width="200"> <img src="images/logo.gif" class="slika" /> </td> <td width="220" class="tekst2" align="right"> <b>Rights and limitations:</b><br /><br /> <ol> 81 INTERNET TECHNOLÓGIÁK - példatár <li> You may install and use the SOFTWARE PRODUCT for an unlimited time </li> <li> You may copy and distribute the SOFTWARE PRODUCT, but only in its original form (as found on the WIERING SOFTWARE web site) and without any modifications. </li> </ol> </td> </tr> <tr> <td colspan="3" class="link"> <a href="http://www.gamescoyu">wwwgamescoyu</a> </td> </tr>
</table> </body> </html> Az 56. feladat kódrészlete 82 INTERNET TECHNOLÓGIÁK - példatár 83 INTERNET TECHNOLÓGIÁK - példatár 57. Feladat Készítsen egy egyszerű XML dokumentumot, amely kiírja 3 tantárgy nevét az első, a második és a harmadik évről (57. ábra) 57. ábra Megoldás: <?xml version="1.0" encoding="UTF-8"?> <!--File Name:57.xml --> <tantargy> <elsoev> <elso1>Matematika</elso1> <elso2>Fizika</elso2> <elso3>Internet technologiak I</elso3> </elsoev> <masodikev> <masodik1>Matematika II</masodik1> <masodik2>Multimedia</masodik2> <masodik3>Java</masodik3> </masodikev> 84 INTERNET TECHNOLÓGIÁK - példatár <harmadikev> <harmadik1>Elektronikus ugyvitel</harmadik1> <harmadik2>Szamitogepes laboratorium IV</harmadik2> <harmadik3>Szamitogepes
halozatok</harmadik3> </harmadikev> </tantargy> Az 57. feladat kódrészlete 58. Feladat Készítse el a mellékelt Weblapot XML és CSS technológiák alkalmazásával, amely kiírja az ábrán lévő szöveget. A Weblap tartalmazzon csatolt stíluslapot és 4 stílusdefiníciót (58. ábra) 58. ábra Megoldás: cim { font-style:italic; font-weight:bold; font-family:Verdana; font-size:16pt; color:white; display:block; background:red; } 85 INTERNET TECHNOLÓGIÁK - példatár nyelvw { font-style:italic; font-size:12pt; font-family:Arial; display:block; color:blue; } nyelvd{ font-style:italic; font-size:12pt; font-family:Tahoma; display:block; color:red; } v{ display:block; margin-top:12pt; } A style58.css stíluslap szövegállománya <?xml version="1.0" encoding="UTF-8"?> <!--File Name:58.xml --> <?xml-stylesheet type="text/css" href="style58.css"?> <programnyelv> <cim>Web</cim>
<nyelvw>php</nyelvw> <nyelvw>asp</nyelvw> <nyelvw>perl</nyelvw> <v> </v> <cim>Desktop</cim> <nyelvd>delphi</nyelvd> <nyelvd>visual basic</nyelvd> <nyelvd>c++</nyelvd> </programnyelv> Az 58. feladat XML kódrészlete 59. Feladat Készítse el a mellékelt Weblapot XHTML, JavaScript és XML technológiák alkalmazásával, amely a kulcs szó alapján keresi az adatokat az adatbázisból. Az adatbázis szövege XML formátumban legyen és tartalmazzon adatokat a programokról (a program neve, típusa, ára és Web címe) (59. ábra) 86 INTERNET TECHNOLÓGIÁK - példatár 59. ábra Megoldás: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml"> <head> <title>XHTML/JavaScript/XML Search</title> </head>
<body> <xml id="dsoprogramok" src="programok.xml"></xml> <h2>search:</h2> A program neve: <input type="text" id="SearchText" /> <button onclick=Find()>Search</button> <hr /> A lekérdezés eredménye: <hr /> <div id="ResultDiv"></div> <script type="text/javascript" language="JavaScript"> 87 INTERNET TECHNOLÓGIÁK - példatár function Find () { SearchString = SearchText.valuetoUpperCase(); if (SearchString == "") { ResultDiv.innerHTML = "<Kerem irja be az" + " intemeny nevet.>"; return; } dsoprogramok.recordsetmoveFirst(); ResultHTML = ""; while (!dsoprogramok.recordsetEOF) { TitleString = dsoprogramok.recordset("NEVE")value; if (TitleString.toUpperCase()indexOf(SearchString) >=0) ResultHTML += "<b>A program neve: </b>" +
dsoprogramok.recordset("NEVE") + "</p><p><b>Típus: </b>" + dsoprogramok.recordset("TIPUS") + "</p><p>" + "<b>Ára: </b>" + dsoprogramok.recordset("ARA") + "</p></p>" + "<b>Web: </b>" + "<a href=""+dsoprogramok.recordset("WEBCIM")+"" target="blank">"+dsoprogramok.recordset("WEBCIM")+"</a>" + "</p><hr />"; dsoprogramok.recordsetmoveNext(); } if (ResultHTML == "") ResultDiv.innerHTML = "<Nincs talalat>"; else ResultDiv.innerHTML = ResultHTML; } </script> </body> </html> Az 59 feladat XHTML és JavaScript kódrészlete <?xml version="1.0" encoding="UTF-8"?> <!-- File Name: programok.xml --> <PROGRAMOK> <PROGRAM> 88 INTERNET TECHNOLÓGIÁK
- példatár <NEVE>CSE HTML Validator</NEVE> <TIPUS>web editor</TIPUS> <ARA>50$</ARA> <WEBCIM>http://www.htmlvalidatorcom</WEBCIM> </PROGRAM> <PROGRAM> <NEVE>Snag It!</NEVE> <TIPUS>screen capture</TIPUS> <ARA>40$</ARA> <WEBCIM>http://www.techsmithcom</WEBCIM> </PROGRAM> <PROGRAM> <NEVE>FlashGet(JetCar)</NEVE> <TIPUS>download manager</TIPUS> <ARA>60$</ARA> <WEBCIM>http://www.amazesoftcom</WEBCIM> </PROGRAM> <PROGRAM> <NEVE>Mozilla FireFox</NEVE> <TIPUS>web browser</TIPUS> <ARA>FREE</ARA> <WEBCIM>http://www.mozillaorg</WEBCIM> </PROGRAM> <PROGRAM> <NEVE>DB Designer</NEVE> <TIPUS>download manager</TIPUS> <ARA>FREE</ARA> <WEBCIM>http://fabforce.net</WEBCIM> </PROGRAM> <PROGRAM> <NEVE>Adobe
Photoshop</NEVE> <TIPUS>image editor</TIPUS> <ARA>80$</ARA> <WEBCIM>http://www.adobecom</WEBCIM> </PROGRAM> </PROGRAMOK> A programok.xml szövegállománya 89 INTERNET TECHNOLÓGIÁK - példatár 90 INTERNET TECHNOLÓGIÁK - példatár 60. Feladat Készítsen egy PHP szkriptet, amely kiírja az ábrán lévő szöveget (60. ábra) 60. ábra Megoldás: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>php 1</title> </head> <body> <?php echo "Hello World!"; ?> </body> </html> A 60. feladat kódrészlete 61. Feladat Készítsen egy PHP szkriptet, amely kiírja az ábrán lévő szöveget (61. ábra) 91 INTERNET TECHNOLÓGIÁK - példatár 61. ábra
Megoldás: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>php 2</title> </head> <body> <?php /* Többsoros megjegyzés (blokk megjegyzés) */ echo "Nagy"; // egysoros megjegyzés echo "<br />Oliver"; echo "<br /><b>MFI Szabadka</b>"; # Egysoros megjegyzés ?> </body> </html> A 61. feladat kódrészlete 62. Feladat Készítsen egy PHP szkriptet, amely kiírja három változó értékét és típusát (62. ábra) 92 INTERNET TECHNOLÓGIÁK - példatár 62. ábra Megoldás: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html
xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>php 3</title> </head> <body> <?php $valt1 = "robert"; $Valt1= 13; $valt2= 23.456; $t1=gettype($valt1); $t2=gettype($Valt1); $t3=gettype($valt2); //$t11=var dump($valt1); //Ha egy kifejezés értékére és típusára vagy kíváncsi, akkor használd a var dump() függvényt. echo "<br />1. változó ($valt1) echo "<br />2 változó ($Valt1) echo "<br />3 változó ($valt2) //echo "<br />1 változó ($valt1) //echo "<br />2. változó ($Valt1) //echo "<br />3. változó ($valt2) ?> </body> </html> $t1"; $t2"; $t3"; - ".gettype($valt1); - ".gettype($Valt1); - ".gettype($valt2); A 62. feladat kódrészlete 93 INTERNET TECHNOLÓGIÁK - példatár 63. Feladat Készítsen egy PHP szkriptet, amely két változót hoz létre, az
első integer típus, a második string típus (63. ábra) 63. ábra Megoldás: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>php 4</title> </head> <body> <?php $szam=12; $szoveg=$szam." - string típus"; echo "$szoveg<br />"; $szam2=$szoveg+20; echo "Új szam = $szam2<br />"; $szam3=$szám2 + "vts 20"; echo"Új szám2 = $szam3<br />"; ?> </body> </html> A 63. feladat kódrészlete 94 INTERNET TECHNOLÓGIÁK - példatár 64. Feladat Készítsen egy PHP szkriptet, amely létrehoz két tömböt és kiírja a tömbök adatait. Az elsö tömb neveket, a második pedig film címeket tartalmazzon (64. ábra) 64. ábra Megoldás: <!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>php 5</title> </head> <body> <?php $nevek[0]="Attila"; $nevek[1]="Hajnalka"; $nevek[]="Edit"; $film[0][0]="Matrix"; $film[0][1]="Lord of The rings"; echo" <br>$nevek[0], $nevek[1], $nevek[2], $nevek[3]"; echo" <br>{$film[0][0]}, {$film[0][1]}"; ?> </body> </html> A 64. feladat kódrészlete 95 INTERNET TECHNOLÓGIÁK - példatár 65. Feladat Készítsen egy PHP szkriptet, amely kiszámolja és kiírja a kör kerületét és területét (65. ábra) Adva: r=15 65. ábra Megoldás: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>php 6</title> </head> <body> <?php define("PI",3.14); // konstans $r=15; $k=$r*$rPI; $t=2*$rPI; // $f=pow($r,2); hatványozás // 2=hatvány //sqrt($r); négyzetgyökvonás echo "<br />Kör kerülete = $k"; echo "<br />Kör területe = $t"; ?> </body> </html> A 65. feladat kódrészlete 96 INTERNET TECHNOLÓGIÁK - példatár 66. Feladat Készítsen egy PHP szkriptet, amely if-else feltételes utasítás alkalmazással kiírja az ábrán lévő szöveget (66. ábra) 66. ábra Megoldás: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu"
lang="hu"> <head> <title>php 7</title> </head> <body> <?php $euro=76; if($euro!=75) // != nem egyenlõ echo ("Árfolyam:$euro"); else echo ("Átlagos árfolyam!"); ?> </body> </html> A 66. feladat kódrészlete 97 INTERNET TECHNOLÓGIÁK - példatár 67. Feladat Készítsen egy PHP szkriptet, amely az időponttól függően ki írja a megfelelő szöveget, és meg jeleníti a megfelelő képet. Ha az időpont 18-nál nagyobb, akkor jelenítsen meg egy fehér színű üdvözlő szöveget és a 2.jpg képet Az oldal háttér színe legyen fekete. Abban az esetben, ha 18-nál kisebb, jelenítsen meg egy fekete színű üdvözlő szöveget és az 1.jpg képet Az oldal háttér színe legyen sárga (67 ábra). 67. ábra Megoldás: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html
xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>php 8 - <?php echo Date("F d, Y") ?></title> </head> <?php $ora=Date(H); if ($ora<18) { $szin="yellow"; $uzenet="Jó napot!"; $betuszin="black"; $kep="1.jpg"; } else { $szin="black"; 98 INTERNET TECHNOLÓGIÁK - példatár $uzenet="Jó estét!"; $betuszin="white"; $kep="2.jpg"; } echo"<body style="background-color:$szin;">"; echo"<p style="color:$betuszin">$uzenet</p>"; echo"<img src="$kep" alt="" ide="kep" name="kep" />"; ?> </body> </html> A 67. feladat kódrészlete 68. Feladat Készítsen egy Web oldalt, amely egy űrlapot jelenít meg. Az űrlap tartalmazzon egy szövegmezőt (név) és send gombot. A send gomb küldje
az adatot a z9php szkriptnek, amely feldolgozza az űrlapon megadott adatot (68.1 ábra) A z9php szkript írja ki a bevitt név részére egy üdvözletet (68.2 ábra) 68.1 ábra 68.2 ábra 99 INTERNET TECHNOLÓGIÁK - példatár Megoldás: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>php 9</title> </head> <body> <form method="post" action="z9.php"> <input type="text" id="nev" name="nev" /> <input type="submit" name="gomb" value="send" /> </form> </body> </html> A 68. feladat XHTML kódrészlete <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>php 9</title> </head> <body> <?php echo "Hello". $ POST["nev"]" <br />"; echo"<br />"; ?> </body> </html> A z9.php kódállománya 69. Feladat Készítsen egy Web oldalt, amely egy űrlapot jelenít meg. Az űrlap tartalmazzon: - egy szövegmezőt (név) - hat rádió gombot (piros, kék és zöld szín, Arial, Verdana és Tahoma betűtípus) - send gombot. A send gomb küldje az adatokat a z10.php szkriptnek, amely feldolgozza az űrlapon megadott adatot (69.1 ábra) A z10php szkript jelenítsen meg a bevitt név részére (a választott színben és a választott betűtípussal) egy üdvözletet (69.2 ábra) 100 INTERNET TECHNOLÓGIÁK - példatár 69.1 ábra 69.2 ábra Megoldás: <!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>php 10</title> </head> <body> <form method="post" action="z10.php"> <input type="text" id="nev" name="nev" /><br /> 101 INTERNET TECHNOLÓGIÁK - példatár <hr /> <input type="radio" value="red" name="szin" id="szin" checked="checked" />red<br /> <input type="radio" value="green" name="szin" id="szin" />green<br /> <input type="radio" value="blue" name="szin" id="szin" />blue<br /> <hr /> <input type="radio" value="Arial"
name="ftipus" id="ftipus" checked="checked" />Arial<br /> <input type="radio" value="Verdana" name="ftipus" id="ftipus" />Verdana<br /> <input type="radio" value="Tahoma" name="ftipus" id="ftipus" />Tahoma<br /> <hr /> <input type="submit" name="gomb" value="send" /> </form> </body> </html> A 69. feladat XHTML kódrészlete <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>php 10</title> </head> <body> <?php $szin=$ POST["szin"]; $ftipus=$ POST["ftipus"]; $nev=$ POST["nev"]; echo "<p
style="color:$szin;font-family:$ftipus">Hello $nev</p>"; echo"<br />"; ?> </body> </html> A z10.php kódállománya 70. Feladat Készítsen egy Web oldalt, amely egy űrlapot jelenít meg. Az űrlap tartalmazzon: - egy szövegmezőt (név) - hat rádió gombot (piros, kék és zöld szín, Arial, Verdana és Tahoma betűtípus) - egy legördülő menüt (betűméretek 10-18) - send gombot. A send gomb küldje az adatokat a z11.php szkriptnek, amely feldolgozza az űrlapon megadott adatot (70.1 ábra) A z11php szkript jelenítsen meg a bevitt név részére (a választott színben, a választott betűtípussal és betűmérettel) egy üdvözletet(70.2 ábra). 102 INTERNET TECHNOLÓGIÁK - példatár 70.1 ábra 70.2 ábra Megoldás: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html
xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>php 11</title> </head> <body> <form method="post" action="z11.php"> 103 INTERNET TECHNOLÓGIÁK - példatár <input type="text" id="nev" name="nev" /><br /><hr /> <input type="radio" value="red" name="szin" id="szin" checked="checked" />red<br /> <input type="radio" value="green" name="szin" id="szin" />green<br /> <input type="radio" value="blue" name="szin" id="szin" />blue<br /> <hr /> <input type="radio" value="Arial" name="ftipus" id="ftipus" checked="checked" />Arial<br /> <input type="radio" value="Verdana"
name="ftipus" id="ftipus" />Verdana<br /> <input type="radio" value="Tahoma" name="ftipus" id="ftipus" />Tahoma<br /><hr /> <select name="meret" id="meret"> <option value="10">10</option> <option value="12">12</option> <option value="14">14</option> <option value="16">16</option> <option value="18">18</option> </select><hr /> <input type="submit" name="gomb" value="send" /> </form> </body> </html> A 70. feladat XHMTL kódrészlete <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head>
<title>php 11</title> </head> <body> <?php $szin=$ POST["szin"]; $ftipus=$ POST["ftipus"]; $meret=$ POST["meret"]; $nev=$ POST["nev"]; echo "<p style="color:$szin;font-family:$ftipus;fontsize:${meret}pt;">Hello $nev</p>"; echo"<br />"; ?> </body> </html> A z11.php kódállománya 71. Feladat Készítsen egy Web oldalt, amely egy számológépet foglal magába. A számológép tartalmazzon: - két szövegmezőt (a és b változók) - négy rádió gombot (összeadás, kivonás, szorzás és osztás) - küld gombot. 104 INTERNET TECHNOLÓGIÁK - példatár A küld gomb küldje az adatokat a z12.php szkriptnek, amely feldolgozza az űrlapon megadott adatot (71.1 ábra) A z12php szkript számolja és írja ki a kiválasztott művelet eredményét. Alkalmazzon switch utasítást (712 ábra) 71.1 ábra 71.2 ábra Megoldás: <!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> 105 INTERNET TECHNOLÓGIÁK - példatár <title>php 12</title> </head> <body> <form method="post" action="z12.php"> a=<input type="text" id="a" name="a" /><br /> b=<input type="text" id="b" name="b" /><br /> <hr /> <input type="radio" value="összeadas" name="muvelet" id="muvelet" checked="checked" />+<br /> <input type="radio" value="kivonás" name="muvelet" id="muvelet" /><br /> <input type="radio" value="szorzás" name="muvelet" id="muvelet" />*
<br /> <input type="radio" value="osztás" name="muvelet" id="muvelet" />/ <br /> <hr /> <input type="submit" name="gomb" value="küld" /> </form> </body> </html> A 71. feladat XHTML kódrészlete <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>php 12</title> </head> <body> <?php $ertek=0; $muvelet=$ POST["muvelet"]; $a=$ POST["a"]; $b=$ POST["b"]; switch ($muvelet) { case "összeadas":$ertek=$a+$b; break; case "kivonás" :$ertek=$a-$b; break; case "szorzás" :$ertek=$a*$b; break; case "osztás" :$ertek=$a/$b; break; default :
echo"művelet?!"; break; } 106 INTERNET TECHNOLÓGIÁK - példatár echo"$muvelet: $ertek"; ?> </body> </html> A z12.php kódállománya 72. Feladat Készítsen egy PHP szkriptet, amely a számokat egysorban és többsorban 1-től 10-ig kiírja. A többsoros kiírásnál a páros számok legyenek kék-, a páratlan pedig piros színűek. Kiírásnál használjon for ciklusszerkezetet (72 ábra) 72. ábra Megoldás: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>php 13</title> </head> <body> 107 INTERNET TECHNOLÓGIÁK - példatár <?php for ($i = 1; $i <= 10; $i++) { if ($i==10) echo"$i"; else echo "$i, "; } //$i++ inkrementáló (növelõ) a változó értékét növeli
meg eggyel //$i-- dekrementáló (csökkentõ) a változó értékét csökkenti meg eggyel echo"<br /><br />"; for ($i = 1; $i <= 10; $i++) { if($i%2==0) echo "<span style="color:blue;">$i</span><br />"; else echo "<span style="color:red;">$i</span> <br />"; } ?> </body> </html> A 72. feladat kódrészlete 73. Feladat Készítsen egy PHP szkriptet, amely kiírja a számokat 1-től 10-ig egysorban. Kiírásnál, használjon while ciklusszerkezetet (73. ábra) 73. ábra Megoldás: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>php 14</title> </head> 108 INTERNET TECHNOLÓGIÁK - példatár <body> <?php $i = 1; while ($i
<= 10) { if ($i==10) echo"$i"; else echo "$i, "; $i++; } ?> </body> </html> A 73. feladat kódrészlete 74. Feladat Készítsen egy PHP szkriptet, amely kiírja a számokat 1-től 10-ig fordított sorrendben. A kiírásnál használjon do-while ciklusszerkezetet (74. ábra) 74. ábra Megoldás: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>php 15</title> </head> 109 INTERNET TECHNOLÓGIÁK - példatár <body> <?php $i = 10; do { echo"$i<br />"; $i--; } while ($i >= 1) ?> </body> </html> A 74. feladat kódrészlete 75. Feladat Készítsen egy PHP szkriptet, amely kiírja egy tömb tartalmát. A kiírásnál használjon foreach függvényt (75. ábra) 75. ábra
Megoldás: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>php 16</title> </head> <body> <?php $tomb = array (1, 2, 3, 17); 110 INTERNET TECHNOLÓGIÁK - példatár $i=1; foreach ($tomb as $ertek) { echo "$i. érték: $ertek<br>"; $i++; } ?> </body> </html> A 75. feladat kódrészlete 76. Feladat Készítsen egy PHP szkriptet, amely két függvény segítségével kiszámolja és kiírja az a és a b változóval történő összeadás értékét (76. ábra) 76. ábra Megoldás: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu"
lang="hu"> <head> <title>php 17</title> </head> <body> <?php $a = 1; $b = 2; echo"$a=$a $b=$b<br />"; function osszeadas($a,$b) { $c = $a + $b; echo"$a+$b=$c<br />"; } 111 INTERNET TECHNOLÓGIÁK - példatár function osszeadas2($a,$b) { $c = $a + $b; return $c; } osszeadas($a,$b); echo "$a+$b=".osszeadas2($a,$b); ?> </body> </html> A 76. feladat kódrészlete 77. Feladat Készítsen egy PHP szkriptet, amely függvények segítségével kiszámolja és kiírja az a és a b változóval történő összeadás értékét. Használjon globális változókat (77 ábra). 77. ábra Megoldás: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>php 18</title>
</head> <body> <?php $a = 1; $b = 2; echo"$a=$a $b=$b<br />"; 112 INTERNET TECHNOLÓGIÁK - példatár function osszeadas() { global $a, $b; $b = $a + $b; } osszeadas(); echo "$a+$b=$b"; ?> </body> </html> A 77. feladat kódrészlete 78. Feladat Készítsen egy PHP szkriptet, amely az include() függvény segítségével beágyazza a valtozok.php fájlt, és kiírja annak tartalmát A valtozokphp dokumentum négy változót tartalmaz (78. ábra) 78. ábra Megoldás: <?php $valt1="szia"; $valt2=234.5; $valt3=50; $kep="1.jpg"; ?> A valtozok.php szövegállománya 113 INTERNET TECHNOLÓGIÁK - példatár <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>php 19</title>
</head> <body> <?php include("valtozok.php"); // az állományok beágyazására a PHP programokba az include() függvény szolgál echo"$valt1=$valt1<br />"; echo"$valt2=$valt2<br />"; echo"$valt3=$valt3<br />"; echo"<img src="$kep" alt="kep" id="k" name="k" />"; ?> </body> </html> A 78. feladat kódrészlete 79. Feladat Készítsen egy Web oldalt, PHP szkript segítségével amelynek struktúrája megegyezik az ábrán láthatóval. Alkalmazzon include() függvényt (79 ábra) HEADER MENU CONTENT FOOTER 79. ábra Megoldás: <?php include("include/header.php"); 114 INTERNET TECHNOLÓGIÁK - példatár include("include/menu.php"); if(!isset($ GET["link"])) $ GET["link"]="index"; switch ($ GET["link"]) { case "index": include("include/index.php"); break;
case "mp3": include("include/mp3.php"); break; case "download": include("include/download.php"); break; default: include("include/index.php"); break; } include("include/footer.php"); ?> A 79. feladat kódrészlete 80. Feladat Készítsen egy PHP szkriptet, amely a login adattáblából kiírja az összes adatot (80. ábra). # # Table structure for table `login` # CREATE TABLE login ( Id int(11) NOT NULL auto increment, nev varchar(30) NOT NULL default , vnev varchar(30) NOT NULL default , email varchar(30) NOT NULL default , jelszo varchar(10) NOT NULL default , PRIMARY KEY (Id) ) TYPE=MyISAM COMMENT=felhasznalok; 80. Kódblokk a login adattábla struktúrája 115 INTERNET TECHNOLÓGIÁK - példatár 80. ábra Megoldás: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html
xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>PHP 20</title> </head> <body> <?php $server="localhost"; $felhasznalo="root"; $jelszo=""; $ab="it"; $kapcsolat = mysql connect("$server", "$felhasznalo", "$jelszo") or die(mysql error()); mysql select db("$ab",$kapcsolat) or die(mysql error()); $sql="select * from login"; $eredmeny = mysql query($sql) or die(mysql error()); echo"<table border="1" align="center">"; echo"<tr><th>Nev</th><th>VNev</th><th>email</th></tr>"; if (mysql num rows($eredmeny)>0) { while ($tomb = mysql fetch array($eredmeny)) echo("<tr><td>$tomb[nev]</td><td>$tomb[vnev]</td><td>$tomb[email]</td></tr>"); } else { echo("Nincs
adat!"); } mysql free result($eredmeny); 116 INTERNET TECHNOLÓGIÁK - példatár ?> </body> </html> A 80. feladat kódrészlete 81. Feladat Készítsen egy PHP szkriptet, amely lekérdezést hajt végre. A nev adattábla mező értéke Edit legyen ott, ahol a vnev mező értéke Kiss. Megoldás: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>PHP 21</title></head><body> <?php $server="localhost"; $felhasznalo="root"; $jelszo=""; $ab="it"; $kapcsolat = mysql connect("$server", "$felhasznalo", "$jelszo") or die(mysql error()); mysql select db("$ab",$kapcsolat) or die(mysql error()); $sql="update login set nev=Edit where
vnev=Kiss"; $eredmeny = mysql query($sql) or die(mysql error()); echo "OK!"; ?></body></html> A 81. feladat kódrészlete 82. Feladat Készítsen egy PHP szkriptet, amely kitörli az összes adatot a login adattáblából, ahol a nev mező értéke Edit. Megoldás: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>PHP 22</title> </head> <body> <?php $server="localhost"; $felhasznalo="root"; $jelszo=""; $ab="it"; 117 INTERNET TECHNOLÓGIÁK - példatár $kapcsolat = mysql connect("$server", "$felhasznalo", "$jelszo") or die(mysql error()); mysql select db("$ab",$kapcsolat) or die(mysql error()); $sql="delete from it where
nev=Edit";"; $eredmeny = mysql query($sql) or die(mysql error()); echo "OK!"; ?> </body> </html> A 82. feladat kódrészlete 83. Feladat Készítsen egy PHP szkriptet, amely új adatokat visz be a login adattáblába. Megoldás: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>PHP 22</title> </head> <body> <?php $server="localhost"; $felhasznalo="root"; $jelszo=""; $ab="it"; $kapcsolat = mysql connect("$server", "$felhasznalo", "$jelszo") or die(mysql error()); mysql select db("$ab",$kapcsolat) or die(mysql error()); $sql = "insert into login (nev,vnev,email,jelszo) values (student,it,vts@vts.yu,vts)"; $eredmeny = mysql
query($sql) or die(mysql error()); echo "OK!"; ?> </body> </html> A 83. feladat kódrészlete 84. Feladat Készítsen egy Web oldalt, amely létrehoz egy bejelentkezési és egy regisztrációs űrlapot. Az adatokat a login adattáblába tárolja (84 ábra) 118 INTERNET TECHNOLÓGIÁK - példatár 84. ábra Megoldás: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>login</title> </head> <body> <hr /> <b>Login</b><br /> <form method="post" action="check.php?cmd=1" id="login" name="login"> Email:<input type="text" id="email" name="email" /><br /> Jelszo:<input type="password"
id="jelszo" name="jelszo" size="10" /><br /> <input type="submit" name="sgomb1" value="kuld" /> <input type="reset" name="rgomb1" value="megsem" /> </form> <hr /> <b>Uj felhasznalo:</b> <form method="post" action="check.php?cmd=2" id="register" 119 INTERNET TECHNOLÓGIÁK - példatár name="register"> Nev:<input type="text" id="nev" name="nev" /><br /> Vnev:<input type="text" id="vnev" name="vnev" /><br /> Email:<input type="text" id="email" name="email" /><br /> Jelszo:<input type="password" id="jelszo" name="jelszo" size="10" /><br /> <input type="submit" name="sgomb2" value="kuld" />
<input type="reset" name="rgomb2" value="megsem" /> </form> <hr /> <?php if($uzenet==1) echo "Nem letezik ilyen felhasznalo!"; if($uzenet==2) echo "Sikeresen regisztracio!"; ?> </body> </html> A 84. feladat kódrészlete <?php $server="localhost"; $felhasznalob="root"; $jelszob=""; $ab="it"; if($cmd==1) { loginfelhasznalo($email,$jelszo); } elseif($cmd==2) { ujfelhasznalo($nev,$vnev,$email,$jelszo); } else { header("Location:login.php?"); } function loginfelhasznalo($email,$jelszo) { global $server,$felhasznalob,$jelszob,$ab; $kapcsolat = mysql connect("$server", "$felhasznalob", "$jelszob") or die(mysql error()); mysql select db("$ab",$kapcsolat) or die(mysql error()); $sql="select * from login where email=$email and jelszo=$jelszo"; $eredmeny = mysql query($sql) or die(mysql error()); if(mysql num
rows($eredmeny)>0) 120 INTERNET TECHNOLÓGIÁK - példatár header("Location:menu.php"); else header("Location:login.php?uzenet=1"); } function ujfelhasznalo($nev,$vnev,$email,$jelszo) { global $server,$felhasznalob,$jelszob,$ab; $kapcsolat = mysql connect("$server", "$felhasznalob", "$jelszob") or die(mysql error()); mysql select db("$ab",$kapcsolat) or die(mysql error()); $sql = "insert into login (nev,vnev,email,jelszo) values ($nev,$vnev,$email,$jelszo)"; $eredmeny = mysql query($sql) or die(mysql error()); header("Location:login.php?uzenet=2"); } ?> A check.php kódállománya 121 INTERNET TECHNOLÓGIÁK - példatár 122 INTERNET TECHNOLÓGIÁK - példatár 85. Feladat Készítsen egy Web oldalt, amely egy űrlapot jelenít meg. Az űrlap tartalmazzon: - négy szövegmezőt (név, életkor, a és b változók) - submit és reset gombot. A submit gomb küldje az adatokat a
check.php szkriptnek, amely feldolgozza az űrlapon megadott adatot (85.1 ábra) A checkphp szkript a függvény segítségével számolja és írja ki az (a+b)b képlet értékét, és jelenítsen meg egy piros színű üdvözlő szöveget Verdana betűtípussal a bevitt név részére, ha az életkor 18-nál nagyobb. Az oldal háttér színe legyen fekete Abban az esetben, ha 18-nál kisebb vagy egyenlő, irányítsa a felhasználót a www.vtssuacyu oldalra (852 ábra) 85.1 ábra 85.2 ábra 123 INTERNET TECHNOLÓGIÁK - példatár Megoldás: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Xhtml, css és php átfogó feladatok</title> </head> <body> <form method="post" action="check.php"
id="form"> név: <input type="text" id="nev" name="nev" /><br /> életkor: <input type="text" id="eletkor" name="eletkor" /><br /> a: <input type="text" name="a" id="a" /><br /> b: <input type="text" name="b" id="b" /><br /> <input type="submit" name="sgomb" value="submit" /> <input type="reset" name="rgomb" value="reset" /> </form> </body> </html> A 85. feladat XHTML kódrészlete <?php $a=$ POST["a"]; $b=$ POST["b"]; $nev=$ POST["nev"]; $eletkor=$ POST["eletkor"]; function keplet($a,$b,$nev) { $c=(pow($a,5)+pow($b,5))*pow($b,3); echo"<body style="background-color:#000000"><p style="color:#ff0000;font-family:Verdana;">$c";
echo"<br />Hello $nev</p></body>"; } if($eletkor<=18) header("Location:http://www.vtssuacyu"); else keplet($a,$b,$nev); ?> A check.php kódállománya 86. Feladat Készítsen egy Web oldalt, amely egy űrlapot jelenít meg. Az űrlap tartalmazzon: - négy szövegmezőt (név, a, b és c változók) - submit és reset gombot. 124 INTERNET TECHNOLÓGIÁK - példatár A submit gomb küldje az adatokat a m.php szkriptnek, amely feldolgozza az űrlapon megadott adatot (86.1 ábra) Amikor a c változó páros szám, a függvény számolja és írja ki az (a+b)ab képlet értékét. Amikor a c változó páratlan szám, akkor pedig az (a/b)√a képlet értékét. Az eredmények kiírása Tahoma betűtípussal és piros színnel történjen. Az eredmény megjelenítése után, az oldal írja ki kék színnel a bevitt nevet (86.2 ábra) 86.1 ábra 86.2 ábra Megoldás: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Xhtml, css és php átfogó feladatok</title> 125 INTERNET TECHNOLÓGIÁK - példatár </head> <body> <form method="post" action="m.php" id="form"> név: <input type="text" id="nev" name="nev" /><br /> a: <input type="text" name="a" id="a" /><br /> b: <input type="text" name="b" id="b" /><br /> c: <input type="text" name="c" id="c" /><br /> <input type="submit" name="sgomb" value="submit" /> <input type="reset" name="rgomb" value="reset" /> </form> </body>
</html> A 86. feladat XHTML kódrészlete <?php $a=$ POST["a"]; $b=$ POST["b"]; $c=$ POST["c"]; $nev=$ POST["nev"]; function keplet($a,$b) { $c=(pow($a,2)+pow($b,2))*$apow($b,3); echo"<p style="color:#ff0000;font-family:Tahoma;">$c</p>"; } function keplet2($a,$b) { $c=(pow($a,5)/pow($b,5))*sqrt($a); echo"<p style="color:#ff0000;font-family:Tahoma;">$c</p>"; } if($c%2==0) keplet($a,$b); else keplet2($a,$b); echo"<p style="color:#0000ff;">Hello $nev</p>"; ?> A m.php kódállománya 87. Feladat Készítsen egy Web oldalt, amely egy űrlapot jelenít meg. Az űrlap tartalmazzon: - három szövegmezőt (a kör sugara, név és város) - submit és reset gombot. A submit gomb küldje az adatokat a formula.php szkriptnek, amely a függvény segítségével kiszámolja és kiírja a kör kerületét és területét (87.1 ábra) A kerület 126
INTERNET TECHNOLÓGIÁK - példatár eredményének kiírása piros színnel, a területé pedig kék színnel történjen. Az eredmények megjelenítése után az oldal írja ki sárga színnel a bevitt nevet és a várost (87.2 ábra) 87.1 ábra 87.2 ábra Megoldás: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Xhtml, css és php átfogó feladatok</title> </head> 127 INTERNET TECHNOLÓGIÁK - példatár <body> <form method="post" action="formula.php" id="form"> r: <input type="text" name="r" id="r" /><br /> név: <input type="text" id="nev" name="nev" /><br /> város: <input type="text"
name="varos" id="varos" /><br /> <input type="submit" name="sgomb" value="submit" /> <input type="reset" name="rgomb" value="reset" /> </form> </body> </html> A 87. feladat XHTML kódrészlete <?php $r=$ POST["r"]; $nev=$ POST["nev"]; $varos=$ POST["varos"]; define("PI",3.14); function terulet($r) { $c=pow($r,2)*PI; echo"<p style="color:#0000ff;font-family:Tahoma;">terület:$c</p>"; } function kerulet($r) { $c=2*$rPI; echo"<p style="color:#ff0000;font-family:Tahoma;">kerület:$c</p>"; } terulet($r); kerulet($r); echo"<p style="color:#ffff00;">$nev <br />$varos</p>"; ?> A formula.php kódállománya 128 INTERNET TECHNOLÓGIÁK - példatár 129 INTERNET TECHNOLÓGIÁK - példatár www.vtssuacyu Szabadkai Műszaki
Főiskola honlapja www.suacyu Szabadkai akadémia hálózat honlapja www.itvtssuacyu Internet technológiák honlapja www.prowebingcom/expert Távoktató (e-learning) portál www.gmesterwebcom/e-tananyag Távoktató (e-learning) portál www.w3org World Wide Web Consortium www.apacheorg Az Apache webszerver hivatalos honlapja www.mysqlnet A MySQL adatbázisrendszer webcíme www.phpnet A PHP nyelv hivatalos honlapja www.phpmyadminnet A PhpMyAdmin adatbáziskezelőprogram webcíme www.htmlvalidatorcom A CSE HTML Validator ellenőrző program webcíme www.atwhu Ingyenes webtárhely www.ultrawebhu Ingyenes webtárhely www.dzabacom Ingyenes webtárhely www.free-php-hostingcom Ingyenes webtárhely 130
egy egyszerű XHTML dokumentumot, amely deklarációs részt, a fejlécet és törzs jelölőelemet tartalmaz. Írja ki a Hello World! szöveget (1 ábra) 1. ábra Megoldás: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Példa 01</title> </head> <body> Hello World! </body> </html> Az 1. feladat kódrészlete 2. Feladat Készítsen egy XHTML dokumentumot, amely megjeleníti a Hello World! szöveget. Egy új bekezdést is hozzon létre (2. ábra) 2. ábra 2 INTERNET TECHNOLÓGIÁK - példatár Megoldás: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Példa 02</title> </head> <body> Hello World! <p>Ez egy új bekezdés (paragrafus).</p> </body> </html> A 2. feladat kódrészlete 3. Feladat Készítsen XHTML dokumentumot, amely kiírja a diákok személyi adatait. Használja a következő jelölőelemeket: strong, br, b, p, em, i, u, address (3. ábra) 3. ábra Megoldás: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Példa 03</title> </head> <body> 3 INTERNET TECHNOLÓGIÁK -
példatár <strong>Személyi adatok</strong> <br /><br /> <b>Diákok:</b> <p> <em>Benkő Róbert <br /> Partizanska 16 </em> <br /> <i>Szabadka</i> <br /> <u>024-444-444</u> <br /><br /> <address> Nagy István <br /> Bajai út 334 <br /> Szabadka </address> </p> </body> </html> A 3. feladat kódrészlete 4. Feladat Készítsen XHTML dokumentumot, amely megjelenít két vízszintes vonalat és a Matrix szöveget kiírja hat címszinten (4. ábra) 4. ábra 4 INTERNET TECHNOLÓGIÁK - példatár Megoldás: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head>
<title>Példa 04</title> </head> <body> <hr /> <h1>Matrix</h1> <h2>Matrix</h2> <h3>Matrix</h3> <h4>Matrix</h4> <h5>Matrix</h5> <h6>Matrix</h6> <hr /> </body> </html> A 4. feladat kódrészlete 5. Feladat Készítsen XHTML dokumentumot, amely megfelel az adott ábrának. Használja a következő jelölőelemeket: hr, big, code, small. Tetszőlegesen használja a title atribútumot (5. ábra) 5. ábra Megoldás: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> 5 INTERNET TECHNOLÓGIÁK - példatár <title>Példa 05</title> </head> <body> <hr /> <big
title="MATRIX IS EVERYWHERE!">MATRIX - Future is now!</big> <br /> <code> 01010110101001110101010100001 00111010011010110100010 11010101101001010 010101010101 1101010 1101 10 0 <br /> System error?! </code> <br /> <b>End is not here!</b> <small>End is not here!</small> <hr /> </body> </html> Az 5. feladat kódrészlete 6. Feladat Készítsen XHTML dokumentumot, amely kiírja az ábrán lévő szöveget. Használja a h2, sup és sub jelölőelemeket (6. ábra) 6. ábra Megoldás: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Példa 06</title> </head> <body> <h2>E=mc
<sup>2</sup> 6 INTERNET TECHNOLÓGIÁK - példatár <br /> Víz=H<sub>2</sub>0 </h2> </body> </html> A 6. feladat kódrészlete 7. Feladat Szerkessze meg az ábrán látható két részre osztott XHTML dokumentumot. Használja a div, dfn, cite, pre, blockquote jelölőelemeket és az id attribútumot (7. ábra) 7. ábra Megoldás: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Példa 07</title> </head> <body> <div id="program"> <dfn>A PHP rövidítés a Hypertext Preprocessor elnevezésbõl ered.</dfn> <br /><br /> <cite>PHP program </cite> <pre> mt
srand((double)microtime()*1000000); $length=mt rand(5,8); $down=97; 7 INTERNET TECHNOLÓGIÁK - példatár $up=122; $i=0; $password=""; </pre> </div> <div id="definicio"> <blockquote > A PHP rövidítés a Hypertext Preprocessor elnevezésbõl ered. A PHP forrásprogram elkészített forráskódját elõször interpreter segítségével értelmezzük és a programfutás alatt lefordítjuk a számítógép gépi kódjára. </blockquote> </div> </body> </html> A 7. feladat kódrészlete 8. Feladat Készítse el az ábra szerinti XHTML dokumentumot. Használja a következő jelölőelemeket: acronym, tt, code, kbd, samp, var, ins, del. Tetszőlegesen alkalmazza a title attribútumot (8. ábra) 8. ábra Megoldás: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Példa 08</title> </head> <body> <acronym title="Hypertext Preprocessor">PHP</acronym> program. <br /><br /> <tt> echo ("Hello World"); </tt> <br /><br /> <code> 8 INTERNET TECHNOLÓGIÁK - példatár $sql="update adatok set varos=Szabadka where nev=Istvan"; </code> <br /><br /> <kbd> $result = mysql query($sql) or die("Error!"); </kbd> <br /><br /> <samp> define("pi",3.14); </samp> <br /><br /> <var>$pi=3.14</var> <br /><br /> <ins>by John</ins> <br /> <del>www.tfqcom</del> </body> </html> A 8. feladat kódrészlete 9. Feladat
Készítsen XHTML dokumentumot, amelyben a következő hiperhivatkozások szerepelnek: - második oldalra (masodik.html) - http://www.vtssuacyu Webcímére (9 ábra) 9. ábra Megoldás: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Példa 09</title> </head> <body> <h2>Híperhivatkozások</h2> <br /> <a href="masodik.html">Híperhivatkozás a második oldalra</a> <br /> <br /> <a href="http://www.vtssuacyu">wwwvtssuacyu</a> 9 INTERNET TECHNOLÓGIÁK - példatár </body> </html> A 9. feladat kódrészlete 10. Feladat Készítsen XHTML dokumentumot, amelyben a következő hiperhivatkozások
szerepelnek - az oldalon található horgonyok - a portfolío horgony http://www.vtssuacyu Webcímen található (10 ábra) 10. ábra Megoldás: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Példa 10</title> </head> <body> <a href="#ek">- e-kereskedelem</a> <br /> <a href="#ik">- internetes kereskedelem</a> <br /> <a href="http://www.vtssuacyu#portfolio">- portfolio</a> <br /><br /> 10 INTERNET TECHNOLÓGIÁK - példatár <a name="ek"> <big>E-kereskedelem</big> <br /><br /> Az e-kereskedelem lebonyolítása különbözo eszközök
felhasználásával történhet. A forgalom jelentos része Interneten keresztül bonyolódik le, illetve, mobiltelefonnal kombinálva lehetséges a tranzakciók jóváhagyása (SMS). A jövoben a mobiltelefonok e-kereskedelemben betöltött szerepe is egyre jelentosebb szerepet fog játszani. </a> <br /><br /> <br /><br /> <a name="ik"> <big>Internetes kereskedelem</big> <br /><br /> Az Internetes kereskedelemnek két formáját különböztetjük meg. -Business-to-business (B2B) Vállalatok közötti kereskedelem -Business-to-costumer (B2C) Kereskedo és vásárló közötti kereskedelem </a> </body> </html> A 10. feladat kódrészlete 11. Feladat Készítsen XHTML dokumentumot, amely eredeti méretében megjelenít egy képet balra igazítva (11. ábra) 11. ábra Megoldás: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Példa 11</title> </head> <body> <img src="it.gif" border="1" width="170" height="170" id="kep" alt="world" align="left" /> </body> </html> 11 INTERNET TECHNOLÓGIÁK - példatár Az 11. feladat kódrészlete 12. Feladat Készítsen XHTML dokumentumot, amely megjelenít egy sorszámozatlan listát (12. ábra) 12. ábra Megoldás: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head>
<title>Példa 12</title> </head> <body> <p style="color:blue;font-size:20px;font-family:Verdana;">Internet technológiák </p> <ul> <li>xhtml</li> <li>css</li> <li>xml</li> <li>php</li> <li>java</li> </ul> </body> </html> A 12. feladat kódrészlete 12 INTERNET TECHNOLÓGIÁK - példatár 13. Feladat Készítsen XHTML dokumentumot, amelyben megjelenít egy sorszámozott listát (13. ábra). 13. ábra Megoldás: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head><title>Példa 13</title></head> <body> Internet technológiák <ol>
<li>xhtml</li> <li>css</li> <li>xml</li> <li>php</li> <li>java</li> </ol> </body> </html> A 13. feladat kódrészlete 14. Feladat Készítsen XHTML dokumentumot, amely ábrán látható listaszerkezetet készít (14. ábra) 13 INTERNET TECHNOLÓGIÁK - példatár 14. ábra Megoldás: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Példa 14</title> </head> <body> Internet technológiák <ol> <li>xhtml</li> <li>css</li> <ol start="5"> <li>php</li> <li>java</li> </ol> <li>xml</li> </ol> </body>
</html> A 14. feladat kódrészlete 15. Feladat Készítsen XHTML dokumentumot, amely az ábra szerinti leíró listát készít. Használja a következő jelölőelemeket: dl, dt, dd (15. ábra) 14 INTERNET TECHNOLÓGIÁK - példatár 15. ábra Megoldás: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Példa 15</title> </head> <body> <strong>INTERNET TECHNOLÓGIÁK</strong> <dl> <dt><b>XHTML</b></dt> <dd><i>Az XHTML (Extensible HyperText Markup Language) egy strukturaban gazdag jelolonyelv, amely a megjelenitest a stiluslapokra bizza, modularis alapokra epul es egyuttmukodik az XML (Extensible Markup Language)
alapu felhasznaloi alkalmazasokkal.</i></dd> <dt><b>PHP</b></dt> <dd><i>A PHP rövidítés a Hypertext Preprocessor elnevezésbõl ered.</i></dd> </dl> </body> </html> A 15. feladat kódrészlete 16. Feladat Hozzon létre egy XHTML dokumentumot, amely az ábrán látható táblázatot jeleníti meg (16. ábra) 15 INTERNET TECHNOLÓGIÁK - példatár 16. ábra Megoldás: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Példa 16</title> </head> <body> <table border="1" align="center"> <caption>táblázat</caption> <tr> <td>VTS</td>
<td>MFI</td> </tr> </table> </body> </html> A 16. feladat kódrészlete 17. Feladat Készítsen XHTML dokumentumot, amely az ábrán látható táblázatot jeleníti meg (17. ábra). 17. ábra 16 INTERNET TECHNOLÓGIÁK - példatár Megoldás: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Példa 17</title> </head> <body> <table border="1" align="center"> <caption>táblázat</caption> <tr> <td>VTS</td> <td>MFI</td> <td>MFI</td> </tr> <tr> <td>VTS</td> <td>MFI</td> <td>MFI</td> </tr> </table>
</body> </html> A 17. feladat kódrészlete 18. Feladat Készítsen XHTML dokumentumot, amely az ábrán látható táblázatot jeleníti meg (18. ábra). 18. ábra 17 INTERNET TECHNOLÓGIÁK - példatár Megoldás: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Példa 18</title> </head> <body> <table border="1" align="center"> <caption><b>Diákok</b></caption> <thead> <tr> <th>Név</th> <th>Vezetéknév</th> <th>Szak</th> </tr> </thead> <tfoot> <tr> <th>Név</th> <th>Vezetéknév</th> <th>Szak</th>
</tr> </tfoot> <tbody> <tr> <td>Péter</td> <td>Nagy</td> <td>Villamosság</td> </tr> <tr> <td>István</td> <td>Kiss</td> <td>Gépész</td> </tr> <tr> <td>Aurel</td> <td>Hunyadi</td> <td>Informatika</td> </tr> </tbody> </table> </body> </html> A 18. feladat kódrészlete 19. Feladat Készítsen XHTML dokumentumot, amely az ábrán látható táblázatot jeleníti meg (19. ábra). 18 INTERNET TECHNOLÓGIÁK - példatár 19. ábra Megoldás: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Példa 19</title>
</head> <body> <table border="1" align="center"> <caption><b>XHTML táblázat</b></caption> <thead> <tr> <th>Információ</th> <th>Kép</th> </tr> </thead> <tbody> <tr> <td>Péter</td> <td rowspan="2"><img src="panic.jpg" border="0" id="kep" width="175" height="240" alt="PANIC!" /></td> </tr> <tr> <td>Program</td> </tr> </tbody> 19 INTERNET TECHNOLÓGIÁK - példatár </table> </body> </html> A 19. feladat kódrészlete 20. Feladat Hozzon létre olyan XHTML dokumentumot, amely az ábrán látható táblázatot jeleníti meg (20. ábra) 20. ábra Megoldás: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Példa 20</title> </head> <body> <table border="1" align="center"> <caption><b>Kreditpontok</b></caption> <thead> <tr> <td>ZHTML</td> <td>CSS</td> <td>PHP</td> </tr> </thead> <tbody> <tr> <td colspan="3">max 30 pont</td> </tr> </tbody> </table> </body> </html> A 20. feladat kódrészlete 20 INTERNET TECHNOLÓGIÁK - példatár 21. Feladat Hozzon létre olyan XHTML dokumentumot, amely az ábrán látható táblázatot jeleníti meg (21. ábra) 21. ábra Megoldás: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Példa 21</title> </head> <body> <table border="1" align="center" cellpadding="2" cellspacing="0"> <caption><b>Pályázat</b></caption> <thead> <tr> <th>Cég</th> <th>Munka</th> <th colspan="2" align="left">Határidõ</th> </tr> </thead> <tfoot> <tr> <td colspan="4" align="center"> <strong>www.itjobshu</strong></td> </tr> </tfoot> <tbody> <colgroup align="center" span="2" valign="middle" /> <tr> <td><i>Westnet</i> </td> <td>Web developer</td> 21
INTERNET TECHNOLÓGIÁK - példatár <td>2004.1111</td> <td rowspan="4"> <img src="left.gif" alt="kep" id="kep" /> </td> </tr> <tr> <td><i>ProWebing</i></td> <td>Web programmer</td> <td>2004.1210</td> </tr> <tr> <td><i>NetPro</i></td> <td>System Administrator</td> <td>2004.1229</td> </tr> <tr> <td><i>Web Max</i></td> <td>System Administrator</td> <td>2004.1230</td> </tr> </tbody> </table> </body> </html> A 21. feladat kódrészlete 22. Feladat Készítsen XHTML dokumentumot, amely (22. ábra) az ábrán látható keretekkel osztja fel a lapot 22. ábra Megoldás: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3org/TR/xhtml1/DTD/xhtml1-framesetdtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> 22 INTERNET TECHNOLÓGIÁK - példatár <head> <title>Példa 22</title> </head> <frameset rows="25%,75%"> <frame src="keret1.html" /> <frame src="keret2.html" /> </frameset> </html> A 22. feladat kódrészlete 23. Feladat Készítsen XHTML dokumentumot, amely az ábrán látható keretekkel osztja fel a lapot (23. ábra) 23. ábra Megoldás: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-framesetdtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Példa 23</title> </head> <frameset
cols="25%,*,50%"> <frame src="keret1.html" /> <frame src="keret2.html" /> <frame src="keret3.html" /> </frameset> </html> A 23. feladat kódrészlete 24. Feladat Hozzon létre XHTML dokumentumot, amely az ábrán látható keretekkel osztja fel a lapot (24. ábra) A kódrészlet tartalmazza az össz lehetséges attribútumokat 23 INTERNET TECHNOLÓGIÁK - példatár 24. ábra Megoldás: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-framesetdtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Példa 24</title> </head> <frameset rows="25%,*"> <noframes> <body> <!-- no frames for your browser --> </body> </noframes> <frame
id="keret1" name="keret1" scrolling="auto" frameborder="1" <frameset cols="25%,*"> <frame id="keret2" name="keret2" frameborder="1" /> <frame id="keret3" name="keret3" frameborder="1" /> </frameset> </frameset> </html> src="keret1.html" noresize="noresize" /> src="keret2.html" scrolling="no" src="keret3.html" scrolling="no" A 24. feladat kódrészlete 25. Feladat Szerkesszen XHTML dokumentumot, amely az ábrán látható keretekkel osztja fel a lapot (25. ábra) A kódrészlet tartalmazza az össz lehetséges attribútumokat 24 INTERNET TECHNOLÓGIÁK - példatár 25. ábra Megoldás: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3org/TR/xhtml1/DTD/xhtml1-framesetdtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Példa 25</title> </head> <frameset cols="25%,*"> <noframes> <body> <!-- no frames for your browser --> </body> </noframes> <frame id="keret1" name="keret1" scrolling="auto" frameborder="1" <frameset rows="25%,*"> <frame id="keret2" name="keret2" frameborder="1" /> <frame id="keret3" name="keret3" frameborder="1" /> </frameset> </frameset> </html> src="keret1.html" noresize="noresize" /> src="keret2.html" scrolling="no" src="keret3.html" scrolling="no" A 25. feladat kódrészlete 26. Feladat Készítsen XHTML dokumentumot,
amely Weboldalon belüli keretet hoz létre (26. ábra) 25 INTERNET TECHNOLÓGIÁK - példatár 26. ábra Megoldás: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-framesetdtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Példa 26</title> </head> <body> <p><h1>Internet</h1></p> <iframe id="keret" name="keret" src="12.html" width="200" height="100" scrolling="auto" frameborder="1"></iframe> </body> </html> A 26. feladat kódrészlete 27. Feladat Szerkesszen XHTML dokumentumot, amely megjelenít egy Java-applet-et (27. ábra) 27. ábra 26 INTERNET TECHNOLÓGIÁK - példatár Megoldás: <?xml version="1.0"
encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Példa 27</title> </head> <body> <object codetype="application/java" classid="java:ap1.class" width="300" height="100"></object></body> </html> A 27. feladat kódrészlete 28. Feladat Készítsen egy bejelentkezési űrlapot szerkesztő XHTML dokumentumot. A mégsem gomb szerepe az legyen, hogy törölje az addig beírtakat és visszaállítsa az alapértelmezett adatokat. Az küld gomb a beírt adatokat küldje el az editphp szkriptnek, amely feldolgozza az űrlapon megadott adatot (28. ábra) 28. ábra Megoldás: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Példa 28</title> </head> <body> <form id="urlap" name="urlap" method="post" action="edit.php"> felhasználó név:<input type="text" id="fnev" name="fnev" maxlength="10" size="10"/> <br /> 27 INTERNET TECHNOLÓGIÁK - példatár jelszó:<input type="password" id="fjelszo" name="fjelszo" maxlength="8" size="8" /> <br /> <input type="submit" id="gomb" name="gomb" value="kûld" /> <input type="reset" id="gombr" name="gombr" value="mégsem" /> </form>
</body> </html> A 28. feladat kódrészlete 29. Feladat Készítsen egy kérdőívet szerkesztő XHTML dokumentumot. A kép a beírt adatokat küldje el az edit.php szkriptnek, amely feldolgozza az űrlapon megadott adatot (29 ábra) 29. ábra Megoldás: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Példa 29</title> </head> <body> <form id="urlap" name="urlap" method="post" action="edit.php"> Melyik Web programozási nyelvet használja? <br /> <br /> <input type="radio" id="pnyelv" name="pnyelv" checked="checked" value="php" />PHP <br /> <input
type="radio" id="pnyelv" name="pnyelv" value="asp" />ASP <br /> 28 INTERNET TECHNOLÓGIÁK - példatár <input type="radio" id="pnyelv" name="pnyelv" value="java" />JAVA <br /> <input type="radio" id="pnyelv" name="pnyelv" value="perl" />PERL <br /> <br /> <input type="image" id="gomb" name="gomb" src="link.gif" width="30" height="20" border="1" alt="kûld"/> </form> </body> </html> A 29. feladat kódrészlete 30. Feladat Készítsen egy kérdőívet szerkesztő XHTML dokumentumot. A mégsem gomb szerepe az legyen, hogy visszaállítsa az alapértelmezett adatokat. Az küld gombnak pedig az, hogy a beírt adatokat elküldje az edit2.php szkriptnek, amely feldolgozza az űrlapon megadott adatot (30. ábra) 30. ábra
Megoldás: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Példa 30</title> </head> <body> <form id="urlap" name="urlap" method="post" action="edit2.php"> Melyik a kedvenc Web keresõje? <br /> <br /> <input type="checkbox" id="webk" name="webk" value="google" checked="checked" />www.googlecom 29 INTERNET TECHNOLÓGIÁK - példatár <br /> <input type="checkbox" id="webk" name="webk" value="yahoo" />www.yahoocom <br /> <input type="checkbox" id="webk" name="webk"
value="lycos" />www.lycoscom <br /> <input type="checkbox" id="webk" name="webk" value="vizsla" />www.vizslahu <br /> <br /> <input type="submit" id="gomb" name="gomb" value="kûld" /> <input type="reset" id="gombr" name="gombr" value="mégsem" /> </form></body></html> A 30. feladat kódrészlete 31. Feladat Készítsen egy képküldésre képes űrlapot szerkesztő XHTML dokumentumot. A mégsem gomb szerepe az legyen, hogy visszaállítsa az alapértelmezett adatokat. Az küld gombnak pedig az, hogy a beírt adatokat elküldje a kep.php szkriptnek, amely feldolgozza az űrlapon megadott adatot (31. ábra) 31. ábra Megoldás: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Példa 31</title> </head> <body> <form id="urlap" method="post" action="kep.php" enctype="multipart/formdata"> Kûld el a képedet! <br /> <br /> kép:<input type="file" id="kep" /> 30 INTERNET TECHNOLÓGIÁK - példatár <br /> <br /> <input type="submit" id="gomb" value="kûld" /> <input type="reset" id="gombr" value="mégsem" /> </form> </body> </html> A 31. feladat kódrészlete 32. Feladat Készítsen XHTML dokumentumot, amely legördülő menüt tartalmazó kérdőívet szerkeszt. A mégsem gomb szerepének az kell lennie, hogy az visszaállítsa az alapértelmezett adatokat. Az
küld gombnak pedig, hogy a beírt adatokat elküldje a filmphp szkriptnek, amely feldolgozza az űrlapon megadott adatot (32. ábra) 32. ábra Megoldás: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Példa 32</title> </head> <body> <form id="urlap" name="urlap" method="post" action="film.php" > Melyik filmet láttad? Tõbbet is megjelõlhetsz! <br /> <br /> <select id="film" name="film" multiple="multiple" size="3"> <optgroup label="sci-fi" > <option value="matrix">Matrix</option> <option
value="terminator">Terminator</option> 31 INTERNET TECHNOLÓGIÁK - példatár <option value="starwars">StarWars</option> </optgroup> <optgroup label="haborus"> <option value="d-day">D-Day</option> <option value="dirty dozen">Dirty Dozen</option> <option value="black hawk down">Black Hawk Down</option> </optgroup> </select> <br /> <br /> <input type="submit" id="gomb" name="gomb" value="kûld" /> <input type="reset" id="gombr" id="gombr" value="mégsem" /> </form> </body> </html> A 32. feladat kódrészlete 33. Feladat Készítsen egy kérdőívet szerkesztő XHTML dokumentumot. A mégsem gomb tegye lehetővé az alapértelmezett adatok visszaállítását, küld gomb pedig a beírt adatok elküldését az iro.php
szkriptnek, amely feldolgozza az űrlapon megadott adatot (33 ábra). 33. ábra Megoldás: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> 32 INTERNET TECHNOLÓGIÁK - példatár <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Példa 33</title> </head> <body> <form id="urlap" name="urlap" method="post" action="iro.php"> Írj véleményt a www.yahoocom oldalról!<br /><br /> <fieldset> <legend>www.yahoocom</legend> <textarea id="megjegyzes" name="megjegyzes" rows="10" cols="40" ></textarea> <br /><br /> <input type="submit" id="gomb" name="gomb"
value="kûld" /> <input type="reset" id="gombr" name="gombr" value="mégsem" /> <br /><br /> </fieldset> </form> </body> </html> A 33. feladat kódrészlete 34. Feladat Készítsen egy regisztrációs űrlapot szerkesztő XHTML dokumentumot megfelelő alapértelmezett beállításokkal. Az űrlapon a képen látható objektumok szerepeljenek A mégsem gomb törölje az addig beírtakat, és állítsa vissza az alapértelmezett adatokat. A küld gomb a beírt adatokat küldje a regisztracio.php szkriptnek, amely feldolgozza az űrlapon megadott adatot (34. ábra) 34. ábra 33 INTERNET TECHNOLÓGIÁK - példatár Megoldás: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml"
xml:lang="hu" lang="hu"> <head> <title>Példa 34</title> </head> <body> <form id="urlap" name="urlap" method="post" action="regisztracio.php" enctype="multipart/form-data"> Regisztráld magad, írd be az összes adatod!<br /> <br /> <fieldset> <legend><strong>Személyi adatok</strong></legend> <label>vezetéknév:</label> <input type="text" id="vnev" name="vnev" /> <br /> <label>név:</label> <input type="text" id="nev" name="nev" /> <br /> <label>e-mail:</label> <input type="text" id="email" name="email" /> <br /> <label>jelszó:</label> <input type="password" id="jelszo" name="jelszo" /> <br />
<label>kép:</label><input type="file" id="kep" name="kep" /> <br /> <br /> <label>operációs rendszer:</label> <input type="checkbox" id="or" name="or" value="windows" />windows <input type="checkbox" id="or" name="or" value="linux" />linux <br /> <br /> <label>megjegyzések</label> <br /> <textarea id="megjegyzes" name="megjegyzes" rows="3" cols="20" ></textarea> <br /> <br /> <input type="submit" id="gomb" name="gomb" value="kûld" /> <input type="reset" id="gombr" name="gombr" value="mégsem" /> <br /> <br /> </fieldset> </form> </body> </html> A 34. feladat kódrészlete 34 INTERNET
TECHNOLÓGIÁK - példatár 35 INTERNET TECHNOLÓGIÁK - példatár 35. Feladat Készítsen olyan XHTML dokumentumot, amely a csatolt JavaScript program segítségével kiírja a Hello World szöveget és egy üdvözlő üzenetet is megjelenít a bevitt név részére. (35. ábra) 35. ábra Megoldás: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Példa 35</title> <noscript> Az ön böngészõje nem támogatja a JavaScriptet! </noscript> <script type="text/javascript" src="script.js"> <!-//--> </script> </head> <body> <br /> <br /> Hello from XHTML!<br /><br /> <form name="udvozlet"
id="udvozlet" onsubmit="szia();" > <input type="text" name="nev" id="nev" /> <input type="submit" value="Személyes üdvözlet" /> </form> 36 INTERNET TECHNOLÓGIÁK - példatár </body> </html> A 35. feladat kódrészlete document.write("<strong><i>Hello from JavaScript!</i></strong>"); function szia() { var t=document.formsudvozletnevvalue; alert("Szia "+t); } A script.js szövegállománya 36. Feladat Készítsen egy olyan XHTML dokumentumot, amely a JavaScript segítségével kiírja a Hello to my homepage szöveget, amikor a böngésző beolvassa a Web oldalt. Az dokumentum egy űrlapot foglaljon magába. Az űrlap tartalmazzon egy szövegmezőt (szak), küld és mégsem gombokat. A küld gomb megnyomásával JavaScript írja ki a szak nevét a bevitt szöveg részére. (36 ábra) 36. ábra Megoldás: <?xml
version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> 37 INTERNET TECHNOLÓGIÁK - példatár <head> <title>Példa 36</title> <noscript> Az ön böngészõje nem támogatja a JavaScriptet! </noscript> <script type="text/javascript"> <!-function udvozlet() { var uzenet="The best place for you!"; window.alert("Hello to my homepage"); window.status=uzenet; } //--> </script> </head> <body onload="udvozlet();"> Java Script: <i>onload</i> <form name="form1" onreset="alert(Legjob választas)" onsubmit="alert(document.formsform1szakvalue)"> <p>Melyik szakon vagy?<br /> <input
type="text" name="szak" value="Informatika" size="25" onchange="alert(megváltoztatd az érteket)" /></p> <p> <input type="submit" value="küld" name="submit1" /> <input type="reset" value="mégse" name="reset1" /> </p></form> </body> </html> A 36. feladat kódrészlete 37. Feladat Készítsen XHTML dokumentumot, amely az onmouseover, onmouseout, onmouseup és onmousedown JavaScript eseményszkriptek segítségével manipulál a képpel (37. ábra) 37. ábra 38 INTERNET TECHNOLÓGIÁK - példatár Megoldás: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu">
<head> <title>Példa 37</title> <noscript> Az ön böngészõje nem támogatja a JavaScriptet! </noscript> <script type="text/javascript" > <!-var d=new Date(); var ido=d.getHours(); if (ido<10) document.bgColor="#ffffff"; else document.bgColor="#ff0000"; function valt kepet() { document.kepsrc="link2gif"; document.kepalt="kep 2"; window.status="Ez itt az masodik kep"; } function visza kepet() { document.kepsrc="link1gif"; document.kepalt="kep 1"; window.status="Ez itt az elso kep"; } function norm() { document.kepsrc="link3gif"; document.kepalt="kep 3"; window.status="Ez itt az 3 kep"; } //--> //--> </script> </head> <body> Java Script: <i> onmouseover, onmouseout, onmouseup & onmousedown</i> <br /><br /> <img src="link1.gif" name="kep"
alt="kep 1" onmouseover="valt kepet()" onmouseout="visza kepet()" onmouseup="valt kepet()" onmousedown="norm()"/> </body> </html> A 37. feladat kódrészlete 39 INTERNET TECHNOLÓGIÁK - példatár 38. Feladat Készítsen XHTML dokumentumot, amely az onclick, ondblclick, onkeypress és onkeydown JavaScript eseményszkripteket. Az oldal tartalmazzon egy gombot, amely segítségével kinyomtathatjuk az oldalt (38. ábra) 38. ábra Megoldás: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Példa 38</title> <noscript> Az ön böngészõje nem támogatja a JavaScriptet! </noscript> <script
type="text/javascript" > <!-function printpage() { window.print() } s1 = new String(myform.myTextvalue) function changeBg1() { 40 INTERNET TECHNOLÓGIÁK - példatár var r=Math.random()*5; szin=Math.round(r); document.bgColor="#ff"+szin+"f"+szin+"f"; } function changeBg2() { document.bgColor="#0000ff"; } //--> </script> </head> <body> Java Script: <i> onclick, ondblclick, onkeypress & onkeydown</i> <br /><br /> <img src="click.gif" id="kep" ondblclick="height=height+10" /> <br /><br /> <input type="button" value="Nyomtast ki az oldalt" onclick="printpage()" /> <form action="38.html" method="post" id="myform" name="myform"> <label>megjegyzés</label><input type="text" name="szoveg"
onkeypress="changeBg1()" onkeydown="changeBg2()" /> </form> </body> </html> A 38. feladat kódrészlete 39. Feladat Készítsen XHTML dokumentumot, amely eseményszkripteket használ (39. ábra) onfocus, onblur és onselect JavaScript 39. ábra 41 INTERNET TECHNOLÓGIÁK - példatár Megoldás: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Példa 39</title> <noscript> Az ön böngészõje nem támogatja a JavaScriptet! </noscript> <script type="text/javascript" language="JavaScript"> s1 = new String(myform.myTextvalue) function valtfocust() { s1 = "Focusban vagyok!" document.myformmyTextvalue =
s1toUpperCase() } function kifocus() { alert("Elhagyta az elozoleg fokuszalt elemet"); } </script> </head> <body> Java Script: <i> onfocus, onblur & onselect</i> <br /><br /> <form name="myform" id="myform"> <label>focus 1:</label><input type="text" name="myText" value="Adj focust!" onfocus = "valtfocust()" onblur="kifocus()" /> <br /><br /> <label>focus 2:</label><input type="text" /> <br /> <label>selected text</label> <input type="text" name="or" value="windows" onselect="alert(választatál szöveget);"/> <br /> </form> </body> </html> A 39. feladat kódrészlete 42 INTERNET TECHNOLÓGIÁK - példatár 43 INTERNET TECHNOLÓGIÁK - példatár 40. Feladat Készítsen olyan XHTML dokumentumot,
amely kiírja az ábrán lévő szöveget. A szöveg formázására használja a beépített stíluslapot (40. ábra) 40. ábra Megoldás: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Példa 40</title> <style type="text/css"> h1,h2{ font-family:Verdana; color:#0000ff; font-size:16px; } h3{ font-family:Arial; color:red; font-size:20px; } </style> </head> <body> <h1>Welcome to the Internet technologies</h1> <h2>Polytechnical Engineering College, Subotica</h2> <h3>www.vtssuacyu</h3> </body> </html> A 40. feladat kódrészlete 44 INTERNET TECHNOLÓGIÁK - példatár 41. Feladat Készítsen XHTML
dokumentumot, amely kiírja az ábrán látható szöveget (41.1 ábra). Állítsa be a scrollbar színeit (412 ábra) A szöveg formázására alkalmazzon csatolt stíluslapot. 41.1 ábra 41.2 ábra A scrollbar részei 45 INTERNET TECHNOLÓGIÁK - példatár Megoldás: body { scrollbar-face-color: #F9F6CC; scrollbar-highlight-color: #F9F6CC; scrollbar-shadow-color: #000000; scrollbar-3dlight-color: #000000; scrollbar-arrow-color: #000000; scrollbar-track-color: #F9F6CC; scrollbar-darkshadow-color: #F9F6CC; background-color:#F9F6CC; } h1,h2{ font-family:Verdana; color:#0000ff; font-size:16px; } h3{ font-family:Arial; color:#ff0000; font-size:20px; } A style41.css szövegállománya <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu"
lang="hu"> <head> <title>Példa 41</title> <link type="text/css" rel="stylesheet" href="style41.css" /> </head> <body> <h1>Welcome to the Internet technologies</h1> <h2>Polytechnical Engineering College, Subotica</h2> <h3>www.vtssuacyu</h3> </body> </html> A 41. feladat kódrészlete 42. Feladat Készítsen XHTML dokumentumot, amely kiírja az ábrán látható szöveget. A szöveg formázására használja a jelölőelembe rendelt stíluslapot(42. ábra) 46 INTERNET TECHNOLÓGIÁK - példatár 42. ábra Megoldás: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Példa
42</title> </head> <body style="background-color:#F9F6CC;"> <h1 style="font-family:Tahoma;color:#0000ff;font-size:20px;">Internet technologiak</h1> <h2 style="font-family:Verdana;color:#000000;fontsize:18px;">www.vtssuacyu</h2> </body> </html> A 42. feladat kódrészlete 43. Feladat Készítse el a mellékelt Weblapot az XHTML és a CSS technológiák alkalmazásával. A Weblap tartalmazzon csatolt stíluslapot, 2 stílusosztályt, egy sorszámozatlan listát és egy képet (43. ábra) 47 INTERNET TECHNOLÓGIÁK - példatár 43. ábra Megoldás: body { background-color:#818181; } .masodik{ font-family:Arial; } .harmadik{ font-family:Verdana; font-size:12px; color:#ffffff; } ol{ list-style-type:upper-roman; font-family:Verdana; color:#e5e5e5; font-size:12px; } A style43.css szövegállománya <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Példa 43</title> <link type="text/css" rel="stylesheet" href="style43.css" /> 48 INTERNET TECHNOLÓGIÁK - példatár </head> <body> <img src="logopw.gif" alt="Prowebing" width="720" height="139" /><br /> <span class="harmadik">Professional <span class="masodik">web engineering</span> </span><br /> <ol> <li>dynamic web applications</li> <li>e-commerce solutions</li> <li>web design</li> <li>graphical design</li> </ol> </body> </html> A 43. feladat kódrészlete 44. Feladat Készítse el a mellékelt Weblapot az XHTML és a CSS
technológiák alkalmazásával. A Weblap tartalmazzon csatolt stíluslapot és 4 stílusdefiníciót (44. ábra) 44. ábra Megoldás: body{ background-color:#44ddff; } h2 { font-family:Verdana; font-size:x-large; font-style:normal; font-weight:bold; color:#0000ff; } p{ font-family:Tahoma; 49 INTERNET TECHNOLÓGIÁK - példatár font-size:10pt; font-style:oblique; font-weight:leighter; color:#000000; } b{ font-family:Courier,Arial; font-size:10pt; font-style:italic; color:green; } A style44.css szövegállománya <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Példa 44</title> <link type="text/css" rel="stylesheet" href="style44.css" /> </head>
<body> <h2>E-ügyvitel várható fejlodése</h2><p> Az elemzok szerint a világ összes e-ügyvitel forgalma növekszik, annak ellenére, hogy 2000-ben USA-ban tokefeltöltés hiánya miatt több Internetes kereskedo cég tönkrement.</p> <b>E-ügyvitel várható fejlodése</b> </body> </html> A 44. feladat kódrészlete 45. Feladat Készítse el a mellékelt Weblapot az XHTML és a CSS technológiák alkalmazásával. A Weblap tartalmazzon csatolt stíluslapot és 3 stílusdefiníciót (45. ábra) 45. ábra 50 INTERNET TECHNOLÓGIÁK - példatár Megoldás: body { background-color:#ffff00; } h1 { font-family:Verdana; font-size:x-large; font-variant:small-caps; letter-spacing:4; color:#ff0000; } p { font-family:Arial; font-size:10pt; line-height:2; color:#000000; } A style45.css szövegállománya <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Példa 45</title> <link type="text/css" rel="stylesheet" href="style45.css" /> </head> <body> <h1>AZ e-ügyviteli RENDSZer</h1> <p> Az elektronikus ügyviteli rendszer 3 fő részből áll. <br /> - Elektronikus áruház <br /> - Elektronikus bank <br /> - Elektronikus pénztárca, (hitelkártya) egyéb fizetési formák. </p> </body> </html> A 45. feladat kódrészlete 46. Feladat Készítse el a mellékelt Weblapot az XHTML és a CSS technológiák alkalmazásával. A Weblap tartalmazzon csatolt stíluslapot és 4 stílusdefiníciót (46. ábra) 51 INTERNET TECHNOLÓGIÁK - példatár 46. ábra Megoldás: body { background-color:#FDC689; } h1 {
font-family:Verdana; font-size:x-large; text-decoration:overline; text-align:left; text-indent:10; color:#ff0000; } h4 { text-align:right; text-decoration:underline; } p { font-family:Arial; font-size:10pt; text-align:justify; color:#000000; } A style46.css szövegállománya <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> 52 INTERNET TECHNOLÓGIÁK - példatár <title>Példa 46</title> <link type="text/css" rel="stylesheet" href="style46.css" /> </head> <body> <h1>PHP</h1> <p> Lehetővé teszi, hogy a lap szerzője a szkript kódok normál weboldalakba való beillesztésével hozza létre a dinamikus tartalmat. A php számos
előre definiált függvényt tartalmaz, amelyek segítségével adatbázisok és levelezökiszolgálók kezelhetők, PDF dokumentumok és képek hozhatók létre stb. A php lapot az elérésekor a kiszolgáló minden estben értelmezi, a szkriptek végrehajtásának eredményét összeilleszti a lap statikus tartalmával és kombinált végeredményt küldi vissza a böngészőnek. </p> <h4>Szabadka 2003</h4> </body> </html> A 46. feladat kódrészlete 47. Feladat Készítse el a mellékelt Weblapot az XHTML és a CSS technológiák alkalmazásával, amely kiírja az ábrán lévő szöveget. A Weblap tartalmazzon csatolt stíluslapot és 3 stílusdefiníciót (47. ábra) 47. ábra Megoldás: body { background-color:#f7a0a3; } 53 INTERNET TECHNOLÓGIÁK - példatár h1 { font-family:Verdana; font-size:x-large; text-decoration:underline; text-align:center; text-indent:10; text-transform:lowercase; color:red; background-color:rgb(255,255,0); } p {
font-family:Arial; font-size:10pt; text-align:justify; text-transform:uppercase; color:rgb(0,0,0); background-color:white; margin-left: 0.3cm; margin-right: 0.3cm; } 47.1 ábra A style47css szövegállománya <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Példa 47</title> <link type="text/css" rel="stylesheet" href="style47.css" /> </head> <body> <h1>PHP</h1> <p> Lehetövé teszi, hogy a lap szerzöje a szkript kódok normál weboldalakba való beillesztésével hozza létre a dinamikus tartalmat. A php számos elöre definiált függvényt tartalmaz, amelyek segítségével adatbázisok és levelezökiszolgálók kezelhetök,
PDF dokumentumok és képek hozhatók létre stb. A php lapot az elérésekor a kiszolgáló minden estben értelmezi, a szkriptek végrehajtásának eredményét összeilleszti a lap statikus tartalmával és kombinált végeredményt küldi vissza a böngészönek. </p> </body> </html> A 47. feladat kódrészlete 48. Feladat Készítse el a mellékelt Weblapot az XHTML és a CSS technológiák alkalmazásával. A Weblap tartalmazzon csatolt stíluslapot, 2 stílusdefiníciót és egy háttérképet amely a tartalommal együtt gördíthető (48. ábra) 54 INTERNET TECHNOLÓGIÁK - példatár 48. ábra Megoldás: body { background-color:#ffffff; background-image:url(itbg.gif); background-repeat:no-repeat; background-attachment:scroll; } pre { font-family:Arial; font-size:10pt; text-align:justify; color:rgb(0,0,0); background-color:transparent; margin-left: 2cm; margin-right: 2cm; } A style48.css szövegállománya <?xml version="1.0"
encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Példa 48</title> <link type="text/css" rel="stylesheet" href="style48.css" /> </head> 55 INTERNET TECHNOLÓGIÁK - példatár <body> <pre> # browser # [ejtsd: brauzö] {magyarul: böngészõ} Hálózati kliensprogram World-Wide Web (és egyéb) szolgáltatások megtekintéséhez; tulajdonképpen egy HTML nézegetõ (pl. Netscape, Internet Explorer). </pre> </body> </html> A 48. feladat kódrészlete 49. Feladat Készítse el a mellékelt Weblapot az XHTML és a CSS technológiák alkalmazásával. A Weblap tartalmazzon csatolt stíluslapot, 2 stílusdefiníciót és egy fixen beállított
háttérképet (49. ábra) 49. ábra Megoldás: body { background-color:#ffffff; 56 INTERNET TECHNOLÓGIÁK - példatár background-image:url(itbg2.gif); background-repeat:no-repeat; background-attachment:fixed; } pre { font-family:Tahoma; font-size:10pt; text-align:justify; color:rgb(0,0,0); background-color:transparent; margin-left: 2cm; margin-right: 2cm; } A style49.css szövegállománya <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Példa 49</title> <link type="text/css" rel="stylesheet" href="style49.css" /> </head> <body> <pre> # browser # [ejtsd: brauzö] {magyarul: böngészõ} Hálózati kliensprogram World-Wide Web (és
egyéb) szolgáltatások megtekintéséhez; tulajdonképpen egy HTML nézegetõ (pl. Netscape, Internet Explorer). # cache # [ejtsd: kes] {magyarul: gyorsítótár, átmeneti tároló(?)} A korábban letöltött vagy használt állományok, adatok átmeneti tárolására használt memória- vagy lemezterület. Amennyiben újra szükség van rájuk, a ~ területrõl gyorsabban elõhívhatók, mint az eredeti helyükrõl. Az Interneten a távoli szerverekrõl letöltött állományok helyi gépen/gépeken való ideiglenes tárolására használják a ~ technikát. </pre> </body> </html> A 49. feladat kódrészlete 57 INTERNET TECHNOLÓGIÁK - példatár 50. Feladat Készítse el a mellékelt Weblapot az XHTML és a CSS technológiák alkalmazásával. A Weblap tartalmazzon csatolt stíluslapot, 9 stílusdefiníciót, egy stílusosztályt, 3 hiperhívatkozást és 1 képet (50. ábra) 50. ábra Megoldás: body { background-color:#80a5d2; } img {
border-style:dashed; border-color:#ffffff; } table { border-style:dashed; border-color:#000000; border-width:2px; background-color:#e5e5e5; } p { text-align:center; } p.cim{ font-family:Tahoma; color:#000000; font-size:12px; 58 INTERNET TECHNOLÓGIÁK - példatár font-weight:bold; } ol { list-style-type:circle; } a:link { font-family:Tahoma; color:#818181; font-size:12px; font-weight:bold; } a:activ { font-family:Tahoma; color:#000000; background-color:#ffffff; font-size:12px; font-weight:bold; } a:hover { font-family:Tahoma; color:#000000; background-color:#ffffff; font-size:12px; font-weight:bold; } a:visited { font-family:Tahoma; color:#000000; background-color:#ffffff; font-size:12px; font-weight:bold; } A style50.css szövegállománya <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html
xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Példa 50</title> <link type="text/css" rel="stylesheet" href="style50.css" /> </head> <body> <p> <img src="link.gif" id="kep" alt="Internet" width="150" height="99" border="5" /> <br /><br /> <table cellpadding="5"> <tr> 59 INTERNET TECHNOLÓGIÁK - példatár <td> <p class="cim">Academic Network of Subotica</p> <ol> <li><a href="http://www.vtssuacyu" title="www.vtssuacyu">http://wwwvtssuacyu</a></li> <li><a href="http://www.gfsuacyu" title="www.gfsuacyu">http://wwwgfsuacyu</a></li> <li><a href="http://www.eccfsuacyu"
title="www.eccfsuacyu">http://wwweccfsuacyu</a></li> </ol> </td> </tr> </table> </p> </body> </html> Az 50. feladat kódrészlete 60 INTERNET TECHNOLÓGIÁK - példatár 61 INTERNET TECHNOLÓGIÁK - példatár 51. Feladat A CSEHTMLValidator segítségével készítse el a mellékelt Weblapot az XHTML és a CSS technológiák alkalmazásával (51. ábra) 51. ábra Feladatmegadás A Weblap tartalmazzon: - XHTML-1.0-Transitional DTD-t, - csatolt stíluslapot, - 2 stílusosztályt, - 8 stílusdefiníciót, - 4 hiperhívatkozást és - egy képet. Mutassa be a feladatok XHTML és CSS forráskódjait, valamint a Weblapot a böngészőben. Megoldás: body { background-color:#ffffff; background-image:url(bg.gif); background-repeat:repeat; 62 INTERNET TECHNOLÓGIÁK - példatár background-attachment:fixed; } table{ border-style:dashed; border-color:#000000; border-width:2px; background-color:#ffffff; } th{
font-family:Tahoma; font-size:14px; background-color:#000000; color:#ffffff; } tfoot{ background:#e5e5e5; color:#000000; } .elso { font-family:Verdana; font-size:12px; font-style:italic;} .masodik { font-family:Verdana; font-size:12px; } a:link { font-family:Tahoma; color:#000000; font-size:12px; font-weight:bold; } a:activ { font-family:Tahoma; color:#000000; background-color:#ffffff; font-size:12px; font-weight:bold; } a:hover { font-family:Tahoma; color:#ffffff; background-color:#000000; font-size:12px; font-weight:bold; } a:visited { font-family:Tahoma; 63 INTERNET TECHNOLÓGIÁK - példatár color:#000000; background-color:#ffffff; font-size:12px; font-weight:bold; } A style51.css stíluslap szövegállománya <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml"
xml:lang="hu" lang="hu"> <head> <title>Példa 51 - XHTML és CSS átfogó feladat</title> <link type="text/css" rel="stylesheet" href="style51.css" /> </head> <body> <table width="650" align="center"> <thead> <tr> <th colspan="2">Weblinkeket frissíto eszközt fejlesztettek ki brit diákok</th></tr> </thead> <tfoot> <tr> <td colspan="2" align="center"> | <a href="h.html">home</a> | <a href="dhtml">download</a> | <a href="j.html">játekok</a> | <a href="ahtml">aktuális</a> |</td></tr> </tfoot> <tbody> <tr> <td> <span class="elso">Az alkotói által Peridotnak elnevezett alkalmazás automatikusan átvizsgálja egy cég számítógépein lévo linkeket,
majd abban az esetben, ha az adott oldal elérhetosége megváltozott, frissíti oket.</span> <span class="masodik"> <br /><br /> Az eszközt brit egyetemisták fejlesztették ki az IBM-nél, és amint azt ok maguk elmondták róla a BBC-nek nyilatkozva, képes nemcsak az idoközben eltávolított weboldalakra mutató, hanem a kontextusnak nem megfelelo tartalmakhoz kalauzoló linkek kiszurésére és frissítésére is. A Peridot úgy muködik, hogy folyamatosan eltárolja a linkek által elérheto oldalak alapveto tulajdonságait, így azonnal képes érzékelni a jelentosebb tartalmi változásokat, sot azok mértékét is. Az eszköz a céges hálózatokat, illetve weboldalakat fenntartó társaságok számára egyformán fontos lehet. Elobbieknek azért, mert az a körülmény, hogy dolgozóik munka közben mindig hozzájussanak a szükséges információkhoz, ugyanakkor ne kelljen elévült adatokkal dolgozniuk, kiemelt fontossággal bír.
Másrészt az olyan vállalatok számára, amelyek ügyfeleik irányában nagy hangsúlyt fektetnek saját megbízhatóságukra, egy rossz, vagy hibás oldalra vezeto link komoly presztízsveszteséggel járhat. A Peridot abban tér el a már létezo hasonló alkalmazásoktól, hogy a hibás linket nemcsak azonosítja, hanem korrigálni is képes azt. </span> 64 INTERNET TECHNOLÓGIÁK - példatár </td> <td><img src="hir.gif" id="kep" alt="computer" width="233" height="350" /> </td></tr> </tbody> </table> </body> </html> Az 51. feladat kódrészlete 52. Feladat A CSEHTMLValidator segítségével készítse el a mellékelt Weblapot az XHTML és a CSS technológiák alkalmazásával (52. ábra) 52. ábra Feladatmegadás A Weblap tartalmazzon: - XHTML-1.0-Transitional DTD-t, - csatolt stíluslapot, - 4 stílusosztályt, - 11 stílusdefiníciót, 65 INTERNET
TECHNOLÓGIÁK - példatár - 4 hiperhívatkozást és 2 képet. Mutassa be a feladatok XHTML és CSS forráskódjait, valamint a Weblapot a böngészőben. Megoldás: body { background-color:#02ADE5; margin:0; } table{ border-style:solid; border-color:#000000; border-width:2px; border-right-color: #000000; border-right-width: 10px; background-color:#e5e5e5; border-collapse:collapse; } td { vertical-align:top; } td.head { background-image:url(logo.gif); background-repeat:no-repeat; background-attachment:fixed; color:#ffffff; height:200px; vertical-align:bottom; text-align:right; } td.down { background-image:url(down.gif); background-repeat:no-repeat; background-attachment:fixed; height:20px; } h2 { color:#000000; text-decoration:underline; text-align:center; } h3 { color:#818181; font-style:italic; font-family:Arial; } 66 INTERNET TECHNOLÓGIÁK - példatár ul { list-style-type:square; } hr { height:10px; color:#818181; } .elso { font-family:Tahoma; font-size:12px;
font-weight:bold; color:#ED1C24; } .masodik { font-family:Verdana; font-size:12px; } a:link { font-family:Tahoma; color:#ffffff; font-size:11px; font-weight:bold; } a:activ { font-family:Tahoma; color:#ffffff; background-color:#000000; font-size:11px; font-weight:bold; } a:hover { font-family:Tahoma; color:#ffffff; background-color:#000000; font-size:11px; font-weight:bold; } a:visited { font-family:Tahoma; color:#ffffff; background-color:#000000; font-size:11px; font-weight:bold; } A style52.css stíluslap szövegállománya <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 67 INTERNET TECHNOLÓGIÁK - példatár "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Példa 52 - XHTML és CSS átfogó feladat</title> <link
type="text/css" rel="stylesheet" href="style52.css" /> </head> <body> <table width="700" align="left" cellpadding="0" cellspacing="0"> <tbody> <tr> <td colspan="2" class="head"> <a href="index.php">home</a> | <a href="chartsphp">charts</a> | <a href="members.php">members</a> | <a href="contact.php">contact</a> </td> </tr> <tr> <td> <span class="elso"> <h2>Euro Dance charts</h2> <ul> <li>The Boogie Pimps - Somebody to love</li> <li>The Freestylers - Push up</li> <li>Armand Van Helden - My my my</li> <li>ATB - Ecstasy</li> <li>Danzel - Pump it up!</li> </ul> </span> </td> <td width="400"> <span
class="masodik"> <h3>News</h3> <hr /> Third chapter in Belgrade Coffee Shop series is a slightly different affair. Three years after Volume 1, the scene has matured and diversified, and a number of new names are put on the map, making their way to this album. Generally more dancefloor oriented than it’s predecessors, Belgrade Coffee Shop 3 widens a perspective on current Serbian electronic scene. <hr /> <br /> </span> </td> </tr> <tr> <td colspan="2" class="down"></td> </tr> </tbody> </table> </body> </html> Az 52. feladat kódrészlete 68 INTERNET TECHNOLÓGIÁK - példatár 53. Feladat A CSEHTMLValidator segítségével készítse el a mellékelt Weblapot az XHTML és a CSS technológiák alkalmazásával (53. ábra) 53. ábra Feladatmegadás A Weblap tartalmazzon: - XHTML-1.0-Transitional DTD-t, - csatolt stíluslapot, - 2 stílusosztályt, - 13
stílusdefiníciót, - 4 hiperhívatkozást (kép keresztül) és - 6 képet. Mutassa be a feladatok XHTML és CSS forráskódjait, valamint a Weblapot a böngészőben. Megoldás: body { background-color:#5674B9; background-image:url(bg2.gif); background-repeat:repeat-x; 69 INTERNET TECHNOLÓGIÁK - példatár background-attachment:fixed; margin:5; } table{ border-style:solid; border-color:#e5e5e5; border-width:1px; background-color:#311E1A; border-collapse:collapse; } td { vertical-align:top; } td.kep { vertical-align:middle; } h4 { color:#ffff00; font-family:Arial; } td.tartalom { font-family:Arial; font-size:11px; color:#ffffff; border-style:dashed; border-color:#e5e5e5; border-width:1px; background-color:#311E1A; } a:link { font-family:Tahoma; color:#ffffff; font-size:11px; font-weight:bold; } a:activ { font-family:Tahoma; color:#ffffff; background-color:#000000; font-size:11px; font-weight:bold; } a:hover { font-family:Tahoma; color:#ffffff; background-color:#000000;
font-size:11px; font-weight:bold; } 70 INTERNET TECHNOLÓGIÁK - példatár a:visited { font-family:Tahoma; color:#ffffff; background-color:#000000; font-size:11px; font-weight:bold; } A style53.css stíluslap szövegállománya <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Példa 53 - XHTML és CSS átfogó feladat</title> <link type="text/css" rel="stylesheet" href="style53.css" /> </head> <body> <table width="650" align="center" cellpadding="10" cellspacing="0"> <tbody> <tr><td class="kep"> <a href="http://www.gamescom/chefs" ><img
src="chefsgif" alt="Superstar Chefs" id="ck" width="97" height="73" /></a> </td> <td class="tartalom"><h4>Superstar Chefs</h4> On every level there is a golden key, in order to get it you must collect all the fruits on the screen. When the key comes falling down from the sky you can pick it up and it will take you to the next level. </td> <td width="190" rowspan="4"> <img src="games.gif" alt="Games review!" id="gk" width="180" height="382" /></td> </tr> <tr> <td class="kep"> <a href="http://www.gamescom/egypt" ><img src="egyptgif" alt="Bricks of Egypt" id="ek" width="97" height="73" /></a> </td> <td class="tartalom"> <h4>Bricks of Egypt</h4> Brick breaking action,
based on a strong egyptian theme. 3 difficulty settings makes this great game suit everyone! </td> </tr> <tr> <td class="kep"> <a href="http://www.gamescom/joe" ><img src="joegif" alt="Gold Miner Joe" id="jk" width="97" height="73" /></a> </td> <td class="tartalom"> <h4>Gold Miner Joe</h4> Get ready for a gold-collecting adventure! This scrolling platform game takes you through mysterious mines filled with treasures and bonus items. </td> 71 INTERNET TECHNOLÓGIÁK - példatár </tr> <tr><td class="kep"> <a href="http://www.gamescom/pirates" ><img src="piratesgif" alt="Pirates" id="pk" width="97" height="73" /></a> </td> <td class="tartalom"> <h4>Pirates</h4> A unique mix of an exciting pirate
adventure and a classic brickmatching game. Search the tropical jungles, castle dungeons and islands for treasures. </td></tr> </tbody> </table> </body> </html> Az 53. feladat kódrészlete 54. Feladat A CSEHTMLValidator segítségével készítse el a mellékelt Weblapot az XHTML és a CSS technológiák alkalmazásával. A mégsem gomb szerepe az legyen, hogy törölje az addig beírtakat, és visszaállítsa az alapértelmezett adatokat. Az küld gombnak pedig, hogy a beírt adatokat elküld a regisztracio.php szkriptnek, amely feldolgozza az űrlapon megadott adatot (54. ábra) 54. ábra 72 INTERNET TECHNOLÓGIÁK - példatár Feladatmegadás A Weblap tartalmazzon: - XHTML-1.0-Transitional DTD-t, - csatolt stíluslapot, - 6 stílusdefiníciót, - 2 stílusosztályt és - egy képet. Mutassa be a feladatok XHTML és CSS forráskódjait, valamint a Weblapot a böngészőben. Megoldás: body { background-color:#000000; margin:5; } table{
border-style:solid; border-color:#e5e5e5; border-width:0px; background-color:#000000; border-collapse:collapse; } strong { color:#ff0000; font-family:Arial; font-size:12px; } td.kerdoiv { font-family:Arial; font-size:11px; color:#ffffff; } label,textarea { margin-left: 0.3cm; margin-right: 0.3cm; } .gomb { border-style:solid; border-color:#ff0000; border-width:1px; background-color:#e5e5e5; margin-left: 0.3cm; font-family:Arial; font-size:11px; color:#ff0000; } 73 INTERNET TECHNOLÓGIÁK - példatár fieldset{ border-style:solid; border-color:#ff0000; border-width:1px; } input,textarea{ border-style:solid; border-color:#ff0000; border-width:1px; background-color:#e5e5e5; font-family:Arial; font-size:11px; } A style54.css stíluslap szövegállománya <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html
xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Példa 54 - XHTML és CSS átfogó feladat</title> <link type="text/css" rel="stylesheet" href="style54.css" /> </head> <body> <table width="650" align="center" cellpadding="10" cellspacing="0"> <tbody> <tr> <td class="kerdoiv"> <form id="urlap" name="urlap" method="post" action="regisztracio.php"> <strong>Regisztráld magad, írd be az õsszes adatod!</strong><br /> <br /> <fieldset> <legend><strong>Személyi adatok</strong></legend> <label>vezetéknév:</label> <input type="text" id="vnev" name="vnev" /> <br /> <label>név:</label> <input type="text"
id="nev" name="nev" /> <br /> <label>e-mail:</label> <input type="text" id="email" name="email" /> <br /> <label>jelszó:</label> <input type="password" id="jelszo" name="jelszo" /> <br /> <br /> <label>megjegyzések</label> <br /> <textarea id="megjegyzes" name="megjegyzes" rows="3" cols="20" ></textarea> <br /> <br /> <input type="submit" id="gomb" name="gomb" value="küld" class="gomb" /> 74 INTERNET TECHNOLÓGIÁK - példatár <input type="reset" id="gombr" name="gombr" value="mégsem" class="gomb"/> <br /> <br /> </fieldset> </form></td> <td width="300"> <img src="robo.gif"
alt="Future Web developer" id="frobo" name="frobo" width="300" height="300" /></td> </tr> </tbody> </table> </body> </html> Az 54. feladat kódrészlete 55. Feladat A CSEHTMLValidator segítségével készítse el a mellékelt Weblapot az XHTML és a CSS technológiák alkalmazásával (55. ábra) 55. ábra 75 INTERNET TECHNOLÓGIÁK - példatár Feladatmegadás A Weblap tartalmazzon: - XHTML-1.0-Transitional DTD-t, - csatolt stíluslapot, - 10 stílusdefiníciót, - 5 stílusosztályt és - 2 képet. Mutassa be a feladatok XHTML és CSS forráskódjait, valamint a Weblapot a böngészőben. Megoldás: body { background-color:#000000; background-image:url(images/player.jpg); background-repeat:no-repeat; background-attachment:fixed; } table{ border-style:dotted; border-color:#ffffff; border-width:5px; } td.nba { font-size:12px; font-family:Verdana; color:#000000; text-indent:30;
line-height:2; text-align:justify; } th{ font-family:Tahoma; font-size:14px; background-color:#000000; color:#ffffff; } td.slika { background-image:url(images/logo.gif); font-family:verdana; color:#000000; font-size:12px; } tfoot{ background:#e5e5e5; color:#000000; } 76 INTERNET TECHNOLÓGIÁK - példatár h3 { text-decoration:underline; } td.tekst { color:#000000; font-size:12px; font-family:Tahoma; text-align:center; line-height:1; } td.tekst2 { background-color:#0088ff; color:#ffffff; font-size:12px; font-family:Tahoma; text-indent:20; text-align:center; } td.link { background-image:url(images/nike.gif); background-repeat:repeat; color:#ffffff; } caption{ color:#ffffff; text-decoration:underline; font-weight:bold; font-family:Verdana; } a:link { font-family:Tahoma; color:#ffffff; font-size:12px; font-weight:bold; text-decoration:none; } a:activ { font-family:Tahoma; color:#ffffff; font-size:12px; font-weight:bold; } a:hover { font-family:Tahoma; color:#ffffff;
background-color:#ff0000; text-decoration:none; font-size:12px; 77 INTERNET TECHNOLÓGIÁK - példatár font-weight:bold; } a:visited { font-family:Tahoma; color:#ffffff; text-decoration:none; font-size:12px; font-weight:bold; } A style55.css stíluslap szövegállománya <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Példa 55 - XHTML és CSS átfogó feladat</title> <link type="text/css" rel="stylesheet" href="style55.css" /> </head> <body> <table cellpadding="0" cellspacing="0" align="right" width="400" border="0"> <caption>bAsKeTbAlL</caption> <tr> <td
align="left" bgcolor="#ffffff" class="nba"> The NBA Entertainment League is a private, invitation-only entertainment industry basketball league. The league is made up of many of Hollywood’s top actors, musicians, directors, producers, and agents. </td> <td rowspan="3" align="center" width="100" class="link"><a href="1.html">players</a><br /><a href="2html">teams</a><br /><a href="3.html">statistics</a><br /> </td></tr> <tr> <td class="tekst2" align="center" bgcolor="#ffffff"> <a href="http://www.nbacom">wwwnbacom</a> </td> </tr> <tr><td bgcolor="#ffffff" align="center" class="tekst"> <br /> The All-Stars are coming to K-Marts neighborhood. (NBAE/Getty Images)<br /> <h3>You
Pick the Stars!</h3> </td></tr> </table> </body> </html> Az 55. feladat kódrészlete 78 INTERNET TECHNOLÓGIÁK - példatár 56. Feladat A CSEHTMLValidator segítségével készítse el a mellékelt Weblapot az XHTML és a CSS technológiák alkalmazásával (56. ábra) 56. ábra Feladatmegadás A Weblap tartalmazzon: - XHTML-1.0-Transitional DTD-t, - csatolt stíluslapot, - 4 stílusdefiníciót, - 4 stílusosztályt és - 2 képet. Mutassa be a feladatok XHTML és CSS forráskódjait, valamint a Weblapot a böngészőben. Megoldás: body { background-color:#ff0000; background-image:url(images/bg.gif); 79 INTERNET TECHNOLÓGIÁK - példatár background-repeat:repeat; background-attachment:fixed; } table{ border-style:solid; border-color:#000000; border-width:5px; background-color:#ffffff; } th{ font-family:Tahoma; font-size:14px; background-color:#000000; color:#ffffff; } img.slika { border-style:solid; border-color:#000000;
border-width:5px; } td.slika1 { background-color:#ff0000; font-family:verdana; color:#000000; font-size:12px; } ol{ list-style-type:upper-alpha; } td.tekst2 { color:#ff0000; font-size:12px; font-family:Tahoma; text-indent:20; text-align:left; } td.link { background-color:#ff0000; color:#ffffff; } a:link { font-family:Tahoma; color:#ffffff; font-size:12px; font-weight:bold; } a:activ { font-family:Tahoma; 80 INTERNET TECHNOLÓGIÁK - példatár color:#ffffff; background-color:#000000; font-size:12px; font-weight:bold; } a:hover { font-family:Tahoma; color:#ffffff; font-size:20px; font-weight:bold; } a:visited { font-family:Tahoma; color:#ffffff; font-size:12px; font-weight:bold; background-color:transparent; } A style56.css stíluslap szövegállománya <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html
xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Példa 56 - XHTML és CSS átfogó feladat</title> <link type="text/css" rel="stylesheet" href="style56.css" /> </head> <body> <table cellpadding="0" cellspacing="0" align="center" width="660" border="0"> <tr> <td width="200" align="right" rowspan="2" class="slika1"> In this game, Sint Nicolaas has been robbed! The thieves have taken his big sack full of presents and gingerbread cookies. In their run, however, the they arent careful and presents start dropping out of the sack. Now Sint only has to collect the fallen gingerbread and presents and bring them to the right chimney. </td> <td colspan="2" class="link" align="right"> <a
href="3.html">download</a> * <a href="2.html">members</a> * <a href="4.html">charts</a> </td> </tr> <tr> <td class="tekst" width="200"> <img src="images/logo.gif" class="slika" /> </td> <td width="220" class="tekst2" align="right"> <b>Rights and limitations:</b><br /><br /> <ol> 81 INTERNET TECHNOLÓGIÁK - példatár <li> You may install and use the SOFTWARE PRODUCT for an unlimited time </li> <li> You may copy and distribute the SOFTWARE PRODUCT, but only in its original form (as found on the WIERING SOFTWARE web site) and without any modifications. </li> </ol> </td> </tr> <tr> <td colspan="3" class="link"> <a href="http://www.gamescoyu">wwwgamescoyu</a> </td> </tr>
</table> </body> </html> Az 56. feladat kódrészlete 82 INTERNET TECHNOLÓGIÁK - példatár 83 INTERNET TECHNOLÓGIÁK - példatár 57. Feladat Készítsen egy egyszerű XML dokumentumot, amely kiírja 3 tantárgy nevét az első, a második és a harmadik évről (57. ábra) 57. ábra Megoldás: <?xml version="1.0" encoding="UTF-8"?> <!--File Name:57.xml --> <tantargy> <elsoev> <elso1>Matematika</elso1> <elso2>Fizika</elso2> <elso3>Internet technologiak I</elso3> </elsoev> <masodikev> <masodik1>Matematika II</masodik1> <masodik2>Multimedia</masodik2> <masodik3>Java</masodik3> </masodikev> 84 INTERNET TECHNOLÓGIÁK - példatár <harmadikev> <harmadik1>Elektronikus ugyvitel</harmadik1> <harmadik2>Szamitogepes laboratorium IV</harmadik2> <harmadik3>Szamitogepes
halozatok</harmadik3> </harmadikev> </tantargy> Az 57. feladat kódrészlete 58. Feladat Készítse el a mellékelt Weblapot XML és CSS technológiák alkalmazásával, amely kiírja az ábrán lévő szöveget. A Weblap tartalmazzon csatolt stíluslapot és 4 stílusdefiníciót (58. ábra) 58. ábra Megoldás: cim { font-style:italic; font-weight:bold; font-family:Verdana; font-size:16pt; color:white; display:block; background:red; } 85 INTERNET TECHNOLÓGIÁK - példatár nyelvw { font-style:italic; font-size:12pt; font-family:Arial; display:block; color:blue; } nyelvd{ font-style:italic; font-size:12pt; font-family:Tahoma; display:block; color:red; } v{ display:block; margin-top:12pt; } A style58.css stíluslap szövegállománya <?xml version="1.0" encoding="UTF-8"?> <!--File Name:58.xml --> <?xml-stylesheet type="text/css" href="style58.css"?> <programnyelv> <cim>Web</cim>
<nyelvw>php</nyelvw> <nyelvw>asp</nyelvw> <nyelvw>perl</nyelvw> <v> </v> <cim>Desktop</cim> <nyelvd>delphi</nyelvd> <nyelvd>visual basic</nyelvd> <nyelvd>c++</nyelvd> </programnyelv> Az 58. feladat XML kódrészlete 59. Feladat Készítse el a mellékelt Weblapot XHTML, JavaScript és XML technológiák alkalmazásával, amely a kulcs szó alapján keresi az adatokat az adatbázisból. Az adatbázis szövege XML formátumban legyen és tartalmazzon adatokat a programokról (a program neve, típusa, ára és Web címe) (59. ábra) 86 INTERNET TECHNOLÓGIÁK - példatár 59. ábra Megoldás: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml"> <head> <title>XHTML/JavaScript/XML Search</title> </head>
<body> <xml id="dsoprogramok" src="programok.xml"></xml> <h2>search:</h2> A program neve: <input type="text" id="SearchText" /> <button onclick=Find()>Search</button> <hr /> A lekérdezés eredménye: <hr /> <div id="ResultDiv"></div> <script type="text/javascript" language="JavaScript"> 87 INTERNET TECHNOLÓGIÁK - példatár function Find () { SearchString = SearchText.valuetoUpperCase(); if (SearchString == "") { ResultDiv.innerHTML = "<Kerem irja be az" + " intemeny nevet.>"; return; } dsoprogramok.recordsetmoveFirst(); ResultHTML = ""; while (!dsoprogramok.recordsetEOF) { TitleString = dsoprogramok.recordset("NEVE")value; if (TitleString.toUpperCase()indexOf(SearchString) >=0) ResultHTML += "<b>A program neve: </b>" +
dsoprogramok.recordset("NEVE") + "</p><p><b>Típus: </b>" + dsoprogramok.recordset("TIPUS") + "</p><p>" + "<b>Ára: </b>" + dsoprogramok.recordset("ARA") + "</p></p>" + "<b>Web: </b>" + "<a href=""+dsoprogramok.recordset("WEBCIM")+"" target="blank">"+dsoprogramok.recordset("WEBCIM")+"</a>" + "</p><hr />"; dsoprogramok.recordsetmoveNext(); } if (ResultHTML == "") ResultDiv.innerHTML = "<Nincs talalat>"; else ResultDiv.innerHTML = ResultHTML; } </script> </body> </html> Az 59 feladat XHTML és JavaScript kódrészlete <?xml version="1.0" encoding="UTF-8"?> <!-- File Name: programok.xml --> <PROGRAMOK> <PROGRAM> 88 INTERNET TECHNOLÓGIÁK
- példatár <NEVE>CSE HTML Validator</NEVE> <TIPUS>web editor</TIPUS> <ARA>50$</ARA> <WEBCIM>http://www.htmlvalidatorcom</WEBCIM> </PROGRAM> <PROGRAM> <NEVE>Snag It!</NEVE> <TIPUS>screen capture</TIPUS> <ARA>40$</ARA> <WEBCIM>http://www.techsmithcom</WEBCIM> </PROGRAM> <PROGRAM> <NEVE>FlashGet(JetCar)</NEVE> <TIPUS>download manager</TIPUS> <ARA>60$</ARA> <WEBCIM>http://www.amazesoftcom</WEBCIM> </PROGRAM> <PROGRAM> <NEVE>Mozilla FireFox</NEVE> <TIPUS>web browser</TIPUS> <ARA>FREE</ARA> <WEBCIM>http://www.mozillaorg</WEBCIM> </PROGRAM> <PROGRAM> <NEVE>DB Designer</NEVE> <TIPUS>download manager</TIPUS> <ARA>FREE</ARA> <WEBCIM>http://fabforce.net</WEBCIM> </PROGRAM> <PROGRAM> <NEVE>Adobe
Photoshop</NEVE> <TIPUS>image editor</TIPUS> <ARA>80$</ARA> <WEBCIM>http://www.adobecom</WEBCIM> </PROGRAM> </PROGRAMOK> A programok.xml szövegállománya 89 INTERNET TECHNOLÓGIÁK - példatár 90 INTERNET TECHNOLÓGIÁK - példatár 60. Feladat Készítsen egy PHP szkriptet, amely kiírja az ábrán lévő szöveget (60. ábra) 60. ábra Megoldás: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>php 1</title> </head> <body> <?php echo "Hello World!"; ?> </body> </html> A 60. feladat kódrészlete 61. Feladat Készítsen egy PHP szkriptet, amely kiírja az ábrán lévő szöveget (61. ábra) 91 INTERNET TECHNOLÓGIÁK - példatár 61. ábra
Megoldás: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>php 2</title> </head> <body> <?php /* Többsoros megjegyzés (blokk megjegyzés) */ echo "Nagy"; // egysoros megjegyzés echo "<br />Oliver"; echo "<br /><b>MFI Szabadka</b>"; # Egysoros megjegyzés ?> </body> </html> A 61. feladat kódrészlete 62. Feladat Készítsen egy PHP szkriptet, amely kiírja három változó értékét és típusát (62. ábra) 92 INTERNET TECHNOLÓGIÁK - példatár 62. ábra Megoldás: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html
xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>php 3</title> </head> <body> <?php $valt1 = "robert"; $Valt1= 13; $valt2= 23.456; $t1=gettype($valt1); $t2=gettype($Valt1); $t3=gettype($valt2); //$t11=var dump($valt1); //Ha egy kifejezés értékére és típusára vagy kíváncsi, akkor használd a var dump() függvényt. echo "<br />1. változó ($valt1) echo "<br />2 változó ($Valt1) echo "<br />3 változó ($valt2) //echo "<br />1 változó ($valt1) //echo "<br />2. változó ($Valt1) //echo "<br />3. változó ($valt2) ?> </body> </html> $t1"; $t2"; $t3"; - ".gettype($valt1); - ".gettype($Valt1); - ".gettype($valt2); A 62. feladat kódrészlete 93 INTERNET TECHNOLÓGIÁK - példatár 63. Feladat Készítsen egy PHP szkriptet, amely két változót hoz létre, az
első integer típus, a második string típus (63. ábra) 63. ábra Megoldás: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>php 4</title> </head> <body> <?php $szam=12; $szoveg=$szam." - string típus"; echo "$szoveg<br />"; $szam2=$szoveg+20; echo "Új szam = $szam2<br />"; $szam3=$szám2 + "vts 20"; echo"Új szám2 = $szam3<br />"; ?> </body> </html> A 63. feladat kódrészlete 94 INTERNET TECHNOLÓGIÁK - példatár 64. Feladat Készítsen egy PHP szkriptet, amely létrehoz két tömböt és kiírja a tömbök adatait. Az elsö tömb neveket, a második pedig film címeket tartalmazzon (64. ábra) 64. ábra Megoldás: <!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>php 5</title> </head> <body> <?php $nevek[0]="Attila"; $nevek[1]="Hajnalka"; $nevek[]="Edit"; $film[0][0]="Matrix"; $film[0][1]="Lord of The rings"; echo" <br>$nevek[0], $nevek[1], $nevek[2], $nevek[3]"; echo" <br>{$film[0][0]}, {$film[0][1]}"; ?> </body> </html> A 64. feladat kódrészlete 95 INTERNET TECHNOLÓGIÁK - példatár 65. Feladat Készítsen egy PHP szkriptet, amely kiszámolja és kiírja a kör kerületét és területét (65. ábra) Adva: r=15 65. ábra Megoldás: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>php 6</title> </head> <body> <?php define("PI",3.14); // konstans $r=15; $k=$r*$rPI; $t=2*$rPI; // $f=pow($r,2); hatványozás // 2=hatvány //sqrt($r); négyzetgyökvonás echo "<br />Kör kerülete = $k"; echo "<br />Kör területe = $t"; ?> </body> </html> A 65. feladat kódrészlete 96 INTERNET TECHNOLÓGIÁK - példatár 66. Feladat Készítsen egy PHP szkriptet, amely if-else feltételes utasítás alkalmazással kiírja az ábrán lévő szöveget (66. ábra) 66. ábra Megoldás: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu"
lang="hu"> <head> <title>php 7</title> </head> <body> <?php $euro=76; if($euro!=75) // != nem egyenlõ echo ("Árfolyam:$euro"); else echo ("Átlagos árfolyam!"); ?> </body> </html> A 66. feladat kódrészlete 97 INTERNET TECHNOLÓGIÁK - példatár 67. Feladat Készítsen egy PHP szkriptet, amely az időponttól függően ki írja a megfelelő szöveget, és meg jeleníti a megfelelő képet. Ha az időpont 18-nál nagyobb, akkor jelenítsen meg egy fehér színű üdvözlő szöveget és a 2.jpg képet Az oldal háttér színe legyen fekete. Abban az esetben, ha 18-nál kisebb, jelenítsen meg egy fekete színű üdvözlő szöveget és az 1.jpg képet Az oldal háttér színe legyen sárga (67 ábra). 67. ábra Megoldás: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html
xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>php 8 - <?php echo Date("F d, Y") ?></title> </head> <?php $ora=Date(H); if ($ora<18) { $szin="yellow"; $uzenet="Jó napot!"; $betuszin="black"; $kep="1.jpg"; } else { $szin="black"; 98 INTERNET TECHNOLÓGIÁK - példatár $uzenet="Jó estét!"; $betuszin="white"; $kep="2.jpg"; } echo"<body style="background-color:$szin;">"; echo"<p style="color:$betuszin">$uzenet</p>"; echo"<img src="$kep" alt="" ide="kep" name="kep" />"; ?> </body> </html> A 67. feladat kódrészlete 68. Feladat Készítsen egy Web oldalt, amely egy űrlapot jelenít meg. Az űrlap tartalmazzon egy szövegmezőt (név) és send gombot. A send gomb küldje
az adatot a z9php szkriptnek, amely feldolgozza az űrlapon megadott adatot (68.1 ábra) A z9php szkript írja ki a bevitt név részére egy üdvözletet (68.2 ábra) 68.1 ábra 68.2 ábra 99 INTERNET TECHNOLÓGIÁK - példatár Megoldás: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>php 9</title> </head> <body> <form method="post" action="z9.php"> <input type="text" id="nev" name="nev" /> <input type="submit" name="gomb" value="send" /> </form> </body> </html> A 68. feladat XHTML kódrészlete <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>php 9</title> </head> <body> <?php echo "Hello". $ POST["nev"]" <br />"; echo"<br />"; ?> </body> </html> A z9.php kódállománya 69. Feladat Készítsen egy Web oldalt, amely egy űrlapot jelenít meg. Az űrlap tartalmazzon: - egy szövegmezőt (név) - hat rádió gombot (piros, kék és zöld szín, Arial, Verdana és Tahoma betűtípus) - send gombot. A send gomb küldje az adatokat a z10.php szkriptnek, amely feldolgozza az űrlapon megadott adatot (69.1 ábra) A z10php szkript jelenítsen meg a bevitt név részére (a választott színben és a választott betűtípussal) egy üdvözletet (69.2 ábra) 100 INTERNET TECHNOLÓGIÁK - példatár 69.1 ábra 69.2 ábra Megoldás: <!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>php 10</title> </head> <body> <form method="post" action="z10.php"> <input type="text" id="nev" name="nev" /><br /> 101 INTERNET TECHNOLÓGIÁK - példatár <hr /> <input type="radio" value="red" name="szin" id="szin" checked="checked" />red<br /> <input type="radio" value="green" name="szin" id="szin" />green<br /> <input type="radio" value="blue" name="szin" id="szin" />blue<br /> <hr /> <input type="radio" value="Arial"
name="ftipus" id="ftipus" checked="checked" />Arial<br /> <input type="radio" value="Verdana" name="ftipus" id="ftipus" />Verdana<br /> <input type="radio" value="Tahoma" name="ftipus" id="ftipus" />Tahoma<br /> <hr /> <input type="submit" name="gomb" value="send" /> </form> </body> </html> A 69. feladat XHTML kódrészlete <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>php 10</title> </head> <body> <?php $szin=$ POST["szin"]; $ftipus=$ POST["ftipus"]; $nev=$ POST["nev"]; echo "<p
style="color:$szin;font-family:$ftipus">Hello $nev</p>"; echo"<br />"; ?> </body> </html> A z10.php kódállománya 70. Feladat Készítsen egy Web oldalt, amely egy űrlapot jelenít meg. Az űrlap tartalmazzon: - egy szövegmezőt (név) - hat rádió gombot (piros, kék és zöld szín, Arial, Verdana és Tahoma betűtípus) - egy legördülő menüt (betűméretek 10-18) - send gombot. A send gomb küldje az adatokat a z11.php szkriptnek, amely feldolgozza az űrlapon megadott adatot (70.1 ábra) A z11php szkript jelenítsen meg a bevitt név részére (a választott színben, a választott betűtípussal és betűmérettel) egy üdvözletet(70.2 ábra). 102 INTERNET TECHNOLÓGIÁK - példatár 70.1 ábra 70.2 ábra Megoldás: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html
xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>php 11</title> </head> <body> <form method="post" action="z11.php"> 103 INTERNET TECHNOLÓGIÁK - példatár <input type="text" id="nev" name="nev" /><br /><hr /> <input type="radio" value="red" name="szin" id="szin" checked="checked" />red<br /> <input type="radio" value="green" name="szin" id="szin" />green<br /> <input type="radio" value="blue" name="szin" id="szin" />blue<br /> <hr /> <input type="radio" value="Arial" name="ftipus" id="ftipus" checked="checked" />Arial<br /> <input type="radio" value="Verdana"
name="ftipus" id="ftipus" />Verdana<br /> <input type="radio" value="Tahoma" name="ftipus" id="ftipus" />Tahoma<br /><hr /> <select name="meret" id="meret"> <option value="10">10</option> <option value="12">12</option> <option value="14">14</option> <option value="16">16</option> <option value="18">18</option> </select><hr /> <input type="submit" name="gomb" value="send" /> </form> </body> </html> A 70. feladat XHMTL kódrészlete <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head>
<title>php 11</title> </head> <body> <?php $szin=$ POST["szin"]; $ftipus=$ POST["ftipus"]; $meret=$ POST["meret"]; $nev=$ POST["nev"]; echo "<p style="color:$szin;font-family:$ftipus;fontsize:${meret}pt;">Hello $nev</p>"; echo"<br />"; ?> </body> </html> A z11.php kódállománya 71. Feladat Készítsen egy Web oldalt, amely egy számológépet foglal magába. A számológép tartalmazzon: - két szövegmezőt (a és b változók) - négy rádió gombot (összeadás, kivonás, szorzás és osztás) - küld gombot. 104 INTERNET TECHNOLÓGIÁK - példatár A küld gomb küldje az adatokat a z12.php szkriptnek, amely feldolgozza az űrlapon megadott adatot (71.1 ábra) A z12php szkript számolja és írja ki a kiválasztott művelet eredményét. Alkalmazzon switch utasítást (712 ábra) 71.1 ábra 71.2 ábra Megoldás: <!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> 105 INTERNET TECHNOLÓGIÁK - példatár <title>php 12</title> </head> <body> <form method="post" action="z12.php"> a=<input type="text" id="a" name="a" /><br /> b=<input type="text" id="b" name="b" /><br /> <hr /> <input type="radio" value="összeadas" name="muvelet" id="muvelet" checked="checked" />+<br /> <input type="radio" value="kivonás" name="muvelet" id="muvelet" /><br /> <input type="radio" value="szorzás" name="muvelet" id="muvelet" />*
<br /> <input type="radio" value="osztás" name="muvelet" id="muvelet" />/ <br /> <hr /> <input type="submit" name="gomb" value="küld" /> </form> </body> </html> A 71. feladat XHTML kódrészlete <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>php 12</title> </head> <body> <?php $ertek=0; $muvelet=$ POST["muvelet"]; $a=$ POST["a"]; $b=$ POST["b"]; switch ($muvelet) { case "összeadas":$ertek=$a+$b; break; case "kivonás" :$ertek=$a-$b; break; case "szorzás" :$ertek=$a*$b; break; case "osztás" :$ertek=$a/$b; break; default :
echo"művelet?!"; break; } 106 INTERNET TECHNOLÓGIÁK - példatár echo"$muvelet: $ertek"; ?> </body> </html> A z12.php kódállománya 72. Feladat Készítsen egy PHP szkriptet, amely a számokat egysorban és többsorban 1-től 10-ig kiírja. A többsoros kiírásnál a páros számok legyenek kék-, a páratlan pedig piros színűek. Kiírásnál használjon for ciklusszerkezetet (72 ábra) 72. ábra Megoldás: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>php 13</title> </head> <body> 107 INTERNET TECHNOLÓGIÁK - példatár <?php for ($i = 1; $i <= 10; $i++) { if ($i==10) echo"$i"; else echo "$i, "; } //$i++ inkrementáló (növelõ) a változó értékét növeli
meg eggyel //$i-- dekrementáló (csökkentõ) a változó értékét csökkenti meg eggyel echo"<br /><br />"; for ($i = 1; $i <= 10; $i++) { if($i%2==0) echo "<span style="color:blue;">$i</span><br />"; else echo "<span style="color:red;">$i</span> <br />"; } ?> </body> </html> A 72. feladat kódrészlete 73. Feladat Készítsen egy PHP szkriptet, amely kiírja a számokat 1-től 10-ig egysorban. Kiírásnál, használjon while ciklusszerkezetet (73. ábra) 73. ábra Megoldás: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>php 14</title> </head> 108 INTERNET TECHNOLÓGIÁK - példatár <body> <?php $i = 1; while ($i
<= 10) { if ($i==10) echo"$i"; else echo "$i, "; $i++; } ?> </body> </html> A 73. feladat kódrészlete 74. Feladat Készítsen egy PHP szkriptet, amely kiírja a számokat 1-től 10-ig fordított sorrendben. A kiírásnál használjon do-while ciklusszerkezetet (74. ábra) 74. ábra Megoldás: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>php 15</title> </head> 109 INTERNET TECHNOLÓGIÁK - példatár <body> <?php $i = 10; do { echo"$i<br />"; $i--; } while ($i >= 1) ?> </body> </html> A 74. feladat kódrészlete 75. Feladat Készítsen egy PHP szkriptet, amely kiírja egy tömb tartalmát. A kiírásnál használjon foreach függvényt (75. ábra) 75. ábra
Megoldás: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>php 16</title> </head> <body> <?php $tomb = array (1, 2, 3, 17); 110 INTERNET TECHNOLÓGIÁK - példatár $i=1; foreach ($tomb as $ertek) { echo "$i. érték: $ertek<br>"; $i++; } ?> </body> </html> A 75. feladat kódrészlete 76. Feladat Készítsen egy PHP szkriptet, amely két függvény segítségével kiszámolja és kiírja az a és a b változóval történő összeadás értékét (76. ábra) 76. ábra Megoldás: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu"
lang="hu"> <head> <title>php 17</title> </head> <body> <?php $a = 1; $b = 2; echo"$a=$a $b=$b<br />"; function osszeadas($a,$b) { $c = $a + $b; echo"$a+$b=$c<br />"; } 111 INTERNET TECHNOLÓGIÁK - példatár function osszeadas2($a,$b) { $c = $a + $b; return $c; } osszeadas($a,$b); echo "$a+$b=".osszeadas2($a,$b); ?> </body> </html> A 76. feladat kódrészlete 77. Feladat Készítsen egy PHP szkriptet, amely függvények segítségével kiszámolja és kiírja az a és a b változóval történő összeadás értékét. Használjon globális változókat (77 ábra). 77. ábra Megoldás: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>php 18</title>
</head> <body> <?php $a = 1; $b = 2; echo"$a=$a $b=$b<br />"; 112 INTERNET TECHNOLÓGIÁK - példatár function osszeadas() { global $a, $b; $b = $a + $b; } osszeadas(); echo "$a+$b=$b"; ?> </body> </html> A 77. feladat kódrészlete 78. Feladat Készítsen egy PHP szkriptet, amely az include() függvény segítségével beágyazza a valtozok.php fájlt, és kiírja annak tartalmát A valtozokphp dokumentum négy változót tartalmaz (78. ábra) 78. ábra Megoldás: <?php $valt1="szia"; $valt2=234.5; $valt3=50; $kep="1.jpg"; ?> A valtozok.php szövegállománya 113 INTERNET TECHNOLÓGIÁK - példatár <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>php 19</title>
</head> <body> <?php include("valtozok.php"); // az állományok beágyazására a PHP programokba az include() függvény szolgál echo"$valt1=$valt1<br />"; echo"$valt2=$valt2<br />"; echo"$valt3=$valt3<br />"; echo"<img src="$kep" alt="kep" id="k" name="k" />"; ?> </body> </html> A 78. feladat kódrészlete 79. Feladat Készítsen egy Web oldalt, PHP szkript segítségével amelynek struktúrája megegyezik az ábrán láthatóval. Alkalmazzon include() függvényt (79 ábra) HEADER MENU CONTENT FOOTER 79. ábra Megoldás: <?php include("include/header.php"); 114 INTERNET TECHNOLÓGIÁK - példatár include("include/menu.php"); if(!isset($ GET["link"])) $ GET["link"]="index"; switch ($ GET["link"]) { case "index": include("include/index.php"); break;
case "mp3": include("include/mp3.php"); break; case "download": include("include/download.php"); break; default: include("include/index.php"); break; } include("include/footer.php"); ?> A 79. feladat kódrészlete 80. Feladat Készítsen egy PHP szkriptet, amely a login adattáblából kiírja az összes adatot (80. ábra). # # Table structure for table `login` # CREATE TABLE login ( Id int(11) NOT NULL auto increment, nev varchar(30) NOT NULL default , vnev varchar(30) NOT NULL default , email varchar(30) NOT NULL default , jelszo varchar(10) NOT NULL default , PRIMARY KEY (Id) ) TYPE=MyISAM COMMENT=felhasznalok; 80. Kódblokk a login adattábla struktúrája 115 INTERNET TECHNOLÓGIÁK - példatár 80. ábra Megoldás: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html
xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>PHP 20</title> </head> <body> <?php $server="localhost"; $felhasznalo="root"; $jelszo=""; $ab="it"; $kapcsolat = mysql connect("$server", "$felhasznalo", "$jelszo") or die(mysql error()); mysql select db("$ab",$kapcsolat) or die(mysql error()); $sql="select * from login"; $eredmeny = mysql query($sql) or die(mysql error()); echo"<table border="1" align="center">"; echo"<tr><th>Nev</th><th>VNev</th><th>email</th></tr>"; if (mysql num rows($eredmeny)>0) { while ($tomb = mysql fetch array($eredmeny)) echo("<tr><td>$tomb[nev]</td><td>$tomb[vnev]</td><td>$tomb[email]</td></tr>"); } else { echo("Nincs
adat!"); } mysql free result($eredmeny); 116 INTERNET TECHNOLÓGIÁK - példatár ?> </body> </html> A 80. feladat kódrészlete 81. Feladat Készítsen egy PHP szkriptet, amely lekérdezést hajt végre. A nev adattábla mező értéke Edit legyen ott, ahol a vnev mező értéke Kiss. Megoldás: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>PHP 21</title></head><body> <?php $server="localhost"; $felhasznalo="root"; $jelszo=""; $ab="it"; $kapcsolat = mysql connect("$server", "$felhasznalo", "$jelszo") or die(mysql error()); mysql select db("$ab",$kapcsolat) or die(mysql error()); $sql="update login set nev=Edit where
vnev=Kiss"; $eredmeny = mysql query($sql) or die(mysql error()); echo "OK!"; ?></body></html> A 81. feladat kódrészlete 82. Feladat Készítsen egy PHP szkriptet, amely kitörli az összes adatot a login adattáblából, ahol a nev mező értéke Edit. Megoldás: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>PHP 22</title> </head> <body> <?php $server="localhost"; $felhasznalo="root"; $jelszo=""; $ab="it"; 117 INTERNET TECHNOLÓGIÁK - példatár $kapcsolat = mysql connect("$server", "$felhasznalo", "$jelszo") or die(mysql error()); mysql select db("$ab",$kapcsolat) or die(mysql error()); $sql="delete from it where
nev=Edit";"; $eredmeny = mysql query($sql) or die(mysql error()); echo "OK!"; ?> </body> </html> A 82. feladat kódrészlete 83. Feladat Készítsen egy PHP szkriptet, amely új adatokat visz be a login adattáblába. Megoldás: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>PHP 22</title> </head> <body> <?php $server="localhost"; $felhasznalo="root"; $jelszo=""; $ab="it"; $kapcsolat = mysql connect("$server", "$felhasznalo", "$jelszo") or die(mysql error()); mysql select db("$ab",$kapcsolat) or die(mysql error()); $sql = "insert into login (nev,vnev,email,jelszo) values (student,it,vts@vts.yu,vts)"; $eredmeny = mysql
query($sql) or die(mysql error()); echo "OK!"; ?> </body> </html> A 83. feladat kódrészlete 84. Feladat Készítsen egy Web oldalt, amely létrehoz egy bejelentkezési és egy regisztrációs űrlapot. Az adatokat a login adattáblába tárolja (84 ábra) 118 INTERNET TECHNOLÓGIÁK - példatár 84. ábra Megoldás: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>login</title> </head> <body> <hr /> <b>Login</b><br /> <form method="post" action="check.php?cmd=1" id="login" name="login"> Email:<input type="text" id="email" name="email" /><br /> Jelszo:<input type="password"
id="jelszo" name="jelszo" size="10" /><br /> <input type="submit" name="sgomb1" value="kuld" /> <input type="reset" name="rgomb1" value="megsem" /> </form> <hr /> <b>Uj felhasznalo:</b> <form method="post" action="check.php?cmd=2" id="register" 119 INTERNET TECHNOLÓGIÁK - példatár name="register"> Nev:<input type="text" id="nev" name="nev" /><br /> Vnev:<input type="text" id="vnev" name="vnev" /><br /> Email:<input type="text" id="email" name="email" /><br /> Jelszo:<input type="password" id="jelszo" name="jelszo" size="10" /><br /> <input type="submit" name="sgomb2" value="kuld" />
<input type="reset" name="rgomb2" value="megsem" /> </form> <hr /> <?php if($uzenet==1) echo "Nem letezik ilyen felhasznalo!"; if($uzenet==2) echo "Sikeresen regisztracio!"; ?> </body> </html> A 84. feladat kódrészlete <?php $server="localhost"; $felhasznalob="root"; $jelszob=""; $ab="it"; if($cmd==1) { loginfelhasznalo($email,$jelszo); } elseif($cmd==2) { ujfelhasznalo($nev,$vnev,$email,$jelszo); } else { header("Location:login.php?"); } function loginfelhasznalo($email,$jelszo) { global $server,$felhasznalob,$jelszob,$ab; $kapcsolat = mysql connect("$server", "$felhasznalob", "$jelszob") or die(mysql error()); mysql select db("$ab",$kapcsolat) or die(mysql error()); $sql="select * from login where email=$email and jelszo=$jelszo"; $eredmeny = mysql query($sql) or die(mysql error()); if(mysql num
rows($eredmeny)>0) 120 INTERNET TECHNOLÓGIÁK - példatár header("Location:menu.php"); else header("Location:login.php?uzenet=1"); } function ujfelhasznalo($nev,$vnev,$email,$jelszo) { global $server,$felhasznalob,$jelszob,$ab; $kapcsolat = mysql connect("$server", "$felhasznalob", "$jelszob") or die(mysql error()); mysql select db("$ab",$kapcsolat) or die(mysql error()); $sql = "insert into login (nev,vnev,email,jelszo) values ($nev,$vnev,$email,$jelszo)"; $eredmeny = mysql query($sql) or die(mysql error()); header("Location:login.php?uzenet=2"); } ?> A check.php kódállománya 121 INTERNET TECHNOLÓGIÁK - példatár 122 INTERNET TECHNOLÓGIÁK - példatár 85. Feladat Készítsen egy Web oldalt, amely egy űrlapot jelenít meg. Az űrlap tartalmazzon: - négy szövegmezőt (név, életkor, a és b változók) - submit és reset gombot. A submit gomb küldje az adatokat a
check.php szkriptnek, amely feldolgozza az űrlapon megadott adatot (85.1 ábra) A checkphp szkript a függvény segítségével számolja és írja ki az (a+b)b képlet értékét, és jelenítsen meg egy piros színű üdvözlő szöveget Verdana betűtípussal a bevitt név részére, ha az életkor 18-nál nagyobb. Az oldal háttér színe legyen fekete Abban az esetben, ha 18-nál kisebb vagy egyenlő, irányítsa a felhasználót a www.vtssuacyu oldalra (852 ábra) 85.1 ábra 85.2 ábra 123 INTERNET TECHNOLÓGIÁK - példatár Megoldás: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Xhtml, css és php átfogó feladatok</title> </head> <body> <form method="post" action="check.php"
id="form"> név: <input type="text" id="nev" name="nev" /><br /> életkor: <input type="text" id="eletkor" name="eletkor" /><br /> a: <input type="text" name="a" id="a" /><br /> b: <input type="text" name="b" id="b" /><br /> <input type="submit" name="sgomb" value="submit" /> <input type="reset" name="rgomb" value="reset" /> </form> </body> </html> A 85. feladat XHTML kódrészlete <?php $a=$ POST["a"]; $b=$ POST["b"]; $nev=$ POST["nev"]; $eletkor=$ POST["eletkor"]; function keplet($a,$b,$nev) { $c=(pow($a,5)+pow($b,5))*pow($b,3); echo"<body style="background-color:#000000"><p style="color:#ff0000;font-family:Verdana;">$c";
echo"<br />Hello $nev</p></body>"; } if($eletkor<=18) header("Location:http://www.vtssuacyu"); else keplet($a,$b,$nev); ?> A check.php kódállománya 86. Feladat Készítsen egy Web oldalt, amely egy űrlapot jelenít meg. Az űrlap tartalmazzon: - négy szövegmezőt (név, a, b és c változók) - submit és reset gombot. 124 INTERNET TECHNOLÓGIÁK - példatár A submit gomb küldje az adatokat a m.php szkriptnek, amely feldolgozza az űrlapon megadott adatot (86.1 ábra) Amikor a c változó páros szám, a függvény számolja és írja ki az (a+b)ab képlet értékét. Amikor a c változó páratlan szám, akkor pedig az (a/b)√a képlet értékét. Az eredmények kiírása Tahoma betűtípussal és piros színnel történjen. Az eredmény megjelenítése után, az oldal írja ki kék színnel a bevitt nevet (86.2 ábra) 86.1 ábra 86.2 ábra Megoldás: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Xhtml, css és php átfogó feladatok</title> 125 INTERNET TECHNOLÓGIÁK - példatár </head> <body> <form method="post" action="m.php" id="form"> név: <input type="text" id="nev" name="nev" /><br /> a: <input type="text" name="a" id="a" /><br /> b: <input type="text" name="b" id="b" /><br /> c: <input type="text" name="c" id="c" /><br /> <input type="submit" name="sgomb" value="submit" /> <input type="reset" name="rgomb" value="reset" /> </form> </body>
</html> A 86. feladat XHTML kódrészlete <?php $a=$ POST["a"]; $b=$ POST["b"]; $c=$ POST["c"]; $nev=$ POST["nev"]; function keplet($a,$b) { $c=(pow($a,2)+pow($b,2))*$apow($b,3); echo"<p style="color:#ff0000;font-family:Tahoma;">$c</p>"; } function keplet2($a,$b) { $c=(pow($a,5)/pow($b,5))*sqrt($a); echo"<p style="color:#ff0000;font-family:Tahoma;">$c</p>"; } if($c%2==0) keplet($a,$b); else keplet2($a,$b); echo"<p style="color:#0000ff;">Hello $nev</p>"; ?> A m.php kódállománya 87. Feladat Készítsen egy Web oldalt, amely egy űrlapot jelenít meg. Az űrlap tartalmazzon: - három szövegmezőt (a kör sugara, név és város) - submit és reset gombot. A submit gomb küldje az adatokat a formula.php szkriptnek, amely a függvény segítségével kiszámolja és kiírja a kör kerületét és területét (87.1 ábra) A kerület 126
INTERNET TECHNOLÓGIÁK - példatár eredményének kiírása piros színnel, a területé pedig kék színnel történjen. Az eredmények megjelenítése után az oldal írja ki sárga színnel a bevitt nevet és a várost (87.2 ábra) 87.1 ábra 87.2 ábra Megoldás: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Xhtml, css és php átfogó feladatok</title> </head> 127 INTERNET TECHNOLÓGIÁK - példatár <body> <form method="post" action="formula.php" id="form"> r: <input type="text" name="r" id="r" /><br /> név: <input type="text" id="nev" name="nev" /><br /> város: <input type="text"
name="varos" id="varos" /><br /> <input type="submit" name="sgomb" value="submit" /> <input type="reset" name="rgomb" value="reset" /> </form> </body> </html> A 87. feladat XHTML kódrészlete <?php $r=$ POST["r"]; $nev=$ POST["nev"]; $varos=$ POST["varos"]; define("PI",3.14); function terulet($r) { $c=pow($r,2)*PI; echo"<p style="color:#0000ff;font-family:Tahoma;">terület:$c</p>"; } function kerulet($r) { $c=2*$rPI; echo"<p style="color:#ff0000;font-family:Tahoma;">kerület:$c</p>"; } terulet($r); kerulet($r); echo"<p style="color:#ffff00;">$nev <br />$varos</p>"; ?> A formula.php kódállománya 128 INTERNET TECHNOLÓGIÁK - példatár 129 INTERNET TECHNOLÓGIÁK - példatár www.vtssuacyu Szabadkai Műszaki
Főiskola honlapja www.suacyu Szabadkai akadémia hálózat honlapja www.itvtssuacyu Internet technológiák honlapja www.prowebingcom/expert Távoktató (e-learning) portál www.gmesterwebcom/e-tananyag Távoktató (e-learning) portál www.w3org World Wide Web Consortium www.apacheorg Az Apache webszerver hivatalos honlapja www.mysqlnet A MySQL adatbázisrendszer webcíme www.phpnet A PHP nyelv hivatalos honlapja www.phpmyadminnet A PhpMyAdmin adatbáziskezelőprogram webcíme www.htmlvalidatorcom A CSE HTML Validator ellenőrző program webcíme www.atwhu Ingyenes webtárhely www.ultrawebhu Ingyenes webtárhely www.dzabacom Ingyenes webtárhely www.free-php-hostingcom Ingyenes webtárhely 130
Mesterházy Attila 1974. január 30-án született Pécsen. 1980-1988 között a Hriszto Botev Általános Iskolába, 1988-1992 között a Lovassy László Gimnáziumba járt; mindkettőt Veszprémben végezte el. 1992-től a Budapesti Közgazdaságtudományi Egyetemre járt, ahol 1997-ben kitüntetéses közgazdasági oklevelet szerzett Nemzetközi kapcsolatok főszakirányon, Európa, illetve
