Scribd
Upload
161 views17 pages

Solution of Programs

The document provides code snippets for designing webpages that demonstrate various HTML elements and features, including ordered, unordered and definition lists; formatting tags; images as hyperlinks; tables with rowspan and colspan attributes; forms with different input elements; frames; internal, external and inline stylesheets; JavaScript for temperature conversion and button click counting; removing and adding options from a dropdown with JavaScript; an XML document for a CD catalog; validating an XML file against an internal DTD; and a form to take employee details. The code snippets show how to implement these HTML, XML and JavaScript features to create dynamic and interactive webpages.

Uploaded by

ujjwalmittal
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
161 views17 pages

Solution of Programs

The document provides code snippets for designing webpages that demonstrate various HTML elements and features, including ordered, unordered and definition lists; formatting tags; images as hyperlinks; tables with rowspan and colspan attributes; forms with different input elements; frames; internal, external and inline stylesheets; JavaScript for temperature conversion and button click counting; removing and adding options from a dropdown with JavaScript; an XML document for a CD catalog; validating an XML file against an internal DTD; and a form to take employee details. The code snippets show how to implement these HTML, XML and JavaScript features to create dynamic and interactive webpages.

Uploaded by

ujjwalmittal
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 17

1. Design a webpage showing all three types of LISTS in HTML.

<html>
<body>
<h4>Ordered List :< /h4>
<ol>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Unordered List:</h4>
<ul type="disc">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
<h4>A Definition List:</h4>
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
</body>
</html>
2. Design a webpage exhibiting use of all FORMATTING tags in HTML.

<html>
<body>
<p><b>This text is bold</b></p>
<p><strong>This text is strong</strong></p>
<p><big>This text is big</big></p>
<p><em>This text is emphasized</em></p>
<p><i>This text is italic</i></p>
<p><small>This text is small</small></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>
<p><ins>This is underlined text</ins></p>
<p>This is <del>deleted</del> text</p>
</body>
</html>
3. Design a webpage showing an image as a hyperlink.

<html>
<head>
<title> Image as a hyperlink </ title>
</head>
<body>
<a href=”1.html”><img src=”snap.jpg”></a>
</body>
</html>
4. Design a webpage containing the table given below using rowspan and colspan attributes

<html>
<head><title>Working with tables</title></head>
<body bgcolor=lightgrey>
<b>specifying rowspan and colspan attributes!</b>
<br><br><br><br>
<center>
<table align=center border=1 width=50%>
<tr>
<th rowspan=2>name</th><th colspan=3>Marks</th>
</tr>
<tr>
<th>Powerbuilder</th><th>Visual Basic</th><th>Developer2000</th>
</tr>
<tr align=center>
<td>Shilpa</td><td>21</td><td>45</td><td>30</td>
</tr>
<tr align=center>
<td>Vaishali</td><td>26</td><td>30</td><td>40</td>
</tr>
<caption align=top><b><br>Marksheet</b></caption>
</table>
</body>
</html>
5. Design a form containing all the form elements.

<html>
<body>
<form name=”form 1” action="">
BUTTON &nbsp&nbsp&nbsp&nbsp<input type="button" value="Hello world!"><br><br>
CHECKBOX<br>
I have a bike: <input type="checkbox" name="vehicle" value="Bike">
<br />
I have a car: <input type="checkbox" name="vehicle" value="Car">
<br />
I have an airplane: <input type="checkbox" name="vehicle" value="Airplane"><br><br>
RADIO BUTTONS<br>
Male:
<input type="radio" name="Sex" value="Male" checked="checked">
Female:
<input type="radio" name="Sex" value="Female">
<br><br>
TEXTBOXES<br>
First Name:<input type="text" name="name" value="yourname" size="20">&nbsp
Second Name:<input type="text" name="mail" value="yourname" size="20">
<br><br>
FIELDSET
<fieldset>
<legend>
Health information:
</legend>
<form>
Height <input type="text" size="3">
Weight <input type="text" size="3">
</form>
</fieldset>
<br><br>
TEXTAREA<br>
<textarea rows="10" cols="30">The cat was playing in the garden.</textarea>
<br><br>LIST<br>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select><br><br>
PASSWORD FIELD<br>
Username: <input type="text" name="user">
Password: <input type="password" name="password">
</form>
</body>
</html>
6. Design a webpage with 4 different webpages loaded at the same time using <frameset> tag.

<html>
<frameset rows="30%,*">
<frame cols="50%,50%">
<frame src=1.HTML>
<frame src=2.HTML>
</frameset>
<frameset cols="50%,50%">
<frame noresize SRC=3.HTML>
<frame noresize SRC=4.HTML>
</frameset>
</frameset>
</html>
7. Design a webpage using all 3 type of style sheets i.e. external, internal and inline.

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
<style type="text/css">
hr {color:sienna}
h1 {margin-left:20px}
body {background-image:url("images/back40.gif")}
</style>
</head>
<body>
<hr>
<h1> STYLESHEETS</h1>
<p style="color:sienna;margin-left:20px">This is a paragraph.</p>
</body>
</html>
8. Design a webpage using JavaScript for taking temperature in Fahrenheit as input and converting
it to Celsius and displaying it to user.

<html>
<body>
    
<script language="JavaScript" type="text/javascript">
// Equation is °C = 5/9 (°F - 32).
var degFahren = prompt("Enter the degrees in Fahrenheit",50);
var degCent;
    
degCent = 5/9 * (degFahren - 32);
    
alert(degCent);
    
</script>
    
</body>
</html>
9. Design a webpage using JavaScript to count the number of times a button is clicked and display
it as button label.

<html>
<head>
<script language=JavaScript>
var numberOfClicks = 0;
function myButton_onclick()
{
   numberOfClicks++;
   window.document.form1.myButton.value = 'Button clicked ' +
numberOfClicks +
   ' times';
}
</script>
</head>
<body>
<form name=form1>
   <input type='button' name='myButton' value='Button clicked 0 times'
   onclick="myButton_onclick()">
</form>
</body>
</html>
10. Design a webpage in JavaScript showing a list of all the weekdays
(Monday, Tuesday,........, Sunday) and two buttons with label "REMOVE
WEDNESDAY" and "ADD WEDNESDAY" , removing and adding Wednesday from the
list respectively

<html>
<head>
<script language=JavaScript>
function butRemoveWed_onclick()
{
   if (document.form1.theDay.options[2].text == "Wednesday")
   {
      document.form1.theDay.options[2] = null;
   }
   else
   {
      alert('There is no Wednesday here!');
   }
}
function butAddWed_onclick()
{
   if (document.form1.theDay.options[2].text != "Wednesday")
   {
      var indexCounter;
      var days = document.form1.theDay;
      var lastoption = new Option();
      days.options[6] = lastoption;
      for (indexCounter = 6;indexCounter > 2; indexCounter--)
      {
      days.options[indexCounter].text = days.options[indexCounter -
1].text;
      days.options[indexCounter].value = days.options[indexCounter -
1].value;
      }
      var option = new Option("Wednesday",2);
      days.options[2] = option;
   }
   else
   {
      alert('Do you want to have TWO Wednesdays?????');
   }
}
</script>
</head>
<body>
<form name=form1>
<select name=theDay size=5>
   <option value=0 selected>Monday
   <option value=1>Tuesday
   <option value=2>Wednesday
   <option value=3>Thursday
   <option value=4>Friday
   <option value=5>Saturday
   <option value=6>Sunday
</select><br>
<input type="button" value="Remove Wednesday" name=butRemoveWed
   onclick="butRemoveWed_onclick()">
<input type="button" value="Add Wednesday" name=butAddWed
   onclick="butAddWed_onclick()">
<br></form>
</body></html>
11. Write an XML Document for a CD Catalog having records of 5 CDs.

<?xml version="1.0" ?>


<CATALOG>

<CD>
<TITLE>Hide your heart</TITLE>
<ARTIST>Bonnie Tyler</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>CBS Records</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1988</YEAR>
</CD>
<CD>
<TITLE>Greatest Hits</TITLE>
<ARTIST>Dolly Parton</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>RCA</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1982</YEAR>
</CD>
<CD>
<TITLE>Still got the blues</TITLE>
<ARTIST>Gary Moore</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Virgin records</COMPANY>
<PRICE>10.20</PRICE>
<YEAR>1990</YEAR>
</CD>
<CD>
<TITLE>Eros</TITLE>
<ARTIST>Eros Ramazzotti</ARTIST>
<COUNTRY>EU</COUNTRY>
<COMPANY>BMG</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1997</YEAR>
</CD>
<CD>
<TITLE>Sylvias Mother</TITLE>
<ARTIST>Dr.Hook</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>CBS</COMPANY>
<PRICE>8.10</PRICE>
<YEAR>1973</YEAR>
</CD>
</CATALOG>
12. Write a program using JavaScript for retrieving data from an XML file "Note.dtd" displaying the
content in an HTML page.

<html>
<head>
<script type="text/javascript">
function parseXML()
{
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.load("Note.xml");
document.getElementById("to").innerHTML=xmlDoc.getElementsByTagName("to")
[0].childNodes[0].nodeValue;
document.getElementById("from").innerHTML=xmlDoc.getElementsByTagName("from")
[0].childNodes[0].nodeValue;
document.getElementById("message").innerHTML=xmlDoc.getElementsByTagName("body")
[0].childNodes[0].nodeValue;
}
</script>
</head>
<body onload="parseXML()">
<h1>W3Schools Internal Note</h1>
<br><b>To:</b> <p id="to"></p><br>
<b>From:</b> <p id="from"></p><br>
<b>Message:<b> <p id="message"></p>
</body>
</html>

Note.XML
<?xml version="1.0"?>
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Call ME</body>
</note>
13. Write a program for validating an XML file "note.dtd" against an internal DTD.

<html>
<body>
<script type="text/javascript">

var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");


xmlDoc.async="false";
xmlDoc.validateOnParse="true";
xmlDoc.load("Note.xml");

document.write("<br />Error Code: ");


document.write(xmlDoc.parseError.errorCode);
document.write("<br />Error Reason: ");
document.write(xmlDoc.parseError.reason);
document.write("<br />Error Line: ");
document.write(xmlDoc.parseError.line);

</script>
</body>
</html>

Note.XML
<?xml version="1.0"?>
<!DOCTYPE note
[
<!ELEMENT note (to,from,heading,body)>
<!ELEMENT to (#PCDATA)>
<!ELEMENT from (#PCDATA)>
<!ELEMENT heading (#PCDATA)>
<!ELEMENT body (#PCDATA)>
]>

<note date="12-11-09">
<to> Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Call ME</body>
</note>
14. Design a webpage containing a form which takes "EMPLOYEE NAME" and "EMPLOYEE PHONE
NUMBER" as input and also design a servlet that reads the data from the web page and display
that data as a response to the user.

Webpage Coding

<html>
<body>
<form name=”form1” method=”post”
action=”http://127.0.0.1:8080/examples/servlet/PostParameterServlet”>
<table>
<tr><td>Employee Name</td>
<td><input type=”text” name=”ename” size=”25” value=””></td></tr>
<tr><td>Employee Phone Number</td>
<td><input type=”text” name=”enumber” size=”4” value=””</td></tr>
</table>
<input type=”submit” value=”SUBMIT”>
</body></html>

Servlet Coding PostParameterServlet.java

import java.io.*;
import java.util.*;
public class PostParameterServlet extends GenericServlet
{
public void service(ServletRequest req, ServletResponse res) throws Exception
{
Res.setContentType(“text/html”)
Printwriter pw=res.getWriter();
Enumeration e= req.getParameterNames();
while(e.hasMoreElements())
{
String pname=(String)e.nextElement;
pw.println(pname+”=”);
String val=req.getParameter(pname);
pw.println(val);
}
}
}
15. Design a page in JSP to display error handling using error pages.

Webpage Coding
<html><head>
<style type=”text/css”>
body
{
font-family:Arial; font-size:10pt
}
</style></head>
<body>
<form action=”http://127.0.01:8080/FormHandler.jsp” method=”post”>
<br> Enter First Number <input type=”text” name=”num1”><br>
<br>Enter Second Number<input type=”text” name=”num2”><br>
<input type=”submit” value=”submit”>
</form>
</body>
</html>

Coding of FormHandler.jsp
<% @ page errorPage=”ErrorHandler.jsp”%>
<html>
<head>
<style type=”text/css”>
body,p
{
font-family:veradana;font-size:20pt
}
</style></head>
<body>
<% ! int a,b,c; %>
<% a=Integer.parseInt(request.getparameter(“num1”));
b= Integer.parseInt(request.getparameter(“num2”));
c=a+b;%>
<p>The sum of two numbers is <%=c%> </p>
</body>
</html>

Coding of ErrorHandler.jsp
<% @ page isErrorPage=”true” %>
<html>
<head>
<title>An Exceptional Event Has Occurred</title>
</head>
<body>
<font color=”red”>
<%= exception.toString();%>
</font>
<% out.println(“PLEASE ENTER A VALID AGE”);%>
</body></html>
16. Design a page in JSP to store data from a webpage using Java Database Connectivity.

Webpage Coding
<html>
<head>
<title>COLLEGE REGISTRATION FORM</title>
</head>
<body>
<form method=post action=reg.jsp>
<table>
<tr>
<td>NAME</td>
<td><input type="text" name="t1" size=33 maxsize=60></td>
</tr>
<tr>
<td>ROLL NO</td>
<td><input type="text" name="t2" size=33 maxsize=60></td>
</tr>
<tr>
<td>BRANCH</td>
<td>
<select name="branch">
<option>Computer Science & Engg.
<option>Electronics & Telecommunication
<option>Mechanical Engg.
<option>Information Technology
</select>
</td>
</tr>
<tr>
<td>YEAR</td>
<td><input type="text" name="t3" size=10></td>
</tr>
<tr>
<td>DATE OF JOINING</td>
<td><input type="text" name="t4" size=20></td>
</tr>
</table>
<br><br>
<input type="submit" name="sub" value="submit">
<input type="reset" name="re">
</form>
</body>
</html>

Coding of reg.jsp
<%@ page import="java.sql.*" %>
<%
try{
Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
Connection con=DriverManager.getConnection("jdbc:odbc:dsn1");
Statement st=con.createStatement();
String name=request.getParameter("t1");
String rno=request.getParameter("t2");
String branch=request.getParameter("branch");
String year=request.getParameter("t3");
String date=request.getParameter("t4");
st.executeUpdate("insert into student values('"+name+"','"+rno+"','"+branch+"','"+year+"','"+date+"')
");
}catch(Exception e){}
out.println("data entered");
%>

You might also like