Untitled
unknown
plain_text
5 months ago
6.6 kB
2
Indexable
PART-A
1. Program to Design LOG IN Form in Html.
lab1A.html
<!DOCTYPE html>
<html>
<head>
<title>Login Form</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="login">
<h1> Student Login</h1>
<form method="post" action="#">
<input type="text" name="Uname" placeholder="Enter Your Username"
required>
<input type="password" name="Pass" placeholder="Enter Your Password" required>
<input type="submit" name="log" id="log" value="LOGIN">
<a href="#">Forgot Password</a>
</form>
</div>
</body>
</html>
2. Program for Creating animation of “Bouncing Cloud” using HTML and CSS
lab2A.html
<!DOCTYPE html>
<html>
<head>
<title>Bouncing Clouds</title>
<style>
.container{
background-color: #A2BFCE;
width: auto;
height: 300px;
}
#bigcloud {
margin-left: 500px;
margin-top: 15px;
animation-name: bobble;
animation-duration:2s;
animation-iteration-count:infinite;
animation-timing-function:linear;
}
@keyframes bobble {
0% { transform: translate3d(50px, 40px, 0px);
}
50% { transform: translate3d(50px, 50px, 0px);
}
100% { transform: translate3d(50px, 40px, 0px);
}
}
</style>
</head>
<body>
<div class="container">
<img id="bigcloud" height="154" width="238" src="cloud.png">
</div>
</body>
</html>
3. Program to demonstrate a keyframe animation.
lab3A.html
<!DOCTYPE html>
<html>
<head>
<title>keyframes</title>
<style>
.box{
height:200px;
width:200px;
position:relative;
margin:50px;
animation-name:myframe;
animation-duration:2s;
animation-iteration-count:infinite;
animation-timing-function:linear;
}
@keyframes myframe{
0%{ top:0px; left:0px; background-color:red; }
25%{ top:0px; left:100px; background-color:green; }
50%{ top:100px; left:100px; background-color:yellow; }
75%{ top:100px; left:0px; background-color:grey; }
100%{ top:0px; left:0px; background-color:orange; }
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
4. Program to demonstrate a Font style, font weight, and font size properties using CSS.
lab4.html
<!DOCTYPE html>
<html>
<head>
<title>CSS FONT</title>
<style type="text/css">
.normal {
font-style: normal;
color: green;
font-size: medium;
font-weight: normal;
background-color: orange;
padding: 10px;
}
.italic {
font-style: italic;
color: blue;
font-size: larger;
font-weight: bold;
background-color: white;
padding: 10px;
}
.oblique {
font-style: oblique;
color: orange;
font-size: x-large;
font-weight: bolder;
background-color: green;
padding: 10px;
}
</style>
</head>
<body>
<center>
<h2> Font style properties in CSS</h2>
<p class="normal">This is a paragraph in normal style with medium size font and
normal weight </p>
<p class="italic">This is a paragraph in italic style with larger size font and bold weight
</p>
<p class="oblique">This is a paragraph in oblique style with Extra large size font and
bolder weight </p>
</center>
</body>
</html>
5. Program to demonstrate multiple animations.
lab5A.html
<!DOCTYPE html>
<html>
<head>
<style>
.animated1 {
color:orange;
animation: rotate 2s linear infinite;
}
.animated2 {
color:red;
position: relative;
animation: move 2s infinite linear;
}
.animated3 {
color:blue;
animation: scale 1.5s ease-in infinite;
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes move {
0% { left: 0px; }
50% { left: 200px; }
100% { left: 0px; }
}
@keyframes scale {
from { transform: scale(1); }
to { transform: scale(0.5); }
}
</style>
</head>
<body>
<div class="animated1">Animation 1</div>
<div class="animated2">Animation 2</div>
<div class="animated3">Animation 3</div>
</body>
</html>
6. Program to use table tag to format web page. Also create the Time Table of your class
using table tag.
lab6A.html
<!DOCTYPE html>
<html>
<head>
<title>Time Table</title>
<style>
h1,table {
text-align: center;
}
</style>
</head>
<body>
<h1>BCA 4 SEM TIME TABLE</h1>
<center>
<table border="1px" cellpadding="5px">
<tr bgcolor="grey">
<th>Days/Time</th>
<th>12:30-1:20</th>
<th>1:20-2:10</th>
<th>2:10-3:00</th>
<th>3:00-3:30</th>
<th>3:30-4:20</th>
<th>4:20-5:10</th>
</tr>
<tr>
<th>MONDAY</th>
<td>HINDI/KAN</td>
<td>MA</td>
<td>PYTHON</td>
<th rowspan="6">L<br>U<br>N<br>C<br>H</th>
<td colspan="2">MA LAB</td>
</tr>
<tr>
<th>TUESDAY</th>
<td>OST</td>
<td>OST</td>
<td>ENGLISH</td>
<td>PYTHON LAB</td>
<td>HINDI/KAN</td>
</tr>
<tr>
<th>WEDNESDAY</th>
<td>MA</td>
<td>ENGLISH</td>
<td>OS</td>
<td colspan="2">PYTHON LAB</td>
</tr>
<tr>
<th>THURSDAY</th>
<td>FA</td>
<td>ENGLISH</td>
<td>OS</td>
<td>PYTHON</td>
<td>OST</td>
</tr>
<tr>
<th>FRIDAY</th>
<td>MA</td>
<td>HINDI/KAN</td>
<td>ENGLISH</td>
<td>OS</td>
<td>PYTHON</td>
</tr>
<tr>
<th>SATURDAY</th>
<td>FA</td>
<td>HINDI/KAN</td>
<td>MA LAB</td>
<td></td>
<td></td>
</tr>
</table>
</center>
</body>
</html>
9. Program to Demonstrate animation in reverse direction or alternate cycles.
lab9A.html
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
border-radius:50px;
position: relative;
animation-name: direction;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function:ease-in;
}
.rev {
animation-direction: reverse;
}
.alt {
animation-direction: alternate;
}
.alt-rev {
animation-direction: alternate-reverse;
}
@keyframes direction {
0% {
left: 0;
}
100% {
left: 500px;
}
}
</style>
</head>
<body>
<p>Animation-direction: reverse</p>
<div class="rev"></div>
<p>Animation-direction: alternate</p>
<div class="alt"></div>
<p>Animation-direction: alternate-reverse</p>
<div class="alt-rev"></div>
</body>
</html>
10. Write JavaScript Program to show light ON/OFF Demo
lab10.html
<!DOCTYPE html>
<html>
<head>
<title>ON OFF bulb</title>
</head>
<body>
<script>
function turnonoff() {
var lightBulb=document.getElementById('image');
if(lightBulb.src.match("onbulb"))
lightBulb.src="offbulb.jpg";
else
lightBulb.src="onbulb.jpg";
}
</script>
<center>
<img id="image" align="center" onclick="turnonoff()" src="offbulb.jpg">
</center>
<p align="center">Click on the bulb to turn it ON and OFF</p>
</body>
</html>Leave a Comment