Web Development and Design Foundations with HTML5 (9th Edition) (What's New in Computer Science)
9th Edition
ISBN: 9780134801346
Author: FELKE-MORRIS
Publisher: PEARSON
expand_more
expand_more
format_list_bulleted
Question
Chapter 8, Problem 2AYK
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 the background color and border for the table using <style> tag.
- Close the header tag using </head>.
- Open the body of the web page using <body> tag.
- Include the heading on the webpage using <h1> tag.
- Include a table on the webpage using <table> tag.
- Include a caption on the webpage using <caption> tag.
- Provide table headings using <th> tag
- Provide table content using <td> tag
- Close the body using </body> tag.
- 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 solutionStudents 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
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>
HTML/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,…
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
- Can 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_forwardHello, I am trying to add a floating image into the middle column below the text. I can someone look at the provided HTML code along with the CSS sheet I have provided to figure out how to get a floating image into it. Thank you! <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title>Flexbox Coding</title></head> <link rel="stylesheet" href="Style.css"> <body> <header class="header-image"> <img src="57mBcYi.jpeg" alt="Header Image"> </header> <div class="flex-container"> <div> <ul> <li><a href="Page1.html">Link to Page 1</a></li> <li><a href="Page2.html">Link to Page 2</a></li> </ul> </div> <div>An country demesne message it. Bachelor…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
- Create another HTML File with YourNameReqgNoQ2.html (Add this step screen shot too). Also apply Inline CSS to all the following Tags Next, in the same Web Page, Write HTML Code to Open the HEC Web Site, NTS Web Site Define the following Terms (Web Server, Web Site, Web Page, Web Browser, Domain Name, Hosting, Five Features of Facebook)arrow_forwardH1. In the CSS property grid-template-areas: "row1", what does row1 represent? Select one: a. an integer equal to the number of rows in the grid b. the height of row 1 c. a text string containing the names of the areas for row 1 d. the gridline numbers at the beginning and end of row 1 Please show proper step by step explanation also explain wrong optionsarrow_forwardQuestion 1: a) Modify this code like exactly as below pictures and make boxes big like picture below . How can you apply translate property in CSS on an image when the user b) b) hovers it with the mouse pointer it translates an image? Provide CSS code and screenshot of the output image. Code: <!DOCTYPE html> <html> <body> <style> td{ border:1pxsolidblack; } td { border-collapse:collapse; } </style> <tablewidth="50%"> <tr> <tdcolspan='3'>1</td> <tdrowspan='3'>2</td> <tdcolspan='2'>3</td> <tdrowspan='2'>N</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> </tr> <tr> <tdcolspan='3'>9</td> <tdcolspan='2'>10</td> <td>N</td> </tr> <tr> <tdcolspan='7'>N</td> </tr> <tr> <td>N</td> <td>N</td>…arrow_forward
- I need to split these into grid.html and grid.css and to make I need help because right now my style is not working what I have so far below <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Grid</title><style type="text/css"> header { text-align: center; font-size: 32px; color: white; background-color: #000000; padding: 29px;} * { box-sizing: border-box; } footer { background-color: #000000; padding: 9px; text-align: center; color: white;}img { float: left; width: 60%; padding: 19px; height: 310px; background: #808080;}main { float: left; width: 40%; padding: 19px; background-color: #800000; height: 310px;}div.image-cell { display: table; clear: both;} </style></head><body><div class="grid-container"><header><h2>Welcome to Grid!</h2></header> <div class="image-cell"> <img…arrow_forwardHello, I am trying to make an image get big enough so that the image is nice and big but also the header is below the boxes. Can someone look at my code for my html and stylesheet, so that I can expand the image and get the footer image below the dividers. HTML: <!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>Flexbox Coding</title> <link rel="stylesheet" href="style.css"></head><body> <header class="header-image"> <img src="DoctorHeader.jpg" alt="Header Image"> </header> <div class="flex-container"> <div> <ul> <li><a href="Page1.html">Overview</a></li> <li><a href="Page2.html">The First Doctor</a></li> <li><a href="Page3.html">The Second Doctor</a></li> <li><a href="Page4.html">The Third…arrow_forwardAdd 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_forward
- By using the program below: Kindly use CSS, Set the text color for the page to "red", and the text color for <h1> to "blue". <!DOCTYPE html> <html> <head> <style> </style> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html>arrow_forwardQuestion 1: How can you apply translate property in CSS on an image when the user hovers it with the mouse pointer it translates an image? Provide CSS code and screenshot of the output image. Code: <!DOCTYPE html> <html> <body> <style> td{ border:1pxsolidblack; } td { border-collapse:collapse; } </style> <table cellpadding="15" border="solid" width=50%> <tr> <tdcolspan='3'>1</td> <tdrowspan='3'>2</td> <tdcolspan='2'>3</td> <tdrowspan='2'>N</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> </tr> <tr> <tdcolspan='3'>9</td> <tdcolspan='2'>10</td> <td>N</td> </tr> <tr> <tdcolspan='7'>N</td> </tr> <tr> <td>N</td> <td>N</td> <td>N</td> <td>N</td> <td>N</td>…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_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 EducationStarting Out with Python (4th Edition)Computer ScienceISBN:9780134444321Author:Tony GaddisPublisher:PEARSONDigital Fundamentals (11th Edition)Computer ScienceISBN:9780132737968Author:Thomas L. FloydPublisher:PEARSON
- C How to Program (8th Edition)Computer ScienceISBN:9780133976892Author:Paul J. Deitel, Harvey DeitelPublisher:PEARSONDatabase Systems: Design, Implementation, & Manag...Computer ScienceISBN:9781337627900Author:Carlos Coronel, Steven MorrisPublisher:Cengage LearningProgrammable 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