Academic Integrity: tutoring, explanations, and feedback — we don’t complete graded work or submit on a student’s behalf.

just give the skeleton code Create a simple web page that contains exactly four

ID: 3791078 • Letter: J

Question

just give the skeleton code Create a simple web page that contains exactly four of each of the following elements h1, h2, h3, div, paragraph, em, and strong. Fill the elements using random text from Lorem Ipsum at Use an internal CSS to apply style to all of these elements: do something neat, it should be different from your neighbor's styles. Use the onmouseover event handler in the second h1 to change the style of that h1 and also change the style of the second paragraph. (The attribute value of the onmouseover event handler will contain two JavaScript statements. There can only be one onmouseover attribute in a tag.) Use onmouseover to change two styles in the second div element. Use onmouseoutto revert the styles back to what they were initially set as within the CSS. When the first paragraph is clicked change two styles of the third paragraph. When you mouse over a strong element have it increase in size and change the background color of that element to pink. When you click on the first h2 element have a prompt box open that asks for a color. Then turn the text color of that h2 to the color that was entered. When you click on the second h2 element have a prompt box open that asks for a color. Then turn the background color of the page to the color that was entered. Change some styles, at least 3 different properties on the fourth h1 and fourth h2 when you mouse out of the fourth h3 including the background image for that h3.

Explanation / Answer

First 6 question are answered:

1. simpleWebPage.html

<html>
<head>
</head>
<body>
<h1>Lorem Ipsum</h1>
<h2>What is Lorem Ipsum?</h2>
<h3>Lorem Ipsum</h3>
<div>Loreum Ipsum is simply dummy test of the printing and typesetting industry.</div>
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<em>Where does it come from?</em>
<strong>Why do we use it?</strong>
</body>
</html>

--------------------------------------------------------------------

2. Using Internal CSS

<html>
<head>
<style>
h1{
color: green;
text-align: center;
margin left: 40px;
}

h2{
color: blue;
margin left: 40px;
}

h3{
color: orange;
margin left: 40px;
}

div{
color: magenta;
margin left: 40px;
}

p{
color: blue;
margin left: 40px;
}
em{
color: red;
font-size: 25px;
}

strong{
font-size: 30px;
}
</style>
</head>
<body>
<h1>Lorem Ipsum</h1>
<h2>What is Lorem Ipsum?</h2>
<h3>Lorem Ipsum</h3>
<div>Loreum Ipsum is simply dummy test of the printing and typesetting industry.</div>
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<em>Where does it come from?</em>
<strong>Why do we use it?</strong>
</body>
</html>

--------------------------------------------------------------------

3. onmouseover with two events in single tag to change second heading (h1) and second paragraph (p) style.

<html>
<head>
<style>
h1{
color: green;
text-align: center;
margin left: 40px;
}

h2{
color: blue;
margin left: 40px;
}

h3{
color: orange;
margin left: 40px;
}

div{
color: magenta;
margin left: 40px;
}

p{
color: blue;
margin left: 40px;
}
em{
color: red;
font-size: 25px;
}

strong{
font-size: 30px;
}
</style>
</head>
<script>
function changeHeading(){
document.getElementById("heading2").style.color="red";
}
function changePara(){
document.getElementById("para2").style.color="orange";
}
</script>
<body>
<h1 id="heading1">Lorem Ipsum Heading 1</h1>
<h1 id="heading2">Lorem Ipsum Heading 2</h1>
<h2>What is Lorem Ipsum?</h2>
<h3>Lorem Ipsum</h3>
<div>Loreum Ipsum is simply dummy test of the printing and typesetting industry.</div>
<p id="para1">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p id="para2">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<em>Where does it come from?</em>
<strong>Why do we use it?</strong>
</body>
</html>

--------------------------------------------------------------------

4. Change style of div2 on mouseover and revert the style on onmouseout.

<html>
<head>
<style>
h1{
color: green;
text-align: center;
margin left: 40px;
}

h2{
color: blue;
margin left: 40px;
}

h3{
color: orange;
margin left: 40px;
}

div{
color: magenta;
margin left: 40px;
}

p{
color: blue;
margin left: 40px;
}
em{
color: red;
font-size: 25px;
}

strong{
font-size: 30px;
}
</style>
</head>
<script>
function changeHeading(){
document.getElementById("heading2").style.color="red";
}
function changePara(){
document.getElementById("para2").style.color="orange";
}
function changeDiv(){
document.getElementById("div2").style.color="green";
}
function revertDiv(){
document.getElementById("div2").style.color="magenta";
}
</script>
<body>
<h1 id="heading1">Lorem Ipsum Heading 1</h1>
<h1 id="heading2">Lorem Ipsum Heading 2</h1>
<h2>What is Lorem Ipsum?</h2>
<h3>Lorem Ipsum</h3>
<div id="div1">Loreum Ipsum is simply dummy test of the printing and typesetting industry.</div>
<div id="div2">Loreum Ipsum is simply dummy test of the printing and typesetting industry.</div>
<p id="para1">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p id="para2">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<em>Where does it come from?</em>
<strong>Why do we use it?</strong>
</body>
</html>

--------------------------------------------------------------------

5. Change two styles on click (change background color of third paragraph and also change it's font color.)

<html>
<head>
<style>
h1{
color: green;
text-align: center;
margin left: 40px;
}

h2{
color: blue;
margin left: 40px;
}

h3{
color: orange;
margin left: 40px;
}

div{
color: magenta;
margin left: 40px;
}

p{
color: blue;
margin left: 40px;
}
em{
color: red;
font-size: 25px;
}

strong{
font-size: 30px;
}
</style>
</head>
<script>
function changeHeading(){
document.getElementById("heading2").style.color="red";
}
function changePara(){
document.getElementById("para2").style.color="orange";
}
function changeDiv(){
document.getElementById("div2").style.color="green";
}
function revertDiv(){
document.getElementById("div2").style.color="magenta";
}
function changeTwoStyles(){
document.getElementById("para3").style.color="white";
document.getElementById("para3").style.background="black";
}
</script>
<body>
<h1 id="heading1">Lorem Ipsum Heading 1</h1>
<h1 id="heading2">Lorem Ipsum Heading 2</h1>
<h2>What is Lorem Ipsum?</h2>
<h3>Lorem Ipsum</h3>
<div id="div1">Loreum Ipsum is simply dummy test of the printing and typesetting industry.</div>
<div id="div2">Loreum Ipsum is simply dummy test of the printing and typesetting industry.</div>
<p id="para1">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p id="para2">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p id="para3">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<em>Where does it come from?</em>
<strong>Why do we use it?</strong>
</body>
</html>

--------------------------------------------------------------------

6. Mouse over strong element to change background color to pink as well as increase it's size

<html>
<head>
<style>
h1{
color: green;
text-align: center;
margin left: 40px;
}

h2{
color: blue;
margin left: 40px;
}

h3{
color: orange;
margin left: 40px;
}

div{
color: magenta;
margin left: 40px;
}

p{
color: blue;
margin left: 40px;
}
em{
color: red;
font-size: 25px;
}

strong{
font-size: 30px;
}
</style>
</head>
<script>
function changeHeading(){
document.getElementById("heading2").style.color="red";
}
function changePara(){
document.getElementById("para2").style.color="orange";
}
function changeDiv(){
document.getElementById("div2").style.color="green";
}
function revertDiv(){
document.getElementById("div2").style.color="magenta";
}
function changeTwoStyles(){
document.getElementById("para3").style.color="white";
document.getElementById("para3").style.background="black";
}
function changeFontColor(){
document.getElementById("stg1").style.fontSize="50px";
document.getElementById("stg1").style.background="pink";
}
</script>
<body>
<h1 id="heading1">Lorem Ipsum Heading 1</h1>
<h1 id="heading2">Lorem Ipsum Heading 2</h1>
<h2>What is Lorem Ipsum?</h2>
<h3>Lorem Ipsum</h3>
<div id="div1">Loreum Ipsum is simply dummy test of the printing and typesetting industry.</div>
<div id="div2">Loreum Ipsum is simply dummy test of the printing and typesetting industry.</div>
<p id="para1">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p id="para2">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p id="para3">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<em>Where does it come from?</em>
<strong id="stg1">Why do we use it?</strong>
</body>
</html>

--------------------------------------------------------------------