Web Development and Design Foundations with HTML5 (9th Edition) (What's New in Computer Science)
9th Edition
ISBN: 9780134801148
Author: Terry Felke-Morris
Publisher: PEARSON
expand_more
expand_more
format_list_bulleted
Concept explainers
Expert Solution & Answer
Chapter 3, Problem 2AYK
Explanation of Solution
Program:
<!--HTML Tag-->
<html lang="en">
<!--Head Tag-->
<head>
<!--Title Tag-->
<title>Trillium Media Design</title>
<meta charset="utf-8">
<!--Style Tag-->
<style>
<!--Alignment for Body Tag-->
body
{
background-color: #0066CC;
color: #00CED1 ;
}
<!--Alignment for header Tag-->
header {
font-family: Arial, sans -serif }
<!--Close Tag-->
Expert Solution & Answer
Want to see the full answer?
Check out a sample textbook solution
Students have asked these similar questions
For this incorrect code dislike please attach code with proof.
Write a sample code for External CSS - The <link> Element
Part 4:
Build a html form with the following elements. The form must be within a table structure.
Name: a text box where the content contains no special character (i.e. !, @, #, $, %, &, *).
Number is allowed. The text box must not be empty.
• Module code: a text box where the content must start with 3 lower case alphabets and
follows by 4 digits. This textbox can be empty.
• Current date: a non-editable textbox and should be in the format as shown (e.g. 12 October
2020 Monday 3:35 PM). The content is the current date or today's date which will change
every day.
• Message: a text area with 3 rows and 20 columns. The default text is "Hello 202204". The
text area cannot be empty.
• Find: a text box for the user to key in text he/she wants to find.
Replace: a text box for the user to key in the replacement text. If the find text is empty, this
element should be disable (i.e. user cannot key in anything here).
• Find and Replace: This is a button, when click, it will go to the "Message"…
Chapter 3 Solutions
Web Development and Design Foundations with HTML5 (9th Edition) (What's New in Computer Science)
Ch. 3.4 - Prob. 1CPCh. 3.4 - Prob. 2CPCh. 3.4 - Prob. 3CPCh. 3.8 - Prob. 1CPCh. 3.8 - Prob. 2CPCh. 3.8 - Prob. 3CPCh. 3 - Prob. 1MCCh. 3 - Prob. 2MCCh. 3 - Prob. 3MCCh. 3 - Prob. 4MC
Ch. 3 - Prob. 5MCCh. 3 - Prob. 6MCCh. 3 - Prob. 7MCCh. 3 - Prob. 8MCCh. 3 - Prob. 9MCCh. 3 - Prob. 10MCCh. 3 - Prob. 11MCCh. 3 - Prob. 12FIBCh. 3 - Prob. 13FIBCh. 3 - Prob. 14FIBCh. 3 - Prob. 15FIBCh. 3 - Prob. 1AYKCh. 3 - Prob. 2AYKCh. 3 - Prob. 3AYKCh. 3 - Prob. 1HOECh. 3 - Prob. 2HOECh. 3 - Prob. 3HOECh. 3 - Prob. 4HOECh. 3 - Prob. 5HOECh. 3 - Prob. 6HOECh. 3 - Prob. 7HOECh. 3 - Prob. 8HOECh. 3 - Prob. 9HOECh. 3 - Prob. 1WRCh. 3 - Prob. 2WRCh. 3 - Prob. 1FWD
Knowledge Booster
Learn more about
Need a deep-dive on the concept behind this application? Look no further. Learn more about this topic, computer-science and related others by exploring similar questions and additional content below.Similar questions
- 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.arrow_forwardCreate a CSS file youName.css and link it to the HTML file you created earlier in Part 1. The results after filling the styles should be as shown in the image below. NOTE 1: Add classes and ids as you find suitable in the HTML file. NOTE 2: Any style that is not specified, may be specified as you wish (like margins, paddings …). NOTE 3: The width of the <body> is 700px and the font-family is “Arial”. after finsih it must be as the imagearrow_forwardDesign HTML Form in javascriptApply the data validation :1. Mobile number field data must be a numeric data and not less than 8 digits,2. The email field must accept the data which must contain the character '@' and dot (.). Andthe character @ must not be the first character and the last dot must at least be onecharacter after the @.On submitting the form, If all these validations are followed, another Html page.arrow_forward
- I need help with this, please. Thanks Develop an Expand/Collapse application using JQUERYIn this exercise, you’ll develop an application that displays the first paragraph of text for three topics and then lets the user click a link to expand or collapse the text for each topic.2. Review the HTML. Note that each topic consists of two div elements followed by an <a> element. Also, note that a class named “hide” is assigned to the second div element of each topic. Then, review the style rule for this class.3. In the JavaScript file, add an event handler for the ready() event method.4. Within the ready() event method, code an event handler for the click() event method of the <a> elements. This event handler should start by preventing the default action of the link and storing the clicked link in a constant. Then, it should use the toggleClass() method to add or remove the “hide” class from the div element above the link element that’s clicked depending on whether that class is…arrow_forwardTask 3 Create a web page named 'Multiplication Table.html that implements the 'Design Template' specified in Task 1. The title of the web page will be 'MultiplicationTable'. In this web page, implement a multiplication table (from 1 to 10) inside the content area of the template. You must use loop statement of JavaScript to implement the multiplication table. Here is the sample screenshot for Multiplication Table.html: Computer Engineering Technology - Web Programming 12141ATE ana C Ra e 3691a 11 122 412 1620428 2 36 4 U06 4744 00 71421 S 0 10 24 2 40 04 12 0 12764 4 2 Footerarrow_forwardHTML/CSS: Need help in creating a sidebar header canvas for the love and hate buttons. Below are the codes and attached is image of how the sidebar header canvas must look like. Make sure to involve the correct code with the output: index.html: <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Summer School</h1> <ulclass="content home"> <li><a href="/index.html" >Summer School Info</a></li> <li><a href="/summerschool.html">Mainpage</a></li> </ul> </body> </html> summerschool.html: <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,…arrow_forward
- Hands-On Project 1-3In this project, you will explore how to write text to a specific element in your web page in response to theonclick event handler. To complete the exercise, you will apply the following JavaScript expression:document.getElementById('id').innerHTML = 'text';where id is the value of the id attribute for the page element and text is the text of the content to be writteninto the element. You will use this expression to enhance a web form by displaying the message “Thank you foryour order” when the user clicks the Submit button. Figure 1-25 shows the completed web page.Do the following:1. Use your code editor to open project01-03_txt.html from the HandsOnProject_01 folder. Enter your name and the date in the comment section of the document and save it as project01-03.html.2. Scroll down to the bottom of the file and locate the input element for the Submit button.3. Add an onclick event handler to the <input> tag that changes the innerHTML value of the page element…arrow_forwardPlease help me with this using HTML, CSS and Javascript 1. Create an HTML file that includes five buttons with the following labels: “recursive find A”,“recursive find B”, “recursive find C”, “recursive palindrome”, and “recursive count asterisks”. Create a div in your HTML to hold the results of calls to corresponding javascriptmethods. And a design a CSS code 2. Create a JavaScript file that responds to clicks of these buttons. All implementations shouldbe recursive. Thank youarrow_forwardHTML/CSS Given the following HTML and the accompanying css, and the illustrated output for the section element A section element is another way of creating an outer div element. IN this case there is the div section , containing first a paragraph ,the margin below that in grey, then followed by the blue div- the outer flex container. The blue div has three divs inside it ( red, green and blue) If the margin below the paragraph is changed to 75px , the outer flex container height is changed to 400px, the 750px height is removed from the section element, what is the total height of the section element - do not include the thickness of the borders <html> <head> <meta charset="utf-8"></head><link rel="stylesheet" type="text/css" href="square12_with_pg.css"> <title>Squarespace layout</title> <body> <nav></nav> <header></header> <section> <!-- main…arrow_forward
- Make the html/css/javascript code like this please. category1 = Korean traditionalcategory2 = European winecategory3 = Canadian beer each category has 7 items. Just leave item's names "item1, item2 etc..".descriptions and prices also.I will edit them later. You should use JavaScript Objects and Arrays! It should be dynamically Generated!arrow_forward: write HTML code that have •A Textarea with rows=4 and cols=36, labeled “Description”. •A checkbox group: Satisfied, Neutral, Dissatisfied, labeled “Rate Website” •A drop-down list (Select element) with these options: Saudi Arabia, China, USA,UK. Labeled “Country”.arrow_forwardImagine that the HTML file for your web page project includes a div element with the id value “cupcake” and you are writing a function to display and rearrange some images within that element. What JavaScript statement would you place in the blank to move the last image within the ccFrostingelement to the beginning of the line and shift the other images one position toward the end? let frostingFiles = ["pinkFr.jpg", "blueFr.jpg", "chocFr.jpg"] let frostingCount = frostingFiles.length; function frostCupcake() { let cupCake = document.getElementById("cupcake"); let ccFrosting = document.createElement("div"); cupCake.appendChild(ccFrosting); ccFrosting.id = "ccFrosting"; for (let i = 0; i < frostingCount; i++) { let image = document.createElement("img"); image.src = frostingFiles[i]; ccFrosting.appendChild(image); } function shuffleBack() { _____ } } a. ccFrosting.appendChild(ccFrosting.firstElementChild); b.…arrow_forward
arrow_back_ios
SEE MORE QUESTIONS
arrow_forward_ios
Recommended textbooks for you
Database System ConceptsComputer ScienceISBN:9780078022159Author:Abraham Silberschatz Professor, Henry F. Korth, S. SudarshanPublisher:McGraw-Hill Education
Starting Out with Python (4th Edition)Computer ScienceISBN:9780134444321Author:Tony GaddisPublisher:PEARSON
Digital Fundamentals (11th Edition)Computer ScienceISBN:9780132737968Author:Thomas L. FloydPublisher:PEARSON
C How to Program (8th Edition)Computer ScienceISBN:9780133976892Author:Paul J. Deitel, Harvey DeitelPublisher:PEARSON
Database Systems: Design, Implementation, & Manag...Computer ScienceISBN:9781337627900Author:Carlos Coronel, Steven MorrisPublisher:Cengage Learning
Programmable Logic ControllersComputer ScienceISBN:9780073373843Author:Frank D. PetruzellaPublisher:McGraw-Hill Education
Database System Concepts
Computer Science
ISBN:9780078022159
Author:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan
Publisher:McGraw-Hill Education
Starting Out with Python (4th Edition)
Computer Science
ISBN:9780134444321
Author:Tony Gaddis
Publisher:PEARSON
Digital Fundamentals (11th Edition)
Computer Science
ISBN:9780132737968
Author:Thomas L. Floyd
Publisher:PEARSON
C How to Program (8th Edition)
Computer Science
ISBN:9780133976892
Author:Paul J. Deitel, Harvey Deitel
Publisher:PEARSON
Database Systems: Design, Implementation, & Manag...
Computer Science
ISBN:9781337627900
Author:Carlos Coronel, Steven Morris
Publisher:Cengage Learning
Programmable Logic Controllers
Computer Science
ISBN:9780073373843
Author:Frank D. Petruzella
Publisher:McGraw-Hill Education