Scribd
Upload
11 views22 pages

CAMLAB

The document contains a series of HTML and JavaScript examples demonstrating various web development techniques. These include printing numbers in different colors, creating a timetable using tables, displaying book descriptions, calculating squares of numbers, and generating links to external websites. Additionally, it covers image manipulation, CSS styling, SVG graphics, and JavaScript functionalities for date/time display and temperature conversion.

Uploaded by

ayshahnr0
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
11 views22 pages

CAMLAB

The document contains a series of HTML and JavaScript examples demonstrating various web development techniques. These include printing numbers in different colors, creating a timetable using tables, displaying book descriptions, calculating squares of numbers, and generating links to external websites. Additionally, it covers image manipulation, CSS styling, SVG graphics, and JavaScript functionalities for date/time display and temperature conversion.

Uploaded by

ayshahnr0
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 22

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(/https/www.scribd.com/image1.jpg)

.card:hover{

background: url(/https/www.scribd.com/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(/https/www.scribd.com/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:

You might also like