Kuvempu University Laboratory Assignments HTML and JavaScript Code Samples

Kuvempu University
Laboratory Assignments Subject: Web Programming Subject Code: BSIT - 52 1) Write HTML script to display Hello World, Welcome to the world of HTML. Put
the title as World of HTML Ans:<html> <head> </head> <title> Welcome to the world of HTML </title> <body> <i>"Hello World</i><b>Welcome to the world of HTML"</b> </body> </html> 2) Create an HTML page to display the following data using <table></table> tags First Name Last Name City Phone Number Shiva Rama Mysore 08212569964 Pratap S Bangalore 08025689754 Sreenivas G Mercara 08965445454 Ans:<html> <head> </head> <tittle> Data Table </title> <body> <table border=1> <tr> <th>First Name</th> <th>Last Name</th> <th>City</th> <th>Phone Number</th> <tr> <tr> <td>Sahil</td> <td>Hunter</td> <td>New Delhi</td> <td>9350023671</td> </tr> <tr> <td>Rajesh Kumar</td> <td>Mehta</td>
<td>New Delhi</td> <td>8010......</td> </tr> <tr> <td>Pankaj</td> <td>Udas</td> <td>New Delhi</td> <td>9.........</td> </tr> <tr> <td>Shlesh</td> <td>Kumar</td> <td>New Delhi</td> <td>9.........</td> </tr> </table> </body> </html> 3) Create a HTML page to display a list of film songs available in the library. The following are features of the page a. The name of the songs must be hyper linked to the songs, so that the users must be able to download songs. b. The following is the song database available in the library: Library Name: Hariharan Music Site Slno Song Name Film Artiste 1 PATA-PATA Apthamitra Udith Narayan 2 Kana Kanade Apthamitra Madhubalakrishna 3 Anku Donku Apthamitra S P Balasubramanyam 4 Kalavanu Thadeyoru Apthamitra Hariharan 5 Bombe Anayya Unknown Ans:<html> <head> <tittle> Hiriharan Songs Site </title> </head> <body> <marquee><font color = blue><b>Welcome to Hariharan's Songs Site</b></font></marquee> <center> <table border=1> <tr> <th>S.No.</th> <th>Song Name</th> <th>Film</th> <th>Artist</th> <tr> <tr> <td>1.</td> <td><a href="song1.html">Patta-Patta</a></td> <td>Apthamitra</td>
<td>Udit Narayan</td> </tr> <tr> <td>2.</td> <td><a href="song2.html">Kana Kanede</a></td> <td>Apthamitra</td> <td>Madhubalakirishna</td> </tr> <tr> <td>3.</td> <td><a href="song3.html">AnkuDonku</a></td> <td>Apthamitra</td> <td>S P Balasupramanniyam</td> </tr> <tr> <td>4.</td> <td><a href="song4.html">Bombay</a></td> <td>Anaya</td> <td>Unknown</td> </tr> </table> </center> </body> </html> 4) Create two HTML pages a. First page with the following features i. An image(logo) with a company name as the heading in the top center ii. This page containing an HTML form, two text boxes to get First Name, Second Name of the user iii. A submit button to the submit the data to the next page b. The Second page receives the data submitted by the First Page, displays the following message Welcome <Last Name>, <First Name> Ans:<html> <head> <title></title> </head> <body> <center> <form action="ToShowDataToAnotherPage" method="post"> Please Enter Your Detials !<br> First Name <input type="text" name="firstname"><br> Last Name <input type="text" name="lastname"><br> <input type="submit" name="submit" value="Submit"> </form> </center> </body> </html> ToShowDataToAnotherPage servlet import java.io.*; import java.net.*; importjavax.servlet.*;
importjavax.servlet.http.*; public class ToShowDataToAnotherPage extends HttpServlet { protected void doPost(HttpServletRequest request, HttpServletResponse response) throwsServletException, IOException { response.setContentType("text/html;charset=UTF-8"); PrintWriter out = response.getWriter(); String firstname=request.getParameter("firstname"); String lastname=request.getParameter("lastname"); out.println("<font color=blue>Welcome</font> } } "+firstname+" "+lastname);
5) Write a HTML page containing an HTML form to capture the following properties from the user: a. Name (text box) b. Address (text area) c. Phone (text box) Write javascript functions Ans:<html> <head> <title> HTML form </title> <Script language="javaScript"> function f() { var name=document.f1.Name.value; var phone=document.f1.Phone.value; var address=document.f1.Address.value; if(name.length=="") { alert("Please enter name"); name.focus(); return; } if (name.length> 25) { alert("Name Field cannot contain more than 25 characters"); name.focus(); return; to validate Name to contain only alphabets and of maximum length should be 25 ; Show appropriate messages on failure to validate Address field to contain maximum length of 200 characters; Show appropriate on failure and focus the Address field text area to validate phone number to contain only numeric data; show appropriate messages on failure
} if (!isNaN(name)) { alert("Name field must be filled with only Alphabets"); name.focus(); return; } if(phone.length=="") { alert("Please enter phone numbar"); phone.focus(); return; } if (isNaN(phone)) { alert("Phone Number must be numeric"); phone.focus(); return; } if(address.length=="") { alert("Please enter address"); address.focus(); return; } if (address.length> 200) { alert("Address Field can contain maximum of 200 character"); } } </script> </head> <body bgcolor="pink"> <marquee><h1 align="center">A Sample FORM </h1></marquee> <form name=f1> Name: <input type=textbox name="Name"><br> Phone: <input type=textbox name="Phone"><br> Address: <textarea rows="5" cols="50" name="Address"></textarea><BR> <input type=Button name=''Button" value ="Submit" onclick=f()> </form> </body> </html> 6) Create an HTML page containing the following features a. A combo box containing the list of 7 colors: Violet, Indigo, Blue, Green, Yellow, Orange, Red b. An empty 1X1 table with default background color: White
c. Depending upon the color selected from the above combo box, the background of the table must be changed accordingly. (hint: on change event of the combo box). Ans:<html> <head> <title> Changing Table Color by selecting color from the ComboBox </title> </head> <body> <script language= "JavaScript"> functionfn() { num=document.frm.vibgyor.selectedIndex; if(num==0) { document.getElementById("tab").bgColor="Violet"; } if(num==1) { document.getElementById("tab").bgColor="Indigo"; } if(num==2) { document.getElementById("tab").bgColor="Blue"; } if(num==3) { document.getElementById("tab").bgColor="Green"; } if(num==4) { document.getElementById("tab").bgColor="Yellow"; } if(num==5) { document.getElementById("tab").bgColor="Orange"; } if(num==6) { document.getElementById("tab").bgColor="Red"; } } </script> <form name="frm"> <select name="vibgyor" onChange=fn()> <option>Violet</option> <option>Indigo</option> <option>Blue</option> <option>Green</option> <option>Yellow</option> <option>Orange</option> <option>Red</option> </select><br><br><br><br> <table id="tab" border="1"> <tr> <th>Name</th> <th>Registration Number</th>
</tr> <tr> <td>priyanka rani</td> <td>072B5725</td> </tr> </table> </form> </body> </html> 7) Create an HTML page containing the following features a. A combo box containing the list of 7 colors: Violet, Indigo, Blue, Green, Yellow, Orange, Red b. Depending upon the color selected from the above combo box, the message in the status bar of the window must be reflect the value selected in the combo box (hint: on change event of the combo box). Ans:<html> <head> <title>Showing Message in Status Bar</title> </head> <body> <script language="JavaScript"> functionfn() { num=document.frm.vibgyor.selectedIndex; if(num==0) { window.status="You have selected Violet."; } if(num==1) { window.status="You have selected Indigo."; } if(num==2) { window.status="You have selected Blue."; } if(num==3) { window.status="You have selected Green."; } if(num==4) { window.status="You have selected Yellow."; } if(num==5) { window.status="You have selected Orange."; } if(num==6) { window.status="You have selected Red."; } }
</script> <form name="frm"> <select name="vibgyor" onChange=fn()><option>Violet</option> <option>Indigo</option> <option>Blue</option> <option>Green</option> <option>Yellow</option> <option>Orang</option> <option>Red</option> </select> </form> </body> </html> 8) Write a JSP program to display current date and time and suitable welcome message. If time is between 5AM and 12 PM display welcome message as Good Morning If time is between 12 PM and 5 PM display welcome message as Good Afternoon After 5PM display message as Good evening. Ans:======================= 9) Create an HTML page containing the following features a. Create a login JSP page with username , password and submit button. b. On submit, display message Thank you for logging in Also create cookies to store username and password. c. Open login JSP page on a new browser. If the cookie is present the username and password field should be automatically populated with the values from the cookie. Ans:<%@page contentType="text/html"%> <html> <head> <title></title> </head> <body> <center> <form action="next.jsp" method="post"> Please Enter Your Detials !<br> First Name <input type="text" name="firstname"><br> Last Name <input type="text" name="lastname"><br> <input type="submit" name="submit" value="Submit"> </form> </center> </body> </html> Next.jsp <%@page contentType="text/html"%> <%@page pageEncoding="UTF-8"%> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title> </head> <body> <% String firstname=request.getParameter("firstname"); String lastname=request.getParameter("lastname"); out.println("<font color=blue>Welcome</font> loging in!"); %> </body> </html> "+firstname+" "+lastname+" Thank you for
10)
Write a JSP page to display the number of hits to this page. (Hint: use application scope of java bean). Ans:<%@ page session="false" %> <HTML> <HEAD> <TITLE>Page Counter Using URL Rewriting</TITLE> </HEAD> <BODY> <H3>Page Counter Using URL Rewriting</H3> <% int count = 0; String parm = request.getParameter("count"); if (parm != null) count = Integer.parseInt(parm); if (count == 0) { %> This is the first time you have accessed this page. <% } else if (count == 1) { %> You have accessed the page once before.<% } else { %> You have accessed the page <%= count %> times before.<% } %> <P> Click <A HREF="urlrewriting.jsp?count=<%=count + 1 %>" >here</A> to visit the page again. </BODY> </HTML>
NOTE:- Please Confirm Solution is correct is not because this solution is not solved by me.

Kuvempu University Laboratory Assignments HTML and JavaScript Code Samples

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Kuvempu University Laboratory Assignments HTML and JavaScript Code Samples

Uploaded by

Copyright:

Available Formats

Kuvempu University

You might also like