You are on page 1of 17

Question 1: Answer the following questions:(i)Write the HTML code for creating the following frames : Answer:

<html> <head> <title>Frame Example</title> </head> <frameset cols="40%,15%,15%,15%,15%" frameborder="1" border="1" framespacing="0"> <frameset rows="40%,*" cols="*"> <frame src="http://localhost/clinic"> <frame src="http://localhost/clinic"> </frameset> <frame src="http://localhost/clinic"> <frame src="http://localhost/clinic"> <frameset rows="40%,*" cols="*"> <frame src="http://localhost/clinic"> <frame src="http://localhost/clinic"> </frameset> <frame src="http://localhost/clinic"> </frameset> <noframes> <body> <b>Sorry Your Browser Do Not Support Frames.</b></body></noframes> </html>

(ii)Write a program to create to add a live clock in your web page using JavaScript Answer:

<html> <body> <span id=tick2> </span> <script> <!-/* */ function show2() { if (!document.all) return var Digital=new Date() var hours=Digital.getHours() var minutes=Digital.getMinutes() var seconds=Digital.getSeconds() var dn="AM"

if (hours>12) { dn="PM" hours=hours-12 } if (hours==0) hours=12 if (minutes<=9) minutes="0"+minutes if (seconds<=9) seconds="0"+seconds var ctime=hours+":"+minutes+":"+seconds+" "+dn tick2.innerHTML="<b style='font-size:22;color:blue;'>"+ctime+"</b>" setTimeout("show2()",1000) } window.onload=show2 //--> </script> </body> </html>

(iii) Develop a web page having a rollover effect when an image changes if the user places the mouse over it using VBScript.

Answer

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Rollover Image Sample Vbscript</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <Script Language="VBScript"> Dim bClicked Sub Over() If not bBlicked = True Thendocument.images(0).src="img1.png" End If End Sub Sub Out() If not bBlicked = True Thendocument.images(0).src="ignou_logo.jpg" End If End Sub Sub BClick() document.images(0).src="img1.png"bClicked = True End Sub </Script>

</head> <body> <img src="ignou_logo.jpg" width="190" height="119" OnClick="BClick()" OnMouseOver="Over()"OnMouseOut="Out()"> </body> </html>

(iv) Write a code in HTML to create a table with 10 records to show the status of railway reservation having the following information: Train No. Starting from Destination Departure Time Arrival Time

Answer

<html> <head> <title>Showing Train Status</title> <style type="text/css">table{border-collapse:collapse;}</style> </head> <body>

<table width="100%" border="1"> <tr bgcolor="#FFFFCC"> <td colspan="14" align="center"> <b>Today(s) Railway Reservation Status</b> </td> </tr> <tr align="center" bgcolor="#99FF99"> <td width="2%" rowspan="2"><strong>Sn.</strong></td> <td width="6%" rowspan="2"><strong>Train No.</strong></td> <td width="18%" rowspan="2"><strong>Name</strong></td> <td width="12%" rowspan="2"><strong>Strating From</strong></td> <td width="13%" rowspan="2"><strong>Destination</strong></td> <td width="7%" rowspan="2"><strong>Departure Time</strong></td> <td width="7%" rowspan="2"><strong>Arrival Time</strong></td> <td width="7%" rowspan="2"> <div align="center"><strong>Travel</strong></div> </td> <td colspan="6"><strong>Accomodation Availability Status</strong></td> </tr> <tr align="center" bgcolor="#99FF99"> <td width="6%"><font color="#0000FF"><strong>1A</strong></font></td> <td width="5%"><font color="#0000FF"><strong>2A</strong></font></td> <td width="6%"><font color="#0000FF"><strong>3A</strong></font></td> <td width="6%"><font color="#0000FF"><strong>CC</strong></font></td>

<td width="6%"><font color="#0000FF"><strong>SL</strong></font></td> <td width="6%"><font color="#0000FF"><strong>2S</strong></font></td> </tr> <tr> <td>1</td><td>12439</td><td>RNC NDLS RAJ EX</td> <td><div align="center">Ranchi</div></td> <td><div align="center">New Delhi</div></td> <td><div align="center">17:50</div></td> <td><div align="center">10:50</div></td> <td><div align="center">17:00</div></td> <td width="6%"><div align="center"><strong>AVAILABLE 19</strong></div></td> <td width="5%"><div align="center"><strong>REGRET</strong></div></td> <td width="6%"><div align="center"><strong>AVAILABLE 19</strong></div></td> <td width="6%"><div align="center"></div></td>

<td width="6%"><div align="center"></div></td> <td width="6%"><div align="center"></div></td> </tr> <tr bgcolor="#CCFFCC"> <td>2</td> <td>12453</td> <td> RNC NDLS RAJ EX</td> <td><div align="center">Ranchi</div></td>

<td><div align="center">New Delhi</div></td> <td><div align="center">17:10</div></td> <td><div align="center">10:50</div></td> <td><div align="center">17:40</div></td> <td><div align="center"><strong>AVAILABLE 19</strong></div></td> <td><div align="center"><strong>RAC4/RAC 4</strong></div></td> <td><div align="center"><strong>WL 10/WL 9</strong></div></td> <td><div align="center"></div></td> <td><div align="center"></div></td> <td><div align="center"></div></td> </tr> <tr> <td>3</td> <td>12817</td> <td>JHARKHAND SJ EX</td> <td><div align="center">Ranchi</div></td> <td><div align="center">Anand Vihar</div></td> <td><div align="center">15:10</div></td> <td><div align="center">13:50</div></td> <td><div align="center">22:40</div></td> <td><div align="center"></div></td> <td><div align="center"><strong>RAC4/RAC 4</strong></div></td> <td><div align="center"><strong>WL 6/RAC 3</strong></div></td> <td><div align="center"></div></td>

<td><div align="center"><strong>RAC4/RAC 4</strong></div></td> <td><div align="center"></div></td> </tr><tr bgcolor="#CCFFCC"><td>4</td><td>12825</td> <td>JHRKHND S KRANT</td> <td><div align="center">Ranchi</div></td> <td><div align="center">New Delhi</div></td> <td><div align="center">23:40</div></td> <td><div align="center">20:55</div></td> <td><div align="center">21:15</div></td> <td><div align="center"></div></td> <td><div align="center"><strong>RAC4/RAC 4</strong></div></td> <td><div align="center"><strong>AVAILABLE 19</strong></div></td> <td><div align="center"></div></td> <td><div align="center"><strong>AVAILABLE 19</strong></div></td> <td><div align="center"></div></td> </tr> <tr> <td>5</td> <td>12873</td> <td>JHARKHAND S J E</td> <td><div align="center">Ranchi</div></td> <td><div align="center">Anand Vihar</div></td> <td><div align="center">14:05</div></td> <td><div align="center">13:50</div></td>

<td><div align="center">23:45</div></td> <td><div align="center"></div></td> <td><div align="center"><strong>RAC4/RAC 4</strong></div></td> <td><div align="center"><strong>AVAILABLE 19</strong></div></td> <td><div align="center"></div></td> <td><div align="center"><strong>AVAILABLE 19</strong></div></td> <td><div align="center"></div></td> </tr> <tr bgcolor="#CCFFCC"><td>6</td><td>12877</td> <td>RNC GARIB RATH</td> <td><div align="center">Ranchi</div></td> <td><div align="center">New Delhi</div></td> <td><div align="center">17:10</div></td> <td><div align="center">10:50</div></td> <td><div align="center">17:40</div></td> <td><div align="center"></div></td><td><div align="center"></div></td> <td><div align="center"><strong>AVAILABLE 190</strong></div></td> <td><div align="center"></div></td> <td><div align="center"></div></td> <td><div align="center"></div></td> </tr> <tr> <td>7</td> <td>18601</td>

<td> HTE JAT EXP</td> <td><div align="center">Ranchi</div></td> <td><div align="center">Delhi</div></td> <td><div align="center">15:30</div></td> <td><div align="center">29:05</div></td> <td><div align="center">29:05</div></td> <td><div align="center"></div></td> <td><div align="center"><strong>WL 6/RAC 3</strong></div></td> <td><div align="center"><strong>AVAILABLE 19</strong></div></td> <td><div align="center"></div></td> <td><div align="center"><strong>AVAILABLE 19</strong></div></td> <td><div align="center"></div></td> </tr> <tr bgcolor="#CCFFCC"> <td>8</td> <td>12366</td> <td>PNBE JANSHATABD</td> <td><div align="center">Ranchi</div></td> <td><div align="center">Patna</div></td> <td><div align="center">14:30</div></td> <td><div align="center">22:15</div></td> <td><div align="center">07:45</div></td> <td><div align="center"></div></td> <td><div align="center"></div></td>

<td><div align="center"></div></td> <td><div align="center"><strong>AVAILABLE 60</strong></div></td> <td><div align="center"></div></td> <td><div align="center"><strong>AVAILABLE 300</strong></div></td> </tr> <tr> <td>9</td> <td>18622</td> <td>PATLIPUTRA EXP</td> <td><div align="center">Ranchi</div></td> <td><div align="center">Patna</div></td> <td><div align="center">22:30</div></td> <td><div align="center">12:20</div></td> <td><div align="center">13:50</div></td> <td><div align="center"></div></td> <td><div align="center"><strong>AVAILABLE 19</strong></div></td> <td><div align="center"><strong>AVAILABLE 19</strong></div></td> <td><div align="center"></div></td> <td><div align="center"><strong>AVAILABLE 60</strong></div></td> <td><div align="center"></div></td> </tr> <tr bgcolor="#CCFFCC"><td>10</td> <td>18624</td><td>HTE RJPB EXP</td> <td><div align="center">Ranchi</div></td>

<td><div align="center">Patna</div></td> <td><div align="center">19:30</div></td> <td><div align="center">06:30</div></td> <td><div align="center">11:00</div></td> <td><div align="center"><strong>WL 10/WL 9</strong></div></td> <td><div align="center"><strong>AVAILABLE 19</strong></div></td> <td><div align="center"><strong>AVAILABLE 19</strong></div></td> <td><div align="center"></div></td> <td><div align="center"><strong>AVAILABLE 60</strong></div></td> <td><div align="center"></div></td> </tr> <tr bgcolor="blue"> <td colspan="14"> <b> <font color="#FFFF00">Note : 1A = 1 AC, 2A = 2AC, 3A =3AC, SL = Sleeper Class, CC = AC Chair Car, 2S = 2nd Class Sitting, RAC= Reservation Against Cancellation, WL = Waiting List, Regret = TicketingLimit Exceeded .</font> </b> </td> </tr> </table> </body> </html>

(v) Design a web page with pull down menu with each option linking to specific page. Also show integration of images ,audio and animation in one page. It should display the current date and time.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Pull Down Menu Example with images, audio and animation integration </title> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1"> <style type="text/css">table{border-collapse:collapse;}</style> <script language="javascript">var c=Date();var tfunction timedCount(){document.getElementById('clock').value=c;c=Date();t= setTimeout("timedCount()",1000)}</script> <SCRIPT LANGUAGE="JavaScript">function load1(form) {var url = form.links.options[form.links.selectedIndex].value;if (url != '') location.href = url;return false;}</SCRIPT> </head> <body onLoad="timedCount()"> <table width="100%" border="1">

<tr > <td width="33%"> <form name="menu" > <select name="links" onChange="load1(this.form)"> <option value="" selected>Pull Down Menu</option> <option value="http://www.google.com">Google </option> <option value="http://www.yahoo.com">Yahoo! </option> <option value="http://www.ebay.in">Ebay </option> <option value="http://www.ignou.ac.in">Ignou </option> <option value="http://www.applesoft.in">Applesoft </option> </select> </form> </td> <td width="40%" align="center"><strong><font color="#0000FF" size="+1">Pull Down Menu Examplewith images, audio andanimation integration</font></strong> </td> <td width="27%"> <form> <label> <strong> <font color="#FF0000">Live Clock :</font></strong></label>

<input type="text" id="clock" width="32" style="border:none;color:blue;"> </form> </td> </tr> <tr> <td> <div align="center"> <strong>Image</strong> </div> </td> <td> <div align="center"> <strong>Animation</strong> </div> </td> <td> <div align="center"> <strong>Audio</strong> </div> </td> </tr>

<tr> <td align="center"><img src="ignou_logo.jpg" width="190" height="119"> </td> <td><object classid="clsid:d27cdb6e-ae6d-11cf-96b8444553540000"codebase="http://fpdownload.macromedia.com/pu b/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="640" height="480"id="tech" align="middle"> <param name="allowScriptAccess" value="sameDomain" /> <param name="movie" value="myalbum.swf" /> <param name="quality" value="high" /> <embed src="myalbum.swf" quality="high" width="640" height="480" name="tech" align="middle"allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> </object> </td> <td align="center"> <embed src="Dabangg.mp3" autostart="false"></embed> </td> </tr> </table> </body> </html>