Basics of Web Design: HTML5 & CSS3 (3rd Edition)
3rd Edition
ISBN: 9780133970746
Author: Terry Felke-Morris, Terry Morris
Publisher: PEARSON
expand_more
expand_more
format_list_bulleted
Question
Chapter 2, Problem 5HOE
Program Plan Intro
- • Include the HTML tag using <html>.
- ○ Include the header tag using <head>.
- ■ Include the title on the webpage using <title> tag.
- ○ Close the header tag using </head>.
- ○ Include the body tag using <body>.
- ■ Include the strong importance to the required word using <strong> tag.
- ■ Close the strong element using </strong> tag.
- ○ Close the body tag using </body>.
- ○ Include the header 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
Scenario
Wilson Zoo would like you to implement and test a web application to be used to order drinks at their smoothie and milkshake shack, The Monkey Bar.
Basic Application
Your web application must
have one HTML file and one JS file (no navigation or style is needed)
you may use a single style sheet to show and hide elements as per the specification
provide suitable form elements to allow the customer to select a drink, by choosing:
size, type, ingredients, base and extras, as shown below
display the cost of the current drink, for example:
provide a button to add the current drink to an order
display the full details and cost of all drinks that have been added to the order, for example:
display a running total of the cost of the order, for example:
provide a button to place the order which simply outputs a message stating the order has been received and resets the screen
The customer can pick the following options for their drink:
size:
small - £2.45
medium…
Open the HTML and JavaScript files provided as start up files (index.html and navigation.js). Then, run the application and notice that when you click on a link in the sidebar, the page is scrolled so the information for the speaker associated with that link is displayed. In other words, this application works even if JavaScript is disabled.
In the JavaScript file, add an event handler for the ready event method. Then, within the function for that event handler, add jQuery code that hides the heading and article for all but the first speaker.
Add an event handler for the click event of the <a> elements in the sidebar. Then, within the function for that event handler, add jQuery code that hides all the speaker information, gets the value of the href attribute of the link that was clicked, and then uses that value to display the heading and article for the speaker associated with that link.
Use JavaScript to validate user inputs for this HTML form.
Create a new HTML page, LabTest.html, build form. Using external JavaScript to do the validation, for example, create a validate_form.js file. Your html code should pass the validation, put an validation icon at the bottom of the page. Following submission instructions for this exercise:
No empty input. All form elements should have an input. 2. Maximun input characters of "First name" or "Last name" are 50 characters.
Maximun input characters of "Address" are 300 characters. 4. For correct user inputs, show the user inputs in an alert window. Othersiwe, warn the user in an alert window.
Chapter 2 Solutions
Basics of Web Design: HTML5 & CSS3 (3rd Edition)
Knowledge Booster
Similar questions
- 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_forwardPlease create using C# The sales tax rate is 5.5%. Rename all text boxes, using a 2 after their names as in:txtNumScoops2, txtUnitPrice2, btnCalculate2, etc.10. Delete the Discount Code label and the Discount Code text box11. Add a group box from your toolbox, change the text property to be Discount Code12. Click on the group box, and then click the radio button object in the toolbox13. Change the text property for the radio button to Discount 20%, rename (ID property)to radDiscount2014. Copy the radio button two more times15. Rename them to be radDiscount10 and radDiscount0 and change the text properties tobe Discount 10%, Discount 0%/16. Do the same calculations as the top objects, however modify your code to use theradio button to determine which discount option to implementa. The code to check if a radio button has been selected would be:if (radDiscount20.Checked) //this implies the first button has been selected17. To clear a radio button the code would be:radDiscount20.Checked =…arrow_forwardCreate a HTML and CSS file of the given picture. Ensure that the interface will satisfy the given picture.Note: Once view button was clicked, another html file will pop up as shown in 2nd picture.arrow_forward
- please create the c++ code regarding this screenshot question i added and also please add professional comments at each line of the code using // commandarrow_forwardBy using the program below: Kindly Change the color of all elements with the class "colortext", to "red". <!DOCTYPE html> <html> <head> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <p class="colortext">This is another paragraph.</p> <p class="colortext">This is also a paragraph.</p> </body> </html>arrow_forwardBec Write an HTML, CSS & JavaSript codes to produce Contact Form as captured below.Please make sure:1. Header alignment must be centred and colour must be #22AF9E (green). 2. Provide “Food” input box. 3. Provide “Clothes” input box. 4. Provide “Health kit” input box. 5. “Calculate” button color is gold and located in the middle..arrow_forward
- While examining a web form and the JavaScript source code for it, you notice that a function that changes the text displayed in one part of the page is being executed every time you type or delete a letter or number in a text entry field labeled “Message,” instead of when you press the Tab key to move to the next form field. You correctly guess that _____. a. the function is being triggered when the form element labeled “Message” loses the focus b. the function must be triggered by a change event because input events do not apply to text entry boxes c. anonchangeevent handler has been applied to the form element labeled “Message” d. an event listener for theinputevent is attached to the form element labeled “Message”arrow_forwardHTML/CSS JAVASCRIPT please help me answer this question I will give you a good rating Thank you! Given the following word search application, which searches for words in paragraphs, modify it so that it Adds two spans tab within the HTML within the designated new "Illustate" text segments as shown below. Has a new click event which searches the occurrence of the word within all span tabs residing within the first div container , then highlights the text in the span tab which contains the word c) In the same routine, count the number of times ( using a global variable) that the word is found Within the object array loop for span tabs ( where the indexOf statement is located) and after all span tabs are highlighted, send that number to a new html element ( a div, h1, span, p choice is up to you). The count should be continually accumulated and should show the total number of times a word is found in a span tab for all user activated clicks of the search button for…arrow_forwardThe following HTML page (Figure 1), when runs, will show a form (Figure 2) for the entry of a customer firstname and lastname, a credit code, and existing balance amount. <!DOCTYPE html> <html> <body> <h2>Customer Credit Check</h2> <form action="action_page.php" method="post"> <label for="firstname">Firstname: </label> <input type="text" id="fname" name="fname"><br><br> <label for="lastname">Lastname: </label> <input type="text" id="lname" name="lname"><br><br> <p>Select a status code</p> <label for="statuscode"Choose a code: </label> <select id="statuscode" name="statuscode" required> <option value="">None</option> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> <option value="D">D</option>…arrow_forward
- Create a website registration form to obtain a user’s first name, last name and e-mail address. In addition, include an optional survey ques- tion that asks the user’s year in college (e.g., Freshman). Place the optional survey question in a details element that the user can expand to see the question.arrow_forwardPlease fix this error. Using react.js. Also there will be submit button, after click submut button then will back, edit, and delete button. Show screenshot Using react.js, create a inventory page where screen will display Inventory: Name Storage Type Max Item Capacity Resources: Resource Name Resource Type Max Number of Resources Current Number of Resources body { padding: 30px 20%; } h1 { font-size: 2em; text-align: center; } <div id ="app"></div> class ContactForm extends React.Component{ constructor(props) { super(props); this.state = { name: '', email: '', }; this.handleInputChange = this.handleInputChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); } handleInputChange(event){ const target = event.target; const value = target.type === 'checkbox'? target.checked : target.value; const name = target.name; this.setState({ [name]: value }) console.log('Change detected. State updated' + name + ' =…arrow_forwardCLL question Next within the form, create a field set with the ID deliveryInfo. Within this field set, add the following: A legend containing the text Delivery Options. A text area box with the ID addressBox and field name of delAddress containing the placeholder text Enter delivery address. A label containing the text Delivery time (leave blank for earliest delivery) associated with the delBox control. Add an input element with the ID delBox and field name delTime for storing delivery time values. Use a data type of “time” for the control.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
COMPREHENSIVE MICROSOFT OFFICE 365 EXCEComputer ScienceISBN:9780357392676Author:FREUND, StevenPublisher:CENGAGE LNp Ms Office 365/Excel 2016 I NtermedComputer ScienceISBN:9781337508841Author:CareyPublisher:Cengage
New Perspectives on HTML5, CSS3, and JavaScript
Computer Science
ISBN:9781305503922
Author:Patrick M. Carey
Publisher:Cengage Learning
COMPREHENSIVE MICROSOFT OFFICE 365 EXCE
Computer Science
ISBN:9780357392676
Author:FREUND, Steven
Publisher:CENGAGE L
Np Ms Office 365/Excel 2016 I Ntermed
Computer Science
ISBN:9781337508841
Author:Carey
Publisher:Cengage