Web Tech Programs & Solutions

Class: SYBCA 2022
Web Tech Practical Slips Solution
Slip 1
Q1. Write a JavaScript program to calculate the volume of a sphere.
<html>
<head><title>pro4</title>
<script>
function volume()
{
var t_val=document.getElementById("txt").value;
var rad=parseInt(t_val);
var vol=(4.0/3.0)*Math.PI*Math.pow(rad,3);
document.getElementById("answer").value= vol;
}
</script>
</head>
<body>
<label>Input radius value of Sphere: </label><br>
<label> Raduis: </label> <input type="text" id="txt" size="30"/><br>
<button onclick="volume()">Find volume</button><br>
<label> Volume: </label><input type="text" id="answer"
size="30"/><br>
</body>
</html>
1
Q2 Create HTML page to Divide the frames in to different sections
as shown below and add appropriate HTML files to each frame.
First Frame : Your Name and address
Second Frame :
Bulleted list of favourite colours
Third Frame :
Numbered List of Cities
Fourth Frame:
Scrolling Message
Fifth Frame:
Blinking Reminders
Sixth Frame:
Name of Countries
Solution:
First.html
<html>
<body>
<h3 align="Center"> Name: XYZ
<address>
Pimpri, Pune-17
</address>
</h3>
</body>
</html>
Second.html
<html>
<body>
<h4> My favourite colours </h4>
<ul type="disc">
<li>Red</li>
<li> Pink</li>
<li>Green</li>
2
<li>Blue</li>
</ul>
</body>
</html>
Third.html
<html>
<body>
<h4> List of City </h4>
<Ol type="A">
<li>Pune</li>
<li> Pimpri</li>
<li>Bombay</li>
<li>Nasik</li>
</Ol>
</body>
</html>
Fourth.html
<html>
<body>
<h3 align="Center">
<marquee>
Goooood morning
</marquee>
</h3>
</body>
</html>
Fifth.html
<html>
<head>
3
<title>Title of the document</title>
<style>
.blink
{
animation: blinker 0.6s linear infinite;
color: pink;
font-size: 30px;
font-weight: bold;
}
@keyframes blinker
{
50% { opacity: 0;
}
</style>
</head>
<body>
<p class="blink">Blinking text</p>
</body>
</html>
Sixth.html
<html>
<body>
<h4> List of Country </h4>
<Ol type="1">
<li>India</li>
<li> US</li>
<li>UK</li>
</Ol>
</body>
</html>
Frame.html
<html>
4
<frameset rows="*,*,*">
<frame src="first.html"></frame>
<frameset cols="*,*">
<frame src="second.html"></frame>
<frame src="third.html"></frame>
</frameset>
<frameset cols="*,*,*">
<frame src="fourth.html"></frame>
<frame src="blink.html"></frame>
<frame src="sixth.html"></frame>
</frameset>
</frameset>
</html>
Note: Save all these programs in same folder
____________________________________________________
Slip 2
Q1. Write a java script program to accept a number form user and
display its multiplication table
<HTML>
<body>
<script>
function find()
{
var no=parseInt(frm.txt1.value);
var r,c;
document.write( "<table border = '1' >");
for (r = 1; r <= 10; r++)
{
document.write( "<tr>");
for (c = 1; c <= no;c++)
{
document.write ("<td> "+ r*c +"</td>");
}
5
document.write ("</tr>");
}
document.write ("</table>");
}
</script>
<form name="frm">
Enter a Number:<input name="txt1" type="text" />
<input name="b1" onclick="find();" type="button" value="display"
/></form>
</BODY>
</HTML>
Q.2 Write the HTML code to create the following table. Use internal
CSS to format the table
Book_No Book_Name Price

RS Paise
101 DBMS 200 50
102 C-Prog 150 75
103 JAVA 300 00
104 PHP 250 50
105 ASP 100 00
<html>
<head>
<style type="text/css">
table, th, td { border: 1px solid red ;}
</style>
6
</head>
<body>
<table>
<tr>
<th rowspan="2">Book_No</th>
<th rowspan="2">Book_Name</th>
<th colspan="2">Price</th>
</tr>
<tr>
<th>RS</th>
<th>Paise</th>
</tr>
<tr>
<td>101</td>
<td>DBMS</td>
<td>200</td>
<td>50</td>
</tr>
</table>
</body>
</html>
____________________________________________________
Slip 3
Q1. Write a java script program to accept a number form user and
calculate and display its sum of digits
<HTML><body>
<script>
function find()
{
var sum=0;
while(no>0)
{
7
sum=sum+no%10;
no=Math.floor(no/10);
}
alert("Sum of digits "+sum);
}
</script>
<form name="frm">
/></form>
</BODY>
</HTML>
Q2. Write HTML code to design a web as per given specification.

Divide the browser screen into two frames. The first frame will
display the heading. Divide the second frame into two columns. The
frame on the left should be name of cities consisting of hyperlinks.
Clicking on any one of these hyperlinks will display related
information in right hand side frame as shown below
First frame: IT Industries in INDIA
Second frame:
City
1. Pune
2. Mumbai
Third Frame:
Pune
 Infosys
 Persistent
Solution:
heading.html
<html>
<h1 align=center>IT Industries in INDIA</h1>
</html>
8
list.html
<html>
<h2><i>City</i><h2>
<oll>
<li><a href="pune.html" target=frm3>Pune</a>
<li><a href="mumbai.html" target=frm3>Mumbai</a>
</ol>
</html>
pune.html
<html>
<h1> Pune </h1>
<ul style="list-style-type:disk;">
<li>Infosys</li>
<li>Persistent</li>
</ul>
</html>
mumbai.html
<html>
<h1> Pune </h1>
<li>Infosys</li>
<li>Persistent</li>
</ul>
</html>
Frame.html
<html>
<head>
<title>slip1</title>
</head>
<frameset rows="20,80">
<frame src="heading.html"></frame>
<frameset cols="30,70">
9
<frame src="list.html"></frame>
<frame name="frm3"></frame>
</frameset>
</frameset>
</html>
Slip 4
Q1. Write a java script program to accept a number from user and
check whether it is Armstrong number or not
<html>
<head>
<script>
function armstr()
{
var arm=0,a,b,c,d,num;
num=Number(document.getElementById("no_input").value);
temp=num;
while(temp>0)
{
a=temp%10;
temp=parseInt(temp/10); // convert float into Integer
arm=arm+a*a*a;
}
if(arm==num)
{
alert("Armstrong number");
}
else
{
alert("Not Armstrong number");
}
}
</script>
</head>
10
<body>
Enter any Number: <input id="no_input">
<button onclick="armstr()">Check</button></br></br>
</body>
</html>
Q2. Create HTML web page with following specification Title should
be about your College.
i) Put image in the background
ii) Place your college name at the top of page in large text followed
by address in smaller size.
iii) Add names of courses offered, each in different color, style and
font
iv) Add scrolling text about college.
v) Add any image at the bottom. (use External CSS to format the
webpage)
Solution:
Shashi.css
body{background-image: url("college.jpg");}
h1{text-align: center ; Color: red; font-size :50;}
address{text-align: center ; Color: blue; font-size :20;}
h4{Color: red; font-size :30;}
.p1 { font-size: 15; color:green; font-family :"Times new roman";
font-style:italic;}
.p2{center; font-size: 19; color:blue; font-family: arial; font-
style:bold;}
.p3{ font-size: 25; color:pink; font-family: calibri;font-style:underline;}
div.ex1 {
background-color: lightblue;
width: 600px;
11
height: 150px;
overflow: scroll;
}
img {
border: 1px solid red;
border-radius: 4px;
padding: 5px;
width: 150px;
}
Slip4.html
<html>
<head>
<title>
College Name: Mahatma Phule Mahavidyalaya, Pimpri Pune -17
</title>
<link rel="stylesheet" href="Shashi.css">
</head>
<body>
<h1>College Name: Maharashtra College of Science</h1>
<address>Kothrud-38</address>
<h4> Course Offered </h4>
<p class=p1>B.A.</p1>
<p class=p2>B.Sc.</p1>
<p class=p3>BBA(Computer Application)</p1>
<div class=ex1>
ABOUT Maharashtra College of Science:
We are proud to be a well-established Arts, Commerce and Science
College over the last three decades. We are NAAC Re-accredited
college with A grade.
Following are some of the features of the college :
- B.A., B.Com., B.Sc., BCA. U.G Degree Programmes.
- M.A. (Economics, Marathi, Geography, History, Hindi) P.G

Programme.
- M.Sc. (Organic Chemistry) P.G Programme.
12
- M.com P.G Programme.
- "Earn and Learn Scheme", - Scholarships from State Govt. for
SC/NT/ST/OBC and economically backward students and other
merit scholarships.
</div>
<img src="MCSC.jpg"></img>
</body>
</html>
______________________________________________________
Slip 5
Q.1Write a java script program to accept a number from user and
check whether it is perfect number or not.
<html>
<head>
<script>
function perfectNumber()
{
var flag,number,remainder,addition = 0,i;
number = parseInt(document.getElementById("N").value);
flag = number;
for(i = 0; i < number; i++)
{
remainder = number%i;
if(remainder==0)
{
addition =addition+i;
}
}
if(addition == flag)
{
window.alert("-The inputed number is Perfect");
}
else
13
{
window.alert("-The inputed number is not Perfect");
}
}
</script>
</head>
<body>
<br>
<h1>Whether a number is Perfect or not</h1>
Enter The Number :<input type="text" name="n" id = "N"/>
<hr color="cyan">
<br>
10
<center><button onClick="perfectNumber()">CHECK</button>
</body>
</html>
Q2. Write HTML code to design a website for Online Shopping.

Design home page which consist of list of items each with hyperlink,
clicking on which should display related information on separate
web page. (Use external CSS to format each web page) [25]
a.css
body{ background-color: lightblue; background-color: lightblue; }
h1 { color: navy; color: navy; margin-left: 20px; margin-left: 20px; }
frames.html
<html><head><title> Frame Example </title></head> <frameset
rows="30%,*">
<frame src="header.html" name="frame1">
<frameset cols="30%,*">
<frame src="links.html" name="frame2">
<frame src="pune.html" name="frame3">
</frameset>
</frameset>
14
</html>
header.html
<html>
<body>
<h1 align="center"><font color="red">Online
Shopping</FONT></H1>
</BODY>
</HTML>
links.html
<html>
<body>
<b>Item</b><br>
<ol type="1">
<li><a href="shirt.html" target="frame3">Shirt</A></li><br>
<li><a href="jeans.html" target="frame3">Jeans</A></li><br>
</ol>
</body>
</html>
shirt.html
<html>
<head><link rel="stylesheet" type="text/css" href="a.css"></head>
<body><h3>Shirt</h3>
<ul type="disc"><li>Price </li></ul>
<img src="shirt.jpg" height="30%" width="40%">
</body>
</html>
15
jeans.html
<html>
<head><link rel="stylesheet" type="text/css" href="a.css"></head>
<body>
<h3>Jeans</h3>
<ul type="disc"><li>Price </li></ul>
<img src="jeans.jpg" height="30%" width="40%">
</body>
</html>
______________________________________________________
Slip 6
Q1. Write java script program to accept a number from user and
check whether it is prime number or not
Solution:
<html>
<head>
<title>
Check a number is Prime or not using JavaScript
</title>
<script type="text/javascript">
function p() {
var n, i, flag = true;
n = document.myform.n.value;
n = parseInt(n)
for(i = 2; i <= n - 1; i++)
if (n % i == 0) {
flag = false;
16
break;
}
if (flag == true)
alert(n + " is prime");
else
alert(n + " is not prime");
}
</script>
</head>
<body>
<center>
<h4>check number is prime or not</h4>
<hr color="Green">
<form name="myform">
Enter the number:
<input type="text" name=n value="">
<br><br>
<input type="button" value="Check" onClick="p()">
<br>
</form>
</center>
</body>
</html>
Q2. Write a HTML code to display calendar of current month in

tabular format. Use proper color for week days and holidays.
Display month name, year and images as advertisement at the
beginning of the calendar.
<HTML>
<HEAD>
<TITLE> Calendar </TITLE>
</HEAD>
<BODY>
17
<TABLE Cellpadding=”10" border=2>
<CAPTION><H1>January 2020</H1></CAPTION>
<TR>
<TH><font
color="red">SUN</TH><TH>MON</TH><TH>TUS</TH>
<TH>WED</TH><TH>THU</TH><TH>FRI</TH><TH>SAT</TH>
<TR>
<TR>
<TH> </TH><TH> </TH><TH> </TH><TH>1</TH>
<TH>2</TH><TH>3</TH><TH>4</TH>
<TR>
<TR>
<TH><font color="red"><b>5</TH><TH>6</TH><TH>7</TH>
<TH>8</TH><TH>9</TH><TH>10</TH><TH>11</TH>
<TR>
<TR>
<TR>
<TR>
<TR>
<TR>
<TH>30</TH><TH> </TH><TH> </TH><TH> </TH>
<TR>
</TABLE>
</BODY>
</HTML>
18
_________________________________________________
Slip 7
Q1. Write a java script program to accept a string from user and
display the count of vowel characters from that string.
Solution:
<html>
<body>
<script>
function find()
{
var vowels = 0;
var consonant = 0;
var specialChar = 0;
var digit = 0;
var str=frm.txt1.value;
var n = str.length;
var i;
for (i = 0; i < n; i++)
{
var ch = str[i];
if ( (ch >= 'a' && ch <= 'z') || (ch >= 'A' && ch <= 'Z') )
{
if (ch == 'a' || ch == 'e' || ch == 'i' || ch == 'o' || ch == 'u' || ch == 'A' ||
ch == 'E' || ch == 'I' || ch == 'O' || ch == 'U')
vowels++;
else
consonant++;
}
19
else if (ch >= '0' && ch <= '9')
digit++;
else
specialChar++;
}
alert( "Vowels: " + vowels + "Consonant:" + consonant +"Digit:" +
digit +"Special Character:" + specialChar ) ;
}
</script>
<form name="frm">
Enter a String:<input name="txt1" type="text" />
/></form>
</body>
</html>
Q2. Write a HTML code to display Theory Time Table of FYBCA

(Science). Use internal CSS to format the table
[25]
<html>
<head>
<style>
body
{
background-image: url("abc.jpg");
}
table, th, td {
}
</style>
</head>
<body>
14
20
<b><font color="red">Time Table 2020</font></b>
<table >
<tr>
<td>Time</td>
<td>Mon</td>
<td>Tues</td>
<td>Wed</td>
<td>Thurs</td>
<td>Fri</td>
<td>Sat</td>
</tr>
<tr>
<td>09:00-09:45</td>
<td> Rdbms</td>
<td>C</td>
<td>OB</td>
<td>BM</td>
<td>F A/C</td>
<td>WT</td>
</tr>
</table>
</body>
</html>
____________________________________________________
Slip 8
Q1. Write a java script program to accept a string and character
from user and check the count of occurrences of that character in
string.
<HTML>
<script>
function find()
{
21
var ch=frm.txt2.value;
var n = str.length;
var count = 0;
for(var i=0; i<n; i++)
{
if(str[i] === ch)
{
count++;
}
}
alert(count);
}
</script>
<body>
<form name="frm">
Enter a String:<input name="txt1" type="text" /><br><br>
Enter a Charatcer:<input name="txt2" type="text" />
/></form>
</BODY>
</HTML>
Q2. Create HTML page with following specifications

i) Title should be about your self.
ii) color the background should be pink.
iii) Place your name at the top of page in large text and centered.
iv) Add names of your family members each in different size, color,
style and font.
v) Add scrolling text about your family.
vi) Add any image at the bottom. (Use internal CSS to format the
web page)
<HTML>
<head><TITLE><CENTER>My Self</CENTER></TITLE>
22
<style>
body{background-color:pink;}
h1{text-align: center ; Color: red;}
.p1{text-align: center ; font-size: 6; color:green;}
.p2{text-align: center; font-size: 7; color:blue;}
div.ex1 {
background-color: lightblue;
width: 110px;
height: 110px;
overflow: scroll;
}
img {
border-radius: 4px;
padding: 5px;
width: 150px;
}
</style>
</head>
<body>
<h1> My name is : XYZ </h1>
<p class="p1"> My Father name is: PQR </p>
<p class="p2"> My Mother name is: ASD </p>
<div class="ex1"> My family is best.. fbvdf jvj jfbvj jnvvtrt bjn gbir jbt
tuhth hjih thjith 5ihji5 h5jhi5j h5jhi5yjh yhjiyjn</div>
<img src="smil.jpg"></img>
</body>
</HTML>
______________________________________________________
Slip 9
Q1. Write a java script program to accept a string and check

whether the input string is palindrome string or not.
23
<html>
<head>
<script>
function myFunction()
{
var str = document.getElementById('txtbox').value;
var orignalStr;
str = str.toLowerCase();
orignalStr = str;
//reverse the entered string
str = str.split(''); //split the entered string
str = str.reverse(); //reverse the order
str = str.join(''); //then join the reverse order array values
var reverseStr = str;
if(orignalStr == reverseStr){
alert("The Entered String is palindrom");
}else{
alert("The Entered String is not paliandrom");
}
}
</script>
</head>
<body>
<form >
<input type="text" id="txtbox" placeholder="Enter String" />
<input type="button" onclick="myFunction()" value="Check
Palindrome" />
</form>
</body>
</html>
Q2. Write the HTML code which generates the following output.(use
internal CSS to format the table
Country
Population (in Crores)
24
INDIA
1998
85
1999
90
2000
100
USA
1998
30
1999
35
2000
40
UK
1998
25
1999
30
2000
35
17
<html>
<head>
<style type="text/css">
table, th, td { border: 2px solid green ;}
</style>
</head>
<body>
<table>
<tr>
<th >Country</th>
<th colspan="2">Population (in Crores)</th>
</tr>
<tr>
25
<td rowspan="3">Indian</td>
<td>1998</td>
<td>85</td>
</tr>
<tr>
<td>1999</td>
<td>90</td>
</tr>
<tr>
<td>2000</td>
<td>100</td>
</tr>
<tr>
<td rowspan="3">USA</td>
<td>1998</td>
<td>30</td>
</tr>
<tr>
<td>1999</td>
<td>35</td>
</tr>
<tr>
<td>2000</td>
<td>40</td>
</tr>
</table>
</body>
</html>
_____________________________________________________
Slip 10
Q1. Write a JavaScript Program to read a number from user, store
its factors into the array and display that array. (Handle onClick
Event)
26
<html>
<head>
<script language="JavaScript">
function factors()
{
var n=form1.txtNum.value;
var num_factors = [], i;
for (i = 1; i <= Math.floor(Math.sqrt(n)); i += 1)
if (n % i === 0)
{
num_factors.push(i);
if (n / i !== i)
num_factors.push(n / i);
}
alert("factors are:"+" " + num_factors);
}
</script>
</head>
<body>
<form name="form1">
Enter the Number :
<input type="text" name="txtNum">
<input type="button" value="Display" onclick="factors();">
</form>
</body>
</html>
Q2. Write HTML code, which generates the following output, and
display each element of list in different size, color & font. Use inline
CSS to format the list.[25]
1. DYP
 Courses
 BCS
 BCA
2. Indira
27
 Courses
 BCA
 MCs
3. ATSS
 Courses
 BBA
 BCS
<html>
<head>
<style>
body
{
background-image: url("1.jpg");
}
ol{color:red;}
ul{color:blue;}
</style>
</head>
<body>
<ol type=1>
<li>DYP</li>
<ul type = "disc">
<li>COURSES</li>
<ul type = "square">
<li>BCS</li>
<li>BCA</li>
</ul>
</ul>
<li>Indira</li>
<ul type = "disc">
<li>COURSES</li>
<ul type = "square">
<li>BCA</li>
28
<li>MCS</li>
</ul>
</ul>
</ol>
</body>
</html>
Slip 11
Q1. Write a JavaScript program to accept a string and a position
(number) from user and display the character at specified position.
<html>
<body>
<script type = "text/javascript">
var str=new String(prompt("Enter a string"));
var no=new String(prompt("Enter the specific position"));
for(i=0;i<str.length;i++)
{
var ch=str.charAt(no);
break;
}
document.writeln("Characte at given postion is: " + ch);
</script>
</body>
</html>
Q2. Write HTML code which generates the following output and
display each element of list in different size, color & font. Use
external CSS to format the list
 Non flowering plants

o Fern
o Spore
 Flowering plants
 Lilly
 Rose
1. Red Rose
29
2. Pink Rose
Slip11.css
ul.u1 {
background: pink;
padding: 20px;
font-family : arial;
font-size : 20;
list-style-type:disc;
}
ul.u2 {
background: pink;
list-style-type: circle;
font-family : "Times new roman";
font-size : 25;
}
ul.u3 {
background: pink;
font-size : 27;
list-style-type: square;
}
ol.u4 {
background: pink;
font-size : 27;
list-style-type: decimal;
}
ul li {
background: lightblue;
margin: 5px;
font-size : 25;
}
Slip11.html
<html>
30
<head>
<link rel="stylesheet" href="slip11.css">
</head>
<body>
21
<ul class="u1">
<li>Non flowering plant</li>
<ul class="u2">
<li>Fern</li>
<li>Spore</li>
</ul>
<li> flowering plant </li>
<ul class="u3">
<li> Lilly</li>
<li> Rose </li>
<ol class="u4">
<li>Red Rose</li>
<li>Pink Rose</li>
</ol>
</ul>
</ul>
</body>
</html>
Slip 12
Q1. Design a student registration form with fields Name, Address,
city and Pin-Code. Write a java script program to perform following
validation
i. Check name should not be empty and contain alphabets only
ii. Pin-code must be 6 digits only
<html>
<head>
<title> Javascript Validation </title>
<script>
function validate()
{
31
sname=document.getElementById("nm").value;
smobile=document.getElementById("mb").value;
saddress=document.getElementById("add").value;
scity=document.getElementById("ct").value;
sstate=document.getElementById("st").value;
spin=document.getElementById("pin").value;
if(sname==""||smobile==""||saddress==""||scity==""||sstate==""||spin
=="")
{
alert("Fields should not be empty");
return false;
}
else if(!sname.match(/^[A-Za-z]+$/))
{
alert("Name should contain only characters")
return false;
}
else if(!smobile.match(/^\d{10}$/))
22
{
alert("Mobile number Not valid")
return false;
}
else if(!spin.match(/^\d{6}$/))
{
alert("Pin number Not valid")
return false;
}
alert("Valid");
return false;
}
</script>
<body>
<form name="frmStudent">
Student Registration Form<br><br>
32
Name of Student:<input type=text name=txtname id=nm
size=30><br><br>
Mobile No:<input type=text name=txtSmobile id=mb
size=30><br><br>
Address Line:<input type=text name=txtSaddress id=add
size=30><br><br>
City:<input type=text name=txtScity id=ct size=30><br><br>
State:<input type=text name=txtSstate id=st size=30><br><br>
Pincod:<input type=text name=txtSpin id=pin size=30><br><br>
<input type=submit value="Submit" onClick="return validate()">
<input type=reset value="Reset">
</form>
</body>
</html>
Slip 13
Q1. Design a login form with fields User Name, Password and
Login button. Write a java script code to accept username and
password, validate login details and display a message accordingly.
<html>
<head>
<title>Javascript Login Form Validation</title>
<script>
function validate()
{
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
var cpassword = document.getElementById("cpassword").value;
if (username=="" || password=="" || cpassword=="" )
{
alert ("Fields Should not b empty");
}
23
else if(password==cpassword)
{
alert("You entered all the details ");
33
return false;
}
else
alert("Password Fields doesn't match");
}
</script>
<body>
<h2>Javascript Login Form Validation</h2>
<form id="form_id" name="myform">
<label>User Name :</label>
<input type="text" name="username" id="username"/></br></br>
<label>Password :</label>
<input type="password" name="password"
id="password"/></br></br>
<label> Confirm Password :</label>
<input type="password" name="cpassword"
id="cpassword"/></br></br>
<input type="button" value="Login" id="submit"
onclick="validate()"/>
</form>
</body>
</html>
Q2. Write a HTML code which will divide web page in three frames.
First frame should consists of name of college as heading. Second
frame should consists of name of courses with hyperlink. Once click
on any course it should display subject of that course in third frame.
Heading.html
<html>
<body>
<h1 align="center"> RSSP Pune 17 <h1>
</body>
</html>
List.html
<html>
<body>
34
<ol type="1">
<li> <a href="BCA.html" target="frm3"> BCA </a></li>
<li>BCOM </li>
<li>BSC</li>
<li>BA </li>
</ol>
</body>
</html>
BCA.html
<html>
<body>
Bachelor in Computer Application (BCA) is an undergraduate
degree course in
24
computer applications.
With the rapid growth of IT industry in India, the demand of
computer professionalis increasing day by day.
This increasing growth of IT industry has created a lot of
opportunities for the computer graduates.
</body>
</html>
Frame.html
<html>
<frameset rows="20%,*">
<frame src="heading.html"></frame>
<frameset cols="40%,*">
<frame src="list.html"></frame>
<frame src="" name="frm3"></frame>
</frameset>
</frameset>
</html>
Slip 14
Q1. Write a HTML code to display the name of your family
members each in different color, size and style. Also display the
following polynomial expression
35
a0+a1x1+a2x2+a3x3+a4x4
<html>
<head>
<title> Polynomial Expression </title>
</head>
<body>
<H1>a<sub>0</sub> + a<sub>1</sub>x<sup>1</sup> +
a<sub>2</sub>x<sup>2</sup> + a<sub>3</sub>x<sup>3</sup>
</body>
</html>
Q2. Write a JavaScript Program to accept user name and password
from user, if User name and Password is same then display his
score card on the next page as shown below.
Password.html
<html>
<head>
<SCRIPT Language="JavaScript">
25
function checkLogin(x)
{
if (x.id.value!=x.pass.value)
{
alert("Invalid Login");
return false;
}
else
location="link.html"
}
</script>
</head>
<body>
<form>
<p>UserID:<input type="text" name="id"></p>
<p>Password:<input type="password" name="pass"></p>
36
<p><input type="button" value="Login"
onClick="checkLogin(this.form)"></p>
</form>
</body>
</html>
Link.html
<html>
<head></head>
<body>
<table bgcolor="pink" border="2">
<tr>
<th>sr no.</th>
<th>Subject</th>
<th>External Exam(Out of 80)</th>
<th>Internal(Out of 20)</th>
<th>Total Marks(out of 100)</th>
<th>Remark</th>
</tr>
<tr>
<th>501</th>
<th>core jave</th>
<th>56</th>
<th>15</th>
<th>71</th>
<th>pass</th>
</tr>
<tr>
<th>502</th>
<th>Web Technology</th>
<th>67</th>
<th>18</th>
26
<th>85</th>
<th>pass</th>
</tr>
37
<tr>
<th>503</th>
<th>.Net</th>
<th>70</th>
<th>19</th>
<th>89</th>
<th>pass</th>
</tr>
<tr>
<th>504</th>
<th>Object Oriented Software engineering</th>
<th>52</th>
<th>15</th>
<th>67</th>
<th>pass</th>
</tr>
<tr>
<th>505</th>
<th>project</th>
<th>-</th>
<th>-</th>
<th>-</th>
<th>-</th>
</tr>
<tr>
<th>506</th>
<th>practical</th>
<th>-</th>
<th>-</th>
<th>-</th>
<th>-</th>
</tr>
</table>
</body>
</html>
38
Slip 15:
Q1. Write a JavaScript program to Display current Day, Date,
Month, Year and Time on the web page and greet the user
accordingly.
<html>
<body>
dt = new Date();
month = dt.getMonth()+1;
27
day = dt.getDate();
year = dt.getFullYear();
alaert(day+':'+month+':'+year);
var h=dt.getHours();
if(h>=5 && h<12)
{
alert("Good Morning "+"Timing: "+h);
}
else
if(h>=12 && h<17)
{
alert("Good Afternoong"+"Timing: "+h);
}
else
if(h>=17 && h<21)
{
alert("Good Evening"+h);
}
else
{
alert("Good Night"+h);
}
</script>
</body>
</html>
39
Q2. Create HTML page with following specifications
i) Title should be about your City.
ii) Color the background by Pink color.
iii) Place your city name at the top of page in large text and in blue
color.
iv) Add names of the landmarks in your city, each in different color,
style and font
v) Add scrolling text about your City.
vi) Add any image at the bottom.
(Use inline CSS to format the web page)
<HTML>
<head><TITLE><CENTER>My City</CENTER></TITLE>
</head>
<body style="background-color:pink;">
<h1 style="text-align: center ; Color: blue;"> My City name: Pune
</h1>
<h1 style="font-size=30; color: powderblue; "> ::Pune city
Landmarks:: </h1>
<ul >
<li style="color : blue; font-size=20; font-family:verdana;">National
Defence Academy</li>
<li style="color : red; font-size=21; font-family:arial;">Dagadusheth
Halwai Ganapati Temple</li>
<li style="color : green ;font-size=19; font-family:courier;">ISKCON
NVCC
28
Temple</li>
<li style="color : yellow; font-size=22; font-family:Calibri;">Pune
University</li>
</ul>
<div style="background-color: lightblue;width: 210px; height: 210px;
overflow: scroll;">
Pune, also called ‘Poona’, is situated in the state of Maharashtra,
India.
40
It is also known as the ‘Queen of the Deccan’ and attained its high
importance when it became the capital
of Bhonsle Marathas in the 17th century.
</div>
<img style="border: 1px solid red; border-radius: 4px; padding: 5px;
width: 150px;" src="puneimage.jpg"></img>
</body>
</HTML>
Slip 16:
Q.1 Write a java script code to accept a sentence from the user and
alters it as follows: Every space is replaced by * and digits are
replaced by?
<HTML>
<script>
function find()
{
var n = str.length;
var i,ch,j;
for(i=0;i<n;i++)
{
str = str.replace(" ", "*");
str = str.replace(/[0-9]/g, "?")
}
alert(str);
}
</script>
<form name="frm">
/></form>
</BODY>
</HTML>
Q.2 Write HTML code, which generates the following output, and
41
display each element of list in different size, color & font. Use inline
CSS to format the list.[25]
 Honda
 Petrol
1. Honda City
2. Brio
 Diesel
29
1. Amaze
2. Brio
 Maruti-Suzuki
 Petrol
1. Swift
2. Ritz
 Diesel
1. Swift-Desire
<html>
<head>
</head>
<body>
<ul style="color : blue;padding: 20px; font-size=20; font-
family:verdana;">
<li >Honda</li>
<ul style="color:green; list-style-type: square; font-size=19; font-
family:courier;">
<li >Petrol </li>
<ol style="color: red; font-size=18;font-family: arial ;">
<li> Honda City</li>
<li> Brio</li>
</ol>
<li> Diesel </li>
<ol style="color: powderblue; font-size=17;font-family:verdana;">
<li> Amaze</li>
<li> Brio</li>
42
</ol>
</ul>
<li >Maruti-Suzuki</li>
<ul style="color: green; list-style-type: square;font-size=19; font-
family:courier;">
<li >Petrol </li>
<ol style="color:red;font-size=18;font-family: arial">
<li> Swift City</li>
<li> Ritz</li>
</ol>
<li> Diesel </li>
<ol style="color: powderblue;font-size=17; font-family:verdana;">
<li> Swift-Desire</li>
</ol>
</ul>
</ul>
</body>
</html>
Slip 17:
Write a java script code to accept a string from user and display the
occurrences of every vowel character from string [15]
<HTML><body>
<script>
function find()
30
{
var vowels = 0;
var consonant = 0;
var specialChar = 0;
var digit = 0;
var n = str.length;
var i;
for (i = 0; i < n; i++)
{
43
var ch = str[i];
if ( (ch >= 'a' && ch <= 'z') || (ch >= 'A' && ch <= 'Z') )
{
if (ch == 'a' || ch == 'e' || ch == 'i' || ch == 'o' || ch == 'u' || ch == 'A' ||
ch == 'E' || ch == 'I' || ch == 'O' || ch == 'U')
vowels++;
else
consonant++;
}
else if (ch >= '0' && ch <= '9')
digit++;
else
specialChar++;
}
alert( "Vowels: " + vowels + "Consonant:" + consonant +"Digit:" +
digit +"Special Character:" + specialChar ) ;
}
</script>
<form name="frm">
/></form>
</BODY>
</HTML>
Q2. Design an HTML form for customer registration visiting a
departmental store. Form should consists of fields such as name,
contact no, gender, preferred days of purchasing, favorite item (to
be selected from a list of items), suggestions etc. You should
provide button to submit as well as reset the form contents.[25]
<html>
<body>
<form>
<h1>Customer Registration</h1>
<table border=1>
<tr>
44
<td>Name </td>
31
<td><input type="text" size="20">
</tr>
<tr>
<td>Contact no </td>
</tr>
<tr>
<td>Gender</td>
<td><input type="radio" size="20">male <input type="radio"
size="20">female</td> </tr>
<tr>
<td>days of purchasing</td>
</tr>
<tr>
<td>favorite item</td>
<td><select name="example">
<option value="item1">Item 1
</select>
</tr>
<tr>
<td>Suggestion</td>
<td><textarea rows="4" cols="50"></textarea
</tr>
<tr>
<td><input type="reset" value="Reset"></td>
<td><input type="submit" value="Submit"></td>
</tr>
</table>
</form>
</body>
45
</html>
Slip 18:
Q1. Write a java script program to accept the value of n and display
all odd numbers up to n.
<HTML><body>
<script>
function find()
{
var sum=0;
for(i=1;i<=no;i++)
{
if (i%2!=0)
document.write(i+",");
}
32
}
</script>
<form name="frm">
/></form>
</BODY>
</HTML>
Q2. Write the HTML code, which generates the following output.
(Use external CSS to format the given table)
Book_No
Book_Name
Price
RS
Paise
101
DBMS
200
50
46
102
C-Prog
150
75
103
JAVA
300
00
104
PHP
250
50
105
ASP
100
00
Table.css
table{
border:5px solid red;
}
th
{
border:3px solid blue;
text-align:center;
color:green;
font-size:15px;
}
td
{
border:3px solid yellow;
font-size:11px;
color:blue;
}
Slip18.html
<html>
47
<head>
<link rel="stylesheet" href="table.css">
</head>
<body>
<table>
<tr>
<th rowspan="2">Book_No</th>
<th rowspan="2">Book_Name</th>
<th colspan="2">Price</th>
33
</tr>
<tr>
<th>RS</th>
<th>Paise</th>
</tr>
<tr>
<td>101</td>
<td>DBMS</td>
<td>200</td>
<td>50</td>
</tr>
</table>
</body>
</html>
Slip 19:
Q1. Write a java script code to accept a number form user and
display its factorial.
<html>
<head>
<script>
function show()
{
var i, no, fact;
fact=1;
no=Number(document.getElementById("num").value);
48
for(i=1; i<=no; i++)
{
fact= fact*i;
}
document.getElementById("answer").value= fact;
}
</script>
</head>
<body>
Enter Num: <input id="num">
<button onclick="show()">Factorial</button>
<input id="answer">
</body>
</html>
Q2. Design an HTML form to take the information of a customer for
booking a travel plan consisting of fields such as name, address,
contact no., gender, preferred season(Checkboxes), location
type(to be selected from a list) etc. You should provide button to
submit as well as reset the form contents. (All the fields should be
properly aligned)
<html>
<body>
<form>
<h1>Information of a Customer for booking a travel plan </h1>
34
<table border=1>
<tr>
<td>Name </td>
</tr>
<tr>
<td>Address</td>
<td><textarea rows="4" cols="50"></textarea
</tr>
<tr>
49
<td>Contact no </td>
</tr>
<tr>
<td>Gender</td>
<td><input type="radio" size="20" name="radio1">male <input
type="radio" size="20" name="radio1">female</td> </tr>
</tr>
<tr>
<td>Preferred Season</td>
<td><input type="Checkbox" size="20">Winter<input
type="Checkbox" size="20">Summer</td> </tr>
</tr>
<tr>
<td>Location Type</td>
<td><select name="example">
<option value="item1">UK
<option value="item2">US
<option value="item3">Italy
</select>
</tr>
<tr>
<tr>
<td><input type="reset" value="Reset"></td>
<td><input type="submit" value="Submit"></td>
</tr>
Slip 20:
Q1. Write a java script code to accept a number n from user and
display first n terms of Fibonacci series
<html>
<head>
<title> fibonacci.html </title>
</head>
<script type="text/javascript">
50
var limit = prompt("Enter the limit 'n' to generate the fibonacci
series:", " ");
var f1=0;
var f2=1;
35
document.write("The limit entered to generate the fibonacci series
is: ",limit, "<br/>");
document.write("The fibonacci series : ");
document.write("",f1," ");
var i,f3;
for(i=2; i<limit; i++)
{
f3=f1+f2;
f1=f2;
f2=f3;
}
</script>
</body>
</html>
Slip 21:
Q1. Write a java script code to accept the values of x and y and
then display xy
<HTML><body>
<script>
function find()
{
var power=1;
var no1=parseInt(frm.txt1.value);
while (no2>0)
{
power = power*no1;
--no2;
51
document.getElementById("answer").value= power;
}
}
</script>
<form name="frm">
Enter a 1st Number:<input name="txt1" type="text" /><br><br>
Enter a 2nd Number:<input name="txt2" type="text" /><br>
/></form><br>
<label> Volume: </label><input type="text" id="answer"
size="30"/><br>
</BODY>
</HTML>
Q2. Write HTML code, which generates the following output, and
display each element of list in different size, color & font. Use
internal CSS to format the list.
o Coffee
o Tea
 Black Tea [25]
 Green Tea
36
1) Africa
2) China
<html>
<head>
<style>
ul.u1 {
background: blue;
padding: 20px;
}
ul.u2 {
background: blue;
list-style-type: square;
}
ol {
52
background: blue;
}
ul li {
background: lightblue;
margin: 5px;
}
</style>
</head>
<body>
<ul class="u1">
<li>Coffee</li>
<li>Tea</li>
<ul class="u2">
<li>Black Tea</li>
<li> Green Tea</li>
<ol>
<li>Africa</li>
<li>China</li>
</ol>
</ul>
</ul>
</body>
</html>
Slip 22:
Q1. Write a java script code to accept a string and write a function
to calculate length of string
<HTML>
<script>
function find()
{
37
var n = str.length;
alert("length of string is: "+n);
}
53
</script>
<form name="frm">
/></form>
</BODY>
</HTML>
Slip 23:
Q1. Write a java script code to accept a number and write a function
to calculate sum of digits of that number [15]
<HTML><body>
<script>
function find()
{
var sum=0;
while(no>0)
{
sum=sum+no%10;
no=Math.floor(no/10);
}
alert("Sum of digits "+sum);
}
</script>
<form name="frm">
/></form>
</BODY>
</HTML>
Q2. Write HTML code to create following table. (use External CSS
to format the table) [25]
Course
Fee Structure
Year
54
FY
SY
TY
B.Sc.(CS)
20000
25000
30000
2017
BCA(Sci)
15000
20000
25000
2018
BBA(CA)
25000
30000
35000
2019
38
Slip23.css
table{
border:5px solid red;
}
th
{
border:3px solid blue;
text-align:center;
color:green;
font-size:15px;
}
td
{
border:3px solid yellow;
font-size:11px;
color:blue;
55
}
Slip23.html
<html>
<head>
<link rel="stylesheet" href="slip23.css">
</head>
<body>
<table border=1>
<tr>
<th ROWSPAN="2">Course</th>
<th colspan="3">Fee Structure</th>
<th ROWSPAN="2">year</th>
</tr>
<tr>
<th>Fy</th>
<th>Sy</th>
<th>Ty</th>
</tr>
<tr>
<td>BSC</td>
<td>20</td>
<td>25</td>
<td>30</td>
<td>2017</td>
</tr>
<tr>
<td>BCA</td>
<td>20</td>
<td>25</td>
39
<td>30</td>
<td>2017</td>
</tr>
</table>
</body>
56
</html>
Slip 24:
Q1. Write a java script code to accept a number from user and write
a function to calculate sum of all odd digits of that number.
<HTML><body>
<script>
function find()
{
var sum=0;
for(i=2;i<=no;i++)
{
if (i%2!=0)
sum=sum+i;
}
document.write("sum of odd number: "+sum);
}
</script>
<form name="frm">
/></form>
</BODY>
</HTML>
Q2. Write html code to display following list. (use internal CSS to
format the list)
i. Arts [25]
 BA
 MA
ii. Commerce
 Bcom
 Mcom
iii. Science
 B.Sc.
57
 M.Sc.
Slip 25:
Q1. Write a JavaScript function that reverse a input number
<html>
<head>
<script>
function palin()
{
40
var a,no,temp=0;
no=Number(document.getElementById("no_input").value);
while(no>0)
{
a=no%10;
no=parseInt(no/10);
temp=temp*10+a;
}
alert(temp);
}
</script>
</head>
<body>
Enter any Number: <input id="no_input">
<button onclick="palin()">Check</button></br></br>
</body>
</html>
Q2. Write HTML and CSS code to design a web page. Divide the
browser screen into two frames. The first frame will display the
heading. The second frame contains a menu consisting of
hyperlinks. Clicking on any one of these hyperlinks will display
related information in a new page [25]
Slip26.css
ul.u1 {
font-size: 18;
list-style-type:square;;
58
}
Heading.html
<html>
<h1 align=center>IT Industries in INDIA</h1>
</html>
Pune.html
<html>
<h1> Pune </h1>
<li>Infosys</li>
<li>TCS</li>
<li>Tech mahindra</li>
<li>Persistent</li>
</ul>
</html>
Ban.html
<html>
<h1> Banglore </h1>
<li>Infosys</li>
41
<li>TCS</li>
<li>Tech mahindra</li>
<li>Persistent</li>
</ul>
</html>
List.html
<html>
</title>
<head>
<link rel="stylesheet" href="style.css">
</head>
</title>
<h2><i>City</i><h2>
<ul class="u1">
59
<li><a href="pune.html" target="_blank">Pune</a>
<li><a href="ban.html" target="_blank"3>Banglore</a>
</ul>
</html>
Slip 27:
Q1. Write a JavaScript function to compute the sum of factors of a
input number
<HTML><body>
<script>
function find()
{
var sum=0;
for (i = 1; i <= no; ++i)
{
if (no % i == 0)
{
sum=sum+i;
}
}
document.write("sum of factorial of a number is: "+sum);
}
</script>
<form name="frm">
Enter a 1st Number:<input name="txt1" type="text" /><br><br>
/></form><br>
</BODY>
</HTML>
Q2. Write a HTML code to display calendar of current month in
tabular format. Use proper color for week days and holidays.
Display month name, year and images as advertisement at the
beginning of the calendar.
<HTML>
<HEAD>
60
42
<TITLE> Calendar </TITLE>
</HEAD>
<BODY background=”abc.jpg”>
<TABLE Cellpadding=”10" border=2>
<CAPTION><H1>January 2020</H1></CAPTION>
<TR>
<TH><font
color="red">SUN</TH><TH>MON</TH><TH>TUS</TH>
<TH>WED</TH><TH>THU</TH><TH>FRI</TH><TH>SAT</TH>
<TR>
<TR>
<TH> </TH><TH> </TH><TH> </TH><TH>1</TH>
<TH>2</TH><TH>3</TH><TH>4</TH>
<TR>
<TR>
<TR>
<TR>
<TR>
<TR>
<TR>
<TR>
<TH>30</TH><TH> </TH><TH> </TH><TH> </TH>
<TR>
</TABLE>
</BODY>
</HTML>
Slip 28:
61
Q1. Write a JavaScript program to construct the following pattern up
to n lines, using a nested for loop.
*
**
***
<HTML>
<head>
<script>
function find()
{
for (i=1; i<=no1; ++i)
43
{
for (j=1; j<=i; ++j)
{
document.write("* ");
}
document.write("<br>");
}
}
</script>
</head>
<body>
<form name="frm">
Enter a Number:<input name="txt1" type="text" /><br><br>
/></form>
</BODY>
</HTML>
Slip 29:
Q1. Write a JavaScript function that accept three numbers and
display the larger number
<html>
<head>
62
var a,b,c;
a=parseInt(prompt("Enter the value of a:"));
b=parseInt(prompt("Enter the value of b:"));
C=parseInt(prompt("Enter the value of c:"));
if((a>b)&&(a>c))
document.write("Max Value="+ a +"<br>");
else if((b>a)&&(b>c))
document.write("Max Value="+ b +"<br>");
else
document.write("Max Value="+ C +"<br>");
</script>
</head>
<body>
</body>
</html>
Slip 30:
A
BC
DEF
<HTML>
<head>
44
<script>
function find()
{
var ch=65;
for (i=1; i<=no1; ++i)
{
for (j=1; j<=i; ++j)
{
document.write(String.fromCharCode(ch++));
63
}
}
}
</script>
</head>
<body>
<form name="frm">
/></form>
</BODY>
</HTML>
AABABCABCD
<HTML>
<head>
<script>
function find()
{
for (i=1; i<=no1; ++i)
{
var ch=65;
for (j=1; j<=i; ++j)
{
document.write(String.fromCharCode(ch++));
45
}
}
}
</script>
</head>
64
<body>
<form name="frm">
/></form>
</BODY>
</HTML>
65

Web Tech Programs & Solutions

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

Web Tech Programs & Solutions

Uploaded by

Copyright:

Available Formats

Class: SYBCA 2022

Web Tech Practical Slips Solution

Book_No Book_Name Price

102 C-Prog 150 75

103 JAVA 300 00

104 PHP 250 50

105 ASP 100 00

Q2. Write HTML code to design a web as per given specification.

i) Put image in the background

- M.A. (Economics, Marathi, Geography, History, Hindi) P.G

Q2. Write HTML code to design a website for Online Shopping.

Q2. Write a HTML code to display calendar of current month in

Q2. Write a HTML code to display Theory Time Table of FYBCA

Q2. Create HTML page with following specifications

Q1. Write a java script program to accept a string and check

 Non flowering plants

You might also like