HINDUSTHAN COLLEGE OF ARTS & SCIENCE
AUTONOMOUS
(Affiliated to Bharathiar University)
Behind Nava India, Coimbatore - 641028.
DEPARTMENT OF COMPUTER APPLICATIONS (BCA)
PRACTICAL RECORD
B.C.A [Computer Applications]
Practical - IV: WEB TECHNOLOGY LAB (21CAU14)
NAME :
REGISTERNO :
CLASS :
HINDUSTHAN COLLEGE OF ARTS & SCIENCE
AUTONOMOUS
(Affiliated to Bharathiar University)
Behind Nava India, Coimbatore -641028.
DEPARTMENT OF COMPUTER APPLICATIONS (BCA)
WEB TECHNOLOGY LAB (21CAU14)
BONAFIDE CERTIFICATE
Certified that this is a bonafide record of work done by………………………………………
Reg.No................................................. Web Technology Lab (21CAU14) during
the academic year 2022 - 2023.
STAFF-IN-CHARGE HEAD OF THE DEPARTMENT
Submitted for the Practical Examination held at Hindusthan College of Arts & Science, Coimbatore-28,
on………………………….
INTERNAL EXAMINER EXTERNAL EXAMINER
INDEX
S.N PAG
DATE CONTENT SIGNATURE
E
O
NO.
DESIGN A HTML DOCUMENT USING
1 VIEDOS SOUNDS AND IMAGES
DESIGN A WEBPAGE USING LIST OF
2 ITEMS IN DIFFERENT STYLES
DESIGN A HOME PAGE HAVING 3LINK
3 FOR OUR DEPARTMANT AND SHOW
INDIVIDUAL REPORT OF A STUDENT.
DESIGN YOUR EDUCTIONAL DETAILS AND
4 DISPLAY VISION AND MISSION OF OUR
DEPATRMENT USING DIFFERENT STYLE
DESIGN A REGISTRATION FORM USING
5 DIFFERENT PROPERTIES.
CREATING STYLE LIST, CSS, PROPERTIES
6 AND STYLING.
DESIGN YOUR OWN RESUME USING CSS
7 PROPERTIES.
USE INTERNAL AND EXTERNAL CSS FOR A
8 WEBPAGE ALREADY CREATED.
DESIGN A STUDENT MARKLIST USING
9 JAVASCRIPT
DESIGN TEXT EDITOR USING JAVA
10 SCRIPT.
11
VALIDATE A FORM USING JAVA SCRIPT.
12 ANIMATE THE BACKGROUND COLOR AND
TEXT OF A DOCUMENT USING
JAVASCRIPT.
EX.No:01
DESIGN A HTML DOCUMENT USING VIEDOS SOUNDS AND
Date: IMAGES
Aim:
Algorithm:
Source code:
<html>
<body>
<title> Image,Video,Sound using HTML</title>
<h1>The Video Element </h1>
<video width="320" height="240" controls>
<source src="D:\pk.mp4" type="video/mp4">
your browser does not support the video tag
</video>
<h1>The audio element</h1>
<audio controls>
<source src ="d:\sleep Away.mp3" type ="audio/mpeg">
your browser does not support the audio element
</audio>
<h1>IMAGE</h1>
<h2>FLOWERS</h2>
<img src="d:\flower.jpg">
</body>
</html>
Output:
Result:
Thus the above program has been executed successfully.
EX.No:02
DESIGN A WEBPAGE USING LIST OF ITEMS IN DIFFERENT
Date: STYLES
Aim:
Algorithm:
Source code:
<!DOCTYPE html>
<html>
<head>
<title>First Webpage</title>
</head>
<body>
<header style="background-color: pink; height: 100px;width: 90%">
<h1 style="font-size: 30px; color: white;text-align: center;">Welcome to
MyFirstWebpage</h1>
</header>
<section style="background-color:orange; width: 100%; border: 1px solid black;">
<h2>Display list of items in different types by using document layout</h2>
<h2>An unordered HTML list</h2>
<ul type = "square">
<li>Coffee</li>
<li>Tea</li> </ul>
<ul type = "disc">
<li>Coffee</li>
<li>Tea</li>
</ul>
<ul type = "circle">
<li>Coffee</li>
<li>Tea</li>
</ul>
<h2><b> By default </b></h2>
<ol>
<li>Coffee</li>
<li>Tea</li>
</ol>
<h2>An ordered HTML list: Type Attribute </h2>
<ol type = "1">
<li>Coffee</li>
<li>Tea</li>
</ol>
<ol type = "I">
<li>Coffee</li>
<li>Tea</li>
</ol>
<ol type = "A">
<li>Coffee</li>
<li>Tea</li>
</ol>
</section>
<footer style="background-color: green; width: 100%; text-align: center;">
<h3>Footer Example</h3>
<p> II BCA B -2021 to 2024 batch. </p>
</footer>
</body>
</html>
Output:
Result:
Thus the above program has been executed successfully.
EX.No:03 DESIGN A HOME PAGE HAVING 3LINK FOR OUR
DEPARTMANT AND SHOW INDIVIDUAL REPORT OF A
Date:
STUDENT.
Aim:
Algorithm:
Source code:
3prgm.html
<html>
<head><title>HOME PAGE FOR MY DEPARTMENT</title>
<style>
h1 {text-align: center;
color:red;}
h2 {text-align: center;
color:purple;}
</style>
</head>
<body bgcolor="yellow">
<h1>HINDUSTHAN COLLEGE OF ARTS AND SCIENCE ( AUTONOMOUS)</h1>
<h2> DEPARTMENT OF COMPUTER APPLICATIONS - UG </h2>
<a href="stud.html">STUDENT DETAILS</a><br>
<a href="coursedet.html" target=main 3>COURSE DETAILS</a><br>
<a href="percentage.html" >SEMESTER PERCENTAGE</a><br>
</body>
</html>
stud.html:
<html>
<head><title>student details</title>
<style>
h1 {text-align: center;
color:marron;}
h2 {text-align: center;
color:pink;}
</style>
</head>
<body bgcolor="blue">
<h1>DEPARTMENT OF COMPUTER APPLICATIONS</h1>
<h2> II YEAR STUDENT DETAILS</h2>
<div align="center">
<table border=3>
<tr>
<th>S.No</th>
<th>Reg.No</th>
<th>Student Name</th>
<th>DOB</th>
<th>Batch</th>
<th>Ph.No</th>
<th>Address</th>
</tr>
<tr>
<td>01</td>
<td>21bca201</td>
<td>AAA</td>
<td>12/08/1990</td>
<td>2021 - 2024</td>
<td>9870654123</td>
<td>Coimbatore</td>
</tr>
<tr>
<td>01</td>
<td>21bca202</td>
<td>BBB</td>
<td>12/02/1990</td>
<td>2021 - 2024</td>
<td>9870654123</td>
<td>Chennai</td>
</tr>
<tr>
</table>
</div>
</body>
</html>
coursedet.html
<html>
<head><title>Course Details</title>
<style>
h1 {text-align: center;
color:red;}
h2 {text-align: center;
color:blue;}
</style>
</head>
<body bgcolor="orange">
<h1>DEPARTMENT OF COMPUTER APPLICATIONS</h1>
<h2> II YEAR COURSE DETAILS</h2>
<ul>
<li>java</li>
<li>SSOS</li>
<li>WT lab</li>
<li>Java lab</li>
<li>OR</li>
</ul>
<div align="center">
<table border=2>
<tr>
<th>S.No</th>
<th>Course Code</th>
<th>Subject Name</th>
<th>Subject Staff</th>
</tr>
<tr>
<td>01</td>
<td>21CAU14</td>
<td>WT Lab</td>
<td>Mrs.Jayalakshmi</td>
</tr>
<tr>
<td>02</td>
<td>21CAU15</td>
<td>Java</td>
<td>Mr.S.Aravind</td>
</tr>
<tr>
<td>03</td>
<td>21CAU16</td>
<td>SSOS</td>
<td>Dr.Senthil Vadivu</td>
</tr>
<tr>
<td>04</td>
<td>21CAU17</td>
<td>OR</td>
<td>Mrs.Divyaprabha</td>
</tr>
</table>
</div>
</body>
</html>
percentage.html
<html>
<head><title>Student Percentage</title>
</head>
<body>
<style>
h1 {text-align: center;
color:yellow;}
h2 {text-align: center;
color:red;}
</style>
</head>
<body bgcolor="pink">
<h1>DEPARTMENT OF COMPUTER APPLICATIONS</h1>
<h2> II YEAR STUDENT PERCENTAGE DETAILS</h2>
<div align="center">
<table border=3>
<tr>
<th>S.No</th>
<th>Reg.No</th>
<th>Student Name</th>
<th>I Sem %</th>
<th>II Sem %</th>
</tr>
<tr>
<td>01</td>
<td>21bca201</td>
<td>AAA</td>
<td>73%</td>
<td>80%</td>
</tr>
<tr>
<td>01</td>
<td>21bca202</td>
<td>BBB</td>
<td>65%</td>
<td>79%</td>
</tr>
<tr>
</div>
</body>
</html>
OUTPUT:
Result:
Thus the above program has been executed successfully.
EX.No:04 DESIGN YOUR EDUCTIONAL DETILES AND DISPLAY VISION AND
MISSION OF OUR DEPATRMENT USING DIFFERENT STYLE
Date:
Aim:
Algorithm:
Source code:
<html>
<head>
<title>Education details</title>
</head>
<body>
<h1 align="center"style="color:blue">EDUCATION DETAILS</h1><br><br>
<table broder="1"background="grey"cellspacing="5"cellpadding="5">
<th>SNo</th>
<th>Course</th>
<th>University</th>
<th>College</th>
<th>Year of Passing</th>
<th>Percentage</th>
<tr>
<td>01</td>
<td>BCA</td>
<td>Bharathiar</td>
<td>HICAS</td>
<td>2024</td>
<td>90</td>
</tr>
<tr>
<td>2</td>
<td>BCA</td>
<td>Bharathiar</td>
<td>HICAS</td>
<td>2024</td>
<td>95</td>
</tr>
</table>
<h2 align="center"style="color:green">DEPARTMET VISION&MISSION</h2><br><br>
<table broder="1"background="grey"cellspacing="5"cellpadding="5">
<th>Vision</th>
<th>Mission</th>
<tr>
<td>To provide intellectual environment that fosters the search for new knowlege in a highly
dynamic
computing world and to fine tune graduate research attributes and includes resaerch interest among
the students to pursue higher education</td>
<td>To provide an excellent eduction in all computers related fields.To impart computer education
and generate acquaintance to the students for global competence and excellence in quality.
</td>
</tr>
</table>
</body>
</html>
OUTPUT:
Result:
Thus the above program has been executed successfully.
EX.No:05
DESIGN A REGISTRATION FORM USING DIFFERENT
Date: PROPERTIES.
Aim:
Algorithm:
Source code:
<html>
<head><title>REGISTRATION FORM</TITLE>
</HEAD>
<BODY>
<CENTER><B><U>REGISTRATION FORM OF INTER-COLLEGIATE
FUNCTION</B></U></CENTER>
<FORM>
ALL THE STUDENTS SHOULD READ THE NOTES AT END OF THIS FORM<BR><BR>
<B>PLEASE WRITE IN CAPITAL LETTER<BR><BR>
FIRST NAME:
<INPUT TYPE="TEXT" NAME="FIRSTNAME"><BR><BR>
LAST NAME:
<INPUT TYPE="TEXT" NAME="LASTNAME"><BR><BR>
D.O.B:
<INPUT TYPE="TEXT" NAME="DOB"><BR><BR>
GENDER:
<INPUT TYPE="RADIO" NAME="SEX" VALUE="MALE">MALE
<INPUT TYPE="RADIO" NAME="SEX" VALUE="FEMALE">FEMALE<BR><BR>
NAME OF COLLEGE:
<INPUT TYPE="TEXT" NAME="COLLEGENAME"><BR><BR>
DEGREE:
<INPUT TYPE="TEXT" NAME="DEGREE PROGRAMMING"><BR><BR>
YEAR OF STUDY:
<INPUT TYPE="TEXT" NAME="YEAR OF STUDY"><BR><BR>
ADDRESS:
<INPUT TYPE="TEXT" NAME="ADDRESS"><BR><BR>
PHONE NUMBER:
<INPUT TYPE="TEXT" NAME="NUMBER"><BR><BR>
E-MAIL ID:
<INPUT TYPE="TEXT" NAME="EMAILID"><BR><BR>
PASSWORD:
<INPUT TYPE="PASSWORD" NAME="TEXTFIELD" VALUE=""><BR><BR>
PARTICIPATED PROGRAM:
<INPUT TYPE="RADIO" NAME="SOLO SINGING" VALUE="SOLO SINGING">SOLO
SINGING<BR><BR>
<INPUT TYPE="RADIO" NAME="SOLO DANCING" VALUE="SOLO DANCING">SOLO
DANCING<BR><BR>
<INPUT TYPE="RADIO" NAME="FACIAL PAINTING" VALUE="FACIAL
PAINTING">FACIAL PAINTING<BR><BR>
<INPUT TYPE="RADIO" NAME="GREETINGS"
VALUE="GREETINGS">GREETINGS<BR><BR>
COMMENT:<BR>
<TEXTAREA ROWS="5" COLS="50" NAME="COMMENT">
ENTER THE COMMENTS.....
</TEXTAREA><BR><BR>
<BUTTON ONCLICK="myFunction()">SUBMIT</BUTTON>
<SCRIPT>
function myFunction()
{
alert("Registraion Completed!")
}
</SCRIPT></BODY></HTML>
OUTPUT:
Result:
Thus the above program has been executed successfully
EX.NO:06
Date: CREATING STYLE LIST, CSS, PROPERTIES AND STYLING.
Aim:
Algorithm:
Source code:
6prgm.html
<!doctype html>
<html>
<head>
<link rel="stylesheet"href="style sheet.css">
</head>
<body>
<h1>My First CSS Example</h1>
<p>This is a paragraph</p>
<h1>The postion property<h1>
<h2>Position 1&2</h2>
<div id="parent2">Postion 1:H1.
<div id="child2">Position 2:Hello</div>
</div>
<h2>position fixed</h2>
<div id="parent4">Positon 3:BCA DEPARTMENT
<div id="child4">Postion 4:Computer Application</div>
</div>
<br/>
<br/>
<div style="margin-bottom:200px"></div>
</body>
</html>
Stylesheet.css
body{
background-color:lightgreen;
h1{
color:White;
text-align:center;
p{
font-family:verdana;
font-size:20px;
#parent2{
position:relative;
border:1px solid blue;
width:300px;
height:100px;
#child2{
position:absolut;
border:1px solid blue;
top:70px;
right:15px;
#parent4{
position:fixed;
border:3px solid blue;
background-colur;rgba(255,200,0.5);
width:300px;
height:100px;
bottom:0;
left:0;
right:0;
#child4{
position:absolut;
border:1px solid blue;
top:70px;
right:15px;
}
Output:
Result:
Thus the above program has been executed successfully.
EX.No:07
Date: DESIGN YOUR OWN RESUME USING CSS PROPERTIES.
Aim:
Algorithm:
Source code:
<html>
<head>
<link type="text/css"rel="stylesheet"href="D:\WT lab\prgm7.css"/>
<title></title>
</head>
<body>
<div id="header">
<p id="name">PRADEEPKUMAR</p>
<a href="mailto:[email protected]"target="_blank"><p>
id="email">"mailto:[email protected]"</p></a>
</div>
<div class="left">
</div>
<div class="right">
<h3>Eductional Qualification</h3>
<table>
<tr id="heading">
<td>Qualification</td>
<td>Board</td>
<td>Percentage</td>
<td>Year</td>
</tr>
<tr>
<td>S.S.C</td>
<td>G.S.E.B India</td>
<td>80.57%</td>
<td>2018</td>
</tr>
<tr>
<td>H.S.C(commerce stream)</td>
<td>P.A.C.M</td>
<td>80%</td>
<td>2020</td>
</tr>
<tr>
<td>B.C.A</td>
<td>Hindusthan college of arts and science</td>
<td>81%</td>
<td>2024</td>
</tr>
</table>
<h3>Technical Skills</h3>
<p>
<ul>
<li>
<span id="course-name">Operating systems:</span>DOS.Windows98,Windows2000,Windows
xp,Windows NT,Windows server 2003,windows vista,Windows7</li>
<li>
<span id="course-name">Application systems:</span>Office 97-2003;Excel 2003/2007</li>
<li>
<span id="course-name">Programming skills:</span>HTML,CSS,Python,Javascript,Learning c and
c++</li></ul>
</p>
<h3>Crtifications/Awards:</h3>
<p>
<ul>
<li>NTPL cource-java-june 2021</li>
<ul>
</p>
<h3>Personal information:</h3>
<p>
<ul>
<li>
A young,determined hard and smart working person.I belive in task based roles and complete
ownership of work.
<li>
<span id="course-name">Languages knows:</span>English,Hindi and malayalam</li>
<li>
<span id="course-name">Hobbies:</span>I love reading IT related books/magazines,playing
chess,swimming self learning through e-cources</li></ul>
</p>
<h3>Other information</h3>
<ul>
<li>
<span id="course-name">Expected Salary:</span>As per company standards</li>
<li>
<span id="course-name">Area of intertest:</span>Softwere Development,Programming,Start
ups,Coading,App Development,Technical Support,</li>
<li>
<span id="course-name">Joining Date:</span>Immediate</li></ul>
</p>
<h3>Declaration</h3>
<p>
I hereby declare that the details furnished above are true and correct to the best of knowledge and
belief.</p>
</div>
<div id="footer"></div>
</body>
</html>
7prgm.css
div
border-radius:5px;
#header
position:fixed;
z-index:1;
height:40px;
width:98%;
background-color:#668284;
margin-bottom:10px
#name{
float:left;
margin-left:20px;
paddy-bottom10px;
font-size:16px;
font-family:verdana,sans-serif;
color:#ffffff;
#email{
float:right;
margin-right:20px;
paddy-bottom10px;
font-size:16px;
font-family:verdana,sans-serif;
color:#ffffff;
#contact{
margin-left:45%;
paddy-bottom10px;
font-size:16px;
font-family:verdana,sans-serif;
color:#ffffff;
a:hover{
font-weight:bold;
.right
float:left:
margin-top:50px;
padding-left:5px;
height:auto;
width:99%;
background-color:#E3EDD8;
#footer
height:40px;
clear:both;
position:relative;
backgroung-color:#C1E3E1;
h3
{
text-decoration:underline;
#job-responsibilites
padding:1px;
.job-title
font-weight:bold;
table
border:1px dashed black;
td
padding:2px;
border:1px solid #E88741;
#course-name
font-weight:bold;
#job-title
{
height:5px;
.job-duration
float:right;
#heading
font-weight:bold;
}
Output:
Result:
Thus the above program has been executed successfully.
EX.No:08
USE INTERNAL AND EXTERNAL CSS FOR A WEBPAGE
Date: ALREADY CREATED.
Aim:
Algorithm:
Source code:
P8 internal.html:
<!DOCTYPE html>
<html>
<head>
<title>Webpage</title>
<style>
body{background-color:powerblue;}
h1{color:blue;}
p{color:red;}
</style>
</head>
<body>
<h1 style="text-align:center;">Hindusthan college of arts and science</h1>
<ul>
<li><a href="#">Faculty</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Exam Result</a></li>
</ul>
<h1>Department of Computer Application</h1>
<h1>Vission</h1>
<p>To provide intellectual environment that fosters the search for new knowlege in a highly dynamic
computing world and to fine tune graduate research attributes and includes resaerch interest among
the students to pursue higher education</p>
<h1>Mission</h1>
<p>To provide an excellent eduction in all computers related fields.To impart computer education
and generate acquaintance to the students for global competence and excellence in quality.</p>
</body>
</html>
P8external.html
<!DOCTYPE html>
<html>
<head>
<title>Webpage</title>
<link rel="stylesheet"href="D:\WT lab\style.css">
</head>
<body>
<h1 style="text-align:center;">Hindusthan college of arts and science</h1>
<ul>
<li><a href="#">Faculty</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Exam Result</a></li>
</ul>
<h1>Department of Computer Application</h1>
<h1>Vission</h1>
<p>To provide intellectual environment that fosters the search for new knowlege in a highly dynamic
computing world and to fine tune graduate research attributes and includes resaerch interest among
the students to pursue higher education</p>
<h1>Mission</h1>
<p>To provide an excellent eduction in all computers related fields.To impart computer education
and generate acquaintance to the students for global competence and excellence in quality.</p>
</body>
</html>
Style.css
body
background-color:lightgreen;
h1
color:green;
text-align:center;
font-famil:verdana;
font-size:20px;
}
Output:
Internal
External
Result:
Thus the above program has been executed successfully.
EX.NO:09
Date: DESIGN A STUDENT MARKLIST USING JAVASCRIPT
Aim:
Algorithm:
Souce Code:
<html>
<head>
<title>STUDENTS INFORMATION</title>
<script type="text/javascript">
function calc( )
form=document.getElementById("form1");
sub1=form.sub1.value;
sub2=form.sub2.value;
sub3=form.sub3.value;
sub4=form.sub4.value;
total=parseInt(sub1)+parseInt(sub2)+parseInt(sub3)+parseInt(sub4);
form.total.value=total;
form.avg.value=parseInt(total)/4;
if(sub1<35||sub2<35||sub3<35||sub4<35)
form.result.value="fail";
else
form.result.value="pass";
</script>
</head>
<body>
<form id="form1">
STUDENT MARK LIST<br/><br/>
Enter The Name:<input type="text" size="20" name="name"/><br/>
Mark in sub1:<input type="text" size="20" name="sub1"/><br/>
Mark in sub2:<input type="text" size="20" name="sub2"/><br/>
Mark in sub3:<input type="text" size="20" name="sub3"/><br/>
Mark in sub4:<input type="text" size="20" name="sub4"/><br/>
<input type="button"name="btn" value="calculate"onclick="calc( )"/>
<br/>
Total;<input type="text" size="20" name="total"/><br/>
Average;<input type="text" size="20" name="avg"/><br/>
Result;<input type="text" size="20" name="result"/><br/>
<input type="reset" name="btn2" value="Reset"/>
</form>
</body>
</html>
Output:
Result:
Thus the above program has been executed successfully.
EX.NO:10
DESIGN TEXT EDITOR USING JAVA SCRIPT.
Date:
Aim:
Algorithm:
Source code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Classic Editor </title>
<script src="https://cdn.ckeditor.com/ckeditor5/35.2.1/classic/ckeditor.js">
</script>
</head>
<body>
<div id="editor">This is some sample content.</div>
<script>
ClassicEditor
.create( document.querySelector( '#editor' ) )
.then( editor => {
console.log( editor );
})
.catch( error => {
console.error( error );
} );</script>
</body>
</html>
</script>
</body>
</html>
Output:
Result:
Thus the above program has been executed successfully.
EX.No:11
VALIDATE A FORM USING JAVA SCRIPT.
Aim:
Algorithm:
Source code:
<html>
<head>
<script>
function validate form(){
var name=document.myform.name.value;
var password=document.myform.password.value;
if(name==null || name==""){
alert("Name can't be blank");
return false;
</script>
</head>
<body>
<form name="my form" method="post"
action="http://www.javatpoint.com/javascriptpages/valid.jsp"onsubmit="return validateform()">
Name:<input type="text" name="name"><br/>
Password:<input type="password"name="password"><br/>
<input type="submit"value="register">
</form>
</body>
</html>
Output:
Result:
Thus the above program has been executed successfully.
Ex.No:12
ANIMATE THE BACKGROUND COLOR AND TEXT OF A
Date: DOCUMENT USING JAVASCRIPT.
Aim:
Algorithm:
Source code:
<html lang="en">
<head><script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function()
{
var state=true;
$("#button").on("click",function()
{
if(state)
{
$("#effect").animate({backgroundcolor:"green", color:"green",width:500},1000);
}
else
{
$("#effect").animate({backgroundcolor:"blue", color:"blue",width:240},1000);
}
state=!state;
});
});
</script></head><body>
<div class="toggler">
<div id="effect" class="ui-widget-content ui-corner-all">
<h3 class="ui-widget-header ui-corner-all"> Animate</h3>
<p>
animating a background</p>
</div>
</div>
<button id="button" class="ui-state-default ui-corner-all"> click here</button>
</body>
</html>
Output:
Result:
Thus the above program has been executed successfully.
