Course:-M.Tech 1 Sem Roll No: - : Submitted By: - Submitted To: - Babita Rajput Mrs. Deepika Goyal

COURSE :- M.
TECH 1st Sem

ROLL NO :- ---------------------
Submitted By:- Submitted To:-

Babita Rajput Mrs. Deepika Goyal
S.NO. EXPERIMENTS
WAP to create simple web page by using HTML basic tags, such as
1 heading elements, list element, paragraph etc.
2 WAP to create external style sheet and using the style sheet in xml file.
WAP to create a simple servlet program to display the date (using

3
Tomcat server).
WAP to write a Javascript program to define a user defined function
4
for sorting the values in an array.
5 WAP to create menu using HTML and CSS.
6 WAP to print date using JavaScript.
7 WAP to Show use of alert, confirm and prompt box.
8 WAP to display the Border Styles by using CSS .
9 WAP to Create Dynamic Websites Using JavaScript

10 WAP to to Sum and multiply two numbers using JavaScript.
11 WAP to implement the registration form in HTML by using Table Tag.
12 WAP to to create XMLHttpRequest.
Aim: 1. basic tags in HTML
<html>
<head>
<title>this is my first page</title>
<body bgcolor=pink>
<h1>welcome to html</h1><br/>
<b>tag for bold</b><br/>
<i>tag for italic</b><br/>
<u>tag for underline</u><br/>
<del>tag for delete</del><br/>
<h2>creating tables</h2>
<table border="2">
<th>table head</th>
<tr>
<td>row1</td>
<td>row2</td>
</tr>
</table>
<h2>creating text box</h2>
<input type="text" name"text">
password
<input type="password" name="pws"><br/>
radio button<br/>
male<input type="radio" name="male">
female<input type="radio" name="female">
</br>
checkbox<br/>
bike<input type=checkbox" name="bike"><br/>
car<input type="check box" name="car"><br/>
submit button<br/>
<input type="submit" value="submit"><br/>
select box<br/>
<select>
<option>one </option>
<option> two </option>
<option>three </option>
<option>four </option>
</select>
</body>
</html>
OUTPUT:
Aim: 2. Experiment to implement external style sheet
and using the style sheet in xml file.
CATALOG
{
background-color: #ffffff;
width: 100%;
}
CD
{
display: block;
margin-bottom: 30pt;
margin-left: 0;
}
TITLE
{
color: #FF0000;
font-size: 20pt;
}
ARTIST
{
color: #0000FF;
font-size: 20pt;
}
COUNTRY,PRICE,YEAR,COMPANY
{
display: block;
color: #000000;
margin-left: 20pt;
}
File Name: cd_ctalog.xml
<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/css" href="cd_catalog.css"?>
<CATALOG>
<CD>
<TITLE>Empire Burlesque</TITLE>
<ARTIST>Bob Dylan</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1985</YEAR>
</CD>
<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>
</CATALOG>
Output: -
Aim: 3.To create a simple servlet program to display the date
(using Tomcat server).
import java.io.*;
import java.util.*;
import javax.servlet.*;
import javax.servlet.http.*;
public class Simple_Servlet extends HttpServlet {
public void doPost(HttpServletRequest request,HttpServletResponse response)
throws IOException, ServletException{
response.setContentType("text/html");
PrintWriter out = response.getWriter();
Date d=new Date();
out.println("<html><title>Date Display</title>" +
"<body><h1> Date = "+ d.toString()+"</h1></body></html>");
Output:
Aim: 4.To write a Javascript program to define a user defined
function for sorting the values in an array.
<html>
<head>
<script type="text/javascript">
var num=0;
number=0;
var numarray=new Array();
function array_size()
{
num=prompt("Enter how many number to be sorted","000");
number=parseInt(num);
get_numbers();
}
function get_numbers()
{
if (number!=null && number!="")
{
for( i=0;i<number;i++)
{
n=prompt("Enter the number to be sorted","1");
numarray[i]=parseInt(n);
}
}
sorting()
}
function sorting()
{
document.writeln("<h1>Sorted Array<h1>");
document.writeln(numarray.sort(sortNumber));
}
function sortNumber(a,b )
{
return a - b;
}
</script>
</head>
<body>
<h1> Click the button to get the Number sorted</h1>
<input type="button" onclick="array_size()" value="Get Array Size" />
</body>
</html>
OUTPUT:
Aim: 5. write a program to create menu using HTML and CSS
<html>
<head>
<title>menu</title>
<link rel="stylesheet" type="text/css"
href="style.css" />
</head>
<body>
<ul><li>Home</li>
<li>About</li>
<li>
Portfolio
<ul>
<li>Web Design</li>
<li>Web Development</li>
<li>Illustrations</li>
</ul>
</li>
<li>Blog
<ul>
<li>Web Design</li>
<li>Web Development</li>
<li>Illustrations</li>
</ul></li>
<li>Contact</li>
<li>Facilities</li>
<li>Downloads
<ul><li>apendix c</li>
<li>apendix d</li>
<li>apendix g</li>
</ul>
</li>
</ul>
</body>
</html>
External CSS Coding.
body {
font-family: Arial, Helvetica, sans-serif, Helvetica, Arial, sans-serif;
padding: 20px 50px 150px;
font-size: 13px;
text-align: center;
background: #E3CAA1;
}
ul {
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
}
ul li {
font: bold 12px/18px sans-serif;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: #fff;
cursor: pointer;
}
ul li:hover {
background: #555;
color: #fff;
}
ul li ul {
padding: 0;
position: absolute;
top: 48px;
left: 0;
width: 150px;
opacity: 0;
visibility: hidden;
}
ul li ul li {
background: #CCCC33;
display: block;
color: #FF0000;
text-shadow: 0 -1px 0 #000;
}
ul li ul li:hover { background: #9966CC; }
ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
OUTPUT:-
AIM: 6.Write a program to print date using JavaScript.
<!DOCTYPE html>
<html>
<body>
<h1>My First JavaScript</h1>
<p>Click the button to display the date.</p>
<p id="demo"></p>
<button type="button" onclick="myFunction()">print
date</button>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML = Date();
}
</script>
</body>
</html>
OUTPUT:-
AIM: 7. Write a program to Show use of alert, confirm and

prompt box.
<html>
<head>
<title>java script</title>


</script>
</head>
<body>
<h1 align="center"> Java Script Alert, Confirm and
Prompt Box. </h1>
<form style="height:200px; width:200px; backgroundcolor:#CC3366;">
<h3> Java Script Alert Box.</h3>
<input type="button" onclick="alert('Are you sure you
want to give us the deed to your house?')"\
value="Confirmation Alert">
</form>
<form style="height:200px; width:210px; backgroundcolor:#FF9999;
margin-top:-220px; margin-left:300px">
<h3> Java Script Confirm Box.</h3>
<input type="button" onClick="confirmation()" value="Fb
Login">
</form>
<div style=" margin-top:-220px; backgroundcolor:#00FF66;
height:200px; width:200px; marginleft:600px;">
<h3> Java Script Prompt Box.</h3>
<input type="button" onclick="prompter()" value="Say my
name!">
</div>
</body>
</html>
Output:
Aim: 8. Write a program to implement border style by using
CSS. …………………………………………………………………………………..
<html>
<head>
<link rel="stylesheet" type="text/css" href="external_style.css" />
<style type="text/css">
body
{
margin-left:200px;
background:#5d9ab2 url('img_tree.png') no-repeat top left;
}
.container
{
text-align:center;
}
.center_div
{
border:1px solid gray;
margin-left:auto;
margin-right:auto;
width:90%;
background-color:#d0f0f6;
text-align:left;
padding:8px;
}
</style>
</head>
<body>
<div class="container">
<div class="center_div">
<h1>Hello World!</h1>
<p>This example contains some advanced CSS methods you may not have learned
yet. But, we will explain these methods in a later chapter in the tutorial.</p>
</div>
</div>
<p style="border-style:dotted solid dashed double">This is some text in a
paragraph.</p>
<p style="border-style:dotted solid dashed">This is some text in a paragraph.</p>
<p style="border-style:dotted solid">This is some text in a paragraph.</p>
<p style="border-style:dotted">This is some text in a paragraph.</p>
<h2>This is a header 1</h2>
<hr />
<p>You can see that the style
sheet formats the text</p>
<p><a href="cd_catalog.xml" target="_blank">This is a link</a></p>
</body>
</html>
external_style.css
<style>
h2 {color:maroon; font-size:20pt}
hr {color:navy}
p {font-size:11pt; margin-left: 15px}
a:link {color:green}
a:visited {color:yellow}
a:hover {color:black}
a:active {color:blue}
</style>
Output:-
Aim: 9.Creating Dynamic Websites Using JavaScript
[CODE]
dynamic_style.css
/*
Any styles applied here will affect the BODY tag
in your page, a good place to put background-color
or background-image definitions instead of the HTML
code, to better separate layout from content!
*/
body{
background-color: #FFFFFF;
}
.dBackgroundBox{
background-color: #FFFFFF;
}
.dColorBox{
color: #000000;
}
.dSizeBox{
width: 400px;
height: 600px;
}
.dPositionBox{
position: absolute;
left: 15px;
top: 15px;
}
[/CODE]
[CODE]
dynamic_display.js
function ModifyBGColor(id, newColor)
{
var mElement = document.getElementById(id);
mElement.style.backgroundColor = newColor;
}
function ModifyTextColor(id, newColor)
{
mElement.style.color = newColor;
}
function ModifyBoxSize(id, newWidth, newHeight)
{
mElement.style.width = newWidth;
mElement.style.height = newheight;
}
function ModifyBoxPosition(id, newLeft, newTop)
{
mElement.style.left = newLeft;
mElement.style.top = newTop;
}
[/CODE]
[CODE]
ourTestPage.html
<HTML>
<HEAD>
<TITLE>Our Display Test</TITLE>
<script src="modules_control.js" type="text/javascript">
</script>
AddModule("dynamic_display.js");
</script>
</HEAD>
<BODY>
<div class="dBackgroundBox" id="bgModBox">
<p><a onclick="ModifyBGColor('bgModBox','#FF0000');">Click here to modify the
background color!</a></p>
</div>
<div class="dColorBox" id="cModBox">
<p><a onclick="ModifyTextColor('cModBox','#00FF00');">Click here to modify
the text color!</a></p>
</div>
<div class="dSizeBox" id="szModBox">
<p><a onclick="ModifyBoxSize('szModBox','900px', '100px');">Click here to
modify the box size!</a></p>
</div>
<div class="dPositionBox" id="pModBox">
<p><a onclick="ModifyBoxPosition('pModBox','100px', '100px');">Click here to
modify the box position!</a></p>
</div>
</BODY>
</HTML>
[/CODE]
AIM: 10.Write a program to Sum and multiply two numbers using
JavaScript…………………………………………………………………………………...
<html>
<head>
<script>
function myFunction() {
var y = document.getElementById("txt1").value;
var z = document.getElementById("txt2").value;
var x = +y + +z;
document.getElementById("demo").innerHTML = x;
}
function mul() {
var y = document.getElementById("txt1").value;
var z = document.getElementById("txt2").value;
var x = +y * +z;
document.getElementById("demo").innerHTML = x;
}
</script>
</head>
<body>
<p>Click the button to calculate.</p>
<br/>
<br/>Enter first number:
<input type="text" id="txt1" name="text1"
size="6px">Enter second number:
<input type="text" id="txt2" name="text2"
size="6px"><br>
<button onClick="myFunction()">SUM</button>
<button onClick="mul()">Multiply</button>
<p id="demo"></p>
</body>
</html>
OUTPUT:
AIM: 11.Write a program to make a registration form by
using table tag in HTML.
Registration Form with Table

Question : To create a registration form as mentioned below.
Procedure :
Create an html page named as “registration.html”
a) set background colors
b) use table for alignment
c) provide font colors & size
Solution :-
In notepad type the necessary code & save with the file name mentioned with .html
extension.
File Name:registrationform.html
<html>
<head>
<title>Registration Form Sample</title>
</head>
<body bgcolor="lightblue" text="red" style="font-size:15pt;font-family:Garamond"
><center>
<h2>ENTRY FORM</h2></center>
<form name=form1 >
<table name=tab cellspacing=30pt>
<tr><td align=left><h2>Enter your Name :</h2> </td><td align=right><input type=text
name=t1 size=18>
<tr><td align=left><h2>Enter your Age :</h2> </td><td align=right><input type=text
name=t2 maxlength=3 size=18>
<tr><td align=left><h2>Enter your Address :</h2> </td><td align=right><textarea
name=ta rows=5 cols=15></textarea>
<tr><td align=left><h2>Sex :</h2> </td><td align=left><input type=radio name=r1
value="female">Female<br>
<input type=radio name=r1 value=male>Male</td>
<tr><td align=left><h2>Languages Known :</h2> </td><td align=left><center>(select
more than one)</center>
<input type=checkbox name=c1 value=c>C<br>
<input type=checkbox name=c2 value=c++>C++<br>
<input type=checkbox name=c3 value=vb>VB<br>
<input type=checkbox name=c4 value=java>JAVA<br>
<input type=checkbox name=c5 value=asp>ASP<br>
<input type=checkbox name=c6 value=others>OTHERS<br></td>
<tr><td align=left><h2>Enter your Password :</h2> </td><td align=right><input
type=password name=t3 size=18>
</table><center>
<input type=reset value=" Reset " >
<input type=submit value=" Submit " >
</form>
</body>
</html>
OUTPUT:-
AIM: 11.Write a program to creat XML Http Request.
variable=new XMLHttpRequest();
Old versions of Internet Explorer (IE5 and IE6) uses an ActiveX Object:
variable=new ActiveXObject("Microsoft.XMLHTTP");
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.onreadystatechange=function()
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
</script>
</head>
<body>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>
</body>
</html>
output:

Course:-M.Tech 1 Sem Roll No: - : Submitted By: - Submitted To: - Babita Rajput Mrs. Deepika Goyal

Uploaded by

Document Information

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

Course:-M.Tech 1 Sem Roll No: - : Submitted By: - Submitted To: - Babita Rajput Mrs. Deepika Goyal

Uploaded by

Copyright:

Available Formats

COURSE :- M.

TECH 1st Sem

Submitted By:- Submitted To:-

WAP to create a simple servlet program to display the date (using

6 WAP to print date using JavaScript.

7 WAP to Show use of alert, confirm and prompt box.

8 WAP to display the Border Styles by using CSS .

9 WAP to Create Dynamic Websites Using JavaScript

public class Simple_Servlet extends HttpServlet {

public void doPost(HttpServletRequest request,HttpServletResponse response)

throws IOException, ServletException{

PrintWriter out = response.getWriter();

Date d=new Date();

"<body><h1> Date = "+ d.toString()+"</h1></body></html>");

AIM: 7. Write a program to Show use of alert, confirm and

Registration Form with Table

{// code for IE7+, Firefox, Chrome, Opera, Safari

{// code for IE6, IE5

if (xmlhttp.readyState==4 && xmlhttp.status==200)

<div id="myDiv"><h2>Let AJAX change this text</h2></div>

<button type="button" onclick="loadXMLDoc()">Change Content</button>

You might also like