1.
Print the numbers 1 - 10, each number being a different color
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>www.techstudy.org</title>
</head>
<body>
<font color="green">1</font><br>
<font color="blue">2</font>
<font color="gray">3</font>
<font color="#008080">4</font>
<font color="#0008B">5</font>
<font color="brown">6</font>
<font color="#dcdcdc">7</font>
<font color="#800000">8</font>
<font color="purple">9</font>
<font color="#688e23">10</font></body>
</html>
2. Use table tag to format web page. Also create the Time Table of your class using table tag
<html>
<head>
<title>time table</title>
</head>
<body bgcolor="skyblue">
<H1><FONT COLOR="DARKCYAN"><CENTER>COLLEGE TIME
TABLE</FONT></H1>
<table border="2" cellspacing="3" align="center">
<tr>
<td align="center">
<td>9:00-10:00
<td>10:00-11:00
<td>11:00-11:30
<td>11:30-12:30
<td>12:30-1:30
<td>1:30-2:30
</tr>
<tr>
<td align="center">SATURDAY
<td align="center">---<td align="center">PYTHON<br>
<td align="center">CAM<br>
<td rowspan="5"align="center">B<br>R<br>E<br>A<br>K<br>
<td align="center">IC<br>
<td align="center">BLS<br>
</tr>
<tr>
<td align="center">SUNDAY
<td align="center">ENG<br>
<td align="center">CAM<br>
<td align="center">PYTHO<br>
<td align="center">---
<td align="center">FEA<BR>
</tr>
<tr>
<td align="center">MONDAY
<td align="center">CAM<br>
<td align="center">FEA<BR>
<td align="center">ARB/KAN<br>
<td colspan="3" align="center">LAB
</tr>
<tr>
<td align="center">TUESDAY
<td align="center">CAM<br>
<td align="center">PYTHON<br>
<td align="center">FEA<BR>
<td align="center">---
<td align="center">IC<br>
</tr>
<tr>
<td align="center">WEDNESDAY
<td align="center">CAM<BR>
<td align="center">FEA<br>
<td align="center">ENG<br>
<td align="center">---
<td align="center">BLS<br>
</tr>
<tr>
<td align="center">THURSDAY
<td align="center">PYTHON<br>
<td colspan="3" align="center">EVENTS
<td align="center">--<br>
<td align="center">--<br>
</tr>
</body>
</html>
3. Print a paragraph that is a description of a book, include the title of the book as
well as its author. Names and titles should be underlined, adjectives should be
italicized and bolded
<!DOCTYPE html>
<html lang="en">
<head>
<title>Book</title>
</head>
<body>
<img src="/book.jpg" width="200px">
<h1><u>Invisible Man</u></h1><br>
<u>By Ralph Ellison</u><br><br>
<p>
<strong>Description:</strong> "Invisible Man" by <strong>Ralph
Ellison</strong> is a <strong><em>profound</em></strong> and
<strong><em>daring</em></strong> novel that explores the journey of an
unnamed African American narrator.<br>Set in the early 20th century, the story
delves into themes of identity, race, and social injustice. Through its
<strong><em>rich</em></strong> and <strong><em>vivid</em></strong>
prose, the novel exposes<br>the <strong><em>harsh</em></strong> realities
of racism and discrimination, while also celebrating the resilience and strength
of the human spirit. Ellison's masterpiece is an
<strong><em>unforgettable</em></strong>
</p>
</body>
</html>
Output:
4. Print the squares of the numbers 1 - 20. Each number should be on a separate line, next to it the
number 2 superscripted, an equal sign and the result. (Example: 10^2= 100)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>www.techstudy.org</title>
</head>
<body>
1<sup>2</sup> = 1
<br />
2<sup>2</sup> = 4
<br />
3<sup>2</sup> = 9
<br />
4<sup>2</sup> = 16
<br />
5<sup>2</sup> = 25
<br />
6<sup>2</sup> = 36
<br />
7<sup>2</sup> = 49
<br />
8<sup>2</sup> = 64
<br />
9<sup>2</sup> = 81
<br />
10<sup>2</sup> = 100
</br>
11<sup>2</sup> = 121
<br />
12<sup>2</sup> = 144
<br />
13<sup>2</sup> = 169
<br />
14<sup>2</sup> = 196
</br>
15<sup>2</sup> = 225
<br />
16<sup>2</sup> = 256
<br />
17<sup>2</sup> = 289
<br />
18<sup>2</sup> = 324
<br />
19<sup>2</sup> = 361
<br />
20<sup>2</sup> = 400
</body>
</html>
</html>
5. Create lins to five different pages on five different websites that
should all open in a new window
<!DOCTYPE html>
<html lang="en">
<head>
<style>
p{
padding: 20px;
display: block;
}
</style>
<title>Linking</title>
</head>
<body>
<H1><CENTER> WEBSITES LINKS</CENTER></H1>M
<p>
<a href="https://www.google.com" target="_blank"><img
src="https://orig00.deviantart.net/6d95/f/2015/247/b/9/google_2015_logo
_high_resolution_png_by_jovicasmileski-d98chn1.png"
height="20px"></img></a>
</p>
<p>
<a href="https://www.youtube.com" target="_blank"><img
src="https://download.logo.wine/logo/YouTube/YouTube-Logo.wine.png"
height="60px" ></a>
</p>
<p>
<a href="https://www.instagram.com" target="_blank"><img
src="https://img.freepik.com/premium-vector/instagram-social-media-
icon-gradient-social-media-logo_197792-4682.jpg?w=2000"
height="60px"></a>
</p>
<p>
<a href="https://www.facebook.com" target="_blank"><img
src="https://hindubabynames.info/downloads/wp-content/themes/hbn_downlo
ad/download/social-media/facebook-logo.png" height="80px"
width="100px"></a>
</p>
<p>
<a href="https://www.w3schools.com" target="_blank"><img
src="https://internet-salmagundi.com/wp-content/uploads/2019/03/W3-
MatFrame-895x493px-Qual100.jpg" height="80px"></a>
</p>
</body>
</html>
Output:
6. Create a webpage with two images which alternately changes
on mouse over Using CSS
<!DOCTYPE html>
<html lang="en">
<head>
<title>Change Image on Hover Using CSS</title>
<style>
.card{
width: 1000px;
height: 600px;
background: url(/image1.jpg)
.card:hover{
background: url(/image2.jpg);
transition: 0.8s;
</style>
</head>
<body>
<h2><font color="red">Changes on Mouse Over</font></h2>
<div class="card"></div>
</body>
</html>
Output
7. Setting the font type of text Setting the font size of text, Setting
the font color of text, Setting the font style of text Using CSS
<!DOCTYPE html>
<html lang="en">
<head>
<title>Font</title>
</head>
<style>
p{
font-family: 'Lucida Sans';
font-size: 30px;
color: blueviolet;
font-style: italic;
</style>
<body>
<p>Hello everyone, Welcome to AIMCA <br>Established in the
year 1996 as Anjuman Institute of Management.<br>For more
information, Visit their website at www.aimca.in </p>
</body>
</html>
Output:
8. Setting a background image for a page and setting text,
background color using CSS
<!DOCTYPE html >
<html lang="en">
<head>
<title>Image</title>
</head>
<style>
body{
background-image: url(/background.jpeg);
background-size: cover;
h1{
font-size: 145px;
background-color: rgb(252, 219, 163);
</style>
<body>
<h1>Welcome to AIMCA</h1>
</body>
</html>
Output:
6. Write a program to create line and rectangle using HTML5 SVG
<html>
<body>
<svg width="400" height="110">
<rect
width="300"
height="100"
style="
fill: rgba(0, 217, 255, 0.719);
stroke-width: 3;
stroke: rgb(0, 0, 0);
"
/>
</svg>
<br />
<svg width="400" height="110">
<line
x1="0"
y1="0"
x2="200"
y2="200"
style="stroke: rgb(255, 0, 0); stroke-width: 2"
/>
</svg>
</body>
</html>
Output:
9. Write a JavaScript program to display the current
day and time
<!DOCTYPE html>
<html lang="en">
<head>
<title>Date</title>
</head>
<body>
<h2>Date and Time</h2>
<script type="text/javascript">
var days = ["Sunday", "Monday", "Tuesday",
"Wednesday", "Thursday", "Friday", "Saturday"];
var today = new Date();
var number = today.getDay();
document.write("Today is: " + days[number],"<br>");
var hh = today.getHours();
var mm = today.getMinutes();
var ss = today.getSeconds()
document.write("Time is: "+hh+":"+mm+":"+ss)
</script>
</body>
</html>
Output:
Date and Time
Today is: Saturday
Time is: 9:31:0
10. Write a JavaScript program to convert temperatures from Celsius to Fahrenheit
<!DOCTYPE html>
<html lang="en">
<head>
<title>Converter</title>
</head>
<body>
<h2>Converted Temperature :</h2>
<script type="text/javascript">
var c=prompt("Enter the temperature in Celsius: ")
var f=(c * 9/5) + 32
document.write(f+"F")
</script>
</body>
</html>
Output:
Converted Temperature :
37.4F
11. Write a program to create line and rectangle using HTML5 SVG
<html>
<body>
<svg width="400" height="110">
<rect
width="300"
height="100"
style="
fill: rgba(0, 217, 255, 0.719);
stroke-width: 3;
stroke: rgb(0, 0, 0);
"
/>
</svg>
<br />
<svg width="400" height="110">
<line
x1="0"
y1="0"
x2="200"
y2="200"
style="stroke: rgb(255, 0, 0); stroke-width: 2"
/>
</svg>
</body>
</html>
Output:
12. Write a program to create polygon and polyline
<html>
<body>
<svg height="210" width="500">
<polygon
points="200,10 250,190 160,210"
style="fill: lime; stroke: purple; stroke-width: 1"
/>
</svg>
<svg height="180" width="500">
<polyline
points="0,40 40,40 40,80 80,80 80,120 120,120 120,160"
style="fill: white; stroke: red; stroke-width: 4"
/>
</svg>
</body>
</html>
Output:
13. write a program to create a Star
<html>
<body>
<svg height="210" width="500">
<polygon
points="100,10 40,198 190,78 10,78 160,198"
style="
fill: rgb(145, 45, 128);
stroke: rgb(0, 128, 117);
stroke-width: 5;
fill-rule: nonzero;
"
/>
</svg>
</body>
</html>
Output:
14. Write a program to create a Line and Rectangle
<html>
<body>
<canvas id="myCanvas" width="350" height="300" style="border:1px solid grey"></canvas>
<script>
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
ctx.beginPath();
ctx.lineWidth = "6";
ctx.strokeStyle = "purple";
ctx.rect(5, 5, 290, 140);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(250, 200);
ctx.lineTo(10, 200);
ctx.lineWidth = 5;
ctx.strokeStyle = 'blue';
ctx.stroke()
</script>
</body>
</html>
Output:
15. Write a program to create Bezier Curves
<html>
<body>
<h2>The bezierCurveTo() Method</h2>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid grey"></canvas>
<script>
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.bezierCurveTo(20, 100, 200, 100, 200, 20);
ctx.lineWidth="6";
ctx.strokeStyle="red";
ctx.stroke();
</script>
</body>
</html>
Output:
16. Write a program to create Draw Linear Gradient
<html>
<head>
</head>
<body>
<canvas id="myCanvas" width="500" height="600"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var gradient = ctx.createLinearGradient(10, 90, 200, 90);
gradient.addColorStop(0, 'purple');
gradient.addColorStop(1, 'pink');
ctx.fillStyle = gradient;
ctx.fillRect(10, 10, 200, 250);
</script>
</body>
</html>
Output:
17. Write a program to rectangle translation
<html>
<body>
<h2>The translate() Method</h2>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid grey"></canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle="yellow";
ctx.fillRect(10, 10, 100, 50);
ctx.translate(20, 20);
ctx.fillStyle="orange";
ctx.fillRect(10, 10, 100, 50);
ctx.translate(20,20);
ctx.fillStyle="green";
ctx.fillRect(10, 10, 100, 50);
</script>
</body>
</html>
Output:
18. Write a program to rectangle rotation
<html>
<body>
<h2>The rotate() Method</h2>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid grey"></canvas>
<script>
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
ctx.fillRect(30,20,100,50);
ctx.rotate(20 * Math.PI / 180);
ctx.fillStyle="yellow";
ctx.fillRect(30, 20, 100, 50);
</script>
</body>
</html>
Output:
19. Write a program to rectangle scaling using canvas
html>
<body>
<h2>The scale() Method</h2>
<canvas id="myCanvas" width="300" height="250" style="border:1px solid grey"></canvas>
<script>
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
ctx.strokeRect(5, 5, 25, 15);
ctx.scale(2,2);
ctx.strokeRect(5, 5, 25, 15);
ctx.scale(2, 2);
ctx.strokeRect(5, 5, 25, 15);
ctx.scale(2, 2);
ctx.strokeRect(5, 5, 25, 15);
</script>
</body>
</html>
Output:
