Index
All the Best!!!!
–Shelton Coutinho
- Print the numbers 1 – 10 each number being a different color.
- Use table tag to format web page. Also create the Time Table of your class using table tag.
- 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.
- 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)
- Create links to five different pages on five different websites that should all open in a new window.
- Setting a background image for a page and setting text, background color Using CSS
- 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
- Create a webpage with two images which alternately changes on mouse over using CSS.
Write a JavaScript program to display the current day and timeWrite a JavaScript program to convert temperatures to and from Celsius, Fahrenheit.- Write a program to create a Line and Rectangle using.
- Write a program to create a polygon, polyline.
- Write a program to create a star .
- Write a program to create a Line and Rectangle
- Write a program to create Bezier Curves
- Write a program to create Draw Linear Gradient
- Write a program to rectangle translation.
- Write a program to rectangle rotation.
- Write a program to rectangle scaling using canvas.
Write a program to rotate a small image repeatedly.
Programs
1. Print the numbers 1 – 10 each number being a different color.
<html>
<head><title>Prog 1</title></head>
<body>
<font color="green" size = 8>1</font><br>
<font color="blue" size = 8>2</font><br>
<font color="gray" size = 8>3</font><br>
<font color="violet" size = 8>4</font><br>
<font color="yellow" size = 8>5</font><br>
<font color="brown" size = 8>6</font><br>
<font color="green" size = 8>7</font><br>
<font color="pink" size = 8>8</font><br>
<font color="purple" size = 8>9</font><br>
<font color="indigo" size = 8>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>Prog 2</title></head>
<body>
<table border = "1" align = "center" width = "100px" height = "100px">
<tr>
<td>#</td>
<th>8:00-9:00</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>
</tr>
<tr>
<th>Monday</th>
<td>Html</td>
<td>Python</td>
<td>Java</td>
<td>Cpp</td>
<td>Maths</td>
</tr>
<tr>
<th>Tuesday</th>
<td>Maths</td>
<td>Html</td>
<td>Cpp</td>
<td>Java</td>
<td>Python</td>
</tr>
<tr>
<th>Wednesday</th>
<td>Html</td>
<td>Cpp</td>
<td>Python</td>
<td>Java</td>
<td>Maths</td>
</tr>
<tr>
<th>Thursday</th>
<td>Python</td>
<td>Maths</td>
<td>Java</td>
<td>Maths</td>
<td>Cpp</td>
</tr>
<tr>
<th>Friday</th>
<td>Java</td>
<td>Python</td>
<td>Html</td>
<td>Cpp</td>
<td>Maths</td>
</tr>
<tr>
<th>Saturday</th>
<td>Cpp</td>
<td>Python</td>
<td>Java</td>
<td>Maths</td>
<td>Html</td>
</tr>
</table>
</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.
<html>
<head><title>Prog 3</title></head>
<body>
<h1><center>The Catcher in the Rye</center></h1>
<h2><center>By: <u>J.D. Salinger</u></center></h2>
<p><u>The Catcher in the Rye</u> is a <b><i>classic</i></b> novel by <u>J.D. Salinger</u>. The story follows the life of a young man named Holden Caulfield as he navigates his way through adolescence and adulthood. The novel has been praised for its honest portrayal of teenage angst and rebellion, and has become a staple in American literature.
</p>
</body>
</html>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)
<html>
<head><title>Prog 4</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<br>
</body>
</html>5. Create links to five different pages on five different websites that should all open in a new window.
<html>
<head><title>Prog 5</title></head>
<body>
<a href="https://www.google.com" target="_blank">Google</a><br>
<a href="https://www.facebook.com" target="_blank">Facebook</a><br>
<a href="https://www.twitter.com" target="_blank">Twitter</a><br>
<a href="https://www.instagram.com" target="_blank">Instagram</a><br>
<a href="https://www.youtube.com" target="_blank">YouTube</a>
</body>
</html>6. Setting a background image for a page and setting text, background color Using CSS
<html>
<head><title>Prog 6</title>
<style>
body {
background-image: url(suzume.jpg);
background-color: lightblue;
text-align: center;
color: black;
font-size: 35px
}
</style>
</head>
<body>
<h1>CSI College of Commerce</h1>
<p>Welcome this page contains the information about CSI College of Commerce</p>
</body>
</html>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
<html>
<head><title>Prog 7</title>
<style>
p {
font-family: Arial, sans-serif;
font-size: 20px;
color: red;
font-style: italic;
}
h3 {
font-family: Georgia, Times New Roman;
font-size: 25px;
color: blue;
font-style: normal;
}
</style>
</head>
<body>
<p>This is a text with a Arial font type, 20px size, red color, and italic style.</p>
<h3>This is a text with a Georgia font type, 25px size, blue color, and normal style.</h3>
</body>
</html>8. Create a webpage with two images which alternately changes on mouse over using CSS.
<html>
<head><title>Prog 8</title>
<style>
#image {
width: 720px;
height: 720px;
content: url(suzume.jpg);
}
#image:hover {
width: 720px;
height: 720px;
content: url(blender.png);
}
</style>
</head>
<body>
<div id="image"></div>
<h1>Hower your mouse over image</h1>
</body>
</html>9. Write a JavaScript program to display the current day and time
<html>
<head><title>Prog 9</title></head>
<body>
<p id="demo"></p>
<script>
var d = new Date();
document.getElementById("demo").innerHTML = d;
</script>
</body>
</html>10. Write a JavaScript program to convert temperatures to and from Celsius, Fahrenheit.
<!DOCTYPE html>
<html>
<body>
<h2>Temperature Converter</h2>
<p>Type a value in either the Celsius or Fahrenheit field to convert the temperature: </p>
<input id="c" oninput="ctf(this.value)" onchange="ctf(this.value)">
<label for="c">°C</label>
<br>
<input id="f" oninput="ftc(this.value)" onchange="ftc(this.value)">
<label for="f">°F</label>
<script>
function ctf(c) {
let f = (c * 9/5)+32;
document.getElementById("f").value = f;
}
function ftc(f) {
let c = (f-32)*5/9;
document.getElementById("c").value = c;
}
</script>
</body>
</html>11. Write a program to create a Line and Rectangle using.
<svg width="1200" height = "600">
<rect width = "300" height = "200"
stroke = "red"
stroke-width = "5px"
fill="blue"></rect>
<line x1="0" y1="300" x2="30" y2 = "300"
stroke = "orange"
stroke-width = "5"></line>
</svg>
12. Write a program to create a polygon, polyline.
<svg width="400" height="400">
<polygon points="100,100 200,50 300,100 300,250 200,300 100,250" fill="orange" stroke="black" />
<polyline points="150,200 200,150 250,200" fill="none" stroke="blue" stroke-width="2" />
</svg>
13. Write a program to create a star.
<svg height="210" width="500">
<polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;" />
</svg>14. Write a program to create a Line and Rectangle.
<html>
<body>
<canvas id="myCanvas" width="400" height="300" style="border:1px solid #d3d3d3;">
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.strokeRect(50,50,180,100);
ctx.moveTo(50,50);
ctx.lineTo(230,150);
ctx.stroke();
</script>
</body>
</html>15. Write a program to create Bezier Curves.
<canvas id="myCanvas" width="300" height="150"></canvas>
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.bezierCurveTo(50, 150, 200, 150, 200, 50);
ctx.bezierCurveTo(200, 0, 350, 0, 350, 50);
ctx.stroke();
</script>16. Write a program to create Draw Linear Gradient.
<canvas id="myCanvas" width="300" height="150"></canvas>
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const grd = ctx.createLinearGradient(0, 0, 170, 0);
grd.addColorStop(0, "black");
grd.addColorStop(1, "white");
ctx.fillStyle = grd;
ctx.fillRect(20, 20, 150, 100);
</script>17. Write a program to rectangle translation.
<canvas id = "mycanvas" width="600" height="450"></canvas>
<script>
const c = document.getElementById("mycanvas");
const ctx = c.getContext("2d");
ctx.fillRect(10, 10, 100, 50);
ctx.translate(120, 70);
ctx.fillRect(10, 10, 100, 50);
</script>18. Write a program to rectangle rotation.
<canvas id="myCanvas" width="600" height="450"></canvas>
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.rect(50, 100, 150, 100);
ctx.rotate(-20 * Math.PI / 180);
ctx.rect(50, 100, 150, 100);
ctx.stroke();
</script>19. Write a program to rectangle scaling using canvas.
<canvas id="myCanvas" width="600" height="450"></canvas>
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.strokeRect(15, 15, 150, 100);
ctx.scale(2, 2);
ctx.strokeRect(50, 50, 120, 80);
</script>20. Write a program to rotate a small image repeatedly.
To be Updated soon :)