Scribd
Upload
16 views13 pages

HTML

Uploaded by

Ashelle dsouza
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
16 views13 pages

HTML

Uploaded by

Ashelle dsouza
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/ 13

Part a

1. write an html program to create and display navigation menus using list tags
and anchor tags

<!DOCTYPE html>

<html>

<head>

<title>Simple Navigation Menu</title>

</head>

<body>

<nav>

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

</nav>

</body>

</html>
2. write an html program to display multimedia (text, images, audio, video, gifs
etc) on a webpage

<!DOCTYPE html>

<html>

<head>

<title>Multimedia Example</title>

</head>

<body>

<!-- Text -->

<h1>Welcome to the Multimedia Page</h1>

<p>This page shows different types of multimedia content.</p>

<!-- Image -->

<h2>Image Example</h2>

<img src="https://via.placeholder.com/200" alt="Sample Image" width="200">

<!-- GIF -->

<h2>GIF Example</h2>

<img src="https://media.giphy.com/media/ICOgUNjpvO0PC/giphy.gif" alt="Sample


GIF" width="200">

<!-- Audio -->

<h2>Audio Example</h2>

<audio controls>

<source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg">

Your browser does not support the audio element.

</audio>
<!-- Video -->

<h2>Video Example</h2>

<video width="320" height="240" controls>

<source src="https://www.w3schools.com/html/movie.mp4" type="video/mp4">

Your browser does not support the video tag.

</video>

</body>

</html>
3. write an html program to demonstrate box model in CSS

<!DOCTYPE html>

<html>

<head>

<title>CSS Box Model Example</title>

<style>

.box {

width: 200px;

height: 100px;

background-color: #add8e6;

border: 4px solid #333;

padding: 20px;

margin: 30px;

</style>

</head>

<body>

<h2>CSS Box Model Demonstration</h2>

<div class="box">

This is a box!<br>

It has margin, border, padding, and content.

</div>

</body>

</html>
4. write an html program to create page loading animations

LEARN FROM RECORDS


5. write an html program to create a box and using CSS transform and use the
transition properties move the box to centre

LEARN FROM RECORDS


6. write an html program to create a circle and create an animation of bouncing
the ball

<!DOCTYPE html>

<html>

<head>

<title>Bouncing Ball Animation</title>

<style>

body {

background: #f0f0f0;

.container {

position: relative;

width: 300px;

height: 300px;

margin: 50px auto;

background: #fff;

border: 2px solid #ccc;

overflow: hidden;

.ball {

position: absolute;

left: 130px;

top: 0;

width: 40px;

height: 40px;

background: #3498db;

border-radius: 50%;
animation: bounce 1s infinite alternate;

@keyframes bounce {

0% {

top: 0;

100% {

top: 240px;

</style>

</head>

<body>

<div class="container">

<div class="ball"></div>

</div>

</body>

</html>
Part b

1. write an html program to draw line, polyline and rectangle and fill rectangle
with red colour using svg tag

LEARN FROM RECORDS


2. write an html program to draw star and multiple circle and with different
colour using svg tag

<!DOCTYPE html>

<html>

<head>

<title>SVG Star and Colored Circles</title>

</head>

<body>

<h2>SVG Star and Multiple Colored Circles</h2>

<svg width="350" height="220">

<!-- Draw a star using polygon -->

<polygon points="100,10 40,198 190,78 10,78 160,198"

style="fill:gold;stroke:purple;stroke-width:4;" />

<!-- Draw multiple circles with different colors -->

<circle cx="250" cy="60" r="30" fill="red" />

<circle cx="300" cy="150" r="20" fill="blue" />

<circle cx="200" cy="170" r="25" fill="green" />

</svg>

</body>

</html>
3. write an html program to create a logo with linear gradient properties using
svg tag

LEARN FROM THE RECORDS


4. write an html program to draw square and rectangle using canvas tag and
java script

<!DOCTYPE html>

<html>

<head>

<title>Draw Square and Rectangle with Canvas</title>

</head>

<body>

<h2>Canvas: Square and Rectangle</h2>

<canvas id="myCanvas" width="300" height="200" style="border:1px solid


#000000;"></canvas>

<script>

// Get the canvas element and its drawing context

const canvas = document.getElementById('myCanvas');

const ctx = canvas.getContext('2d');

// Draw a blue square (x, y, width, height)

ctx.fillStyle = 'blue';

ctx.fillRect(30, 30, 60, 60); // 60x60 square

// Draw a green rectangle (x, y, width, height)

ctx.fillStyle = 'green';

ctx.fillRect(120, 30, 120, 60); // 120x60 rectangle

</script>

</body>

</html>
5. write an html program to draw Bezier curve using canvas tag and java script

<!DOCTYPE html>
<html>
<head>
<title>Draw Bezier Curve with Canvas</title>
</head>
<body>
<h2>Bezier Curve Example</h2>
<canvas id="myCanvas" width="300" height="200" style="border:1px solid
#000000;"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

ctx.beginPath();

ctx.moveTo(30, 150);

ctx.bezierCurveTo(80, 10, 220, 10, 270, 150);

ctx.stroke();
</script>
</body>
</html>

You might also like