[go: up one dir, main page]
Scribd
Upload
15 views18 pages

PART A

The document contains a series of HTML programs demonstrating various web development techniques, including navigation menus, multimedia display, student registration forms with JavaScript validation, resume creation with CSS styling, and animations. It also covers SVG graphics for drawing shapes like lines, polygons, and circles. Each section provides code examples and descriptions of the functionality implemented.

Uploaded by

hemyk1
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 views18 pages

PART A

The document contains a series of HTML programs demonstrating various web development techniques, including navigation menus, multimedia display, student registration forms with JavaScript validation, resume creation with CSS styling, and animations. It also covers SVG graphics for drawing shapes like lines, polygons, and circles. Each section provides code examples and descriptions of the functionality implemented.

Uploaded by

hemyk1
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/ 18

Multimedia & Animation Lab

Part-A

1. Write an HTML program to create and display navigations menus using list tags and
anchor tag
Main.html

<html>
<head>
<title> Navigation </title>
</head>
<body>

<h1> This is the home page </h1>


<b>MITT</b> is situated at a beautiful, enchanting and sparwling landscape. <br>The institute is
founded by a group of eminent people recognised for their eminence in the field of science and
engineering technology.
<br>
<br>
<a href="dept.html"> Department </a><br> <br>
<a href="contact.html"> Contact Us </a>

</body>
</html>

Dept.html
<html>
<head>
<title> Department </title>
</head>
<body>
<h2> ABOUT THE DEPARTMENT </H2>
<p>The Department of Bachelor of Computer Application was established in the year 2023 with
an intake of 60. </p>

Hareesha C, Asst.Professor 4th Sem BCA (NEP) 1


Multimedia & Animation Lab

<p>The department boasts well- equipped laboratories and well-qualified faculty. </p>

<a href="main.html"> Home Page</a> <br><br>


<a href="contact.html"> Contact Us </a>
</body>
</html>

Contact.html
<html>
<head>
<title> Contact us </title>
</head>
<body>
<h3> Contact us </h3>
<b>MIT Thandavapura,</b><br>
Mysore – Ooty Road,<br>
Just off NH 766, Nanjangud Taluk, Thandavapura,<br>
Karnataka – 571302<br><br>

<a href="main.html"> Home </a><br><br>


<a href="dept.html"> Department </a>
</body>
</html>

2. Write an HTML program to display Multi-mediadata (text, images, audios, videos, gifs,
etc) on a webpage

<html>
<head>
<title> Multimedia </title>
</head>
<body>
<audio controls src="song.mp3" type="audio/mp3">
</audio><br><br>

Hareesha C, Asst.Professor 4th Sem BCA (NEP) 2


Multimedia & Animation Lab

<video controls src="Sample video.mp4" type="video/mp4" width="200" height="200">


</video><br><br>
<img src="12.jpg" width="200" height="150">

</body>
</html>

3. 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

<html>
<head>
<title> Student Registration Form </title>
<head>
<body style="background-color:skyblue">
<h3> STUDENT REGISTRATION FORM</h3>
<form>
<div>
<label> Firstname: </label>
<input type="text" name="firstname" required size="15"/> <br> <br>
<label> Lastname: </label>
<input type="text" name="lastname" required size="15"/><br>
<br>
<label>
Gender :
</label>
<input type="radio" name="gender" value="Male" required/> Male
<input type="radio" name="gender" value="Female" required/> Female
<br> <br>
<label>
Address:
</label> <br>
<textarea rows="4" cols="30" name="comment" required>

Hareesha C, Asst.Professor 4th Sem BCA (NEP) 3


Multimedia & Animation Lab

</textarea>
<br> <br>
<label>
Select Course :
</label>
<select name="Course" id="Course" required>
<option value="">None</option>
<option value="BCA">BCA</option>
<option value="B.com">B.Com</option>
<option value="B.Sc">B.Sc</option>
</select>
<br>
<button type="submit" VALUE="SUBMIT"> SUBMIT </button>
</form>
</body>
</html>

OUTPUT:

Hareesha C, Asst.Professor 4th Sem BCA (NEP) 4


Multimedia & Animation Lab

4. Write an HTML program to create bio-data(CV or Resume) and to change the following
CSS properties
1. Font
2. Text
3. Background

<html>
<head>
<title>Resume</title>
</head>
<body style="background-color: lightgrey">
<h1 align="center">RESUME</align></h1>
<img src="1.jpg" align="right" height="100" width="100">
<b>HAREESHA C</b><br>
No 123 21st Cross<br>
25th Main X Block<br>
XYZ Nagar, Mysuru<br>
5700XX <br>
+91-9876543210
<br><a href="mailto:xyz@gmail.com">xyz@gmail.com</a></p>
<p><b>CARRER OBJECTIVE:</b> <br><br>
Seeking a position in the field of Computer Science where I can utilize my skills to further work
towards personal and professional
development and contribute towards the prosperity of
the organization.</p>

<p><b>ACADEMIC PROFILE:</b></p>
<table border=“1”>
<tr>
<th>Course</th>
<th>Name of the School/College</th>
<th>Board/University</th>
<th>Percentage/CGPA</th>
<th>Year of Passing</th>

Hareesha C, Asst.Professor 4th Sem BCA (NEP) 5


Multimedia & Animation Lab

</tr>

<tr>
<td>BCA</td>
<td>BGS First Grade College, Mysuru</td>
<td>University of Mysore</td>
<td> 8.9</td>
<td> 2023</td>
</tr>
<tr>
<td>PUC</td>
<td>BGS PU College, Mysuru</td>
<td>PU Board, Karnataka</td>
<td>86</td>
<td>2020</td>
</tr>

<tr>
<td>SSLC</td>
<td>BGS School, Mysuru</td>
<td>KSEEB, Karnataka</td>
<td>91</td>
<td>2018</td>
</tr>

</table>

<p><b>TECHNICAL SKILLS:</b></p>
<ul>
<li> Operating System:Windows 10</li>
<li> Language: Basic C & C++,Android</li>
<li> Database: MYSQL</li>
</ul>

Hareesha C, Asst.Professor 4th Sem BCA (NEP) 6


Multimedia & Animation Lab

<p><b>PERSONAL ASSESTS:</b></p>
<ul>
<li> Good presentation and leadrship skills. </li>
<li> Quick learner with good grasphing abilities.</li>
<li> Highly self-motivated.</li>
</ul>
<p><b>PERSONAL PROFILE:</b></p>
<ul>
<li> Father's Name: </li>
<li> DOB: </li>
<li> Marital Status: </li>
<li> Nationality: </li>
<li> Language Known: </li>
<li> Hobbies: </li>

<p> <b>DECLARATION:</b></p>
I hereby declare that the above information's are true to my best of my knowledge and belief.<p>
PLACE: &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <B>HAREESHA
C</B><br>
DATE:
</body>
</html>

OUTPUT:

Hareesha C, Asst.Professor 4th Sem BCA (NEP) 7


Multimedia & Animation Lab

5. Write an HTML program to create div and apply the following CSS properties on created
div

• Margin

• Padding

• Border

Hareesha C, Asst.Professor 4th Sem BCA (NEP) 8


Multimedia & Animation Lab

• Box shadow

<html>
<head>
<title> create div </title>
<style>
.my-div {
border: 5px solid black;
box-shadow: 5px 10px yellow;
width: 500px;
background-color:skyblue;
padding:25px;
padding-left:50px;
padding-right: 50px;
padding-top: 100px;
padding-bottom: 100px;
margin:100px;
}
</style>
</head>
<body>
<div class="my-div">
<p>HTML stands for “HyperText Markup Language” and is the standard language used to produce
web pages and applications.</p>
<p>HTML was first presented by Tim Berners-Lee, the creator of the World Wide Web, in 1989.
Berners-Lee originally created the Web to allow collaborating and sharing their work with each
other.</p>
</div>
</body>
</html>
OUTPUT:

Hareesha C, Asst.Professor 4th Sem BCA (NEP) 9


Multimedia & Animation Lab

6. 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

<html>
<head>
<title> Transition </title>
<style>
div{
width:120px;
height:120px;
background-color:green;
border-radius:12px;
}

div:hover{
width:500px;
}

</style>
<body>

<div>

</div>

</body>
</html>

Hareesha C, Asst.Professor 4th Sem BCA (NEP) 10


Multimedia & Animation Lab

OUTPUT:
Before

After cursor moves

7. Write an HTML program to create a circle and create an animation of bouncing of the
circle for 10 sec

<html>
<head>
<title> Bouncing Ball!! </title>
<style>
h1 {
color: green;
}
canvas {
background-color: pink;
width: 600px;
height: 400px;
position: absolute;
top: 20%;
left: 20%;
}
</style>
</head>

Hareesha C, Asst.Professor 4th Sem BCA (NEP) 11


Multimedia & Animation Lab

<body>
<center>
<h3>Bouncing ball using JavaScript</h3>
<canvas>
</canvas>
<script>
var canvas = document.querySelector("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var l = canvas.getContext('2d');

// x and y are the co-ordinates of the circle


// vx and vy are the respective speeds

var x = Math.floor(Math.random() * innerWidth);


var y = Math.floor(Math.random() * innerHeight);
var vx = Math.floor(Math.random() * 2);
var vy = Math.floor(Math.random() * 4);
var radius = 50;

move();
// This function will do the animation

function move() {
requestAnimationFrame(move);
// It clears the specified pixels within the given rectangle
l.clearRect(0, 0, innerWidth, innerHeight);

// Creating a circle
l.beginPath();
l.strokeStyle = "black";
l.arc(x, y, radius, 0, Math.PI * 2, false);

Hareesha C, Asst.Professor 4th Sem BCA (NEP) 12


Multimedia & Animation Lab

l.stroke();

// Conditions so that the ball bounces from the edges

if (radius + x > innerWidth)


vx = 0 - vx;

if (x - radius < 0)
vx = 0 - vx;

if (y + radius > innerHeight)


vy = 0 - vy;

if (y - radius < 0)
vy = 0 - vy;

x = x + vx;
y = y + vy;

}
</script>
</center>
</body>
</html>

OUTPUT:

Hareesha C, Asst.Professor 4th Sem BCA (NEP) 13


Multimedia & Animation Lab

Hareesha C, Asst.Professor 4th Sem BCA (NEP) 14


Multimedia & Animation Lab

8. Write an HTML program to create page loading animations

<html>
<head>
<title> Animation </title>
<style>
.loader{
border:16px solid lightgray;
height:120px;
width:120px;
border-radius:50%;
border-top:16px solid royalblue;
animation:spin 2s linear infinite;
}
@keyframes spin{
0%{transform:rotate(0deg);}
100%{transform:rotate(360deg);}
}

</style>
</head>
<body>
<div class="loader"> </div>
</body>
</html>

OUTPUT:

Hareesha C, Asst.Professor 4th Sem BCA (NEP) 15


Multimedia & Animation Lab

PART B
1. Write an HTML program to draw line, polyline and rectangle and fill rectangle with red
color using svg tag.

<html>
<body>
<svg>
<line x1="0" y1="0" x2="200" y2="200" stroke="red" stroke-width="2" />
</svg>

<svg>
<polyline points="20,20 40,25 60,40 80,120 120,140 200,180" stroke="black" stroke-width="3"
fill="none" />
</svg>
<br>

<svg>
<rect width="300" height="100" stroke="black" stroke-width="3" fill="none"/>
</svg>

<svg >
<rect width="300" height="100" stroke="black" stroke-width="3" fill="skyblue"/>
</svg>

Hareesha C, Asst.Professor 4th Sem BCA (NEP) 16


Multimedia & Animation Lab

</body>
</html>

OUTPUT:

2. Write an HTML program to draw star and multiple circle and with different color using
svg tag

<html>
<head>
<title> Star </title>
</head>
<body>

<h3> Stat</h3>
<svg width="300" height="200">
<polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:pink;" />
</svg>

<h3> Circle </h3>


<svg width="100" height="100">

Hareesha C, Asst.Professor 4th Sem BCA (NEP) 17


Multimedia & Animation Lab

<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />


</svg>

<svg width="100" height="100">


<circle cx="50" cy="50" r="40" stroke="violet" stroke-width="4" fill="red" />
</svg>

</body>
</html>

OUTPUT:

Hareesha C, Asst.Professor 4th Sem BCA (NEP) 18

You might also like