Web Development and Design Foundations with HTML5 (9th Edition) (What's New in Computer Science)
9th Edition
ISBN: 9780134801346
Author: FELKE-MORRIS
Publisher: PEARSON
expand_more
expand_more
format_list_bulleted
Question
Chapter 4, Problem 3AYK
Program Plan Intro
“<img>” tag:
The image tag used to define an image in the web page. The tag “<img>” used to describe the image; it has the following attributes:
- alt – this attribute used to specify the alternative text when the browser cannot support the image.
- border – specify the border width of an image
- height and width – this attributes specify the height and width of the image.
- longdesc – specify the URL that provide detailed description of an image.
- src – mention the source of an image.
The other attributes also used to specific purpose of an image.
Expert Solution & Answer
Want to see the full answer?
Check out a sample textbook solutionStudents have asked these similar questions
Write down complete HTML + CSS + jQuery code to demonstrate following:a) When you double click a button, show 3 boxes with green, red and yellow color with different border styles.b) Demonstrate with complete jQuery code the functionality of text auto completion by showing suggestions for words typed by user in a search bar
Write a JavaScript code with the following three different conditions:
Create the HTML document containing an <img> element with id="myImage" for any images you want.
Use the HTML DOM to get the element with id="myImage".
Write a JavaScript function to change the JavaScript src attribute of <img> element from " pet.gif" to " cat.jpg" when clicking on a button.
Note: Students can use any gif and jpg files according to their choice.
Open your text editor: Please complete this code in HTML
create a new file and name it “Lec_Ex4_2.html”
create a new file and name it “style_2.css”
Type the 8 lines in the html(basic html structure).
Add this line to the head section of html:
Write these lines in the body of the html:
<div id=“title”><h1>Your name</h1></div> <div id=“container1”> . </div> Style it in the CSS: #title{ background-color:blue;} #container1 {background-color:red;}
If we don’t specify the width of the div element,it will take up the full width available. We can specify the width and height of the divusing percentages or pixels. Percentages are flexible (changes according tothe screen size), and pixels are fixed. Add the following property to both divs: Width:80%; This is comparing to the full screen
For the title div: Padding:2%; For the container div: Height: 400px; Height can also be made with percentages, butpixels are preferred.
Your…
Chapter 4 Solutions
Web Development and Design Foundations with HTML5 (9th Edition) (What's New in Computer Science)
Ch. 4.1 - Prob. 1CPCh. 4.1 - Prob. 2CPCh. 4.1 - Prob. 3CPCh. 4.5 - Prob. 1CPCh. 4.5 - Prob. 2CPCh. 4.5 - Prob. 3CPCh. 4.7 - Prob. 1CPCh. 4.7 - Prob. 2CPCh. 4.7 - Prob. 3CPCh. 4 - Prob. 1MC
Ch. 4 - Prob. 2MCCh. 4 - Prob. 3MCCh. 4 - Prob. 4MCCh. 4 - Prob. 5MCCh. 4 - Prob. 6MCCh. 4 - Prob. 7MCCh. 4 - Prob. 8MCCh. 4 - Prob. 9MCCh. 4 - Prob. 10MCCh. 4 - Prob. 11FIBCh. 4 - Prob. 12FIBCh. 4 - Prob. 13FIBCh. 4 - Prob. 14FIBCh. 4 - Prob. 15FIBCh. 4 - Prob. 1AYKCh. 4 - Prob. 2AYKCh. 4 - Prob. 3AYKCh. 4 - Prob. 1HOECh. 4 - Prob. 2HOECh. 4 - Prob. 3HOECh. 4 - Prob. 4HOECh. 4 - Prob. 5HOECh. 4 - Prob. 6HOECh. 4 - Prob. 7HOECh. 4 - Prob. 8HOECh. 4 - Prob. 9HOECh. 4 - Prob. 10HOECh. 4 - Prob. 1WRCh. 4 - Prob. 2WRCh. 4 - Prob. 1FWD
Knowledge Booster
Similar questions
- I want to make a CSS for this code so the logo is in the center of the page and the text needs to be bigger and fits the page and evenly spaced. I also want to make the background color white and for the body to have a blue border. I also want the footer to have a blue background and centered. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="CSS/index.css"> <title>Video Game History</title> </head> <body> <nav> <a href="index.html">Home</a> <a href="about.html">About Us</a> <a href="contact.html">Contact Us</a> </nav> <h1>Home Page</h1> <article> <img src="Images/Logo.png" alt="Video Game" height="80"> <h2>The Early Ages</h2> <p>Today, video…arrow_forwardWrite a JavaScript code with the following three different conditions: • Create the HTML document containing an element with id="myImage" for any images you want. • Use the HTML DOM to get the element with id="myImage". • Write a JavaScript function to change the JavaScript src attribute of element from " pet.gif" to " cat.jpg" when clicking on a button. Note: Students can use any gif and jpg files according to their choice. Important notes: 1. You should have to copy and paste the script as your answer to this question. DON’T take a screenshot for your script. It must be an editable script. 2. Take a screenshot of your output web page and paste it as a part of your answer.arrow_forward18.Code HTML and CSS for the following: Place three images inside the display area of your web page. The dimensions of the images areimgA: height = 20%; width = 100pximgB: height = 150px; width = 250remimgC: height = 180vmin; width = 50% Display imgA and have it positioned 100px from the left of its container and 100vmax from the top.Display imgB and have it positioned 120px from the left of its container and 120em from the bottom.Display imgC and have it positioned 200px from the top of its container and centered horizontally. The order of HTML code for displaying the three images are to be imaA code, then imaB code, and finally imaC code. Make sure imgA is displayed on top of imgC and imgC is on top of imgB. Code all mandatory attributes. Given a choice, always use a property instead of an attribute.arrow_forward
- Question 1: a) Modify this code like exactly as below pictures and make boxes big like picture below . How can you apply translate property in CSS on an image when the user b) b) hovers it with the mouse pointer it translates an image? Provide CSS code and screenshot of the output image. Code: <!DOCTYPE html> <html> <body> <style> td{ border:1pxsolidblack; } td { border-collapse:collapse; } </style> <tablewidth="50%"> <tr> <tdcolspan='3'>1</td> <tdrowspan='3'>2</td> <tdcolspan='2'>3</td> <tdrowspan='2'>N</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> </tr> <tr> <tdcolspan='3'>9</td> <tdcolspan='2'>10</td> <td>N</td> </tr> <tr> <tdcolspan='7'>N</td> </tr> <tr> <td>N</td> <td>N</td>…arrow_forwardWrite the HTML and CSS code to produce the following result in browser, use the transparency to show the image transparent as shown in the figure. As we hover the mouse over the image it should clearly be displayed as shown in the figure (the right most).arrow_forwardPlease fix and improve my HTML and CSS code: First picture is my WRONG output. Second picture is the EXPECTED output. Just use random pictures for photo1. photo2, photo3, photo4, photo1thumb, photo2thumb, photo3thumb, photo4thumb for testing. index.html <!DOCTYPE html><html lang="en"><head><title>Image Gallery</title><meta charset="utf-8"><style> #gallery { position: relative; }#gallery ul { width: 250px; list-style-type: none; }#gallery li { display: inline; float: left; padding: 10px#gallery img { border-style: none; }#gallery a { text-decoration: none; color: #333; font-style: italic; }#gallery span { display: none; }#gallery a:hover span { display: block; position: absolute; top: 10px; left: 300px; text-align: center; } </style></head><body><h1>Image Gallery</h1><div…arrow_forward
- JavaScript The below HTML code sets up a template for a die. By cloring the dots (dot1,..., dot9)with black or white color, we show any of the 6 sides of the die. <!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style type="text/css"> table{ border: 2px solid black; border-radius: 5px; } td{ width: 20px; height: 20px; background-color: black; border-radius: 50%; } </style></head><body> <div class="container"><div class="dice"> <table> <tr><td id="dot1"></td><td id="dot2"></td><td id="dot3"></td></tr> <tr><td id="dot4"></td><td id="dot5"></td><td id="dot6"></td></tr>…arrow_forwardWe need to create a picture card using HTML/CSS. By the criteria of following requirements: Create a picture card that looks like this with any background picture and any icon! Requirements: In this screenshot, the title is "Title goes here", the secondary text is "Secondary text", and the body text is "Greyhound divisively hello coldly wonderfully marginally far upon excluding." The card's root element is a <div> with a class of "card". The card is 344px wide. The desert picture is 194px tall. The padding between the body text and everything else is 16px. The color of the title text is #000. The color of the secondary and body texts is #232F34. The size of the person picture is 40px in diameter. The size of the body text is 11px. The size of the title is 22px. For the padding or margin around any other elements, use your best judgment to make it look like the screenshot. Transitions When a person moves their pointer over a picture card, then the card gets a shadow of…arrow_forwardWrite the whole HTML page from the DOCTYPE declaration to the closing HTML tag and include: a table that includes the same content as in the image below. Note that the heading is a part of the table, so that screen readers will know that the heading is associated with the table. Add internal/embedded CSS (and extra HTML if you need to) so that your page looks like the image below. DON'T include more CSS than you need to. Tip: You will need to use pseudo-classes: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes#tree-structural_pseudo-classesarrow_forward
- PLEASE HELP ME TO FIX THIS. THIS HAS TO BE THE SAME TO THE IMAGE UPLOADED. I CHANGE THE COLORS <!doctype html><html><head><meta charset="UTF-8"><title>"The Bean Counter"</title> <style type="text/css"> body { background-color : blue; color : silver; font-family : helvetica; text-align : center} hr {width: 25%; color: blue;} h1 {color : white;} section {margin-left: auto; margin-right : auto; text-align : center; background-color: #4169E1; border-style : solid; border-color : MidnightBlue; border-width: medium; padding : 8px;} .drinkBtn {width 110px;} .otherBtn {width: 60px;} .total {border: solid black;} </style></head><body><h1>"The Bean Counter"</h1> <hr/> <p><b>Figuring the price of espresso drinks<br/> so baristas can have time to chat!</b></p> <br/><section…arrow_forwardHello, I am trying to make an image get big enough so that the image is nice and big but also the header is below the boxes. Can someone look at my code for my html and stylesheet, so that I can expand the image and get the footer image below the dividers. HTML: <!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>Flexbox Coding</title> <link rel="stylesheet" href="style.css"></head><body> <header class="header-image"> <img src="DoctorHeader.jpg" alt="Header Image"> </header> <div class="flex-container"> <div> <ul> <li><a href="Page1.html">Overview</a></li> <li><a href="Page2.html">The First Doctor</a></li> <li><a href="Page3.html">The Second Doctor</a></li> <li><a href="Page4.html">The Third…arrow_forwardHTML/CSS JAVASCRIPT please help me answer this question I will give you a good rating Thank you! TRUE OR FALSE A submit button is not an input element? Embedded php can send its variables to several different html elements on the page? this.innerHTML when employed for accessing an HTML element must be preceded by a getElementById statement which accesses the same element? The paragraph element and span tab elements both can have their inner content be accessed either by their textContent parameter or their innerHTML parameter in javascript?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