Question
In: Computer Science
Please take the code below and add some javascript to it. Please use javascript inline. Please...
Please take the code below and add some javascript to it. Please use javascript inline. Please be sure to specify within the webpage with something like 'Click here' too show what was done and how to activate it. Please post in a format that can be directly copied. Thank you in advance
HINT: add some fun widgets to the page
index-css.html:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- title for web page -->
<title>Index-CSS Page</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <link> refer to external style shet -->
<link href="index-style.css" rel="stylesheet">
</head>
<body>
<header>
<img src="Image1.jpg" alt="Image1" id="image1"/>
<br>
<img src="Image2.jpg" alt="Image2" id="image2"/>
<br>
</header>
<section>
<nav>
<ul>
<li> <a href="Assign-1.html">Assign-1</a>
<ul>
<li><a href="Part-2.html">Part-2</a></li>
<li><a href="Part-3.html">Part-3</a></li>
</ul>
</li>
<li><a href="Assign-2.html">Assign-2.html</a></li>
<li><a href="Assign-3.html">Assign-3.html</a></li>
<li><a href="Assign-4.html">Assign-4.html</a></li>
<li><a href="Assign-5.html">Assign-5.html</a></li>
<li><a href="mailto:[email protected]">Send a mail</a></li>
<li><a href="http://www.google1.com">Go to google</a></li>
</ul>
</nav>
<aside>
<p>
Replace this text.Replace this text.Replace this text.Replace this text.Replace this text.
This is dummy Text.This is dummy Text.This is dummy Text.This is dummy Text.
This is dummy Text.This is dummy Text.This is dummy Text.This is dummy Text.
This is dummy Text.This is dummy Text.This is dummy Text.This is dummy Text.This is dummy Text.
This is dummy Text.This is dummy Text.This is dummy Text.This is dummy Text.This is dummy Text.
This is dummy Text.This is dummy Text.This is dummy Text.This is dummy Text.This is dummy Text.
This is dummy Text.This is dummy Text.This is dummy Text.This is dummy Text.This is dummy Text.
This is dummy Text.This is dummy Text.This is dummy Text.This is dummy Text.This is dummy Text.
This is dummy Text.This is dummy Text.This is dummy Text.This is dummy Text.
This is dummy Text.This is dummy Text.This is dummy Text.This is dummy Text.This is dummy Text.
This is dummy Text.This is dummy Text.This is dummy Text.This is dummy Text.This is dummy Text.
</p>
</aside>
</section>
</body>
</html>
***************************
index-style.css :
/* style rule for body */
body{
background-color: gold;
}
/* style rule for header */
header{
background-color: black;
margin-left:20px;
margin-right: 20px;
text-align: center;
}
/* style rule for Image1 */
#image1{
height: 70px;
width: 150px;
}
/* style rule for Image2 */
#image2{
height: 70px;
width: 500px;
}
/* style rule for nav */
nav{
margin-left:20px;
width: 30%;
float: left;
height: 500px;
background-color:lightgreen;
}
/* style for li */
li{
padding: 5px;
}
/* style rule for aside */
aside{
margin-right:20px;
width: 67%;
float: left;
height: 500px;
background-color:white;
}
/* active links */
a:active{
background-color: yellow;
}
/* style rule for p */
p{
padding: 20px;
text-align: justify;
font-size: 22px;
}
Solutions
Expert Solution
index-css.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- title for web page -->
<title>Index-CSS Page</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <link> refer to external style shet -->
<link href="index-style.css" rel="stylesheet">
</head>
<body>
<header>
<img src="Image1.jpg" id="image1"/>
<br>
<img src="Image2.jpg" id="image2"/>
<br>
</header>
<section>
<nav>
<ul>
<li> <a href="Assign-1.html">Assign-1</a>
<ul>
<li><a href="Part-2.html">Part-2</a></li>
<li><a href="Part-3.html">Part-3</a></li>
</ul>
<script>
function showFoo(){
alert("I am foo!")
return false;
}
</script>
</li>
<li><a href="Assign-2.html">Assign-2.html</a></li>
<li><a href="Assign-3.html">Assign-3.html</a></li>
<li><a href="Assign-4.html">Assign-4.html</a></li>
<li><a href="Assign-5.html">Assign-5.html</a></li>
<li><a href="mailto:[email protected]">Send a mail</a></li>
<li><a href="http://www.google1.com">Go to google</a></li>
<li><a href="index-css.html" id="foo" onClick="showFoo()"> click here </a></li>
</ul>
</nav>
<aside>
<p>
Replace this text.Replace this text.Replace this text.Replace this text.Replace this text.
This is dummy Text.This is dummy Text.This is dummy Text.This is dummy Text.
This is dummy Text.This is dummy Text.This is dummy Text.This is dummy Text.
This is dummy Text.This is dummy Text.This is dummy Text.This is dummy Text.This is dummy Text.
This is dummy Text.This is dummy Text.This is dummy Text.This is dummy Text.This is dummy Text.
This is dummy Text.This is dummy Text.This is dummy Text.This is dummy Text.This is dummy Text.
This is dummy Text.This is dummy Text.This is dummy Text.This is dummy Text.This is dummy Text.
This is dummy Text.This is dummy Text.This is dummy Text.This is dummy Text.This is dummy Text.
This is dummy Text.This is dummy Text.This is dummy Text.This is dummy Text.
This is dummy Text.This is dummy Text.This is dummy Text.This is dummy Text.This is dummy Text.
This is dummy Text.This is dummy Text.This is dummy Text.This is dummy Text.This is dummy Text.
</p>
</aside>
</section>
</body>
</html>
index-style.css
/* style rule for body */
body{
background-color: gold;
}
/* style rule for header */
header{
background-color: black;
margin-left:20px;
margin-right: 20px;
text-align: center;
}
/* style rule for Image1 */
#image1{
height: 70px;
width: 150px;
}
/* style rule for Image2 */
#image2{
height: 70px;
width: 500px;
}
/* style rule for nav */
nav{
margin-left:20px;
width: 30%;
float: left;
height: 500px;
background-color:lightgreen;
}
/* style for li */
li{
padding: 5px;
}
/* style rule for aside */
aside{
margin-right:20px;
width: 67%;
float: left;
height: 500px;
background-color:white;
}
/* active links */
a:active{
background-color: yellow;
}
/* style rule for p */
p{
padding: 20px;
text-align: justify;
font-size: 22px;
}
venereology answered 1 year agoRelated Solutions
Write the below code to use HTML and JavaScript. 1. a) Write a JavaScript program to...
JAVASCRIPT HTML I'm looking to make a function that will take a postal code in a...
Also please add comments on the code and complete in C and also please use your...
Please take this c++ code and make it into java code. /* RecursionPuzzleSolver * ------------ *...
JavaScript Use the browser tools to identify the lines missing var keywords, add the keywords in...
javascript BlackJack i made a blackjack game, the code is below //this method will return a...
Please use the link below, which will take to an article, then summarize it. The summary...
This code needs to be in C++, please. Step 1: Add code to prompt the user...
Please add to this Python, Guess My Number Program. Add code to the program to make...
Use an external CSS & JS file, no internal or inline styles & scripts Please comment...
- Is the argument valid? Use rules of inference and laws of logic to prove or disprove...
- The student will start their own airline company. The student will then: Determine the vision of...
- What are Foyal's five management functions? Identify which organizational units accomplish these functions in your airport...
- Please use a switch statement to tell the user that his work is great, good, satisfactory,...
- A Japanese restaurant chain in the United States is celebrating its twenty-fifth anniversary next year. The...
- List the 3 quantum numbers required to describe the distribution of electron density in an atom...
- Fuzzy Restaurant is considering the purchase of a $1,500,000 flat top grill. The grill has an...