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...
Please use the link below, which will take to an article, then summarize it. The summary...
javascript BlackJack i made a blackjack game, the code is below //this method will return a...
This code needs to be in C++, please. Step 1: Add code to prompt the user...
Use an external CSS & JS file, no internal or inline styles & scripts Please comment...
Please add to this Python, Guess My Number Program. Add code to the program to make...
- 3) You are rolling a 12 sided die 8 times. a) What is the size for...
- explain the difference between quantitative and qualitative research strategies. Provide an example of a crime based...
- use postorder and inorder tree traversals to make preorder traversal. #!/usr/bin/env python3 # encoding: UTF-8 """Turning...
- 1. Write an if-else statement to describe an object. Print "Balloon" if isBalloon is true and...
- An investor is considering purchasing a Treasury bond with a 20 year maturity, an 8% coupon...
- Write a program that copies the contents of one file to a destination file. This program...
- how to conduct a marketing mix for 3d crest white strips