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
Question
Chapter 4, Problem 3HOE
Program Plan Intro
- Include the HTML tag using “<html>”.
- Include the title tag “<title>” for title.
- Include the body tag using “<body>”.
- Set the navigation tag using “<nav>” for navigation links.
- Include the anchor tags using “<a>” with their links in “href” attributes.
- Include the images for image link using “<img>” tag and set their height, width, and alt attributes.
- Close the anchor tag “</a>”.
- Include the anchor tags using “<a>” with their links in “href” attributes.
- Close the navigation tag “</nav>”.
- Set the navigation tag using “<nav>” for navigation links.
- Close the body tag “</body>”.
- 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
@charset "UTF-8";html { box-sizing: border-box;}* { box-sizing: inherit;}
body { font-family: Georgia, serif; font-size: 100%; background-color: white; margin: 0;}
/* link styles */a:link, a:visited { color: #DC6903; }a:focus, a:hover, a:active { color: #F9AB33; }
a { text-decoration: none; border-bottom: 1px dotted; padding-bottom: .2em;}
/* header styles */header { color: white; background: url(images/croissants_banner.jpg) no-repeat center center; background-size: cover; text-align: center; height: 15em;}header p { font-style: italic; font-size: 1.2em; margin-top: -12px;}header h1 { margin-top: 1.5em;}
/* nav styles */nav, footer { font-family: verdana, sans-serif; background-color: #783F27;}
nav ul li a{ display:block; border: 1px solid; border-radius:25px; top: 0.5em; right: 1em; bottom: 0.5em; left: 1em;}nav ul li a:link, nav ul li a:visited { color: #F9AB33;}nav ul li a:focus, nav ul li a:hover, nav ul li a:active { color: #fff;}nav ul {…
@charset "UTF-8";html { box-sizing: border-box;}* { box-sizing: inherit;}
body { font-family: Georgia, serif; font-size: 100%; background-color: white; margin: 0;}
/* link styles */a:link, a:visited { color: #DC6903; }a:focus, a:hover, a:active { color: #F9AB33; }
a { text-decoration: none; border-bottom: 1px dotted; padding-bottom: .2em;}
/* header styles */header { color: white; background: url(images/croissants_banner.jpg) no-repeat center center; background-size: cover; text-align: center; height: 15em;}header p { font-style: italic; font-size: 1.2em; margin-top: -12px;}header h1 { margin-top: 1.5em;}
/* nav styles */nav, footer { font-family: verdana, sans-serif; background-color: #783F27;}nav ul li a:link, nav ul li a:visited { color: #F9AB33;}nav ul li a:focus, nav ul li a:hover, nav ul li a:active { color: #fff;}nav ul { margin: 0;}nav ul li { font-size: .8em; text-transform: uppercase; letter-spacing: .2em;}
/* main "products" styles */main {…
I need help coding the nav items so they are spaced vertically on top of the page and for there to be a blue background behind them at the top.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="CSS/index.css" />
<title>Video Game History</title>
<style>
.logo-container {
display: flex;
justify-content: center;
}
a {
font-size: large;
}
p {
font-size: larger;
}
article {
border: 2px solid blue;
}
body {
background-color: lightblue;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
margin: 0 auto;
}
footer {
background-color: blue;
color: white;
text-align:…
Chapter 4 Solutions
Web Development and Design Foundations with HTML5 (8th Edition)
Ch. 4.1 - Prob. 1CPCh. 4.1 - Prob. 2CPCh. 4.1 - Prob. 3CPCh. 4.5 - Prob. 1CPCh. 4.5 - Prob. 2CPCh. 4.5 - Prob. 3CPCh. 4.7 - Prob. 1CPCh. 4.7 - Prob. 2CPCh. 4.7 - Prob. 3CPCh. 4 - Prob. 1MC
Ch. 4 - Prob. 2MCCh. 4 - Prob. 3MCCh. 4 - Prob. 4MCCh. 4 - Prob. 5MCCh. 4 - Prob. 6MCCh. 4 - Prob. 7MCCh. 4 - Prob. 8MCCh. 4 - Prob. 9MCCh. 4 - Prob. 10MCCh. 4 - Prob. 11FIBCh. 4 - Prob. 12FIBCh. 4 - Prob. 13FIBCh. 4 - Prob. 14FIBCh. 4 - Prob. 15FIBCh. 4 - Prob. 1AYKCh. 4 - Prob. 2AYKCh. 4 - Prob. 3AYKCh. 4 - Prob. 1HOECh. 4 - Prob. 2HOECh. 4 - Prob. 3HOECh. 4 - Prob. 4HOECh. 4 - Prob. 5HOECh. 4 - Prob. 6HOECh. 4 - Prob. 7HOECh. 4 - Prob. 8HOECh. 4 - Prob. 9HOECh. 4 - Prob. 10HOECh. 4 - Prob. 1WRCh. 4 - Prob. 2WRCh. 4 - Prob. 1FWD
Knowledge Booster
Similar questions
- Hello, I am trying to get the 1s in the image attached to change them into a,b,and c respectively. Please correct my code where necessary. <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head> <body> <ol> <li> Question 3 <ol> <li><img src="exam.gif" alt="Image 1" width="200" height="150"></li> <ol> <li><img src="OIP.jpg" alt="Image 2" width="200" height="150"></li> <ol> <li><img src="Successful.jpg" alt="Image 3" width="200" height="150"></li> </ol> </ol> </ol> </li> </ol></body> </html>arrow_forwardI need help with making the changes needed in the image I have provided the code this is what I have so far Below please help<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>homework 14</title></head><body> <div> <h2>Sticky Note Board</h2> <div class="sticky-board"> <div style="display: relative;"> <div class="sticky-note" id="first"> <div class="sticky-note-title"> Transforms </div> <div class="sticky-note-body">CSS transforms change the shape and position of the affected content without disrupting the normal document flow.</div> </div> </div> <div class="sticky-note" id="second"> <div…arrow_forwardUse HTML to recreate this graphic. Make the result as identical to the sample image as possible.arrow_forward
- Recreate the contents of the document below using HTML elements. Document and the picture.arrow_forwardHow do I make the doctor profile section of the table equal to the other two sections of the table? I just dont like how squished it is and how much space the navigation page has. <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"><html><style> table, th, td { width: 100%; border: 3px solid black; }</style><body> <head> <meta charset="utf-8" /> <title>HTML</title> </head> <body> <header class="header-image"> <img src="Tardis.jpg" alt="Header Image" width="1060" /> </header> <table style="50%"> <tr> <th>Navigation</th> <th>Doctor Profile</th> <th>Image</th> </tr> <tr> <tr> <td> <ul>…arrow_forward<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Lab 14</title></head><body><div><h2>Sticky Note Board</h2><div class="sticky-board"><div style="display: relative;"><div class="sticky-note" id="first"><div class="sticky-note-title">Transforms</div><div class="sticky-note-body">CSS transforms change the shape and position of the affected content without disrupting the normal document flow.</div></div></div><div class="sticky-note" id="second"><div class="sticky-note-title">Translate</div><div class="sticky-note-body"><code>translate()</code> repositions an element in the horizontal and/or vertical directions.</div></div><div class="sticky-note" id="third"><div class="sticky-note-title">Scale</div><div…arrow_forward
- <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Part 1b - Floats</title> <style> /* Finish this rule */ img:nth-of-type(1) { } /* Finish this rule */ img:nth-of-type(2) { } /* don't modify this rule */ p { font-size: 1.25em; text-align: center; } </style></head><body> <img src="https://via.placeholder.com/150"> <img src="https://via.placeholder.com/150"> <p> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut…arrow_forwardWrite the html and CSS code to scroll through imagesarrow_forwardI need help with making the auditions needed in the image I have provided the code this is what I have so far Below please help. <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Lab 14</title></head><body> <div> <h2>Sticky Note Board</h2> <div class="sticky-board"> <div style="display: relative;"> <div class="sticky-note" id="first"> <div class="sticky-note-title"> Transforms </div> <div class="sticky-note-body">CSS transforms change the shape and position of the affected content without disrupting the normal document flow.</div> </div> </div> <div class="sticky-note" id="second"> <div…arrow_forward
- I need help with making the auditions needed in the image I have provided the code this is what I have so far Below please help. <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Lab 14</title></head><body> <div> <h2>Sticky Note Board</h2> <div class="sticky-board"> <div style="display: relative;"> <div class="sticky-note" id="first"> <div class="sticky-note-title"> Transforms </div> <div class="sticky-note-body">CSS transforms change the shape and position of the affected content without disrupting the normal document flow.</div> </div> </div> <div class="sticky-note" id="second"> <div…arrow_forwardCreate a semantic page layout with only with HTML no styling. Within the header, create a navigation list with one or two "skip navigation links. In the main content, create a form with username and email text inputs and a submit button. Create a footer with the copyright date. Make sure that all elements that need proper WGAG compliant AIRA and ROLES and can be navigated by keyboard and screen reader.arrow_forwardHello, I am trying to have this list slant like what it does in the code but I need them to be ordered with lowercase letters. Like the first image should look like a.(image) b.(image2) c.(image3) Here is my code. Thank you! <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head> <body> <ol> <li> Question 3 <ol type="a" <ol <li><img src="exam.gif" alt="Image 1" width="200" height="150"></li> <ol> <li><img src="OIP.jpg" alt="Image 2" width="200" height="150"></li> <ol> <li><img src="Successful.jpg" alt="Image 3" width="200" height="150"></li> </ol>…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