You are on page 1of 18

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");
%>