from part 6 to 9 Create a simple web page that contains exac

from part 6 to 9

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 http://www.lipsum.com/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 onmouseout to 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 and fourth h2 when you mouse out of the fourth h3 including the background image for that h3.

<html>

<head>

<title> Sample HTML Page </title>

<script>
function changehStrongEleStyle(ele) {
   ele.style.background = \'pink\';
   ele.style.fontSize = \'22px\';
}
function changeh2p2Style() {
    document.getElementById(\'hdr12\').style.color = \'Goldenrod\';
    document.getElementById(\'p2\').style.color = \'Goldenrod\'
}
function changestyleOnOver(ele) {
   ele.style.color = \'black\';
   ele.style.background = \'yellow\';
}
function changestyleOnleave(ele) {
   ele.style.color = \'cyan\';
   ele.style.background = \'white\';
}
function changeP3Style() {
   document.getElementById(\'p3\').style.background = \'grey\';
   document.getElementById(\'p3\').style.fontSize = \'20px\';
}
function promptH2(ele) {
    var color = prompt(\"Please enter Color\", \"\");
    if (color != null) {
        if(ele.id == \'hdr21\') {
           ele.style.color= color;
       } else {
           ele.style.background= color;
       }

    }
}
function change3Style(ele) {
   document.getElementById(\'hdr14\').style.border = \'1px solid powderblue\';
   document.getElementById(\'hdr14\').style.fontfamily = \'verdana\';
   document.getElementById(\'hdr14\').style.padding = \'30px\';
   document.getElementById(\'hdr24\').style.border = \'1px solid blue\';
   document.getElementById(\'hdr24\').style.fontfamily = \'Tahoma\';
   document.getElementById(\'hdr24\').style.padding = \'25px\';

   ele.style.backgroundImage = \'url(\"\")\'; // provide Your Image URL in double quotes
}
</script>
<style type=\"text/css\">
h1 {
   color :green;
}
h2 {
   color : red;
}
h3 {
   color : blue;
}
div {
   color : cyan;
}
p {
   color : black;
}
em {
   color : orange;
}
strong {
   color : skyblue;
}
</style>
</head>
<body>
   <h1 id=\'hdr11\'>Header1 Element - one</h1>
   <h1 onmouseover=\'changeh2p2Style()\' id=\'hdr12\'>Header1 Element - Two</h1>
   <h1 id=\'hdr13\'>Header1 Element - Three</h1>
   <h1 id=\'hdr14\'>Header1 Element - Four</h1>
   <h2 id=\'hdr21\' onclick=promptH2(this)>Header2 Element - one</h2>
   <h2 id=\'hdr22\' onclick=promptH2(this)>Header2 Element - Two</h2>
   <h2 id=\'hdr23\'>Header2 Element - Three</h2>
   <h2 id=\'hdr24\'>Header2 Element - Four</h3>
   <h3 id=\'hdr31\'>Header3 Element - one</h3>
   <h3 id=\'hdr32\'>Header3 Element - Two</h3>
   <h3 id=\'hdr33\'>Header3 Element - Three</h3>
   <h3 id=\'hdr34\' onmouseleave = change3Style(this)>Header3 Element - Four</h3>
   <div id=\'div1\'> Div 1 </div>
   <div id=\'div2\' onmouseover = changestyleOnOver(this) onmouseleave= changestyleOnleave(this)> Div 2 </div>
   <div id=\'div3\'> Div 3 </div>
   <div id=\'div4\'> Div 4 </div>
   <p id=\'p1\' onClick = \'changeP3Style()\'> Paragraph 1 </p>
   <p id=\'p2\'> Paragraph 2 </p>
   <p id=\'p3\'> Paragraph 3 </p>
   <p id=\'p4\'> Paragraph 4 </p>
   <em id=\'em1\'> Emphasized Text 1 </em> <br>
   <em id=\'em2\'> Emphasized Text 2 </em><br>
   <em id=\'em3\'> Emphasized Text 3 </em><br>
   <em id=\'em4\'> Emphasized Text 4 </em><br><br>
   <strong id=\'str1\' onmouseover = changehStrongEleStyle(this)> strong Text 1 </strong><br>
   <strong id=\'str2\' onmouseover = changehStrongEleStyle(this)> strong Text 2 </strong><br>
   <strong id=\'str3\' onmouseover = changehStrongEleStyle(this)> strong Text 3 </strong><br>
   <strong id=\'str4\' onmouseover = changehStrongEleStyle(this)> strong Text 4 </strong><br>
</body>
</html>

from part 6 to 9 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 elem

from part 6 to 9 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 elem

Tutor

Dr Jack

Tutor: Dr Jack

Most rated tutor on our site