Web Programs 6th Sem

1.
write a html program to demonstrate ordered list, unordered list and

definition list
<html>
<body>
<ul>
<li> BCA </li>
<li> BCOM</li>
<li> BBA </li>
</ul>
<ol>
<li> CAT </li>
<li> DOG</li>
<li> PIG </li>
</ol
<dl>
<dt> coffee </dt>
<dd> black hot drink </dd>
<dt>milk </dt>
<dd> white cold drink </dd>
</dl>
</body>
</html>
2. Write a program to generate Fibonacci series

<html>
<head>
<script>
var x = parseInt(prompt("enter no of fibonacci series "));
fibonacci(x);
function fibonacci(x){
var n1= 0;
var n2= 1;
var text = "";
var n3=0;
var i =0;
if(x===0)
document.write("enter number greater than 0");
else if(x===1)
document.write("the first fibonacci number is 0");
else if(x===2)
document.write("the first two numbers are 0 and 1");
else if(x>=3){
text += n1 + "<br>";
text += n2 + "<br>";
for(i=0; i<x-2; i++){
n3= n1+n2;
text += n3 + "<br>";
n1= n2;
n2= n3;
}
document.write(text);
}
}
</script>
</head>
</html>
3. write a html code to demonstrate the use of frames
Frames.html
<html>
<head>
</head>
<frameset frameborder = "1" rows ="30%, 70%" cols ="70%, 30%" >
<frame src="registerform.html" scrolling ="no" />
<frame src="forms.html" scrolling ="yes" />
<frame src="forms.html" scrolling ="yes" />
<frame src="registerform.html" scrolling ="yes" />
</frameset>
</html>
Forms.html
<html>
<head>
<title> Registration Form </title>
</head>
<body >
<form name ="myform">
<h1> Contact US </h1>
<table>
<tr>
<td style = "color: green; font-size: 30; font-weight:bold"> Name: </td>
<td> <input type = "text" size = "50" maxlength = "50"/> </td>
</tr>
<tr>
<td> EMAIL: </td>
<td> <input type = "password" size = "50" maxlength = "250"/> </td>
</tr>
<tr>
<td> About Yourself: </td>
<td> <textarea cols="100" rows ="10"></textarea> </td>
</tr>
<tr>
<td> Languages Known : </td>
<td><label>C++ <input type = "checkbox" checked = "checked" value = "C++"/> </label></td>
</tr>
<tr>
<td> </td>
<td style = "font-size:10"><label> <input type = "checkbox" value = "C" />C </label> </td>
</tr>
<tr>
<td> </td>
<td><label> <input type = "checkbox" value = "Java"/>JAVA </label> </td>
</tr>
<tr>
<td> </td>
<td><label> <input type = "checkbox" value = "Python"/>Python </label> </td>
</tr>
<tr> <td> Qualification </td>

<td><label> <input type = "radio" value= "BE"/> BE </label> <td>
</tr>
<tr>
<td> </td>
<td><label> <input type = "radio" value = "BCA"/>BCA </label> </td>
</tr>
<tr>
<td> </td>
<td><label> <input type = "radio" value = "BSC"/>BSC </label> </td>
</tr>
<tr>
<td> How did you know about us? </td>
<td>
<select>
<option> GOOGLE </option>
<option value= "add"> Local newspaper add
</option>
<option value= "friend"> Friend </option>
<option value= "TV"> Television adds </option>
<option value= "other"> OTHERS </option>
</td>
</tr>
<tr>
<td> Newsletter </td>
<td> <input type = "checkbox" checked="checked" />
Ensure this box is checked if you would like to recieve email updates
</td>
</tr>
</table>
</form>
</body>
</html>
4. write a html code to create a document with paragraph, preformatted
text, image, hyperlinks
<html>
<body>
<h1>Web Programming</h1>
<h5>Web Programming</h5
<p> The official journey of Azadi Ka Amrit Mahotsav commenced on

March 12, 2021, which started a 75-week countdown to the 75th anniversary of
India's independence and will end post a year on August 15, 2023
</p>
<pre>
The official journey of Azadi Ka Amrit Mahotsav commenced on
March 12, 2021, which started a 75-week countdown to the 75th anniversary of
India's independence and will end post a year on August 15, 2023
<pre>
<img src="img_girl.jpg" alt="Girl in a jacket">
<a href="https://www.google.com/">Visit google.com!</a>

</body>
</html>
5. Write a html code to demonstrate inline, internal and external styling

Style.css
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
home.html
<html>
<head>
<link rel="stylesheet" href="styles.css">
<style>. (External styling)
body {background-color: powderblue;}
h2 {color: blue;}
h5 {color: red;}. (Internal styling)
</style>
</head>
<body>
<h5>Web Programming</h5
<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>
</body>. (Inline styling)
</html>
6. write a html code to create a registration form collecting all details of a

student
<html>
<head>
<title> Registration Form </title>
<link rel ="stylesheet" type= "text/css" href = "style.css" />
<script type = "text/javascript">
function countformelements(){
alert("the number of form elements are : " + document.myform.length);
}
</script>
</head>
<body >
<form name ="myform">
<h1> Contact US </h1>
<table>
<tr>
<td style = "color: green; font-size: 30; font-weight:bold"> Name: </td>
<td> <input type = "text" size = "50" maxlength = "50"/> </td>
</tr>
<tr>
<td> EMAIL: </td>
<td> <input type = "password" size = "50" maxlength = "250"/>
</td>
</tr>
<tr>
<td> About Yourself: </td>
<td> <textarea cols="100" rows ="10"></textarea> </td>
</tr>
<tr>
<td> Languages Known : </td>
<td><label>C++ <input type = "checkbox" checked = "checked"
value = "C++"/> </label>
</td>
</tr>
<tr>
<td> </td>
<td style = "font-size:10"><label> <input type = "checkbox" value =
"C" />C </label>
</td>
</tr>
<tr>
<td> </td>
<td><label> <input type = "checkbox" value = "Java"/>JAVA </label>
</td>
</tr>
<tr>
<td> </td>
<td><label> <input type = "checkbox" value = "Python"/>Python
</label>
</td>
</tr>
<tr> <td> Qualification </td>

<td><label> <input type = "radio" value= "BE"/> BE </label> <td>
</tr>
<tr>
<td> </td>
<td><label> <input type = "radio" value = "BCA"/>BCA </label>
</td>
</tr>
<tr>
<td> </td>
<td><label> <input type = "radio" value = "BSC"/>BSC </label> </td>
</tr>
<tr>
<td> How did you know about us? </td>
<td>
<select>
<option> GOOGLE </option>
<option value= "add"> Local newspaper add </option>
<option value= "friend"> Friend </option>
<option value= "TV"> Television adds </option>
<option value= "other"> OTHERS </option>
</td>
</tr>
<tr>
<td> Newsletter </td>
<td> <input type = "checkbox" checked="checked" />
Ensure this box is checked if you would like to recieve email updates </td>
</tr>
</table>
<input type ="submit" value="Send Message" onclick = "countformelements()"/>
</form>
</body>
</html>
7. Write a javascript program to find the factorial of a number

<html>
<head>
<script>
var x= parseInt(prompt("enter a number to find factorial"));
var fact = factorial(x);

document.write(fact);
function factorial(x){
if(x===0)
return 0;
else if(x===1)
return 1;
else
return x * factorial(x-1);
}
</script>
</head>
<body>
</body>
</html>
</head>
</html>
8. write a HTML program to evaluate a expressison

<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript">
function evaluate111(){
var enteredexpr = document.getElementById("exp").value;
document.getElementById("result").value = eval(enteredexpr);
}
</script>
</head>
<body>
<form>
Enter any expression : <input type = "text" id = "exp"/> <br/> <br/> <br/>
<input type = "button" value = "evaluate" onclick = "evaluate111()"/> <br/> <br/> <br/>
Result of expression : <input type = "text" id = "result"/>
</form>
</body>
</html>
9. Write a HTML program to calculate PF, TA, salary of a Employee

<html>
<head>
<script type="text/javascript">
function cal_pay(){
var name = document.getElementById("name").value;
var empno = document.getElementById("empno").value;
var basic = parseInt(document.getElementById("basic").value);
var hra = basic*0.4;

var da = basic*0.6;
var gross = basic+hra+da;
var pf = gross*0.13;
var tax = gross*0.2;
var deduction = pf+tax;
var netsalary = gross-deduction;
document.writeln("<table border = 2>");

document.writeln("<tr><th> EMPLOYEE SALARY BREAKUP DETAILS </th></tr>");
document.writeln("<tr><td> EMPLOYEE Name </td><td>" +name+"</td></tr>");
document.writeln("<tr><td> EMPLOYEE No </td><td>" +empno+"</td></tr>");
document.writeln("<tr><td> EMPLOYEE BASIC </td><td>" +basic+"</td></tr>");
document.writeln("<tr><td> EMPLOYEE HRA </td><td>" +hra+"</td></tr>");
document.writeln("<tr><td> EMPLOYEE DA </td><td>" +da+"</td></tr>");
document.writeln("<tr><td> EMPLOYEE GROSS</td><td>" +gross+"</td></tr>");
document.writeln("<tr><td> EMPLOYEE PF </td><td>" +pf+"</td></tr>");
document.writeln("<tr><td> EMPLOYEE TAX </td><td>" +tax+"</td></tr>");
document.writeln("<tr><td> EMPLOYEE DEDUCTION </td><td>"
+deduction+"</td></tr>");
document.writeln("<tr><td> EMPLOYEE NETSALARY </td><td>"
+netsalary+"</td></tr>");
document.writeln("</table>");
}
</script>
</head>
<body>
<form>
<table>
<tr> <td> EMPLOYEE NAME </td> <td> <input type = "text" id ="name" /> </td> </tr> </br>
<tr> <td> EMPLOYEE NUMBER </td> <td> <input type = "text" id ="empno" /> </td>
</tr> </br>
<tr> <td> BASIC PAY </td> <td> <input type = "text" id ="basic" /> </td> </tr>
<tr> <td> </td> <td> <input type = "button" value ="Submit" onClick="cal_pay()"/> </td>
</tr>
</table>
</form>
</body>
</html>
10. Write a HTML program to calculate average marks and grade student
<html>
<head>
<script type="text/javascript">
function cal_average(){
var name = document.getElementById("name").value;
var m1 = parseInt(document.getElementById("m1").value);
var avg = (m1+m2+m3)/ 3;
if(avg >= 75)

alert( name + " scored First Class with Distinction"+ "\n Average marks is " + avg);
else if(avg >=60 && avg < 75)
alert(name + " scored First Class"+ "\nAverage marks is " + avg);
else if(avg >=50 && avg <60)
alert (name +" scored Second class"+ + "\nAverage marks is " + avg);
else
alert (name + " Failed" + " " + "\n marks is " + avg);
}
</script>
</head>
<body>
<form>
<table>
<tr> <td> NAME </td> <td> <input type = "text" id ="name" /> </td> </tr> </br>
<tr> <td> COURSE </td> <td> <input type = "text" id ="COURSE" /> </td> </tr>
</br>
<tr> <td> INTERNAL MARKS 1 </td> <td> <input type = "text" id ="m1" /> </td> </tr>
<tr> <td> INTERNAL MARKS 2</td> <td> <input type = "text" id ="m2" /> </td> </tr>
<tr> <td> INTERNAL MARKS 3</td> <td> <input type = "text" id ="m3" /> </td> </tr>
<tr> <td> </td> <td> <input type = "button" value ="Submit" onClick="cal_average()"/> </td>
</tr>
</table>
</form>
</body>
</html>
11. Write a HTML program to demonstrate different types of dialogue boxes.

<html>
<body>
<h1>Confirm Dialogue Box() </h1>
<button onclick="save()">Save Data</button>
<p id="msg"></p>
<h1>Alert Dialogue Box()</h1>

<button onclick="displayInfo()">Alert Messages</button>
<h1>Prompt Dialogue Box()</h1>

<button onclick="myinput()">Click to enter your name</button>
<p id="namemsg"></p>
<script>
function save(){
var usermsg;
if (confirm("Do you want to save changes?") == true) {
usermsg = "Data saved successfully!";
} else {
usermsg = "Save Canceled!";
}
document.getElementById("msg").innerHTML =usermsg;
}
function displayInfo(){
alert("This is an alert message box."); // display string message
alert('This is a numer: ' + 100); // display result of a concatenation
alert(100); // display number
alert(Date()); // display current date
}
function myinput(){
var name = prompt("Enter Your Name:");
if (name == null || name == "") {

document.getElementById("namemsg").innerHTML = "You did not
enter anything. Please enter your name again";
}
else
{
document.getElementById("namemsg").innerHTML = "You entered:
" + name;
}
}
</script>
</body>
</html>
12. Write a JAvascript program to perform arithmetic operations
<!doctype html>
<html>
<head>
<script>
var numOne, numTwo, res, temp;
function fun()
{
numOne = parseInt(document.getElementById("one").value);
numTwo = parseInt(document.getElementById("two").value);
if(numOne && numTwo)
{
temp = document.getElementById("res");
temp.style.display = "block";
res = numOne + numTwo;
document.getElementById("add").value = res;
res = numOne - numTwo;
document.getElementById("subtract").value = res;
res = numOne * numTwo;
document.getElementById("multiply").value = res;
res = numOne / numTwo;
document.getElementById("divide").value = res;
}
else {
alert("enter both the numbers");
}
}
</script>
</head>
<body>
<p id="input">Enter First Number: <input id="one">

<br/><br/>
Enter Second Number: <input id="two"></p>
<p><button onclick="fun()">Add, Subtract, Multiply, Divide</button></p>
<p id="res" style="display:none;">

Addition Result = <input id="add"><br/><br/>
Subtraction Result = <input id="subtract"><br/><br/>
Multiplication Result = <input id="multiply"><br/><br/>
Division Result = <input id="divide"></p>
</body>
</html>
13. Write a HTML program of a Restaurant

<html>
<head>
<script type ="text/javascript">
function findcost(){
var major =document.getElementById("major");
var starters =document.getElementById("starters");
var soft =document.getElementById("soft");
var selectedItems ="Items \t\t\t Price \n...................\n";

var totalcost=0;
for(var i=0; i<major.options.length; i++){

var option = major.options[i];
if(option.selected ==true){
var price = parseInt(option.value);
totalcost =totalcost+price;
selectedItems= selectedItems+option.text +"\t\t" +price+ "\n";
}
}
for(var i=0; i<starters.options.length; i++){

var option = starters.options[i];
}
}
for(var i=0; i<soft.options.length; i++){

var option = soft.options[i];
}
}
selectedItems= selectedItems+"\n\n Total Cost \t\t" +totalcost;

document.getElementById("ordereditems").value = selectedItems;
</script>
</head>
<body>
<form name ="menuForm">
<table border = "10">
<tr> <th colspan ="2" align ="center"> <h2> Restaurant Menu Details </h2></th> </tr>
<tr>
<td> Major Dishes </td>
<td>
<select id ="major" size ="3" >
<option value="100"> Vegetable pulav- Rs.100 </option>
<option value="150"> Biriyani- Rs. 150 </option>
<option value="50"> Roti Curry - Rs.50</option>
</select>
</td>
</tr>
<tr>
<td> Starters </td>
<td>
<select id ="starters" size ="3" multiple ="multiple">
<option value="100"> Gobi Manchurian </option>
<option value="150"> Veg Clear Soup </option>
<option value="50"> MAsala Papad </option>
</select>
</td>
</tr>
<tr>
<td> Soft Drinks </td>
<td>
<select id ="soft" size ="3" multiple ="multiple">
<option value="20"> Pepsi </option>
<option value="15"> Sprite </option>
<option value="50"> Lime Soda </option>
</select>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<textarea id="ordereditems" rows="10" cols="40"></textarea>
</td>
</tr>
<tr>
<td> <input type="button" value="Find Total Cost" onclick="findcost()"/> </td>
<td> <input type="reset" value="Clear"/> </td>
</tr>
</table>
</form>
</body>
</html>
14. Write a HTML program to find the sum of n natural numbers

<!DOCTYPE HTML>
<html>
<head>
<title> Factorial </title>
<script>
function factorial(){
var n= parseInt(document.getElementById("one").value);
var sum = (n*(n+1))/2;
document.getElementById("two").value = sum;
}
</script>
</head>
<body>
<label> Enter number </label> <input type = "text" id="one"/>

<button onclick="factorial()"> CLick ME </button>
</br>
<label> SUM = </label> <input type ="text" id ="two"/>
</body>
</html>
15. Write a javascript program to dynamically change background and foreground colors
<html>
<head>
<title> Color demonstration </title>
<script>
function changeColor(whatToChange, newColor){
if(whatToChange=="background")
document.body.style.backgroundColor = newColor;
else
document.body.style.color=newColor;
}
</script>
</head>
<body>
<p> This is a simple paragraph </p> <br/>
<form>
<label> Enter Foreground color : </label>
<input type="text" onchange="changeColor('foreground', this.value)"/> <br/><br/>
<label> Enter Backgound color : </label>
<input type="text" onchange="changeColor('background', this.value)"/> <br/><br/>
</form>
</body>
</html>

Web Programs 6th Sem

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

Web Programs 6th Sem

Uploaded by

Copyright:

Available Formats

1.

write a html program to demonstrate ordered list, unordered list and

2. Write a program to generate Fibonacci series

<tr> <td> Qualification </td>

<p> The official journey of Azadi Ka Amrit Mahotsav commenced on

<img src="img_girl.jpg" alt="Girl in a jacket">

<a href="https://www.google.com/">Visit google.com!</a>

5. Write a html code to demonstrate inline, internal and external styling

6. write a html code to create a registration form collecting all details of a

<tr> <td> Qualification </td>

7. Write a javascript program to find the factorial of a number

var x= parseInt(prompt("enter a number to find factorial"));

var fact = factorial(x);

8. write a HTML program to evaluate a expressison

9. Write a HTML program to calculate PF, TA, salary of a Employee

var hra = basic*0.4;

document.writeln("<table border = 2>");

if(avg >= 75)

11. Write a HTML program to demonstrate different types of dialogue boxes.

<h1>Alert Dialogue Box()</h1>

<h1>Prompt Dialogue Box()</h1>

if (name == null || name == "") {

<p id="input">Enter First Number: <input id="one">

<p id="res" style="display:none;">

13. Write a HTML program of a Restaurant

var selectedItems ="Items \t\t\t Price \n...................\n";

for(var i=0; i<major.options.length; i++){

for(var i=0; i<starters.options.length; i++){

for(var i=0; i<soft.options.length; i++){

selectedItems= selectedItems+"\n\n Total Cost \t\t" +totalcost;

14. Write a HTML program to find the sum of n natural numbers

<label> Enter number </label> <input type = "text" id="one"/>

You might also like