NEW PERSP.ON COMP.CONCEPTS-PACKAGE
17th Edition
ISBN: 9781337761116
Author: Carey
Publisher: CENGAGE L
expand_more
expand_more
format_list_bulleted
Question
Chapter 8, Problem 10CP3
Program Plan Intro
To view the different frames of the images named paa_bat.png, paa_bfly.png, and paa_fox.png stored by the Heather to create the animated cartoons.
Expert Solution & Answer
Want to see the full answer?
Check out a sample textbook solution
Students have asked these similar questions
Copy the code below, and add embedded (internal) styles so that it looks like the image below. You will need the following colours: #E5F4E1 and #017B1B. Use any image you like for dogs.jpg. (you do not need to submit your image, you only need to submit your code).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
margin: 80px;
}
article {
width: 360px;
font-family: sans-serif;
}
</style>
</head>
<body>
<article>
<div class="header">
<h2>Amazing facts about dogs</h2>
</div>
<div>
<img src="images/dogs.jpg" alt="dogs">
<p>Did you know that dogs can only see two colours and can smell cancer and diabetes?</p>
<p>And they can learn over 100 words and gestures!</p>
<a href="dogs.html">More fun facts</a>
</div>
</article>
</body>
</html>
Hello,
I was hoping someone could help me properly format a proper responsive image code using the attached image names, I believe the numbers at the end are in reference to their size so I want to make sure I get it right.
This is what I have.
<!DOCTYPE html>
<html>
<head>
<title>Responsive Images</title>
</head>
<body>
<h1>Mountain Images</h1>
<img src="mountain_1280.jpg" alt="Mountains" srcset= "mountain_1280.jpg 1280w, mountain_240.jpg 240w, mountain_480.jpg 480w" sizes="(max-width: 240px) 100vw, (max-width: 1280px) 70vw, 240px"></body>
</html>
And finally the attached instructions:
Using responsive images tags to create an HTML page that displays the mountain images. The mountain picture are supplied in 4 different sizes. The image in the html file should be able to scale automatically as the browser window resizes at…
I need help with making the changes needed in the image I have provided the code this is what I have so far Below please help<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>homework 14</title></head><body> <div> <h2>Sticky Note Board</h2> <div class="sticky-board"> <div style="display: relative;"> <div class="sticky-note" id="first"> <div class="sticky-note-title"> Transforms </div> <div class="sticky-note-body">CSS transforms change the shape and position of the affected content without disrupting the normal document flow.</div> </div> </div> <div class="sticky-note" id="second"> <div…
Chapter 8 Solutions
NEW PERSP.ON COMP.CONCEPTS-PACKAGE
Ch. 8.2 - Prob. 1QCCh. 8.2 - Prob. 5QCCh. 8.2 - Prob. 7QCCh. 8.2 - Prob. 8QCCh. 8 - Prob. 1RACh. 8 - Prob. 2RACh. 8 - Prob. 3RACh. 8 - Prob. 4RACh. 8 - Prob. 7RACh. 8 - Prob. 8RA
Ch. 8 - Prob. 9RACh. 8 - Prob. 10RACh. 8 - Prob. 11RACh. 8 - Prob. 12RACh. 8 - Prob. 13RACh. 8 - Prob. 14RACh. 8 - Prob. 15RACh. 8 - Prob. 16RACh. 8 - Prob. 17RACh. 8 - Prob. 18RACh. 8 - Prob. 19RACh. 8 - Prob. 2CP1Ch. 8 - Prob. 3CP1Ch. 8 - Prob. 4CP1Ch. 8 - Prob. 5CP1Ch. 8 - Prob. 6CP1Ch. 8 - Prob. 7CP1Ch. 8 - Prob. 8CP1Ch. 8 - Prob. 9CP1Ch. 8 - Prob. 11CP1Ch. 8 - Prob. 1CP2Ch. 8 - Prob. 2CP2Ch. 8 - Prob. 3CP2Ch. 8 - Prob. 4CP2Ch. 8 - Prob. 5CP2Ch. 8 - Prob. 6CP2Ch. 8 - Prob. 7CP2Ch. 8 - Prob. 8CP2Ch. 8 - Prob. 9CP2Ch. 8 - Prob. 10CP2Ch. 8 - Prob. 2CP3Ch. 8 - Prob. 3CP3Ch. 8 - Prob. 5CP3Ch. 8 - Prob. 6CP3Ch. 8 - Prob. 7CP3Ch. 8 - Prob. 8CP3Ch. 8 - Prob. 9CP3Ch. 8 - Prob. 10CP3Ch. 8 - Prob. 11CP3Ch. 8 - Prob. 12CP3Ch. 8 - Prob. 13CP3Ch. 8 - Prob. 14CP3Ch. 8 - Prob. 15CP3Ch. 8 - Prob. 16CP3Ch. 8 - Prob. 17CP3Ch. 8 - Prob. 18CP3Ch. 8 - Prob. 1CP4Ch. 8 - Prob. 2CP4Ch. 8 - Prob. 3CP4Ch. 8 - Prob. 4CP4Ch. 8 - Prob. 5CP4Ch. 8 - Prob. 6CP4Ch. 8 - Prob. 7CP4Ch. 8 - Prob. 9CP4Ch. 8 - Prob. 10CP4
Knowledge Booster
Similar questions
- Hi, can you help mw with this question? Thanks! Art Program. I need to build on our PBM image creator from (code shown below) to create a fully functional image editor, using 2D arrays to store our changes. We’ll also make it a little more interesting by switching to the Portable Gray Map standard. 8 bit PGM files have color values ranging from 0 (black) to 255 (white), with the values in-between being shades of gray. The header is very similar to PBM, and looks like this: P2 WIDTH HEIGHT 255 IMAGE_DATA The P2 tells image readers that it is a PGM file, and the 255 indicates the largest possible color value is 255. You will first prompt the user to enter a width, height, and initial color value to fill the image. You should then create a 2D array with those dimensions and initialize each cell with that color value. You will then use a loop to create a menu that repeatedly prompts the user to make one of the following choices: Fill in a pixel with a new color ◦ Prompt the user to…arrow_forwardThere's something wrong with this code. - All images should by 100px by 100px index.html file: <!DOCTYPE html><html> <head> <title>Edible Plants of Africa</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1> Indigenous Edible Plants Found in South Africa </h1> <ul style= "font-size: 24px"> <!--- Note that you don't have to put "font-size: 24px" on the ul tag. This needs to be put in so that the assignment would go through. --> <li> Wild Malva</li> <li> Confetti Bush </li> <li> Num-num </li> <li> Wild Garlic </li> <li> Balderjan </li> <li> Sour figs </li> </ul> <!--- Note that you don't have to put "width= 100px" and…arrow_forwardHello, I am trying to get the 1s in the image attached to change them into a,b,and c respectively. Please correct my code where necessary. <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head> <body> <ol> <li> Question 3 <ol> <li><img src="exam.gif" alt="Image 1" width="200" height="150"></li> <ol> <li><img src="OIP.jpg" alt="Image 2" width="200" height="150"></li> <ol> <li><img src="Successful.jpg" alt="Image 3" width="200" height="150"></li> </ol> </ol> </ol> </li> </ol></body> </html>arrow_forward
- I need help with making the auditions needed in the image I have provided the code this is what I have so far Below please help. <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Lab 14</title></head><body> <div> <h2>Sticky Note Board</h2> <div class="sticky-board"> <div style="display: relative;"> <div class="sticky-note" id="first"> <div class="sticky-note-title"> Transforms </div> <div class="sticky-note-body">CSS transforms change the shape and position of the affected content without disrupting the normal document flow.</div> </div> </div> <div class="sticky-note" id="second"> <div…arrow_forwardI need help with making the auditions needed in the image I have provided the code this is what I have so far Below please help. <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Lab 14</title></head><body> <div> <h2>Sticky Note Board</h2> <div class="sticky-board"> <div style="display: relative;"> <div class="sticky-note" id="first"> <div class="sticky-note-title"> Transforms </div> <div class="sticky-note-body">CSS transforms change the shape and position of the affected content without disrupting the normal document flow.</div> </div> </div> <div class="sticky-note" id="second"> <div…arrow_forwardBelow are the files needed for the assignment. Thank you in advance. I've used my textbook, looked up guides, and reviewed my notes already. FILE #1 <!DOCTYPE html> <!-- Student Name: Jordan Collins File Name: index.hmtl Date: 10/13/2021 --> <html lang="en"> <head> <title>CH 4 Extend Your Knowledge</title> <meta charset="utf-8"> <link rel=“stylesheet” href=“css/styles.css”> </head> <body> <header> <h1>CSS Colors</h1> </header> <main> <div id="color"> <div id="orange"> <h2>Orange</h2> <div class="box orange-hex">Hex Orange</div> <div class="box orange-rgb">RGB Orange</div> <div class="box orange-hsl">HSL Orange</div> </div> <div…arrow_forward
- How do I add multiple floating images but keep them contained to the layout below like the guide image I have below? I have a floating image but it is just staying in the middle of the page. Also why is my footer image on the right instead of at the bottom where it should be? HTML <html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title>Flexbox Coding</title></head> <link rel="stylesheet" href="Style.css"> <body> <header class="header-image"> <img src="57mBcYi.jpeg" alt="Header Image"> </header> <div class="flex-container"> <div> <ul> <li><a href="Page1.html">Link to Page 1</a></li> <li><a href="Page2.html">Link to Page 2</a></li> </ul> </div> <div>An country…arrow_forwardI need to change this code so that there is no button, and the jackhammer animation starts as soon as the page loads. <!DOCTYPE html><html><head> <!-- CIS213 Unit 3, Graded Exercise 1 Author: Michael Porter Date: 9/15/22 --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>Unit 3 Graded Exercise 1</title></head><body> <h1>Michael Porter, JackhammerMan Exercise</h1> <img id="imgJackhammer" src="jackhammer0.gif" width="113" height="100" alt="Image of a man with a jackhammer."><br> <button onclick="startBouncing()">Start Bouncing</button> <script> var jackhammers = ["jackhammer0.gif", "jackhammer1.gif", "jackhammer2.gif", "jackhammer3.gif", "jackhammer4.gif", "jackhammer5.gif", "jackhammer6.gif", "jackhammer7.gif", "jackhammer8.gif", "jackhammer9.gif",…arrow_forwardHow do I get the result in the image? Here is my code for a weather forecast in php: Here is my code: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Forecast Weather using PHP</title> <style> .report-container { border: #E0E0E0 1px solid; padding: 20px 40px 40px 40px; border-radius: 2px; margin: 0 auto; color: #929292; } .weather-icon { vertical-align: middle; margin-right: 20px; } .weather-forecast { color: #212121; font-size: 1.2em; font-weight: bold; margin: 20px 0px; } span.min-temperature { margin-left: 15px; color: #929292; } .time { line-height: 25px; } </style> </head> <body> <div class="report-container"> <?php function getForecast($city) { $country = "US"; $url = "http://api.openweathermap.org/data/2.5/forecast/daily?q=" . $city . "," . $country . "&units=metric&cnt=1&lang=en&appid=c0c4a4b4047b97ebc5948ac9c48c0559"; $json = file_get_contents($url); $data = json_decode($json,…arrow_forward
- what I have so far but it is not working I tried to add an image file to my page i have also included somthing my teacher sent but i can not make sence of it body {font-family: Georgia, serif;font-size: 100%;line-height: 175%;margin: 0 15% 0;background-color:rgb(210,220,157);background-image: url("bullseye.png"); /* Rounded Shape image */background-size: contain;}header {margin-top: 0;padding: 3em 1em 2em 1em;text-align: center;border-radius:4px;background-color:hsl(0, 14%, 95%);opacity:0.5;background-image: url("purpledot.png"); /*purple image*/background-repeat: repeat-x;}a {text-decoration: none;color:rgb(153,51,153);}a:visited{color: hsl(300, 13%, 51%);}a:hover{background-color: #fff;}a:focus{background-color: #fff;}a:active{color:#ff00ff;}h1 {font: bold 1.5em Georgia, serif;text-shadow: 0.1em 0.1em 0.2em gray;color: rgb(153,51,153);}h2 {font-size: 1em;text-transform: uppercase;letter-spacing: 0.5em;text-align: center;color:rgb(204,102,0);}dt {font-weight: bold;}strong {font-style:…arrow_forwardI almost have it done but I don't know how to get them to stay in their final position after the animation like in the gif <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Lab 14</title></head><body> <div id="backgd"> <h2 id="heading-color">Sticky Note Board</h2> <div class="sticky-board"> <div style="display: relative;"> <div class="sticky-note" id="first"> <div class="sticky-note-title"> Transforms </div> <div class="sticky-note-body">CSS transforms change the shape and position of the affected content without disrupting the normal document flow.</div> </div> </div> <div class="sticky-note" id="second">…arrow_forwardHello, I am trying to have this list slant like what it does in the code but I need them to be ordered with lowercase letters. Like the first image should look like a.(image) b.(image2) c.(image3) Here is my code. Thank you! <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head> <body> <ol> <li> Question 3 <ol type="a" <ol <li><img src="exam.gif" alt="Image 1" width="200" height="150"></li> <ol> <li><img src="OIP.jpg" alt="Image 2" width="200" height="150"></li> <ol> <li><img src="Successful.jpg" alt="Image 3" width="200" height="150"></li> </ol>…arrow_forward
arrow_back_ios
SEE MORE QUESTIONS
arrow_forward_ios
Recommended textbooks for you
New Perspectives on HTML5, CSS3, and JavaScriptComputer ScienceISBN:9781305503922Author:Patrick M. CareyPublisher:Cengage Learning
New Perspectives on HTML5, CSS3, and JavaScript
Computer Science
ISBN:9781305503922
Author:Patrick M. Carey
Publisher:Cengage Learning