Untitled

mail@pastecode.io avatar
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