Web Development and Design Foundations with HTML5 (8th Edition)
8th Edition
ISBN: 9780134322759
Author: Terry Felke-Morris
Publisher: PEARSON
expand_more
expand_more
format_list_bulleted
Concept explainers
Question
Chapter 14, Problem 1HOE
a)
Program Plan Intro
Program Plan:
- Include the HTML tag using “<html>”.
- Include the heading tag using “<head>”.
- Open the title tag using “<title>” with appropriate title and close the tag.
- Open the script tag using “<script>”.
- Inside the script tag, define the function named “myFunction()” and mention the alert pop-up with “Welcome” message.
- Close the script tag using “</script>”.
- Open the body tag using “<body>”.
- Open the input tag using “<input>” with button type. The function “myFunction()” is called when the user click on the button.
- Close the body tag using “</body>”.
- Include the heading tag using “<head>”.
- Close the file using “</html>” tag.
b)
Program Plan Intro
Program Plan:
- Include the HTML tag using “<html>”.
- Include the heading tag using “<head>”.
- Open the title tag using “<title>” with appropriate title and close the tag.
- Open the body tag using “<body>”.
- Open the anchor tag using “<a>”, set the event handler “onmouseover” that shows the alert box on the web browser with “Welcome” message.
- Close the anchor tag using “</a>”
- Close the body tag using “</body>”.
- Include the heading tag using “<head>”.
- Close the file using “</html>” tag.
c)
Program Plan Intro
Program Plan:
- Include the HTML tag using “<html>”.
- Include the heading tag using “<head>”.
- Open the title tag using “<title>” with appropriate title and close the tag.
- Open the body tag using “<body>”.
- Open the anchor tag using “<a>”, set the event handler “onmouseout” that shows the alert box with “Welcome” message when the mouse pointer away from a hypertext link.
- Close the anchor tag using “</a>”
- Close the body tag using “</body>”.
- Include the heading tag using “<head>”.
- Close the file using “</html>” tag.
Expert Solution & Answer
Want to see the full answer?
Check out a sample textbook solution
Students have asked these similar questions
Instruction : Please add some css on the alert boxes. Change the color. Thank you! The HTML code with javascript is already provided. You just need to customize the alert prompt. Thanks!
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Applying Javascript in HTML</title>
<script>
function userPrompt() {
var lastName = prompt("Enter your Last name:");
var firstName = prompt("Enter your First name:");
alert("Hello " + lastName + ", " + firstName + "!");
const number1 = parseInt(prompt("Enter your 1st number:"));
const number2 = parseInt(prompt("Enter your 2nd number:"));
const sum = number1 + number2;
alert("The sum is: " + sum);
confirm(lastName + ", " + firstName + " you have added the numbers: " + number1 + " & " + number2 + " and got the sum: " + sum + ".");
}
</script>
</head>
<body onload='userPrompt()'>…
You are going to add some javascript to your webpage to greet the user. All the below instructions can be found with further explanations in the Javascript lectures.
Don not only give me the html code, i need javascript
If you do not already have them, add two <h1> title tags so they display at the top of your webpage
The first tag should have the contents: “Welcome”
The second tag should have an id='username' and contents: “Placeholder”
All Javascript must go in a file with the extension “.js”, such as “main.js” or “script.js”. Create a file to hold your javascript if one is not already there.
Add a script tag at the end of your body tag that includes your javascript file.
In your script tag, use the javascript prompt command to save input from the user into a variable
Ask the user their name in the prompt command
You can name the variable whatever you like
Change the second <h1 id=’username’> contents to the name entered by the user
it should be stored in the…
Build a html form with the following elements
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 th
Chapter 14 Solutions
Web Development and Design Foundations with HTML5 (8th Edition)
Ch. 14.4 - Prob. 1CPCh. 14.4 - Prob. 2CPCh. 14.4 - Prob. 3CPCh. 14.6 - Prob. 1CPCh. 14.6 - Prob. 2CPCh. 14.6 - Prob. 3CPCh. 14.8 - Describe a method that can be used to gather a...Ch. 14.8 - Prob. 2CPCh. 14.8 - Prob. 3CPCh. 14.9 - Prob. 1CP
Ch. 14.9 - Prob. 2CPCh. 14.9 - Prob. 3CPCh. 14.18 - Prob. 1CPCh. 14.18 - Prob. 2CPCh. 14.18 - Prob. 3CPCh. 14 - Prob. 1MCCh. 14 - Prob. 2MCCh. 14 - Prob. 3MCCh. 14 - Prob. 4MCCh. 14 - Prob. 5MCCh. 14 - Prob. 6MCCh. 14 - Prob. 7MCCh. 14 - Prob. 8MCCh. 14 - Prob. 9MCCh. 14 - Prob. 10MCCh. 14 - Prob. 11MCCh. 14 - Prob. 12FIBCh. 14 - Prob. 13FIBCh. 14 - The ________ object is assumed to exist and it is...Ch. 14 - Prob. 15FIBCh. 14 - A form control button can be used with a(n)...Ch. 14 - Prob. 17FIBCh. 14 - Prob. 18FIBCh. 14 - Prob. 19SACh. 14 - Prob. 20SACh. 14 - Prob. 1AYKCh. 14 - Prob. 2AYKCh. 14 - Prob. 3AYKCh. 14 - Prob. 1HOECh. 14 - Prob. 2HOECh. 14 - Prob. 3HOECh. 14 - Prob. 4HOECh. 14 - Prob. 5HOECh. 14 - Prob. 6HOECh. 14 - Prob. 7HOECh. 14 - Prob. 8HOECh. 14 - Prob. 1WRCh. 14 - Prob. 2WRCh. 14 - Prob. 3WR
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
- In JavaScript create a program with the following parameters: Create an HTML page leaving the space between the <body> and </body> tags open. In the Title type a descriptive name Between the <body> and </body> tags add the <script> and </script> tags. Create a variable named myheading and give it this value: This is My Web Page! Create a variable named linktag and give it this value: SMC website and with a link to this text. Create a variable named Introtext and give it this value: See below for odd numbers stars. Create a variable named begineffect and give it the value: <strong>. Create a variable named endeffect and give it the value </strong>. Create a variable named beginpara and give it the value <p>. Create a variable named endpara and give it the value </p>. Place all of the variable definitions into a single var statement so that you do not need to keep repeating the var keyword remember to end the last line…arrow_forwardJavaScript all design notvsame as web page remember that. Allala Write the code necesary in javascript to create a webpage that contains a contact form like the one in the attatched picture. To create and style this form, copy the following HTML and CSS code exactly as follows: HTML: <form><label for="myName">Name:</label><input type="text" name="myName" id="myName"><label for="myEmail">E-mail:</label><input type="text" name="myEmail" id="myEmail"›<label for="myComments">Comments:</label><textarea name="myComments" id="myComments" rows="2" cols="20"></textarea><input id="mySubmit" type="submit" value="Submit"›</form> CSS: form { background-color:#eaeaea;font-family: Arial, sans-serif;padding: lOpx; }label { float: left;width: 100px;clear: left;text-align: right;padding-right: lOpx;margin-top: lOpx; }input, textarea { margin-top: lOpx;display: block; }#mySubmit { margin-left: 110px; }.arrow_forwardHereWrite the code necesary in javascript to create a webpage that contains a contact form like the one in the attatched picture. To create and style this form, copy the following HTML and CSS code exactly as follows: HTML: <form><label for="myName">Name:</label><input type="text" name="myName" id="myName"><label for="myEmail">E-mail:</label><input type="text" name="myEmail" id="myEmail"›<label for="myComments">Comments:</label><textarea name="myComments" id="myComments" rows="2" cols="20"></textarea><input id="mySubmit" type="submit" value="Submit"›</form> CSS: form { background-color:#eaeaea;font-family: Arial, sans-serif;padding: lOpx; }label { float: left;width: 100px;clear: left;text-align: right;padding-right: lOpx;margin-top: lOpx; }input, textarea { margin-top: lOpx;display: block; }#mySubmit { margin-left: 110px; }.arrow_forward
- JavaScript Do the following using JavaScript: 1. Once the page is loaded an alert message will be displayed Example: “Yehey! Last Hurray!” 2. Display your name in any HTML element/s you’ve learned to use. Ex: paragraphs, headers 3. Display today’s date in any HTML element/s you’ve learned to use. 4. Input your age (either in prompt/form element) and test it using the following criteria: Example: Input: 41 Output: Millenials Generations Born Current Ages Gen Z 1997 – 2012 10 – 25 Millennials 1981 – 1996 26 – 41 Gen X 1965 – 1980 42 – 57 Boomers II (a/k/a Generation Jones)* 1955 – 1964 58 – 67 Boomers I* 1946 – 1954 68 – 76 Post War 1928 – 1945 77 – 94 WWII 1922 – 1927 95 – 100 1. Display a picture of a younger and present you using onmouseover and onmouseout events 2. Asks for your top 2 favorite colors: either using a radio, checkbox, dropdown menu, prompt, or textbox o set the…arrow_forwardIn Javascript, Create a mouseOver event function, that will change the colour of an HTML item (i.e. a button or a list item) to green, then to black after 5 secondsarrow_forward1. Design a Java Swing Frame where you enter two strings into two separate text boxes and on a button click the strings are concatenated and displayed in a third text box. 2. Use a button to invoke the process. 3. Put this in a panel. 4. Create another panel where you have a dropdown. Concatenate the choice from the drop- down with the previous string and display in another text field in the second panel. Use a button to invoke this process.arrow_forward
- Write the code necesary in javascript to create a webpage that contains a contact form like the one in the attatched picture. To create and style this form, copy the following HTML and CSS code exactly as follows: HTML: <form><label for="myName">Name:</label> <input type="text" name="myName" id="myName"> <label for="myEmail">E-mail:</label> <input type="text" name="myEmail" id="myEmail"› <label for="myComments">Comments:</label> <textarea name="myComments" id="myComments" rows="2" cols="20"></textarea> <input id="mySubmit" type="submit" value="Submit"› </form> CSS: form { background-color:#eaeaea; font-family: Arial, sans-serif; padding: lOpx; } label { float: left;width: 100px;clear: left; text-align: right; padding-right: lOpx;margin-top: lOpx; }input, textarea { margin-top: lOpx;display: block; }#mySubmit { margin-left: 110px; }arrow_forwardQ2 Design a web page (name it q2.html), which uses Bootstrap framework, to display the following sentence: Web Development for Mobile Devices. The sentence should appear as heading1 (i.e., hl) with font size 60 points and red border of 8px thickness if the page to be displayed on PC screen. If the page is displayed on a tablet screen, the sentence should appear as heading 3 with font size 30 points and blue border of 5px thickness. Finally, if the page displayed on mobile screens, then the sentence must not be displayed, and replaced with the sentence (Too small screen!) in "red" text color: Q3 Analysis, and Comments. The tab-page of Result tab must include three cards of three different must appear horizontally in one line for small and larger screens, and vertically for mobile screens. items (of your own selection). The card includes Title, Picture, and Price (in JD) of that item. The cards The tab-page of Analysis tab includes a table of three columns (with titles of your own…arrow_forwardHands-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_forward
- 3- According to HTML code, which color will be the background color of the paragraph that has text "Second Line" in it. (hint: red+green = yellow, red+blue=purple, red+yellow:orange, green+blue: cyan, blue+red:magenta ) 0pacity Example .red {background-color: red;} .f-bg {background-color: rgb (255,255,0); } .f-bg2 {background-color: rgba(255,255, 0,.5);} .f-bg3 {background-color: rgb(255,255,0); opacity: .4;} First Line Second line Third linearrow_forwardAPPLYING JavaScript IN AN HTML DOCUMENT Create an HTML document and name it as act14.html. The HTML must contain JavaScript that displays the following: An interaction that prompts for the user’s Last name and First name, then displays it. C. An interaction that prompts the user to input two numbers and then displays its sum. D. An interaction that confirms the user’s full name, selected numbers, and the sum. Your HTML webpage should display the following interactions sequentially: (see the attached image for your reference)arrow_forwardComputer Science Write a webpage that creates a game of dice using only HTML and JavaScript. The code should make use of the HTML <canvas> element. The webpage should inform the user of the rules of the game.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