EBK NEW PERSPECTIVES ON HTML5, CSS3, AN
6th Edition
ISBN: 9781337516358
Author: Carey
Publisher: CENGAGE LEARNING - CONSIGNMENT
expand_more
expand_more
format_list_bulleted
Question
Chapter 8, Problem 3CP4
Program Plan Intro
To insert an element named iframe to load the video from the url http://www.youtube.com/v/ie2Mspukx14 in the rnt_poetry.html file
Expert Solution & Answer
Want to see the full answer?
Check out a sample textbook solution
Students have asked these similar questions
Step 20: Mobile Styles
When the user views the page on a mobile device, we don't want the label elements to appear to the left of the input elements because that takes up too much horizontal space. We need to adjust our layout to be more vertical.
Create a media query for screens with a maximum width of 767 pixels. Inside the media query, add a rule for any label elements inside the form element with the id registration that removes the float, sets the width to 100%, and aligns the text to the left.
Add a rule inside the media query for any input element inside the form element with the id registration that removes the float and sets the width to 100%.
Because we set specific widths for the input elements that appear on a single row, we need to override those settings in the mobile view. Add a rule inside the media query for the input elements with the ids city, state, and zip inside the form element with the id registration that sets the maximum width to 100%.
Add a rule…
Html question
Add a thead row group element containing two rows. In the first row, insert five th elements containing the text shown in the preview. The first heading cell should span two rows. In the second row, add four headings cells containing the prices of the plans shown in the preview. Use a br element to display the price information on two separate lines.
My code is here but didn't work out:
<thead><tr><th rowspan="2">select a plan</th><th>Starter</th><th>Prime</th><th>Prime Plus</th><th>Ultra</th></tr><tr><th>$19.95<br> per month</th><th>$29.95<br> per month</th><th>$49.95<br> per month</th><th>$69.95<br> per month</th></tr></thead>
CSS
For the first th element in the first row of the table header row group, create a style rule that sets its font size to 2em. (Hint: Use the first-of-type pseudo-class to…
The table displays the five countries that earned the most medals in the 2022 Winter Olympics in Beijing. Hovering the mouse over the text on the expected webpage's top row makes the text orange.
Add a new rule using the tr:nth-child(even) selector that makes every even tr child element have a lavender background color.
Add a new rule using the th:hover selector that changes the th element's text color to orange when the mouse hovers over the element.
<table> <caption>2022 Olympic Medal Counts</caption> <tr> <th>Country</th> <th>Gold</th> <th>Silver</th> <th>Bronze</th> <th>Total</th> </tr> <tr> <td>Norway</td> <td>16</td> <td>8</td> <td>13</td> <td>37</td> </tr> <tr> <td>ROC</td> <td>6</td>…
Chapter 8 Solutions
EBK NEW PERSPECTIVES ON HTML5, CSS3, AN
Ch. 8.2 - Prob. 1QCCh. 8.2 - Prob. 5QCCh. 8.2 - Prob. 7QCCh. 8.2 - Prob. 8QCCh. 8 - Prob. 1RACh. 8 - Prob. 2RACh. 8 - Prob. 3RACh. 8 - Prob. 4RACh. 8 - Prob. 7RACh. 8 - Prob. 8RA
Ch. 8 - Prob. 9RACh. 8 - Prob. 10RACh. 8 - Prob. 11RACh. 8 - Prob. 12RACh. 8 - Prob. 13RACh. 8 - Prob. 14RACh. 8 - Prob. 15RACh. 8 - Prob. 16RACh. 8 - Prob. 17RACh. 8 - Prob. 18RACh. 8 - Prob. 19RACh. 8 - Prob. 2CP1Ch. 8 - Prob. 3CP1Ch. 8 - Prob. 4CP1Ch. 8 - Prob. 5CP1Ch. 8 - Prob. 6CP1Ch. 8 - Prob. 7CP1Ch. 8 - Prob. 8CP1Ch. 8 - Prob. 9CP1Ch. 8 - Prob. 11CP1Ch. 8 - Prob. 1CP2Ch. 8 - Prob. 2CP2Ch. 8 - Prob. 3CP2Ch. 8 - Prob. 4CP2Ch. 8 - Prob. 5CP2Ch. 8 - Prob. 6CP2Ch. 8 - Prob. 7CP2Ch. 8 - Prob. 8CP2Ch. 8 - Prob. 9CP2Ch. 8 - Prob. 10CP2Ch. 8 - Prob. 2CP3Ch. 8 - Prob. 3CP3Ch. 8 - Prob. 5CP3Ch. 8 - Prob. 6CP3Ch. 8 - Prob. 7CP3Ch. 8 - Prob. 8CP3Ch. 8 - Prob. 9CP3Ch. 8 - Prob. 10CP3Ch. 8 - Prob. 11CP3Ch. 8 - Prob. 12CP3Ch. 8 - Prob. 13CP3Ch. 8 - Prob. 14CP3Ch. 8 - Prob. 15CP3Ch. 8 - Prob. 16CP3Ch. 8 - Prob. 17CP3Ch. 8 - Prob. 18CP3Ch. 8 - Prob. 1CP4Ch. 8 - Prob. 2CP4Ch. 8 - Prob. 3CP4Ch. 8 - Prob. 4CP4Ch. 8 - Prob. 5CP4Ch. 8 - Prob. 6CP4Ch. 8 - Prob. 7CP4Ch. 8 - Prob. 9CP4Ch. 8 - Prob. 10CP4
Knowledge Booster
Similar questions
- CSS question Add another div element to the web form containing the following code: Insert an input element to create an option button for the orderType field with the ID delivery. Make the option button checked by default. After the option button, insert a label associated with the delivery control containing the text Delivery. Add an input element to create a second option button for the orderType field with the ID pickup, followed by a label associated with the pickup control containing the text Pickup.arrow_forwardCSS Add a body selector and set the following: Set the font family to sans-serif.Add a class called text-center and set it to align text to the center.Create an id called slideshow:Set the margin to 80px (up/down) and auto (left/right).Set the position to relative.Set the height and width to 240px.Set the padding to 10px.set the box shadow with the following:height offset: 0vertical offset: 0blur: 20pxcolor: rgba color of black with an opacity of 0.4 (HINT: Make sure to apply the opacity to the box-shadow, not the image.)Create another id of slideshow with a child of div:Set the position to absolute.Set the top, left, right, and bottom to 10px.arrow_forwardCSS Add a body selector and set the following:Set the font family to sans-serif.Add a class called text-center and set it to align text to the center.Create an id called slideshow:Set the margin to 80px (up/down) and auto (left/right).Set the position to relative.Set the height and width to 240px.Set the padding to 10px.set the box shadow with the following:height offset: 0vertical offset: 0blur: 20pxcolor: rgba color of black with an opacity of 0.4 (HINT: Make sure to apply the opacity to the box-shadow, not the image.)Create another id of slideshow with a child of div:Set the position to absolute.Set the top, left, right, and bottom to 10px. HTML At the top of your HTML page, create an h1 tag with a class of text-center. The content of that h1 tag should say Lesson 11 Project.In the body of your HTML, create the following:Create a div with an id of slideshow.Inside that id, create 3 div tags.Inside each div tag, add an img tag.Go to the web and find 3 images that are 240px by…arrow_forward
- Question 7 Calculate the total width: The picture above is 350px wide. The total width of this element is also 350px. The DIV element below the image has a width of 320px. After applying CSS styling, the DIV element becomes 350px wide (the same as the flower image above it) Using border, margin and padding, add to the DIV CsS styling that will make the DIV element 350px wide (You must use all three). div { width: 320px ..... } For the toolbar, press ALT+F10 (PC) or ALT+FN+F10 (Mac).arrow_forwardUse media queries to create a responsive design for the menu shown in Figure 5–57. You will need to create three menu layouts: one for screen widths 500 pixels or less, another for screen widths of 501 pixels to 710 pixels, and a third for screen widths greater than 710 pixels. 1. Add a viewport meta tag to the document head to set the width of the layout viewport equal to the width of the device and set the initial scale of the viewport to 1.0. 2. Open code5-1_media.css file and create a media query for devices with a maximum width of 500 pixels. Within the query do the following: Set the display of the img element within the article element to none. Center the text contained within the ul element belonging to the submenu class. 3. Create a media query for devices with a minimum width of 501 pixels. Within the query do the following: Float the nav element on the left page margin. Set the width of the nav element to 130 pixels and the height to 400 pixels. Set the…arrow_forwardCSS question Scroll down to the section element and, directly after the initial paragraph, insert a form element that employs the action at the fictional address http://www.example.com/redball/customer using the post method. Within the form element, insert a div element that encloses a label with the text Name* associated with the nameBox control. Also, within the divelement, add an input text box with the ID nameBox, field name custName, and placeholder text First and Last Name. Make custName a required field. (Hint: To make a field required, add the required attribute to the corresponding control element e.g. <input ... required>)arrow_forward
- in the index.html file, add a class attribute with the value tablet-desk to the second div element within the main element. Add a class attribute with the value corner to the image element. Remove the height and width attributes from the image element. <body> <div id="container"> <!-- Use the nav area to add hyperlinks to other pages within the website --> <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="#">Resources</a></li> <li><a href="#">W3C</a></li> </ul> </nav> <!-- Use the header area for the website name or logo --> <header> <h1>Responsive Design</h1> </header> <!-- Use the main area to add the main content of the webpage --> <main>…arrow_forwardAdd the following comments to the tablet media query: Tablet Viewport: Show tab-desk class, hide mobile class Tablet Viewport: Style rules for nav area Add the following style rules below the "Show tab-desk class, hide mobile class" comment: Style rule for the tab-desk class selector that sets the display to a block. Style rule for the mobile class selector that sets the display to none.arrow_forwardQUESTION: Navigation Lists Next, you’ll format the appearance of navigation lists on the page. Go to the Navigation Styles section and create a style rule for the nav a selector that displays the hypertext links using the font stack: Trebuchet MS, Helvetica, sans-serif. Set the top and bottom padding to 10 pixels. For every unvisited and previously visited hypertext link within a nav element, set the text color to white, remove underlining from the link text, and set the background color to the semi-transparent value hsla(0, 0%, 42%, 0.4). For every active or hovered link in a nav element, set the text color to the semi-transparent value hsla(0, 0%, 100%, 0.7) and set the background color to the semi-transparent value hsla(0, 0%, 42%, 0.7). CODE BELOW: @charset "UTF-8"; @font-face { font-family: Champagne; src: url("cac_champagne.woff") format("woff"), url("cac_champagne.ttf") format("truetype"); } @font-face { font-family: Grunge; src: url("1942.woff")…arrow_forward
- Help me complete this task. In the style rules for the mobile viewport, below the main style rule, add a new style rule for the section element that sets the background-color to #183440, the color to #fff, top margin to 4%, and padding to 3%. Below the section style rule, create a new style rule for the article element that sets the top margin to 1% and padding to 2%. Below the article style rule, create a new style rule for the aside element that sets the background-color to rgba(24, 52, 64, 0.3), padding to 2%, top margin to 1%, color to #183440, and a box-shadow with values of 4px 4px 10px #183440. My CSS /* CSS Reset */ body, header, nav, main, footer, h1, div, section, article, aside { margin: 0; padding: 0; border: 0; } /* Style rule for body */ body { background-color: #c8dbE3; } /* Style rules for mobile viewport */ /*style rule for section*/ section { background-color: #183440; color: #fff; margin-top: 4%; padding: 3%; } /*style rule for…arrow_forwardHelp me complete this task. Add the following style rules for the form elements. Create a style rule for the fieldset and input elements that sets the bottom margin to 2%. Create a style rule for the fieldset legend that sets the font-size to 1.25em and makes the font bold. Create a style rule for the label that sets the display to block and sets padding-top to 3%. Create a style rule for the btn class selector that removes the border, sets the top and bottom margin to zero and the left and right margin to auto, sets the display to a block, sets the padding to 5%, sets the background-color to 003399, sets the font-size to 1.25em, sets the border-radius to 10px, and sets the color to white (fff). --my css /* Style for body specifies a background color */ body { background: linear-gradient(to top right, #fff 0%, #6699ff 100%) no-repeat fixed center; font-family: Geneva, Arial, sans-serif; } /* Style for the container element */ #container { width: 90%; margin: 0 auto; }…arrow_forwardTable Layout Open the mi_tables.css and go to the Table Styles section and add a style rule for the table element that: sets the background color to a linear gradient that goes to the bottom of the table background starting from rgb(190, 215, 255) and ending in black and adds a 5-pixels solid gray border. this is a programming question. The following is what I currently have (under table styles), but I am having a hard time getting more of the background columns to show. Thanks. /* Table Styles */ table { background: linear-gradient(to bottom , rgb(190, 215, 255), black); border: 5px solid gray; } th, td { border: 3px solid gray; line-height: 1.4em; padding: 8px; } th { background: black; color: rgb(130, 210, 255); font-weight: normal; } td { color: white; font-size: 0.9em; vertical-align: top; }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
Np 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
Np Ms Office 365/Excel 2016 I Ntermed
Computer Science
ISBN:9781337508841
Author:Carey
Publisher:Cengage