Scribd
Upload
13 views

HTML Lab

Uploaded by

yiyirek783
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
13 views

HTML Lab

Uploaded by

yiyirek783
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 21

HTML LAB PROGRAMS

1. Crate a form by using various attributes of


the input tags (Text box, Multiline textbox,
Option button, Check box)
<!DOCTYPE html>
<html>
<head>
<title> Form Using Input Tags </title>
</head>
<body bgcolor="aqua" text="purple">
<center><h1> Student Details
</h1></center>
<br><br>
<h2>
<form>
<label> Student Name:</label>
<input type="text"
name="Name" size="25"/><br><br>

Address:<br>
<textarea cols="50" rows="5"
value="address"></textarea><br><br>

<label> Gender:</label><br>
<input type="radio"
name="gender"/> Male <br>
<input type="radio"
name="gender"/> Female <br>
<input type="radio"
name="gender"/> Other <br><br>

<label> Hobies:</label><br>
<input type="Checkbox"
name="programming"> Programming <br>
<input type="Checkbox"
name="sports"> Sports <br>
<input type="Checkbox"
name="art"> Drawing & Painting <br>
<input type="Checkbox"
name="music"> Singing <br>
<br><br>
</form>
</h2>
</body>
</html>
OUTPUT:
2. Create a simple HTML page by using some of
the basic tags(hyperlink, marquee, image)
<!DOCTYPE html>
<html>
<head>
<title>Basic HTML Tags</title>
</head>
<body bgcolor="skyblue" text="white">
<marquee behaviour="alternate"
scrollamount="12">
<h1>WELCOME TO VIJAYA COLLEGE,
JAYANAGAR</h1>
</marquee>
<center><img src="vcj.jfif"></center>
<a href="courses.html">Click here to
check the course details</a>
</body>
</html>

courses.html
<html>
<head>
<title>Courses</title>
</head>
<body bgcolor="yellow">
<b>
<ol>Course details
<li>BA</li>
<li>BBA</li>
<li>BCA</li>
<li>BCOM</li>
<ol type="a">
<li>Regular</li>
<li>Accounting and Finance</li>
<li>Business Data Analytics</li>
</b>
<li>BSC</li>
<ol type="i">
<li>Life Science</li>
<li>Physical Science</li>
</ol>
</ol>
</body>
</html>

OUTPUT:
3. Java script program to create dialogue boxes
using alert, confirm and prompt methods
<!DOCTYPE html>
<html>
<head>
<title>Dialog Box</title>
<script type="text/javascript">
age=parseInt(prompt("Enter your age:"));
if (age>=18)
alert("you are eligible to vote!!");
else
alert("you are not eligible to vote");
if (confirm("Do you want re-enter your
age?"))
location.reload();
else
Window.close();
</script>
</head>
</html>
OUTPUT:
4. Java script program to perform arithmetic
operations Addition, Subtraction,
Multiplication and Division on two numbers.
<!DOCTYPE html>
<html>
<head>
<title>ARITHMATIC OPERATIONS</title>
<style>
form {
width:50%;
}
legend {
width:100px;
display:block;
padding-left:10px;
padding-right:10px;
border:3px solid green;
background-color:tomato;
color:white;
}
font {
font-family:"Lucida console","courier
New",monospace;
font-size:22px;
}
</style>
<script type="text/javascript">
function multiply()
{
a=Number(document.my_cal.first.value);

b=Number(document.my_cal.second.value);
c=a*b;
document.my_cal.total.value=C;
function addition()
{
a=Number(document.my_cal.first.value);

b=Number(document.my_cal.second.value);
c=a+b;
document.my_cal.total.value=C;
function subtraction()
{
a=Number(document.my_cal.first.value);

b=Number(document.my_cal.second.value);
c=a-b;
document.my_cal.total.value=C;
function division()
{
a=Number(document.my_cal.first.value);
b=Number(document.my_cal.second.value);
c=a/b;
document.my_cal.total.value=C;
function modules()
{
a=Number(document.my_cal.first.value);

b=Number(document.my_cal.second.value);
c=a%b;
document.my_cal.total.value=C;
function cleardata()
{
document.my_cal.first.value=" ";
document.my_cal.second.value=" ";
document.my_cal.total.value=" ";
}
</script>
</head>
<body>
<center>
<form name="my_cal">
<fieldset>
<legend>Enter value of 2
numbers</legend>
<h1>Arithmatic Operations</h1><br>
<font>
Number1:<input type="text"
name="First">&nbsp;&nbsp;&nbsp;
Number2:<input type="text"
name="Second"><br><br><br>

<input type="button" value="ADD"


onclick="addition()">
<input type="button" value="SUB"
onclick="subtraction()">
<input type="button" value="MUL"
onclick="multiply()">
<input type="button" value="DIV"
onclick="division()">
<input type="button" value="MOD"
onclick="modules()">
<br><br><br>
Result:<input type="text" name="total">
<br><br>
<!--<input type="button" value="CLEAR"
onclick="cleardata();">-->
</font>
</form>
</fieldset>
</center>
</body>
</html>
OUTPUT:

5. Create a form for student information, write


java script code to the total, average, result
and grade.
<!DOCTYPE html>
<html>
<head>
<title>STUDENT DETAILS</title>
<script language="java script">
function resdisp()
{
var
stdname=document.getElementById("txtname").
value;
var
cls=document.getElementById("txtcls").value;
var
sub1=document.getElementById("txtsub1").valu
e;
var
sub2=document.getElementById("txtsub2").valu
e;
var
sub3=document.getElementById("txtsub3").valu
e;
var
sub4=document.getElementById("txtsub4").valu
e;
var
sub5=document.getElementById("txtsub5").valu
e;
var
sub6=document.getElementById("txtsub6").valu
e;
var
total=sub1+sub2+sub3+sub4+sub5+sub6;
var avg=total/6;
if (sub1<35||sub2<35||sub3<35||
sub4<35||sub5<35||sub6<35)
{
res="fail";grade="D";
}
else
{
if (avg<35)
{
res="fail";grade="D";
}
else if (avg<50)
{
res="pass";grade="C";
}
else if (avg<75)
{
res="first class";grade="B";
}
else if (avg<85)
{
res="distinction";grade="A";
}
else if (avg<100)
{

res="exemplary";grade="A+";
}
}
document.write("<body
bgcolor=powderblue>");
document.write("<center><h1>Student
Details</h1></center>");
document.write("<table align=center
border=2><tr><th>Student Name</th><td>");
document.write(stdname+"</td></tr>");

document.write("<tr><th>class</th><td>");
document.write(cls+"</td></tr>");
document.write("<th>colspan=2>marks
of"+stdname"</th>");
document.write("<tr><th>English</th><td>");
document.write(sub1+"</td><tr>");

document.write("<tr><th>Language<th><td>");
document.write(sub2+"</td></tr>");

document.write("<tr><th>ADA</th><td>");
document.write(sub3+"</td></tr>");
document.write("<tr><th>IT</th><td>");
document.write(sub4+"</td></tr>");
document.write("<tr><th>SE</th><td>");
document.write(sub5+"</td></tr>");
document.write("<tr><th>IC</th><td>");
document.write(sub6+"</td></tr>");
document.write("<tr><th>Total
Marks</th><td>"+total+"</td></tr>");

document.write("<tr><th>Result</th><td>"+res+
"</td></tr>);

document.write("<tr><th>Grade</th><td>"+grad
e+"</td></tr>);
document.write("</table>");
}
</script>
</head>
<body bgcolor="plum">
<form name="stdfrm">
<h1>
<center><font color="blue">Student
Details</font></center>
</h1>
<table align="center" border="2">
<tr>
<th>Class</th>
<td><input type="text"
id="txtcls"/></td>
</tr>
<tr>
<th>Language</th>
<td><input type="text"
id="txtsub1"/></td>
</tr>
<tr>
<th>Language2</th>
<td><input type="text"
id="txtsub2"/></td>
</tr>
<tr>
<th>ADA</th>
<td><input type="text"
id="txtsub3"/></td>
</tr>
<tr>
<th>IT</th>
<td><input type="text"
id="txtsub4"/></td>
</tr>
<tr>
<th>SE</th>
<td><input type="text"
id="txtsub5"/></td>
</tr>
<tr>
<th>IC</th>
<td><input type="text"
id="txtsub6"/></td>
</tr>
</table>
<br/><br/>
<center><input type="submit"
value="SUBMIT" name="bsub"
onclick="resdisp();"/>
</center>
</form>
</body>
</html>
OUTPUT:

6. Java script code block using arrays and


generate the current date in words, this
should include the days, month and year.
<html>
<head>
<title>Display the current date in
words</title>
<script language="JavaScript">
var
days=["01","02","03","04","05","06","07","08","09"
,"10","11","12","13","14","15","16","17","18","19","
20","21","22","23","24","25","26","27","28","29","3
0","31"];
var
months=["January","February","March","April","
May","June","July","August","September","Octob
er","November","December"];
var dateobj=newDate;
var month=dateobj.getMonth();
var dt=dateobj.getDate();
var Yr=dateobj.getFullyYear();
alert("Today's date is:"+days[dt-1]+"
"+months[month]+" "+yr);
</script>
</head>
</html>
OUTPUT:

7. Java script code to validate login details.


<html>
<head>
<title>LOGIN FORM</title>
<script type="text/javascript">
function verify()
{

uname=document.getElementById("usrnme").val
ue;

pswrd=document.getElementById("pswrd").valu
e;
if (uname==pswrd)
{
alert("valid login Details");
}
else
{
alert("Invalid Login
Details");
}
}
</script>
</head>
<body bgcolor="green" text="white">
<center><br><br><br><br>
<form>
<h1>LOGIN FORM</h1>
<input type="text"
placeholder="USERNAME" id="usrnme">
<br><br>
<input type="password"
placeholder="PASSWORD" id="pswrd">
<br><br>
<input type="submit" value="SUBMIT"
onclick="varify();">
<input type="reset" value="RESET">
</form>
</center>
</body>
</html>
OUTPUT:

You might also like