Scribd
Upload
38 views20 pages

Cma Manual

The document contains a series of HTML programming exercises, including creating multimedia displays, navigation menus, class timetables, framesets, registration forms with validation, and various CSS styling techniques. It also includes SVG graphics examples such as drawing shapes and applying gradients. Each section provides code snippets for practical implementation of web design concepts.

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
38 views20 pages

Cma Manual

The document contains a series of HTML programming exercises, including creating multimedia displays, navigation menus, class timetables, framesets, registration forms with validation, and various CSS styling techniques. It also includes SVG graphics examples such as drawing shapes and applying gradients. Each section provides code snippets for practical implementation of web design concepts.

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/ 20

CMA MANUAL

CMA LAB PROGRAMS (Part-A)


1. Write an html program to display multimedia data on a web page
<html>
<body>
<h3>video tag</h3>
<video width="320" height="240" autoplay>
<source src="C:\Users\anush\OneDrive\Desktop\farewell\WhatsApp Video 2023-05-
20 at 16.24.16.mp4" type="video/mp4">
</video><br>
<h3>image tag</h3>
<imgsrc="C:\Users\anush\Downloads\AnyConv.com__20230519_102036.jpg"
alt="image" width=202 height=200>
<h3><b>web design</b></h3>
<p> web design is the process of creating web pages</p>
<p>HTTP-Hyper text markup language,it was introduced by timberners lee in
1991.</p><br>
<audio width="320" height="240" autoplay>
<source src="movie.mp3" type="audio/mp3">
</audio><br>
</body>
</html>

2. Write an html program to create and display navigation menus using list tags and
anchor tag

<html>
<head>
<title>Navigation Menu Example</title>
<style>
ul {

overflow: hidden;
background-color:black;
}

li {
float: left;
}

li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

</style>

SSIBM,TUMKUR Page 1
CMA MANUAL

</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</body>
</html>

3. Write an html code to create your class time table


<html>
<head>
<title> time table </title>
</head>
<body bgcolor ="skyblue">
<h1><center> college time table</center></h1>
<table border="10" cellspacing="3" cellpadding="10" align="center" border="gree"
bgcolor="pink"
<tr>
<th> day/time </th>
<th> 9:00-10:00 </th>
<th> 10:00-11:00 </th>
<th> 11:00-12:00 </th>
<th> 12:00-1:00 </th>
<th> 1:00-2:00 </th>
<th> 2:00-5:00 </th>
</tr>
<tr>
<th>monday</th>
<td>cma</td>

SSIBM,TUMKUR Page 2
CMA MANUAL

<td> python </td>


<td>os</td>
<td>kannada</td>
<td rowspan="6">
l<br>u<br>n<br>c<br>h<br>b<br>r<br>e<br>a<br>k<br>
</td>
<td>cma lab</td>
</tr>
<tr>
<th>tuesday</th>
<td>os</td>
<td>eng</td>
<td colspan="2">
<td> python lab </td>
</tr>
<tr>
<th>wednesday</th>
<td> python </td>
<td>cma</td>
<td>os</td>
<td>kannada</td>
<td>cma lab </td>
</tr>
<tr>
<th>thrusday</th>
<td> python</td>
<td>cma</td>
<td>os</td>
<td>kannada</td>
<td>python lab</td>
</tr>
<tr>
<th>friday</th>
<td colspan="2">os</td>
<td>cma</td>
<td>kannada</td>
<td>project </td>
</tr>
<tr>
<th>saturday</th>
<td> python</td>
<td>cma</td>
<td>os</td>
<td>kannada</td>
</tr>
</table>
</body>
</html>

SSIBM,TUMKUR Page 3
CMA MANUAL

4. Write an html code to create a frameset having header, navigation and content
sections.

P4.html
<html>
<head>
<title></title>
</head>

<frameset cols="20%,80%">
<frame src="p4link.html">
<frameset rows="20%,80%">
<frameset cols="30,30,40">
<frame src="p4home.html">
<frame src="p4about.html">
<frame src="p4reg.html">
</frameset>
<frame src="p4des.html">

</frameset>

</frameset>

</html>

P4link.html
<html>
<body>
<h2>link1</h2>
<h2>link2</h2>
<h2>link3</h2>
</body>

SSIBM,TUMKUR Page 4
CMA MANUAL

</html>

P4home.html
<html>
<head>
<title></title>
</head>
<body>
<h2>home</h2>
</body>
</html>

P4about.html
<html>
<head>
<title></title>
</head>
<body>
<h2>about</h2>
</body>
</html>

P4reg.html
<html>
<head>
<title></title>
</head>
<body>
<h2>registration</h2>
</body>
</html>

P4des.html
<html>
<head>
<title></title>
</head>
<body>
<h2>description on the page</h2>
</body>
</html>

SSIBM,TUMKUR Page 5
CMA MANUAL

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.

<html>
<head>
<title>Student Registration Form</title>
<script>
function validateForm() {
var firstName = document.forms["registrationForm"]["firstName"].value;
var lastName = document.forms["registrationForm"]["lastName"].value;
var email = document.forms["registrationForm"]["email"].value;
var phoneNumber = document.forms["registrationForm"]["phoneNumber"].value;
if (firstName === "" || lastName === "" || email === "" || phoneNumber === "") {
alert("Please fill in all fields!");
return false;
}
}
</script>
</head>
<body>
<h1>Student Registration Form</h1>
<form name="registrationForm" onsubmit="return validateForm()">
<label for="firstName">First Name:</label>
<input type="text" id="firstName" name="firstName"><br><br>

<label for="lastName">Last Name:</label>


<input type="text" id="lastName" name="lastName"><br><br>

<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>

SSIBM,TUMKUR Page 6
CMA MANUAL

<label for="phoneNumber">Phone Number:</label>


<input type="text" id="phoneNumber" name="phoneNumber"><br><br>

<input type="submit" value="Submit">


</form>
</body>
</html>

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


following CSS properties
Font
Text
Background

<html>
<head>
<style>

body {
font-family: Arial;
color:black;
background-color:grey;
margin: 0;
padding: 20px;
}

.cv {
background-color:white;
padding: 20px;

SSIBM,TUMKUR Page 7
CMA MANUAL

.personal-info {
margin-bottom: 20px;
}

.personal-info h1 {
font-size: 24px;
margin-bottom: 10px;
}

.personal-info p {
font-size: 16px;
}

.work-experience {
margin-bottom: 20px;
}

.work-experience h2 {
font-size: 20px;
margin-bottom: 10px;
}

.work-experience p {
font-size: 14px;
}
</style>
</head>
<body>
<div class="cv">
<div class="personal-info">
<h1>Anu</h1>
<p>Address:vidyanagar,Tumkur,karnataka-572105</p>
<p>Email: [email protected]</p>
<p>Phone: (123) 456-7890</p>
</div>

<div class="work-experience">
<h2>Work Experience</h2>
<p>Company A - Position A - 2010 to 2015</p>
<p>Company B - Position B - 2015 to 2020</p>
</div>
</div>
</body>
</html>

SSIBM,TUMKUR Page 8
CMA MANUAL

7. Write an HTML program to create div and apply the following CSS properties on
created div Margin
Padding
Border
Box shadow

<html>
<head>
<title>Div with CSS Properties</title>
<style>
/* CSS properties applied to the div */
#myDiv {
margin: 20px;
padding: 10px;
border: 1px solid #ccc;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}
</style>
</head>
<body>
<div id="myDiv">
<!-- Content within the div -->
<h1>Div with CSS Properties</h1>
<p>This is a div element with custom CSS properties applied.</p>
</div>
</body>
</html>

SSIBM,TUMKUR Page 9
CMA MANUAL

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

<html>
<head>
<style>

.box {
width: 200px;
height: 200px;
background-color: red;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: transform 1s ease;
}

.box.move-to-center {
transform: translate(0, 0);
}
</style>
<script>
window.addEventListener('load', function() {
var box = document.getElementById('box');
box.classList.add('move-to-center');
});
</script>
</head>
<body>
<div class="box" id="box"></div>
</body>

SSIBM,TUMKUR Page 10
CMA MANUAL

</html>

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

<html>
<head>
<style>
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: red;
position: relative;
animation-name: bounce;
animation-duration: 10s;
animation-iteration-count: infinite;
}

@keyframes bounce {
0% { top: 0; }
50% { top: 300px; }
100% { top: 0; }
}
</style>
</head>
<body>
<div class="circle"></div>
</body>
</html>

SSIBM,TUMKUR Page 11
CMA MANUAL

10. Write an HTML program to create page loading animations

<html>
<head>
<style>
/* Loading animation */
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

.loader {
border: 16px solid #f3f3f3; /* Light gray */
border-top: 16px solid #3498db; /* Blue */
border-radius: 50%;
width: 120px;
height: 120px;
animation-name: spin;
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
</style>
</head>
<body>
<div class="loader"></div>
</body>
</html>

SSIBM,TUMKUR Page 12
CMA MANUAL

Part-B

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

<!DOCTYPE html>
<html>
<head>
<title>SVG Drawing</title>
</head>
<body>
<svg width="400" height="400">
<!-- Line -->
<line x1="50" y1="50" x2="200" y2="50" stroke="black" stroke-width="2" />

<!-- Polyline -->


<polyline points="50,100 150,150 200,100" stroke="blue" fill="none" stroke-
width="2" />

<!-- Rectangle -->


<rect x="50" y="200" width="200" height="100" stroke="black" stroke-width="2"
fill="red"/>
</svg>
</body>
</html>

SSIBM,TUMKUR Page 13
CMA MANUAL

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

<!DOCTYPE html>
<html>
<head>
<title>SVG Drawing</title>
</head>
<body>
<svg width="400" height="400">
<!-- Star -->
<polygon points="200,50 225,150 325,150 250,200 275,300 200,250 125,300
150,200 75,150 175,150" stroke="black" fill="gold" />

<!-- Circles -->


<circle cx="100" cy="100" r="50" fill="red" />
<circle cx="200" cy="200" r="50" fill="green" />
<circle cx="350" cy="300" r="50" fill="blue" />
</svg>
</body>
</html>

SSIBM,TUMKUR Page 14
CMA MANUAL

3. Write an HTML program to create logo with linear gradient properties using SVG tag.

<!DOCTYPE html>
<html>
<head>
<title>SVG Logo with Linear Gradient</title>
</head>
<body>
<svg width="400" height="400">
<!-- Define the linear gradient -->
<linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="pink" />
<stop offset="100%" stop-color="skyblue" />
</linearGradient>
<!-- Draw the logo using the linear gradient -->
<rect x="50" y="50" width="300" height="300" fill="url(#gradient)" />
</svg>
</body>
</html>

SSIBM,TUMKUR Page 15
CMA MANUAL

4. Write an HTML program to draw Square and Rectangle using canvas tag and
JavaScript.

<!DOCTYPE html>
<html>
<head>
<title>Canvas Drawing</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="400" height="400"></canvas>

<script>
// Get the canvas element
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

// Draw a square
ctx.fillStyle = "red";
ctx.fillRect(50, 50, 100, 100);

// Draw a rectangle
ctx.fillStyle = "blue";
ctx.fillRect(200, 100, 150, 80);
</script>

SSIBM,TUMKUR Page 16
CMA MANUAL

</body>
</html>

5. Write an HTML program to draw bezier curve using canvas tag and JavaScript.

<!DOCTYPE html>
<html>
<head>
<title>Canvas Drawing</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="400" height="400"></canvas>

<script>
// Get the canvas element
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

// Set the control points for the Bézier curve


var controlX = 200;
var controlY = 100;
var startX = 50;
var startY = 200;
var endX = 350;
var endY = 200;

// Draw the Bézier curve

SSIBM,TUMKUR Page 17
CMA MANUAL

ctx.beginPath();
ctx.moveTo(startX, startY);
ctx.quadraticCurveTo(controlX, controlY, endX, endY);
ctx.strokeStyle = "red";
ctx.lineWidth = 2;
ctx.stroke();
</script>
</body>
</html>

6. Write an HTML program to draw a rectangle box using canvas and to change
background color to red, scale of the rectangle to 2 on move-over (hover) properties.

<!DOCTYPE html>
<html>
<head>
<title>Canvas Rectangle Box</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="400" height="400"></canvas>

<script>
// Get the canvas element
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

SSIBM,TUMKUR Page 18
CMA MANUAL

// Set initial rectangle properties


var rectX = 50;
var rectY = 50;
var rectWidth = 100;
var rectHeight = 100;
var isHovered = false;

// Draw the rectangle


function drawRectangle() {
ctx.clearRect(0, 0, canvas.width, canvas.height);

if (isHovered) {
ctx.fillStyle = "red";
ctx.scale(2, 2);
} else {
ctx.fillStyle = "blue";
ctx.scale(1, 1);
}

ctx.fillRect(rectX, rectY, rectWidth, rectHeight);


}

// Event listeners for mouse hover events


canvas.addEventListener("mouseover", function() {
isHovered = true;
drawRectangle();
});

canvas.addEventListener("mouseout", function() {
isHovered = false;
drawRectangle();
});

// Initial draw of the rectangle


drawRectangle();
</script>
</body>
</html>

SSIBM,TUMKUR Page 19
CMA MANUAL

SSIBM,TUMKUR Page 20

You might also like