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
Question
Chapter 8, Problem 5HOE
Program Plan Intro
Program Plan:
- Include the HTML tag using <HTML>.
- Include the header tag using <head>.
- Include the title on the webpage using <title> tag.
- Provide background color for alternative rows using the <style> tag.
- Close the header tag using </head>.
- Open the body of the web page using <body> tag.
- Include the Table tag using <table> and align the table to the center.
- Type the heading “Birthday List” within the header tags “<th>” and “</th>”.
- Open the table row tag “<tr>”.
- Inside the table column cell type the friend name and his/ her birthday in two separate cells.
- Close the table row tag “</tr>”.
- Open the table row tag “<tr>”.
- Inside the table column cell type the friend name and his/ her birthday in two separate cells.
- Close the table row tag “</tr>”.
- Close the table tag </table> tag.
- Include a contact link on the webpage using <a href> tag
- Include the Table tag using <table> and align the table to the center.
- Close the body using </body> tag.
- Include the header tag using <head>.
- Close the file using </html> tag.
- Finally save the file as “mytable.html”.
Expert Solution & Answer
Want to see the full answer?
Check out a sample textbook solution
Students have asked these similar questions
Write 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-classes
Assume you have the set of HTML code below and you are linking to an external CSS style sheet. Write a style rule that will set the text color of all elements with the class football, to teal.
<body>
<h1>This is a heading</h1>
<p>This is a paragraph</p>
<p class="football">This is a paragraph</p>
<p class="football">This is a paragraph</p>
</body>
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
Chapter 8 Solutions
Web Development and Design Foundations with HTML5 (9th Edition) (What's New in Computer Science)
Ch. 8.4 - Prob. 1CPCh. 8.4 - Prob. 2CPCh. 8.4 - Prob. 3CPCh. 8.7 - Prob. 1CPCh. 8.7 - Prob. 2CPCh. 8 - Prob. 1MCCh. 8 - Prob. 2MCCh. 8 - Prob. 3MCCh. 8 - Prob. 4MCCh. 8 - Prob. 5MC
Ch. 8 - Prob. 6MCCh. 8 - Prob. 7MCCh. 8 - Prob. 8MCCh. 8 - Prob. 9MCCh. 8 - Prob. 10MCCh. 8 - Prob. 11FIBCh. 8 - Prob. 12FIBCh. 8 - Prob. 13FIBCh. 8 - Prob. 14FIBCh. 8 - Prob. 15FIBCh. 8 - Prob. 1AYKCh. 8 - Prob. 2AYKCh. 8 - Prob. 3AYKCh. 8 - Prob. 1HOECh. 8 - Prob. 2HOECh. 8 - Prob. 3HOECh. 8 - Prob. 4HOECh. 8 - Prob. 5HOECh. 8 - Prob. 6HOECh. 8 - Prob. 7HOECh. 8 - Prob. 8HOECh. 8 - Prob. 9HOECh. 8 - Prob. 1WRCh. 8 - Prob. 1FWD
Knowledge Booster
Similar questions
- Add embedded CSS code to this html file so that the display changes as the following picture : <html><head><title>Centered Fixed 3-Column Layout</title> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <style> </style> </head><body><div id="wrapper"> <header><h1>Using CSS for Page Layouts</h1></header><nav><h2>Learn More</h2><p><a href="url">Topics</a></p><p><a href="url">Authors</a></p><p><a href="url">Videos</a></p><p><a href="url">Gallery</a></p><p><a href="url">Explore</a></p></nav> <article><h2 class="title">Article Title</h2><p class="copy">Video provides a powerful way to help you prove your point. When you click Online Video, you can paste in the embed code for the video you want to add. You can also type a…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_forwardAdd embedded CSS code to this html file so that the display changes as following picture <!DOCTYPE html><html><head><title>Centered Fixed 3-Column Layout</title><meta content="text/html; charset=utf-8" http-equiv="Content-Type"><style></style></head><body><div id="wrapper"><header><h1>Using CSS for Page Layouts</h1></header><nav><h2>Learn More</h2><p><a href="url">Topics</a></p><p><a href="url">Authors</a></p><p><a href="url">Videos</a></p><p><a href="url">Gallery</a></p><p><a href="url">Explore</a></p></nav><article><h2 class="title">Article Title</h2><p class="copy">Video provides a powerful way to help you prove your point. When you click Online Video,you can paste in the embed code for the video you want to add.You can also…arrow_forward
- In 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_forwardI need to change this code so that there is no button, and the jackhammer animation starts as soon as the page loads. <!DOCTYPE html><html><head> <!-- CIS213 Unit 3, Graded Exercise 1 Author: Michael Porter Date: 9/15/22 --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>Unit 3 Graded Exercise 1</title></head><body> <h1>Michael Porter, JackhammerMan Exercise</h1> <img id="imgJackhammer" src="jackhammer0.gif" width="113" height="100" alt="Image of a man with a jackhammer."><br> <button onclick="startBouncing()">Start Bouncing</button> <script> var jackhammers = ["jackhammer0.gif", "jackhammer1.gif", "jackhammer2.gif", "jackhammer3.gif", "jackhammer4.gif", "jackhammer5.gif", "jackhammer6.gif", "jackhammer7.gif", "jackhammer8.gif", "jackhammer9.gif",…arrow_forwardAssume you have the following HTML code in an html file and you are linking to an external CSS stylesheet. Write a style rule that will set the background color of the <h1> element to "orange". <body> <h1>This is a heading</h1> <p>This is a paragraph</p> <p>This is a paragraph</p> </body>arrow_forward
- 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…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_forwardCreate 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 choicearrow_forward
- i need help with this html and css, i tried to create the design in the attachment below but the layout wasn't showing as it should. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/styles.css"> <title>Restaurant Menu</title> </head> <body> <header> <h1>Delicious Restaurant</h1> </header> <div class="container"> <div class="menu-item"> <div class="item-left"> <img src="Image/burger.png" alt="Burger"> <div class="price-circle">$10.99</div> </div> <div class="item-right"> <h2>Classic Burger</h2> <p>A juicy beef patty topped with fresh lettuce, tomatoes, and cheese.</p> </div> </div> <!-- Add more menu items here…arrow_forwardCreate another new text file and write the following codes. <html> <head> <link rel="stylesheet" type="text/css" href="test.css" /> </head> <body> <h3> A White Header </h3> <p> This paragraph has a blue font. The background color of this page is gray because we changed it with CSS! </p> </body> </html> Save this file with name MyExternalCSSdemo.html (Run and see the effect.) Create a new folder name – Tutorial -5 Create a two text file inside this folder and name – Tutorial -5.txt for HTML page and ExternalCSS.txt for CSS file Open Tutorial -5.txt as a sublime text (by right click on it) Following tasks to be completed to develop a web page using external CSS. 1. Create an External CSS which should have background colour ‘white’, Header H1 colour ‘black’ and paragraph colour ‘Red’ 2. Web page should have…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
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