Web Development and Design Foundations with HTML5 (8th Edition)
8th Edition
ISBN: 9780134323534
Author: FELKE-MORRIS
Publisher: PEARSON
expand_more
expand_more
format_list_bulleted
Expert Solution & Answer
Chapter 4, Problem 3MC
22759-4-3RQ AID: 1825 | 25/05/2018
Program Description Answer
The anchor tag “<a>” is used to create a web link to another page. The user can make an image link using “<img>” tag in addition with this anchor tag.
- Creating image tag “<img>” inside the anchor “<a>” makes a link with an image to their reference “index.html”.
For example:
<a href = “home.html”> <img src= “home.gif”> </a>
The above example shows the “home.gif” image on web browser and the browser loads “home.html” when the user clicks on the image.
Hence, the correct answer is option “B”.
Expert Solution & Answer
Want to see the full answer?
Check out a sample textbook solution
Students have asked these similar questions
Create a styles.css page and add the following styles?
H1
Background color: #f03Border on the bottom with the following rules
Width: thin
Style: solid
Color: #003
Centered textMargin on all sides: 35 pixels
H2
Text color: #333, bold
p
Font: GeorgiaText color: #030Padding of 15 pixels on all sides
li
Font family: ArialBackground color: grayText color: black, boldText size: 18 points
a
Color for all hyperlinks: Dark red: #CC0000
Rollover color for all hyperlinks: Dark green: #060
One additional style of your choice
Please 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…
this html page
<!DOCTYPE html>
<html lang="en">
<head>
<style>*{ background-color: gray;}a{ text-decoration: none; color: yellow; font-size: 20px;}a:hover{ transition: 1.1px;}input{ background-color: #fff;}
.div1 {
border:2pxoutsetred;
background-color:lightblue;
text-align:center;
}.boxes{ float: left; width: 49%; border: 2px solid black; background-color: gray; color: #fff;}
</style>
<script>
function maxLengthCheck(object) {
if (object.value.length > object.maxLength)
object.value = object.value.slice(0, object.maxLength)
}
function isNumeric (evt) {
var theEvent = evt || window.event;
var key = theEvent.keyCode || theEvent.which;
key = String.fromCharCode (key);
var regex = /[0-9]|\./;
if ( !regex.test(key) ) {
theEvent.returnValue = false;
if(theEvent.preventDefault) theEvent.preventDefault();
}
}
function orderfunction(){
alert("Thank you for ordering from my website!!!");
}
function cancelfunction(){…
Chapter 4 Solutions
Web Development and Design Foundations with HTML5 (8th Edition)
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
- 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_forwardIn the contact.html file, add a class attribute with the value link to the email and address anchor elements.(I'm not sure what the error is here) --- contact.html <!-- Write your code here --> <!--Student Name: File Name: contact.html Date:10/04/2022 --> <!DOCTYPE html> <html lang="en"> <head> <title>Wild Rescues: Contact</title> <meta charset="utf-8"> <link rel="stylesheet" href="css/styles.css" /> <body> <header> <img src="images/baby-hawk.jpg" alt="rescued baby hawk"> </header> <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="about.html">About Us</a></li> <li><a href="partnership.html">Partnership</a><li <li><a href="gallery.html">Gallery</a></li> <li><a…arrow_forward1. The _______ is the area between the content and the border.a. borderb. spacingc. paddingd. none of the above2. Select the code below that configures a background image to repeat horizontally across aweb page.a. hspace="10"b. background-repeat: repeat-x;c. valign="left"d. background-repeat: repeat-y;3. Select the code below that associates a favorites icon named favicon.ico with a web pagedocument.a. <link rel="icon" type="image/x-icon" href="favicon.ico">b. <img href="favicon.ico" alt="favorites" width="16" height="16">c. <a href=”favicon.ico”> <img href="favicon.ico" alt="favorites" width="16"height="16"></a>d. <link rel="favicon" type="image/gif" href="favicon.ico">4. Choose the item below that describes the process of creating an image with the lowestfile size that still renders a good quality image.a. validationb. multimediac. optimizationd. bandwidth5. The process of ensuring that web pages coded with new or advanced techniques still…arrow_forward
- I need help in adding elements in Javascript to this page. <!DOCTYPE html><html> <head> <title>My Homepage</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> </head> <body> <header> <h1>My Name</h1> <nav> <ul> <li><a href="#about">About</a></li> <li><a href="#education">Education</a></li> <li><a href="#work">Work Experience</a></li> <li><a href="#skills">Skills</a></li> </ul> </nav> </header> <main> <section id="about"> <h2>About Me</h2> <p>Write a brief introduction about yourself here.</p> </section> <section id="education">…arrow_forwardCan you run this code, it dosen't work for me. To center the title "NJIT Credit Union" in the page, you can use the following HTML code:- <!DOCTYPE html><html> <head> <title>NJIT Credit Union</title> <style> /* Center the title */ h1 { text-align: center; } </style> </head> <body> <h1>NJIT Credit Union</h1> <!-- Add other elements here --> </body></html> Step 3 To add a background color to the client, you can use the CSS background-color property. For example, to set the background color to light blue, you can use:- body { background-color: lightblue;} So the complete HTML code would be:- <!DOCTYPE html><html> <head> <title>NJIT Credit Union</title> <style> /* Center the title */ h1 { text-align: center; } /* Set the background color */ body {…arrow_forwardApply all the css styles in the html file below follow the guidelines on how to style them <html> <head> <meta charset="UTF-8"> <title>CSS Selectors Learning Task</title> </head> <body> <h1>YES! I am the first content in this page.</h1> <p>But I am the very first paragraph in this page. (even though I am only a short one) </p> <h3>Uhm. Hi? I am alevel 3 heading. That's all. Thank you.</h3> <div> <p class="hello">Hey! I am also a paragraph but a classy one since am in a classed paragraph.</p> <p id="special" class="love">Okay? Since we are at it, I am, by the way, a classy paragraph as well but a special and loved one. </p> <h2>Well, I am a level 2 heading. I did't know we are to introduce ourselves here.</h2> <p>As you can see, I am just another paragraph. That's all i could say.</p>…arrow_forward
- Here is a sample html file with a submit button. Now modify the style of theparagraph text through javascript code. Clicking on the button the font,font size, and color of the paragraph text will be changed.Sample HTML file :<!DOCTYPE html><html><head><meta charset=utf-8 /><title>JS DOM paragraph style</title></head><body><p id ='text'>JavaScript Exercises - w3resource</p><div><button id="jsstyle"onclick="js_style()">Style</button></div></body></html>arrow_forwardMake a page that looks something like the picture attached below! Use your own monster, text, and colors, if you like. The monster picture needs a think border. Make sure there's space: Inside the warning box, between it and the text Outside the warning box, between it and the text Around the image border Full HTML page, as usual. Use a separate stylesheet. GIVE ALL CODES. I will upload to my server. thank you i will upvote.arrow_forward76) Sample HTML for webpage is given <!DOCTYPE html> <html lang “on”> <head> <title> This is the title of the page </title> <style> #content { Border : solid 12px red; Color: blue; Position: absolute; Left: 10px; } </style> </head> <body> <div>Content about the first topic.</div> <div id=content>Content about the second topic.</div> <div>Content about the third topic. </div> </body> </html> There should not be a >bracket at the end. The language attribute name in the <html> tag should not be lang. There should not be a <body> tag There should be quote marks around the content ID in the second <div> tag.arrow_forward
- Two should both sub Css HTML5 a. Configure an alert message to pop up using Javascript when the page is displayed in the browser. Edit the body tag as follows: <body onload="alert ('Today only-10% off on a weekend- coupon code ZenTen');"> . The onload event handler in this case pops up an alert message. b. Add a script block to the head section as follows: <script> function validateForm () { if (document.forms [0]. myEmail. value== "") { (alert (Pleade enter an e-mail address."); return false // end if return true; } end function validateForm </script> Many thanks for your time! .arrow_forward1. Create an HTML Document. 2. link jQuery to HTML using the latest jQuery CDN 3. Create a <h1> element 4. Create four input buttons with the following values the text will be ("change color", "change size", "append text", "reset") 5. Use jQuery to add a click handler to each one of the elements individually to perform a task change color = change the font color of the jQuery change size = change the font size of the jQuery function append text = add text to the <h1> with a jQuery rest = reset the element back to original using a jQueryarrow_forwardwhat I have so far please help with what you can <!DOCTYPE html><html> <head> <title>Home Page</title> <link rel="stylesheet" type="text/css" href="./styles/colors1.css"> </head> <body> <!--Added main tag--> <main> <!--Added nav tag--> <nav> <a href="index.html">Home</a> <a href="contact.html">Contact</a> <a href="about.html">About</a> </nav> <h1>Welcome to my (about me) site</h1> <picture> <source media="(min-width:650px)" srcset="./images/me3-650.jpg"> <source media="(min-width:465px)" srcset="./images/me3-465.jpg"> <img src="./images/me3.JPG" alt="ME" style="width:auto;"> </picture> <h3>HI there this is one of my favorite songs down below.</h3> <iframe…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