Setting the Stage ...
Phantom of the Opera https://www.youtube.com/watch?v=8fKKiaSLLEY
<!-- FirstPage.html CPS 2022 -->
<html>
<head>
<style>
body{
color:crimson;
font-size: 24.0px;
font-weight: bold;
font-family: "courier new";
}
</style>
<script>
function print(str)
{
document.getElementById("output").innerHTML += str + "<br />";
}
</script>
</head>
<body>
This is my first webpage.<br />
<input type="button" onclick="print('CPS 2022')"
value="Produce Output" /><br />
<img src="smile.gif" width="100" height="100" />
<div id="output"></div>
</body>
</html>
<!-- FirstPage.html with added Javascript CPS 2023 -->
<html>
<head>
<style>
body{
color:crimson;
font-size: 24.0px;
font-weight: bold;
font-family: "courier new";
}
</style>
<script>
function print(str)
{
document.getElementById("output").innerHTML += str + "<br />";
}
function changePageColor(pageColor)
{
document.body.style.background = pageColor;
}
</script>
</head>
<body>
This is my first webpage.<br />
<input type="button" onclick="print('CPS 2022')"
value="Produce Output" /><br />
<input type="button" onclick="changePageColor('yellow')"
value="Change Color" /><br />
<img src="smile.gif" width="100" height="100" />
<div id="output"></div>
</body>
</html>
<!-- FirstPage.html CPS 2023 -->
<html>
<head>
<style>
body{
color:crimson;
font-size: 24.0px;
font-weight: bold;
font-family: "courier new";
}
</style>
<script>
var thing = ["I work at CPS", "I like hip hop music",
"I live in Chi Town", "We are at DePaul", "Stop poking me",
"One thing at a time", "Use a random generator"];
function run()
{
var which = Math.floor( Math.random() * thing.length );
print(thing[which]);
}
function print(str)
{
document.getElementById("output").innerHTML += str + "<br />";
}
</script>
</head>
<body>
This is my first webpage.<br />
<input type="button" onclick="run()"
value="Produce Output" /><br />
<img src="smile.gif" width="100" height="100" />
<div id="output"></div>
</body>
</html>
<!-- FirstPage.html CSP 2022 -->
<html>
<head>
<style>
body{
color:crimson;
font-size: 24.0px;
font-weight: bold;
font-family: "courier new";
}
</style>
<script>
var thing = ["I work at CPS", "I like hip hop music",
"I live in Chi Town", "We are at DePaul", "Stop poking me",
"One thing at a time", "Use a random generator"];
function run()
{
var which = Math.floor( Math.random() * thing.length );
print(thing[which]);
}
function print(str)
{
document.getElementById("output").innerHTML += str + "<br />";
}
</script>
</head>
<body>
This is my first webpage.<br />
<input type="button" onclick="run()"
value="Produce Output" /><br />
<img src="smile.gif" width="100" height="100" /><div id="output"></div>
</body>
</html>