1) Develop and Demonstrate A XHTML Document That Illustrates The Use External Style Sheet, Ordered List, Table, Borders, Padding, Color, and The Tag

1) Develop and demonstrate a XHTML document that illustrates the use external style sheet, ordered list, table,
borders, padding, color, and the <span> tag. /***************1.html***************/ <html> <head> <link rel="stylesheet" type="text/css" href="pr1.css"/> <title> program1</title> </head> <body> <h1> Faculty information </h1> <h2> Department of Information science and Engineering </h2> <table border="4" width = "5%"> <tr> <th width = "204">Name</th> <th> Email</th> </tr> <tr> <td width = "204"> Name1 </td> <td> Name1@gmail.com</td> </tr> <tr> <td width = "204"> Name2 </td> <td> Name2@gmail.com</td> </tr> <tr> <td width = "204"> Name3 </td> <td> Name3@gmail.com</td> </tr> </table> <hr/> <p> Non teaching staff </p> <ol> <li> xyz </li> <li> abc </li> <li> pqr </li> </ol> <p> <span> staff of ISE</span> Good team <span> APSCE </span> </p>
</body> </html> /***************1.css***************/ p,table,li { font-family: 'Times New Roman'; margin-left: 10pt; } p { word-spacing:5px; } body { background-color:rgb(200,255,205); } p,li,td { font-size: 75%; } td { padding:0.5cm; } th { text-align:center; font-size: 85%; } h1,h2,h3,hr { color: #483d8b; } table { border-style: outset; background-color: rgb(100,255,105); }
li { list-style-type:lower-roman; } span { color:blue; background-color:pink; font-size:29pt; font-style:italic; font-weight:bold; } 2Develop and demonstrate a XHTML file that includes Javascript script for the following problems: a) Input : A number n obtained using prompt Output : The first n Fibonacci numbers /***************2a.html***************/ <html> <head> <title> Fibonacci numbers </title> </head> <body> <script type="text/javascript"> var fib1=0,fib2=1,fib=0; var num= prompt("Enter a number: \n", ""); if(num!=null && num >0) { document.write("<h1>"+num+" Fibonacci numbers are <br/></h1>"); if(num ==1) document.write("<h1>"+fib1+ "<br/></h1>"); else { document.write("<h1>"+fib1+ "<br/>" +fib2+"<br/></h1>"); for(i=3;i<=num;i++) { fib=fib1+fib2; document.write("<h1>"+fib+ "<br/></h1>"); fib1=fib2;
fib2=fib; } } } else alert("No proper Input"); </script> </body> </html> b)Input : A number n obtained using prompt Output : A table of numbers from 1 to n and their squares using alert /***************2b.html***************/ <html> <body> <script type="text/javascript"> var num = prompt("Enter a number : \n"," "); if(num>0 && num!=null) { msgstr="Number and its square are \n"; for(i=1;i<=num;i++) { msgstr=msgstr+i+"-"+i*i+"\n"; } alert(msgstr); } else alert("No input supplied"); </script> </body> </html> 3) Develop and demonstrate a XHTML file that includes Javascript script that uses functions for the following problems: a) Parameter: A string Output: The position in the string of the left-most vowel /***************3a.html***************/ <html>
<head> <script type="text/javascript"> function show() { var i; var str=prompt("enter string"); /*reply.tostring();*/ var reply=str.toLowerCase(); alert("Length is "+reply.length); for(i=0;i<reply.length;i++) { ch=reply.charAt(i); if(ch=="a"||ch=="e"||ch=="i"||ch=="o"||ch=="u") { j=i; k=parseInt(j)+1; alert(" The leftmost vowel is "+str.charAt(i)); alert(" The leftmost position of the vowel is "+k); break; } } if(i!=j||i==0) alert("vowel not found"); } </script> </head> <body> <form> Enter the string: <input type="button" value="click me!" onclick="show()"/> </form> </body> </html> b) Parameter: A number Output: The number with its digits in the reverse order
/***************3b.html***************/ <html> <head> <title> Number and reverse </title> <script src="reverse.js" type= "text/javascript"> </script> </head> <body> </body> </html> /***************reverse.js***************/ window.onload=reverse; function reverse() { var num = prompt("Enter the number",""); var numbers="1234567890",rev=""; for(i=num.length-1;i>=0;i--) rev+=num.charAt(i); for(j=0;j<num.length;j++) { var ch=num.charAt(j); if(numbers.indexOf(ch)==-1) { var x=0; break; } else var x=1; } if(x==1) alert("Reverse is: "+rev); else alert("Not a number"); } 4a) Develop and demonstrate, using Javascript script, a XHTML document that collects the USN ( the valid format is: A digit from 1 to 4 followed by two upper-case characters followed by two digits followed by two upper-case characters followed by three digits; no
embedded spaces allowed) of the user. Event handler must be included for the form element that collects this information to validate the input. Messages in the alert windows must be produced when errors are detected. /***************4a.html***************/ <html> <head> <script type="text/javascript"> function formValidator() { var usn=document.getElementById('req1'); alert(usn.value); if(isCorrect(usn)) { return true; } return false; } function isCorrect(elem1) { alphaExp=/[1-4][A-Z]{2}[0-9]{2}[A-Z]{2}[0-9]{3}/ if(elem1.value.length==0) { alert("USN empty"); elem1.focus(); return false; } else if(!elem1.value.match(alphaExp)) { alert("USN not in proper format"); elem1.focus(); return false; } alert("USN is correct"); return true; } </script> <body bgcolor="yellow">
<h1 align=center> <form onSubmit='return formValidator()'> Enter USN in DAADDAADDD format: <input type="text" id="req1"/> <input type="submit" value="check"/> </form> </body> </html> 4b) Modify the above program to get the current semester also (restricted to be a number from 1 to 8) /***************4b.html***************/ <html> <head> <title> University Seat Number </title> <script type="text/javascript"> function validate() { var usn=document.getElementById('txtusn'); var sem=document.getElementById('txtnum'); alphaExp1=/[1-4][A-Z]{2}[0-9]{2}[A-Z]{2}[0-9]{3}/; alphaExp2=/[1-8]/; if(usn.value.length==0) alert("USN empty"); else if(usn.value.match(alphaExp1)) alert("USN is valid"); else alert("USN is Invalid"); if(sem.value.length==0) alert("SEM empty"); else if(sem.value.match(alphaExp2)) alert("SEM is valid"); else alert("sem is Invalid"); } </script> <body bgcolor="yellow"> <h1 align=center> Form to validate USN and Sem </h1>
<form onSubmit='return validate()'> <table border="0" align="center"> <tr> <th>Enter USN in DAADDAADDD format:</th> <td><input type="text" id="txtusn" maxlength="10"/></td> </tr> <tr> <th>Enter semester number:</th> <td><input type="text" id="txtnum" maxlength="1"/></td> </tr> <tr> <td><input type="submit" value="check"/></td> <td><input type="reset" value="reset"/></td> </tr> </table> </form> </body> </html> 5a) Develop and demonstrate, using JavaScript script, a XHTML document that contains three short paragraphs of text, stacked on top of each other, with only enough of each showing so that the mouse cursor can be placed over some part of them. When the cursor is placed over the exposed part of any paragraph, it should rise to the top to become completely visible. /***************5a.html***************/ <html> <head> <title> Program 5a </title> <script type="text/javascript"> var top="p1"; function toTop(newTop) { var domTop=document.getElementById(top).style; var domNew=document.getElementById(newTop).style; domTop.zIndex="0"; domNew.zIndex="10"; top=newTop; } </script>
<style type = "text/css"> .para1 { position:absolute; top:0; left:0; z-index:0; background-color:blue; } .para2 { position:absolute; top:20px; left:30px; z-index:0; background-color:red; } .para3 { position:absolute; top:50px; left:75px; z-index:0; background-color:gray; } p { color:white; font-family:arial; } </style> </head> <body> <p class="para1" id="p1" onmouseover="toTop('p1')"> **********BANGALORE**********<br/> *****************************<br/> *****************************<br/> *****************************</p>
<p class="para2" id="p2" onmouseover="toTop('p2')"> **********KARNATAKA**********<br/> *****************************<br/> *****************************<br/> *****************************</p> <p class="para3" id="p3" onmouseover="toTop('p3')"> ************INDIA************<br/> *****************************<br/> *****************************<br/> *****************************</p> </body> </html> 5b) Modify the above document so that when a paragraph is moved from the top stacking position, it returns to its original position rather than to the bottom /***************5b.html***************/ <html> <head> <title> Program 5b </title> <script type="text/javascript"> var top="p1"; function toTop(newTop) { var domTop=document.getElementById(top).style; var domNew=document.getElementById(newTop).style; domTop.zIndex="0"; domNew.zIndex="10"; top=newTop; } function back() { document.getElementById("p1").style.zIndex="0"; document.getElementById("p2").style.zIndex="0"; document.getElementById("p3").style.zIndex="0"; } </script> <style type = "text/css">
.para1 { position:absolute; top:0; left:0; z-index:0; background-color:blue; } .para2 { position:absolute; top:20px; left:30px; z-index:0; background-color:red; } .para3 { position:absolute; top:50px; left:75px; z-index:0; background-color:gray; } p { color:white; font-family:arial; } </style> </head> <body> <p class="para1" id="p1" onmouseover="toTop('p1')" onmouseout="back()"> **********BANGALORE**********<br/> *****************************<br/> *****************************<br/> *****************************</p> <p class="para2" id="p2" onmouseover="toTop('p2')" onmouseout="back()"> **********KARNATAKA**********<br/>
*****************************<br/> *****************************<br/> *****************************</p> <p class="para3" id="p3" onmouseover="toTop('p3')" onmouseout="back()"> ************INDIA************<br/> *****************************<br/> *****************************<br/> *****************************</p> </body> </html> 6a) Design an XML document to store information about a student in an engineering college affiliated to VTU. The information must include USN, Name, Name of the College, Brach, Year of Joining, and e-mail id. Make up sample data for 3 students. Create a CSS style sheet and use it to display the document. /***************6a.xml***************/ <?xml version="1.0" encoding="utf-8"?> <?xml-stylesheet href="6a.css" type="text/css"?> <student> <stud-info>Student Information</stud-info> <heading> Student-1 </heading> <stud1> <usn>USN: 1AP09IS001</usn> <name>Name: XYZ</name> <noc>College: APS College of Engineering</noc> <branch>Branch: Information Science and Engineering</branch> <yoj>Year: 2009</yoj> <eid>Email: xyz@gmail.com</eid> </stud1> <heading> Student-2 </heading> <stud2> <usn>USN: 1AP09IS002</usn> <name>Name: ABC</name> <noc>College: APS College of Engineering</noc> <branch>Branch: Information Science and Engineering</branch> <yoj>Year: 2009</yoj> <eid>Email: abc@gmail.com</eid> </stud2>
<heading> Student-3 </heading> <stud3> <usn>USN: 1AP09IS003</usn> <name>Name: PQR</name> <noc>College: APS College of Engineering</noc> <branch>Branch: Information Science and Engineering</branch> <yoj>Year: 2009</yoj> <eid>Email: pqr@gmail.com</eid> </stud3> </student> /***************6a.css***************/ stud-info {display:block; color:blue; font-style:italic; font-weight:bold; font-size:200%; text-decoration:underline; } student {display:block;} stud1 {display:block;color:blue; } stud2 {display:block;color:red; } stud3 {display:block;color:black; } usn,name,noc,branch,yoj,eid { display:block; font-size:100%;} heading{display:block; color:green;font-weight:bold;font-size:150%;} 6b) Create an XSLT style sheet for one student element of the above document and use it to create a display of that element. /***************6b.xml***************/ <?xml version="1.0" encoding="utf-8"?> <?xml-stylesheet type="text/xsl" href="xslstudent.xsl"?> <students> <student> <usn>1AP09Is001</usn> <name>XYZ</name> <college>APS College of Engineering</college> <branch>ISE</branch> <year-join>2009</year-join> <email>xyz@gmail.com</email> </student> </students>
/***************xslstudent.xsl***************/ <?xml version="1.0" encoding="utf-8"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns="http://www.w3.org/1999/xhtml"> <xsl:template match="student"> <span style="font-style:bold;color:red">USN:</span> <xsl:value-of select="usn"/><br /> <span style="font-style:bold;color:red">NAME:</span> <xsl:value-of select="name"/><br /> <span style="font-style:bold;color:red">COLLEGE:</span> <xsl:value-of select="college"/><br /> <span style="font-style:bold;color:red">BRANCH:</span> <xsl:value-of select="branch"/><br /> <span style="font-style:bold;color:red">YEAR-JOIN:</span> <xsl:value-of select="year-join"/><br /> <span style="font-style:bold;color:red">E-MAIL ID:</span> <xsl:value-of select="email"/><br /> </xsl:template> </xsl:stylesheet> 7a) Write a Perl program to display various Server Information like Server Name, Server Software, Server protocol, CGI Revision etc. /***************7a.pl***************/ #!/usr/bin/perl print "content-type: text/html\n\n"; print "Server name: ",$ENV{'SERVER_NAME'},"<BR>","\n"; print "Server port: ",$ENV{'SERVER_PORT'},"<BR>","\n"; print "Server software: ",$ENV{'SERVER_SOFTWARE'},"<BR>","\n"; print "Server protocol: ",$ENV{'SERVER_PROTOCOL'},"<BR>","\n"; print "CGI revision: ",$ENV{'GATEWAY_INTERFACE'},"<BR>","\n"; 7b) Write a Perl program to accept UNIX command from a HTML form and to display the output of the command executed. /***************7b.html***************/ <html> <body>
<form action="/cgi-bin/7b.pl" method = "get"> command: <input type = "text" name = "com"><br> <input type = "submit" value = "submit"> </form> </body> <html> /***************7b.pl***************/ #!/usr/bin/perl print "content-type:text/html\n\n"; use CGI':standard'; $c=param('com'); system($c); exit(0); 8a) Write a Perl program to accept the User Name and display a greeting message randomly chosen from a list of 4 greeting messages.
/***************8a.pl***************/ #!/usr/bin/perl use CGI qw/:standard/; print "Content-type:text/html\n\n"; @coins = ("Welcome to Web Programming Lab","Have a nice time in lab", "Practice all the programs", "well done Good Day"); $rm = int(rand(4)); print start_form, "Enter the User Name ", textfield('name'), submit, end_form; if(param()) { $name = param('name'); print "Hello", " ", ($name), " ", $coins[$rm]; } else { print "No input supplied"; }
8b) Write a Perl program to keep track of the number of visitors visiting the web page and to display this count of visitors, with proper headings. /***************8b.pl***************/ #!/usr/bin/perl print "Content-type:text/html\n\n"; use CGI':standard'; open(FH, "+<22.txt") || die "Can't open visitor_count: $!\n"; $count=<FH>; print "You are visitor number $count"; $count++; seek(FH, 0,0) || die; # Seek back to the top of print FH $count; close(FH); 9) Write a Perl program to display a digital clock which displays the current time of the server. /***************9.pl***************/ #!/usr/bin/perl print "content-type:text/html\n\n"; ($sec,$min,$hour)=localtime(); print "<meta http-equiv=\"refresh\"content=1>"; print "<body><center><h3><font color= red> DIGITAL CLOCK </font></h3><h1>"; print "$hour:$min:$sec"; print "</h1></center></body></html>"; 10) Write a Perl program to insert name and age information entered by the user into a table created using MySQL and to display the current contents of this table. /***************10.pl***************/ #!/usr/bin/perl use DBI; use CGI qw(:standard); print header, start_html(-title=>"10th Program", -BGCOLOR=>"Green"); print start_form,"Name ",textfield('name'),"Age",textfield('age'); print submit, end_form, hr; $name=param('name');
$age=param('age'); $dbh =DBI->connect("DBI:mysql:abhi","root","root") or print "Connection failed: ".$DBI::errstr; $sth=$dbh->prepare("insert into info values('$name','$age')"); $sth->execute(); $sth=$dbh->prepare("Select * from info"); $sth->execute(); print h2("Inserted Data are: "); print "<table border size=1><tr><th>Name</th><th>Age</th></tr>"; while ( ($name,$age)=$sth->fetchrow()) { print "<tr><td>$name</td><td>$age</td></tr>"; } $qh->finish(); $dbh->disconnect();
11) Write a PHP program to store current date-time in a COOKIE and display the Last visited on date-time on the web page upon reopening of the same page. /***************11.php***************/ <?php date_default_timezone_set('Asia/Calcutta'); $month=60*60*24*60+time(); setcookie('lastvisit',date("G:i - m/d/y"),$month); if(isset($_COOKIE['lastvisit'])) { $visit=$_COOKIE['lastvisit']; echo "your last visit was - ",$visit; } else echo "you've got some stale cookies!"; ?> 12) Write a PHP program to store page views count in SESSION, to increment the count on each refresh, and to show the count on web page. /***************12.php***************/
<?php session_start(); session_register("count"); if(!isset($_SESSION["count"])) { $_SESSION["count"]=0; echo "<p>counter initialized</p>\n"; } else { $_SESSION["count"]++; } echo "<p>The counter is now <b>$_SESSION[count]</b></p>"; echo "<p>Reload this page to increment</p>"; ?> 13) Create a XHTML form with Name, Address Line 1, Address Line 2, and E-mail text fields. On submitting, store the values in MySQL table. Retrieve and display the data based on Name. /***************13a.html***************/ <html> <body> <FORM ACTION=http://localhost/13a.php METHOD=POST> Name:<INPUT TYPE=text NAME=name> <BR> Address1:<INPUT TYPE=text NAME=Add1> <BR> Address2:<INPUT TYPE=text NAME=Add2> <BR> E-mail:<INPUT TYPE=text NAME=email <BR> <INPUT TYPE=submit NAME=submit> </FORM> </body </html> /***************13a.pl***************/ <?php $dbh=mysql_connect(localhost,root,root) or die(mysql_error()); mysql_select_db(mydatabase) or die(mysql_error());
if(isset($_POST[NAME])) { $nme=$_POST[name]; $ad1=$_POST[add1]; $ad2=$_POST[add2]; $em1=$_POST[email]; if($nme!= && $ad1!=) { $query=INSERT INTO mytable VALUES($nme,$ad1,$ad2,$em1); $result=mysql_query($query) or die(mysql_error()); echo Data inserted; } else echo one of the field is empty; } mysql_close($dbh); ?> /***************13b.html***************/ <html> <head><title>Program 13</title></head> <body> <form action=13b.php method=post> Enter Name of the person <input type=text name=name> <input type=submit > </form> </body </html> /***************13b.pl***************/ <html> <head><title>Search Result</title></head> <body> <h3> Search Result</h3> <hr> <?php $link=mysq_connect(localhost,root,root); mysql_select_db(mydatabase);
$n=$_POST[name]; Print Entered Name is $n\n; $var=mysql_query(SELECT * FROM mytable WHERE name like %$n%); echo <table border size=1>; echo <tr><th>Name</th><th>Address1</th><th>Address2</th> <th>E-mail</th></tr>; while($arr=mysql_fetch_row($var)) { echo <tr><td>$arr[0]</td><td>$arr[1]</td><td>$arr[2]</td><td>$arr[3]</td></tr>; } echo </table>; Mysql_free_result($var); Mysql_close($link); ?> <hr> <form action=13b.html>\ <input type=submit value=Back> > </form> </body </html> 14) Using PHP and MySQL, develop a program to accept book information viz. Accession number, title, authors, edition and publisher from a web page and store the information in a database and to search for a book with the title specified by the user and to display the search results with proper headings. /***************14a.html***************/ <html> <body> <form action="http://localhost/p14a.php" method="post"> ACC no:<input type=text name="accno"><br> Title:<input type=text name="title"><br> Authors:<input type=text name="authors"><br> Edition:<input type=text name="edition"><br> Publisher:<input type=text name="publisher"><br> <input type=submit name="submit"> </form> </body> </html>
/***************14a.pl***************/ <?php $dbh=mysql_connect('localhost','root','root') or die(mysql_error()); mysql_select_db('bangalore') or die(mysql_error()); if(isset($_POST['accno'])) { $accno=$_POST['accno']; $title=$_POST['title']; $authors=$_POST['authors']; $edition=$_POST['edition']; $publisher=$_POST['publisher']; if($accno!="" && $title!="") { $query="insert into book values('$accno','$title','$authors','$edition','$publisher')"; $result=mysql_query($query) or die(mysql_error()); echo "Data inserted"; } else echo "One of the field is empty"; } mysql_close($dbh); ?> /***************14b.html***************/ <html> <head><title>Program 14</title></head> <body> <form action="p14b.php" method="post"> Enter the title:<input type="text" name="title"> <input type=submit> </form> </body> </html> /***************14b.pl***************/ <html>
<head><title>Search result</title></head> <body> <h3>Search result</h3> <hr> <?php $link=mysql_connect("localhost","root","root"); mysql_select_db("bangalore"); $n=$_POST["title"]; print "Entered title is $n\n"; $var=mysql_query("select * from book where title like '%$n%'"); echo "<table border size=1>"; echo "<tr><th>ACC no</th><th>Title</th><th>Authors</th><th>Edition</th><th>Publisher</th></tr>"; while($arr=mysql_fetch_row($var)) { echo "<tr><td>$arr[0]</td><td>$arr[1]</td><td>$arr[2]</td><td>$arr[3]</td><td>$arr[4]</td></tr>" ; } echo "</table>"; mysql_free_result($var); mysql_close($linl); ?> <hr> <form action="p14b.html"> <input type="submit" value="Back"> </form> </body> </html>

1) Develop and Demonstrate A XHTML Document That Illustrates The Use External Style Sheet, Ordered List, Table, Borders, Padding, Color, and The Tag

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

1) Develop and Demonstrate A XHTML Document That Illustrates The Use External Style Sheet, Ordered List, Table, Borders, Padding, Color, and The Tag

Caricato da

Copyright:

Formati disponibili

1) Develop and demonstrate a XHTML document that illustrates the use external style sheet, ordered list, table,

Potrebbero piacerti anche