Scribd
Upload
80 views

HTML Programs

The document contains information about creating a website for a department of computer science. It includes HTML code for various pages of the website like the index page, about page, contact page, faculty page and more. It also includes code for creating tables, lists, a calculator, form validation and other elements that can be included on the website.

Uploaded by

Guna Seelan G
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
80 views

HTML Programs

The document contains information about creating a website for a department of computer science. It includes HTML code for various pages of the website like the index page, about page, contact page, faculty page and more. It also includes code for creating tables, lists, a calculator, form validation and other elements that can be included on the website.

Uploaded by

Guna Seelan G
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 42

INDEX PAGE

SLNO DATE PROGRAM PAGE NO SIGNATURE


1

WEBSITE FOR DEPARTMENT

2

TABLES

3

ORDERED AND UNORDERED
LIST

4

CALCULATOR

5

FORM VALIDATION

6

PALINDROME

7

PRIME NUMBERS

8

AREA CALCULATION

9

IMAGE SLIDE SHOW

10

EMPLOYEE WAGES
CALCULATION


WEBSITE FOR DEPARTMENT

Index.html

<html>
<head>
<title>Department of Computer Science</title>
<frameset rows="35%, 65%, 5%" border=1>
<frame src="frameA.html" noresize="noresize"/>
<frame src="frameB.html" noresize="noresize"/>
<frame src="frameC.html" noresize="noresize"/>
<frame src="frameD.html" noresize="noresize"/>
</frameset>
</head>
</html>

About.html

<html>
<head>
<title>about me</title>
</head>
<body bgcolor="pink">
<font>
<b>
<p align="justify">Computer science and engineering is one of the thrust areas in
science and technology.
In appreciation of its growing importance in business and visualizing the career
prospects, the University established the School of Computer Science and
Engineering to facilitate research and human resource development in the
subject.</p>
<p align="justify">A team of learned and dedicated teachers train the students in
the latest technology enabling them to acquire the necessary skills to work in any
reputed IT industry. The extensive use of OHP and LCD in the classes makes
teaching interactive, providing a conductive atmosphere to the students. Technical
seminars, guest-lectures, personality development programmes, aptitude tests,
group discussions, and industrial visits are organized regularly in the School.
Value-added courses, soft skill development programmes and job-oriented courses
help to increase the employment potential of the students. The School is equipped
with well furnished laboratories and spacious class rooms. The excellent
infrastructure facilities available in the school and the quality IT education offered
have been well appreciated by researchers and academicians.</p>
<pre>The school also offers the following research programmes
1. M.Phil in Computer Science
2. Ph.D. in Computer Science </pre>

<p align="justify">Seminars, Guest Lectures, Paper presentations etc., are an
integral part of all the above programmes. Industrial visits organized by the School
to various establishments enable the students to have a feel of real life situations in
industry and the technologies in use at present and under development for the
future. </p>
</b>
</font>
</body>
</html>

Contact.html

<html>
<head>
<title>contact</title>
</head>
<body bgcolor="pink">

<b><p><center><pre>
<font size="5" face="arial">address :
School of comp.sci,
Bharathiar Uiversity,
cbe-46.
ph no.0422-2428343

</pre></center>
</p></b>
</body>
</html>

Course.html

<html>
<head>
<title>contact</title>
</head>
<body bgcolor="pink">
<b><p><center><pre>
<font size="6">Address:
School of Computer Science,
Bharathiar University,
Coimbatore 641 046.
Phone.: 0422 2428343</pre></center>
</p></b>
</body>
</html>

Faculty.html

<html>
<head>
<title>Faculty</title>
</head><body bgcolor="pink">
<table border="5" bgcolor="white">
<tr>
<th align="center">Name of the Faculty </th>
<th align="center">Designation</th>
</tr>
<tr>
<td>Dr.M.Sundaresan MCA,M.Phil,Ph.D.,</td>
<td>Associate Professor & Head I/c</td>
</tr>
<tr>
<td>Ms.R.Porkodi MCA </td>
<td>Assistant Professor</td>
</tr>
<tr>
<td>Ms.D.Ramya Chitra,MCA,M.Phil </td>
<td>Assistant Professor</td>
</tr>
<tr>
<td>Ms.S.Vijayarani,MCA,M.Phil,DCSE </td>
<td>Assistant Professor</td>
</tr>
<tr>
<td>Mr.D.Napoleon,MCA,M.Phil </td>
<td>Assistant Professor</td>
</tr>
</table>
</body>
</html>

FrameA.html

<html>
<head>
<title>Frame A</title>
</head>
<body>
<table>
<tr>
<td colspan="5" ><img src="statue.jpg" width="500" height="150" ></td>
<td colspan="5"><img src="computer.jpg" width="500" height="150"
></td></tr><br>
<tr><td colspan="10" align="center"><font size="6" face="garmond"
color="navy"><b><pre> DEPARTMENT OF COMPUTER
SCIENCE</pre></b></font>
</td></tr></table>
</body>
</html>

FramB.html

<html>
<head>
<title>Frame B</title>
<frameset cols="15%, 75%,10%" border=1>
<frame src="frameB1.html" name="frameB1" noresize ="noresize"/>
<frame src="frameB2.html" name="frameB2" noresize ="noresize"/>
<frame src="frameB3.html" name="frameB2" noresize ="noresize"/>
</frameset>
</head>
</html>

FrameB1.html

<html>
<head>
<title>Frame B1</title>
</head>
<body ><br><br>
<font color="Gold" face="arial" size="10">
</font>
<font color="orchid" face="arial" size="4">
<ul>
<li><a href="frameB2.html" target="frameB2">Home</a>
<li><a href="about.html" target="frameB2">About us</a>
<li><a href="faculty.html" target="frameB2">Faculty</a>
<li><a href="course.html" target="frameB2">Courses</a>
<li><a href="syll.pdf" target="frameB2">Syllabus</a>
<li><a href="contact.html" target="frameB2">Contact us</a>
</ul>
</font>
</body>
</html>

FrameB2.html

<html>
<head>
<title>Frame B2</title>
</head>
<body background="flower.jpg">
<font color="black" face="arial" size=5>
<pre><b>
<h4><center>WELCOME TO COMPUTER
SCIENCE</center></h4></b></font>
<font face="Verdana" size=5">
<center><p>"One day you will
wake up and there wont
be any more time
to do the things
you've always wanted.
Do it now."</p></center></font>
</pre>
</body></html>

FrameB3.html

<html>
<body>
<pre><marquee direction="up">
<p align="justify">Seminar cum <br>workshop on <br>"Recent Advances <br>in
IT Field"</p>




Semester Result</marquee>
</pre>
</body>
</html>

FrameC.html

<html>
<head>
<title>Frame C</title>
</head>
<body background="j.jpg">
<center>
<p>
<font size="3" face="Berlin sans FB demi" color="navy">copyright 1999-2012 by
teamwork inc. All rights reserved.</font>
</p>
</center>
</body>
</html>











OUTPUT










EMPLOYEE DETAILS USING TABLES

<html>
<body>
<h1><center><b><u>Employee details</u></center></b></h1>
<table border="5" align="center">
<tr bgcolor="pink">
<th>Employee No.</th>
<th>Employee Name</th>
<th>Employee DOB</th>
<th>Employee Designation</th>
<th>Employee Salary</th></tr>
<tr>
<td>100</td>
<td>vimala</td>
<td>23.5.1998</td>
<td>manager</td>
<td>20000</td></tr>
<tr>
<td>101</td>
<td>qqq</td>
<td>23.5.1998</td>
<td>manager</td>
<td>20000</td></tr>
<tr>
<td>102</td>
<td>www</td>
<td>23.5.1998</td>
<td>manager</td>
<td>20000</td></tr>
</table>
</body>
</html>


OUTPUT







ORDERED AND UNORDERED LISTS

<html>
<body bgcolor="pink">
<h4><u>Ordered & Unordered list</u></h1>
<p>Three basic steps to create a website are : </p>
<ol type="1">
<li>decide on a subject
<ul type="disc">
<li>business
<li>family
<li>hobby
</ul>
<li>acquire the necessary tools & materials
<ul type="disc">
<li>web browser
<li>text editor or html editor
<li>graphics and clip art
<li>graphics editor
</ul>
<li>write the html source code
</ol>
</body>
</html>











OUTPUT




CALCULATOR

<html>
<form name="calculator">
<table border=4>
<tr><td>
<input type="text" name="text" size="18"><br>
</td></tr>

<tr><td>
<input type="button" value="1" onClick="calculator.text.value+='1'">
<input type="button" value="2" onClick="calculator.text.value+='2'">
<input type="button" value="3" onClick="calculator.text.value+='3'">
<input type="button" value="+" onClick="calculator.text.value+='+'">
<br>
<input type="button" value="4" onClick="calculator.text.value+='4'">
<input type="button" value="5" onClick="calculator.text.value+='5'">
<input type="button" value="6" onClick="calculator.text.value+='6'">
<input type="button" value="-" onClick="calculator.text.value+='-'">
<br>
<input type="button" value="7" onClick="calculator.text.value+='7'">
<input type="button" value="8" onClick="calculator.text.value+='8'">
<input type="button" value="9" onClick="calculator.text.value+='9'">
<input type="button" value="*" onClick="calculator.text.value+='*'">
<br>
<input type="button" value="c" onClick=reset()>
<input type="button" value="0" onClick="calculator.text.value+='0'">
<input type="button" value="="
onClick="calculator.text.value=eval(calculator.text.value)">
<input type="button" value="/" onClick="calculator.text.value+='/'"><br>
</td></tr>
</table>
</form>
</html>

OUTPUT







FORM VALIDATION

<html >
<head>
<title>Form Validation</title>
<script type="text/javascript" language="javascript">
function formValidation()
{
var uid=document.registration.userid;
var passid=document.registration.passid;
var uname=document.registration.username;
var ucountry=document.registration.country;
var uzip=document.registration.zip;
var uemail=document.registration.email;
if(userid_Validation(uid,3,12))
{
if(passid_validation(passid,5,12))
{
if(allLetter(uname))
{
if(countryselect(ucountry))
{
if(allnumeric(uzip))
{
if(ValidateEmail(uemail))
{ alert("InformationSuccessfullysaved");
return true;
}
}
}
}
}
}
return false;
}
function userid_Validation(uid, mx, my)
{
var uid_len = uid.value.length;
if(uid_len == 0 || uid_len >= my || uid_len < mx)
{
alert('UserId should not be empty/length be b/w' + mx + 'to' + my);
uid.focus();
return false;
}return true;
}
function passid_validation(passid,mx,my)
{
var passid_len=passid.value.length;
if(passid_len==0||passid_len>=my||passid_len<mx)
{
alert("Password should not be empty/ length be b/w"+mx+"to"+my);
passid.focus();
return false;
}
return true;
}
function allLetter(uname)
{
var letters=/^[A-Za-z]+$/;
if(uname.value.match(letters))
{
return true;
}
else
{
alert ('Username must have alphabet Character only');
uname.focus();
return false;
}
}
function countryselect(ucountry)
{
if(ucountry.value=="Default")
{
alert('select your country from the list');
ucountry.focus();
return false;
}
else
{
return true;
}
}

function allnumeric(uzip)
{
var numbers=/^[0-9]+$/;
if(uzip.value.match(numbers))
{
return true;
}
else
{
alert('zip code must have numeric character only')
uzip.focus();
return false;
}
}

function ValidateEmail(uemail)
{
var mailformat=/^[\w\-\.\+]+\@[a-zA-Z0-0\.\-]+\.[a-aZ-z0-9]{2,4}$/;
if(uemail.value.match(mailformat))
{
return true;
}

else
{
alert("You ahve entered an invalid email address");
uemail.focus();
return false;
}
}
</script>
</head>
<body>
<form onsubmit="javascript:formValidation();" id ="registration"
name="registration" runat ="server" >
<h1>registration form</h1>
<p>use tab keys to move from one input field to the next</p>
<ul>
<li><label for="userid">Userid:</label></li>
<li><input type="text" id="userid" size="12"/></li>
<li><label for="passid">Password:</label></li>
<li><input type="password" name="passid" size="12"/></li>
<li><label for="username">Name:</label></li>
<li><input type="text" name="username" size="50"/></li>
<li><label for="country">Country:</label></li>
<li><select name="country">
<option selected=" " value="default">(Please select a country)</option>
<option value="AF">Australia</option>
<option value="AL">Canada</option>
<option value="DZ">India</option>
<option value="AS">Russia</option>
</select>
</li>
<li><label for="zip">Zip Code:</label></li>
<li><input type="text" name="zip"/></li>
<li><label for="email">Email:</label></li>
<li><input type="text" name="email" size="50"/></li>

</ul>
<input type="submit" name="submit" value="submit">
</form>
</body>
</html>













OUTPUT


















PALINDROME

<html>
<body>
<script>
function palindrome()
{
var revstr='';
var str=document.getElementById('str').value;
var i=str.length;
for(var j=i; j>=0; j--)
{
revstr=revstr + str.charAt(j);
}
if(str == revstr)
{
alert(str + " -is a palindrome");
}
else
{
alert(str + " -is not a palindrome");
}

}
</script>
<form>
Enter a string/number:<input type="text" id="str" name="string"/><br/>
<input type="submit" value="check" onclick="javascript:palindrome();"/>
</form>
</body>
</html>









OUTPUT






PRIME NUMBERS

<html>
<head>
<script language="javascript">
function primenumbers()
{
var p
var n=document.primeform.primetext.value
var d
var x
var prime
var displayall=2+" "
for(p=3;p<=n;p=p+2)
{
x=Math.sqrt(p)
prime=1
for(d=3;prime&&(d<=x);d=d+2)
{
if((p%d==0))
prime=0
else
prime=1
}
if(prime==1)
{
displayall=displayall+p+" "
}
}
document.primeform.primearea.value=displayall
}
</script>
</head>
<body>
<form name="primeform" onload="primetext.focus();">
max.primenumber:<input type="text" name="primetext"/>
<input type="button" name="button" value="submit!!"
onclick="primenumbers();"/>
<input type="button" name="clear" value="clear!"
onclick="reset();primetext.focus()"/>
<br>
<textarea name="primearea" rows="20" cols="60">
</textarea>
</form>
</body>
</html>


































OUTPUT













AREA CALCULATION

<html>
<head>
<script>
function area()
{
var r=parseInt(document.f1.rad.value);
var a=3.14*r*r;
alert("area of the circle is :"+a);
}
</script>
</head>
<form name="f1" method="post">
<font face="arial" color="red">
Enter the radius of the circle :</font>
<input type="text" name="rad" id="rad"><br>
<input type="button" value="click" onclick="area();">
<input type="reset"value="clear">
</form>
</body>
</html>













OUTPUT



IMAGE SLIDE SHOW

<html>
<body>
<script type="text/javascript">
var slideimage=new Array()
function slideshowimage()
{
for(i=0; i<slideshowimage.arguments.length; i++)
{
slideimage[i]=new Image()
slideimage[i].src=slideshowimage.arguments[i]
}
}
</script>
<img src="1.jpg" alt="slideshowimagescript" name="slide" border=0 width=200
height=200>
<script type="text/javascript">
slideshowimage("1.jpg","2.jpg","3.jpg")
var slideshowspeed=2000
var whichimage=0
function slideit()
{
if(!document.images)
return
document.images.slide.src=slideimage[whichimage].src
if(whichimage<slideimage.length-1)
whichimage++
else
whichimage=0
setTimeout("slideit();",slideshowspeed)
}
slideit()
</script>
</body>
</html>




OUTPUT



EMPLOYEE WAGES CALCULATION


Partial Class _Default
Inherits System.Web.UI.Page

Protected Sub Button2_Click(ByVal sender As Object, ByVal e As
System.EventArgs) Handles Button2.Click
Dim total
total = (TextBox1.Text * DropDownList1.SelectedItem.Text) +
(TextBox2.Text * DropDownList2.SelectedItem.Text)

Label5.Text = "The Salary Amount is Rs." & total

End Sub

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As
System.EventArgs) Handles Button1.Click
TextBox1.Text = " "
TextBox2.Text = " "
Label5.Text = " "

End Sub
End Class















OUTPUT

You might also like