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>
<h2>Web Programming</h2>
<h3>Web Programming</h3>
<h4>Web Programming</h4>
<h5>Web Programming</h5
<h6>Web Programming</h6>
<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>
<h1>Web Programming</h1>
<h2>Web Programming</h2>
<h3>Web Programming</h3>
<h4>Web Programming</h4>
<h5>Web Programming</h5
<h6>Web Programming</h6>
<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 m2 = parseInt(document.getElementById("m2").value);
var m3 = parseInt(document.getElementById("m3").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];
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<soft.options.length; i++){
var option = soft.options[i];
if(option.selected ==true){
var price = parseInt(option.value);
totalcost =totalcost+price;
selectedItems= selectedItems+option.text +"\t\t" +price+ "\n";
}
}
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>
