Untitled
unknown
plain_text
2 months ago
6.6 kB
2
Indexable
Never
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