Scribd
Upload
15 views30 pages

Manual Vi Sem MM Part A

The document is a lab manual for a Multimedia Animation course for VI SEM BCA students, containing various HTML programming exercises. It includes tasks such as displaying multimedia data, creating navigation menus, designing a class timetable, implementing framesets, and developing a student registration form with JavaScript validation. Additionally, it covers creating a bio-data page with CSS styling and applying CSS properties to div elements.

Uploaded by

srinidhisiddhu1998
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
15 views30 pages

Manual Vi Sem MM Part A

The document is a lab manual for a Multimedia Animation course for VI SEM BCA students, containing various HTML programming exercises. It includes tasks such as displaying multimedia data, creating navigation menus, designing a class timetable, implementing framesets, and developing a student registration form with JavaScript validation. Additionally, it covers creating a bio-data page with CSS styling and applying CSS properties to div elements.

Uploaded by

srinidhisiddhu1998
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 30

Multimedia Animation Lab Manual VI SEM BCA

1. Write an HTML program to display Multi-media data (text, images,


audios, videos, gifs, etc) on a webpage.
Lab1.html
<!DOCTYPE html>
<html>
<body>
<h1>MULTIMEDIA DATA</h1>
<h2>The Image element</h2>
<img src="C:\Users\Public\Pictures\Sample Pictures\Chrysanthemum.jpg"
alt="Image" height="200" width="300" />
<h2>The Video element</h2>
<video controls>
<source src="C:\Users\Public\Videos\Sample Videos\samplevideo.mp4"
type="video/mp4" >
</video>
<h2>The Audio element</h2>
<audio controls>
<source src="C:\Users\Public\Music\Sample Music\Sleep Away.mp3"
type="audio/mp3">
</audio>
</body>
</html>

Dept of CS, SSCASCW, Tumakuru SMB Page 1


Multimedia Animation Lab Manual VI SEM BCA

OUTPUT:

Dept of CS, SSCASCW, Tumakuru SMB Page 2


Multimedia Animation Lab Manual VI SEM BCA

2. Write an HTML program to create and display navigations menus using


list tags and anchor tag.
index.html
<!DOCTYPE html>
<html >
<head>
<style>
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
nav {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: teal;
font-family: "Montserrat", sans-serif;
}
.heading {
color: white;
text-transform: uppercase;
letter-spacing: 5px;
font-size: 20px;
}
.nav-links {
display: flex;
justify-content: space-around;
width: 30%;
}
.nav-links li {
list-style: none;
}

Dept of CS, SSCASCW, Tumakuru SMB Page 3


Multimedia Animation Lab Manual VI SEM BCA

.nav-links a {
color: white;
text-decoration: none;
letter-spacing: 3px;
font-weight: bold;
font-size: 14px;
padding: 14px 16px;
}
.nav-links a:hover:not(.active) {
background-color: lightseagreen;
}
.nav-links li a.active {
background-color: #4caf50;
}
</style>
<title>Home</title>
</head>
<body>
<nav>
<div class="heading">
<h4>Navigation Bar</h4>
</div>
<ul class="nav-links">
<li>
<a class="active"
href="C:/Users/SSCASCW/Desktop/index.html">Home</a></li>
<li>
<a href="C:/Users/SSCASCW/Desktop/aboutus.html">About</a></li>
<li>
<a href="C:/Users/SSCASCW/Desktop/services.html">Services</a></li>
<li>
<a href="C:/Users/SSCASCW/Desktop/contactus.html">Contact</a></li>
</ul>
</nav>

Dept of CS, SSCASCW, Tumakuru SMB Page 4


Multimedia Animation Lab Manual VI SEM BCA

<center><h1>This is Home Page!</h1></center>


</body>
</html>

Dept of CS, SSCASCW, Tumakuru SMB Page 5


Multimedia Animation Lab Manual VI SEM BCA

OUTPUT:

Dept of CS, SSCASCW, Tumakuru SMB Page 6


Multimedia Animation Lab Manual VI SEM BCA

3. Write a HTML code to create your class time table.


Lab3.html
<!DOCTYPE html>
<head>
<title>BCA Timetable</title>
</head>
<body>
<table border="1" cellspacing="5" cellpadding="3">
<caption style="font-size:16pt;font-weight:bold;">SSCASCW IV SEM BCA
TIMETABLE</caption>
<tr>
<th rowspan="2">Date</th>
<th colspan="8" align="center">TIMINGS</th>
</tr>
<tr>
<th>8:30</th>
<th>9:30</th>
<th>10:30</th>
<th>11:30</th>
<th>12:30</th>
<th>1:30</th>
<th>2:30</th>
<th>3:30</th>
</tr>
<tr>
<th> Monday </th>
<td colspan="3">----LAB----</td>
<td>BCA</td>
<td>KAN</td>
<td>ENG</td>
<td>BCA</td>
<td>OE</td>
</tr>
<tr>

Dept of CS, SSCASCW, Tumakuru SMB Page 7


Multimedia Animation Lab Manual VI SEM BCA

<th>Tuesday</th>
<td colspan="3">----LAB----</td>
<td>OE</td>
<td>ENG</td>
<td>KAN</td>
<td>BCA</td>
<td></td>
</tr>
<tr>
<th>Wednesday</th>
<td colspan="3">----LAB----</td>
<td>SKILL</td>
<td>BCA</td>
<td>ENG</td>
<td>KAN</td>
<td>OE</td>
</tr>
<tr>
<th>Thurday</th>
<td colspan="3">----LAB----</td>
<td>BCA</td>
<td>KAN</td>
<td>ENG</td>
<td>BCA</td>
<td>OE</td>
</tr>
<tr>
<th>Friday</th>
<td colspan="3">----LAB----</td>
<td>OE</td>
<td>ENG</td>
<td>BCA</td>
<td>SKILL</td>
<td>BCA</td>

Dept of CS, SSCASCW, Tumakuru SMB Page 8


Multimedia Animation Lab Manual VI SEM BCA

</tr>
<tr>
<th>Saturday</th>
<td colspan="3">----LAB----</td>
<td>BCA</td>
<td>KAN</td>
<td>ENG</td>
<td>BCA</td>
<td>OE</td>
</tr>
</table>
</body>
</html>

Dept of CS, SSCASCW, Tumakuru SMB Page 9


Multimedia Animation Lab Manual VI SEM BCA

OUTPUT:

Dept of CS, SSCASCW, Tumakuru SMB Page 10


Multimedia Animation Lab Manual VI SEM BCA

4. Write an HTML code to create a frameset having header, navigation and


content sections.
Lab4.html
<!DOCTYPE html>
<html>
<head>
<title>HTML Frames</title>
</head>
<frameset rows="15%,15%,*">
<frame name="header" src="C:/Users/SSCW/Desktop/header.html" />
<frame name="navigation"
src="C:/Users/SSCW/Desktop/navigation.html" />
<frame name="content" src="C:/Users/SSCW/Desktop/content.html" />
</frameset>
</html>
header.html
<!DOCTYPE html>
<head>
<title>Header</title>
</head>
<body>
<h1>Header Section</h1>
</body>
</html>
navigation.html
<!DOCTYPE html>
<head>
<title>Navigation</title>
</head>
<body>
<h1>Navigation Section</h1>
</body>
</html>

Dept of CS, SSCASCW, Tumakuru SMB Page 11


Multimedia Animation Lab Manual VI SEM BCA

content.html
<!DOCTYPE html>
<head>
<title>Content</title>
</head>
<body>
<h1>Content Section</h1>
</body>
</html>

Dept of CS, SSCASCW, Tumakuru SMB Page 12


Multimedia Animation Lab Manual VI SEM BCA

OUTPUT:

Dept of CS, SSCASCW, Tumakuru SMB Page 13


Multimedia Animation Lab Manual VI SEM BCA

5. Write an HTML program to create student Registrations form on


submitting the form check whether fields are empty or not using
JavaScript. If any fields are empty display an error message.
Lab5.html
<html>
<head>
<title>Registration Form</title>
<script>
function validate()
{
var a=document.forms["form"]["s_name"].value;
if(a=="" || a==null)
{
alert("Enter Student Name");
return false;
}
var b=document.forms["form"]["s_fname"].value;
if(b=="" || b==null)
{
alert("Enter Student Father Name");
return false;
}
var c=document.forms["form"]["s_mname"].value;
if(c=="" || c==null)
{
alert("Enter Student Mother Name");
return false;
}
var d=document.forms["form"]["gen"].value;
if(d=="" || d==null)
{
alert("select Gender");
return false;
}

Dept of CS, SSCASCW, Tumakuru SMB Page 14


Multimedia Animation Lab Manual VI SEM BCA

var e=document.forms["form"]["s_email"].value;
if(e=="" || e==null)
{
alert("Enter Student Email");
return false;
}
var f=document.forms["form"]["s_mob"].value;
if(f=="" || f==null)
{
alert("Enter Student Mobile Number");
return false;
}
var g=document.forms["form"]["s_addr"].value;
if(g=="" || g==null)
{
alert("Enter Student Address");
return false;
}
var h=document.forms["form"]["cour"].value;
if(h=="" || h==null)
{
alert("select course");
return false;
}
}
</script>
</head>
<body>
<h1>STUDENT REGISTRATION FORM</h1>
<form method="post" name="form" onsubmit="return validate( )">
Student Name:<input type="text" name="s_name" placeholder="Enter
Student name" /> <br />
Student Father Name:<input type="text" name="s_fname" placeholder="Enter
Student Father name" /> <br />

Dept of CS, SSCASCW, Tumakuru SMB Page 15


Multimedia Animation Lab Manual VI SEM BCA

Student Mother Name:<input type="text" name="s_mname"


placeholder="Enter Student Mother name" /> <br />
Student Gender: MALE <input type="radio" name="gen" value="MALE" />
FEMALE <input type="radio" name="gen" value="FEMALE" /><br />
Student Email ID: <input type="email" name="s_email" placeholder="Enter
Student E-mail Id" /> <br />
Student Mobile Number: <input type="text" name="s_mob"
placeholder="Enter Student Mobile number" /> <br />
Student Address: <textarea name="s_addr" rows="2"
cols="50"></textarea><br />
Selected Course:BCA <input type="radio" name="cour" value="BCA" />
BCOM <input type="radio" name="cour"
value="BCOM" /><br />
<br />
<input type="submit" value="SUBMIT" name="SUBMIT" />
<input type="reset" value="CLEAR" name="CLEAR" />
</form>
</html>

Dept of CS, SSCASCW, Tumakuru SMB Page 16


Multimedia Animation Lab Manual VI SEM BCA

OUTPUT:

Dept of CS, SSCASCW, Tumakuru SMB Page 17


Multimedia Animation Lab Manual VI SEM BCA

6. Write an HTML program to create bio-data(CV or Resume) and to


change the following CSS properties
 Font
 Text
 Background
Lab6.html
<!DOCTYPE html>
<html>
<head>
<title>BioData</title>
<style>
body{
background-color:pink;
}
h1
{
font-family:"Times New Roman";
font-weight:bold;
font-size:16pt;
}
.one
{
font-family: Arial, Helvetica, sans-serif;
font-size:14pt;
font-weight:bold;
text-align:center;
text-transform:UPPERCASE;
}
.two
{
font-family:"sans-serif";
font-weight:italic;
font-size:16pt;
color:red;

Dept of CS, SSCASCW, Tumakuru SMB Page 18


Multimedia Animation Lab Manual VI SEM BCA

}
pre
{
font-family:"Calibri";
font-weight:italic;
font-size:12pt;
line-height:20pt;
text-align:center;
}
</style>
</head>
<body>
<h1 align="center">BIO-DATA</h1>
<center>
<img src=" " alt="ss" height="200" width="200" /></center>
<table border="1" align="center">
<tr>
<td>Name:&nbsp;&nbsp;</td>
<td class="one">Shivanna</td>
</tr>
<tr>
<td>Date of Birth:&nbsp;&nbsp;</td>
<td>
<pre>1 April 1907
Veerapura, Magadi,
Kingdom of Mysore
</pre></td>
</tr>
<tr>
<td>Education</td>
<td>Doctor of Literature (honorary, 1965)</td>
</tr>
<tr>
<td>Organization</td>

Dept of CS, SSCASCW, Tumakuru SMB Page 19


Multimedia Animation Lab Manual VI SEM BCA

<td>Siddaganga Education Society</td>


</tr>
<tr>
<td>Occupations</td>
<td>Humanitarian,spiritual,leader,educator</td>
</tr>
<tr>
<td>Awards</td>
<td>
<ol type="1">
<li>Padma Bhushan (2015)</li>
<li>Karnataka Ratna (2007)</li>
</ol>
</td>
</tr>
<tr>
<td>Died:&nbsp;&nbsp;</td>
<td class="two">21 January 2019</td>
</tr>
</table>
</body>
</html>

Dept of CS, SSCASCW, Tumakuru SMB Page 20


Multimedia Animation Lab Manual VI SEM BCA

OUTPUT:

Dept of CS, SSCASCW, Tumakuru SMB Page 21


Multimedia Animation Lab Manual VI SEM BCA

7. Write an HTML program to create div and apply the following CSS
properties on created div
 Margin
 Padding
 Border
 Box shadow
Lab7.html
<!DOCTYPE html>
<html>
<head>
<style>
.myDiv
{
border: 5px outset red;
background-color: lightblue;
box-shadow:10px 10px 10px blue;
margin:2px;
padding:12px;
}
.myDiv1
{
border: 5px outset green;
background-color: lightblue;
box-shadow:10px 10px 10px orange;
margin:2px;
padding:12px;
}
h2
{
font-family:"Arial";
font-size:14pt;
text-align:center;
}
p
Dept of CS, SSCASCW, Tumakuru SMB Page 22
Multimedia Animation Lab Manual VI SEM BCA

{
padding:5px;
}
</style>
</head>
<body>
<h1>SIDDAGANGA COLLEGE OF ARTS SCIENCE AND COMMERCE
FOR WOMEN</h1>
<div class="myDiv">
<h2>ABOUT COLLEGE</h2>
<p>His Holiness Karnataka Ratna Dr. Sri Sri Shivakumaraswamigalu, the
founder President of Sree Siddaganga Education Society envisioned womens
empowerment through higher education. His motto has always been four
E&apos;S-Education,Employment,EconomicIndependence,Enlightened
Society</p>
</div>
<div class="myDiv1">
<h2>ADDRESS AND CONTACT </h2>
<p>SREE SIDDAGANGA COLLEGE OF ARTS SCIENCE AND
COMMERCE FOR WOMEN</p>
<p>Gandhi Nagar, OPPOSITE TO GOVT.DISTRICT HOSPITAL</p>
<p>Tumakuru,Karnataka,India</p>
</div>
</body>
</html>

Dept of CS, SSCASCW, Tumakuru SMB Page 23


Multimedia Animation Lab Manual VI SEM BCA

OUTPUT:

Dept of CS, SSCASCW, Tumakuru SMB Page 24


Multimedia Animation Lab Manual VI SEM BCA

8. Write an HTML program to create a box and using CSS transform and
transition properties move the box to the center of the web page on
loading web-page.
Lab8.html
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background-color:red;
position: relative;
animation-name:moving;
animation-duration:14s;
animation-delay:0s;
}
@keyframes moving
{
0%{ background-color:red; left:0px; top:0px;}
25%{background-color:black; left:1250px; top:0px;}
50%{background-color:green; left:1250px; top:400px;}
75%{background-color:blue; left:0px; top:400px;}
100%{background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<center><h1>Box moving</h1></center>
<br>
<div>
</div>
</body>
<html>

Dept of CS, SSCASCW, Tumakuru SMB Page 25


Multimedia Animation Lab Manual VI SEM BCA

OUTPUT:

Dept of CS, SSCASCW, Tumakuru SMB Page 26


Multimedia Animation Lab Manual VI SEM BCA

9. Write an HTML program to create a circle and create an animation of


bouncing of the circle for 10 sec.
Lab9.html
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
display: flex;
background-color: red;
border-radius:50px;
position: relative;
animation-name: ball;
animation-duration:0.3s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: 30;
animation-direction: alternate;
}
@keyframes ball {
from {top: 0px; background-color: yellow;}
to {top: 400px;}
}
</style>
</head>
<body>
<h2>Bouncing a ball</h2>
<div>
</div>
</body>
</html>

Dept of CS, SSCASCW, Tumakuru SMB Page 27


Multimedia Animation Lab Manual VI SEM BCA

OUTPUT:

Dept of CS, SSCASCW, Tumakuru SMB Page 28


Multimedia Animation Lab Manual VI SEM BCA

10. Write an HTML program to create page loading animations.


Lab10.html
<!DOCTYPE html>
<html>
<head>
<style>
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<h2>Loading WebPage</h2>
<div class="loader">
</div>
</body>
</html>

Dept of CS, SSCASCW, Tumakuru SMB Page 29


Multimedia Animation Lab Manual VI SEM BCA

OUTPUT

Dept of CS, SSCASCW, Tumakuru SMB Page 30

You might also like