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
Expert Solution & Answer
Chapter 6, Problem 2AYK
Explanation of Solution
Missing code:
- In style properties, set floating property as right, width=150px and border = 1px solid #000000 in nav style.
- Similarly, set the margin property as 160px in main style.
- Add the “nav” keyword precede the “a” style properties.
- Set the “list-style-type” as none in unordered list “ul” style.
Modified code:
<!DOCTYPE html>
<!--HTML Tag-->
<html lang="en">
<!--Head Tag-->
<head>
<!--Title Tag-->
<title>Trillium Media Design</title>
<meta charset="utf-8">
<!--Style Tag-->
<style>
nav { float:right;
width: 150px;
background-color: #cccccc;
border: 1px solid #000000; }
header { background-color: #cccccc;
color: #663333;
font-size: x-large;
border-bottom: 1px solid #333333; }
main { margin-right: 160px; }
footer { font-size: x-small;
text-align: center;
clear: both; }
nav a { color: #000066;
text-decoration: none; }
Expert Solution & Answer
Want to see the full answer?
Check out a sample textbook solution
Students have asked these similar questions
4. The following code is the implementation of the external CSS style. Convert the following
code into inline CSS style.
Question4.css
Collapse Border
Example
Cell A Collapse
Example
Cell B Collapse
Example
Separate Border
Example
Cell A Separate
Example
Cell B Separate
Example
1.css
table.one
{border-collapse:collapse;}
table.two {border-collapse:separate;}
td.a{
border-style:dotted;
border-width:3px;
}
border-color:#000000;
padding: 10px;
}
td.b {
border-style:solid;
border-width:3px;
border-color: #333333;
padding:10px;
QUESTION 15
Assume you have the following html code:
* Your code goes here /
Home Service About us Contact us
Add the following internal CSS styling rules to the code you may use CSS class selectors as needed:
1. Remove the marker of the unordered list containing hyperlinks.
2. Remove the underlines from the hyperlinks.
3. Put an appropriate distance between the hyperlinks.
4. The hyperlinks should be displayed horizontally (beside each other).
5. Set an appropriate background color for navigation bar.
6. Make the hyperlink underline visible when mouse hover on all the hyperlinks.
Home
Ahout
Contoot un
Web development
Chapter 6 Solutions
Web Development and Design Foundations with HTML5 (8th Edition)
Ch. 6.4 - Prob. 1CPCh. 6.4 - Prob. 2CPCh. 6.4 - Prob. 3CPCh. 6.15 - Prob. 1CPCh. 6.15 - Prob. 2CPCh. 6.15 - Prob. 3CPCh. 6 - Prob. 1MCCh. 6 - Prob. 2MCCh. 6 - Prob. 3MCCh. 6 - Which of the following configures a class called...
Ch. 6 - Prob. 5MCCh. 6 - Prob. 6MCCh. 6 - Prob. 7MCCh. 6 - Prob. 8MCCh. 6 - Prob. 9MCCh. 6 - Prob. 11FIBCh. 6 - Prob. 12FIBCh. 6 - The ____________ is always transparent.Ch. 6 - Prob. 14FIBCh. 6 - Prob. 15FIBCh. 6 - Prob. 1AYKCh. 6 - Prob. 2AYKCh. 6 - Prob. 3AYKCh. 6 - Prob. 1HOECh. 6 - Prob. 2HOECh. 6 - Prob. 3HOECh. 6 - Prob. 4HOECh. 6 - Prob. 5HOECh. 6 - Prob. 6HOECh. 6 - Prob. 7HOECh. 6 - Prob. 8HOECh. 6 - Prob. 9HOECh. 6 - Prob. 10HOE
Knowledge Booster
Similar questions
- Using Inline style do the following for this hl>: Using Embedded style do the following for this : Using Embedded style do the following for thisarrow_forward11. Template Creation Create a template to display an HTML page like below. Create a template with 4 columns and 3 rows. You can choose any approach to finish this task. This task only using HTML and CSS, please make sure your code already tested before you submit it. item 1 item 2 item 3 item 4 item 5 item 6 item 7 item 8 item 9 item 10 Body padding is 20px Border color is #e3e3e3 Text color is #727272 Text size is 12px Distance between icon and box is 10px Border radius size is 10px Icon asset image is https://a.m.dana.id/promo/landing-page/default- icon.webparrow_forwardHow to create a product table page: To create the product list page, you can copy the index.html file you worked on in exercise 7 to the products folder. Then, you can delete the content from the main section and modify the URLs on the page as necessary. • Modify the horizontal navigation menu so it indicates that the product list page is the current page. • Add a table to the section with a caption, a header, and a body as shown above. Be sure to merge the rows in the first column for each category so the category name is displayed only in the first row. Create a new style sheet named summary.css for the product list page, and copy the styles you need from the main.css file to this style sheet. Then, modify the link element for the style sheet in the products/index.html file so it points to the correct style sheet. • Align the caption, headings, and data, and apply any other required formatting as shown above. Use a structural pseudo-class selector to apply a background color of…arrow_forwardPart 4: Build a html form with the following elements. The form must be within a table structure. Name: a text box where the content contains no special character (i.e. !, @, #, $, %, &, *). Number is allowed. The text box must not be empty. • Module code: a text box where the content must start with 3 lower case alphabets and follows by 4 digits. This textbox can be empty. • Current date: a non-editable textbox and should be in the format as shown (e.g. 12 October 2020 Monday 3:35 PM). The content is the current date or today's date which will change every day. • Message: a text area with 3 rows and 20 columns. The default text is "Hello 202204". The text area cannot be empty. • Find: a text box for the user to key in text he/she wants to find. Replace: a text box for the user to key in the replacement text. If the find text is empty, this element should be disable (i.e. user cannot key in anything here). • Find and Replace: This is a button, when click, it will go to the "Message"…arrow_forwardCreate an HTML5 web page about one of your favorite hobbies. Choose a hobby and either take a relevant photo or select a relevant royalty-free photo from the Web (refer to Chapter 4). Decide on a heading for your page. Write one or two brief paragraphs about the hobby. The page must use valid HTML5 syntax and include the following elements: header, article, and footer. Use the figure, figcaption, and img elements to display the photo you have chosen. Include a hyperlink to a website that is relevant to the hobby. Include your name in an e-mail address in the page footer area. Configure the text, color, and layout with embedded CSS. Save the file as myhobby.html.arrow_forwardActivity 2: HTML Color Table This Activity's objective is to write the HTML code to display the following table. Feel free to add more colors. Den n Colour Show Transcribed Text 1 2 3 4 5 6 7 8 9 10 11 12 13 Salmor Name Gold Some HTML Colors hexidecimal Color Table table, th, td { border: 1px solid black; } FA8072 FFD700 RGB value 250-128-114 255-215-0arrow_forwardUse the following CSS rule to write a line of HTML code that will display the text “CSC242” in an h1 header and make the text red. .special { color: red; }arrow_forwardUsing Javascript Write a page that displays a balloon (using the balloon emoji, ?). When you press the up arrow, it should inflate (grow) 10 percent, and when you press the down arrow, it should deflate (shrink) 10 percent. You can control the size of text (emoji are text) by setting the font-size CSS property (style.fontSize) on its parent element. Remember to include a unit in the value—for example, pixels (10px). The key names of the arrow keys are "ArrowUp" and "ArrowDown". Make sure the keys change only the balloon, without scrolling the page.arrow_forwardTrue or false: the "id" property should be used to style multiple HTML elements simultaneously. a. false b. truearrow_forwardWhen the user clicks on the show/hide link, a function should be called to toggle between hiding and showing the description paragraph <p id="desc"> element. The paragraph should be displayed if it was hidden and it should be hidden if it was displayed ? Note: to show and hide an html element you should use CSS layout display property.arrow_forwardhtml/cssarrow_forwardHTML In strictly default block vertical coordinates, the reference positions for the next element placement on the page is the location of the element immediately on top and the left-hand screen position. (TRUE OR FALSE)? If an outer div container contains two inner div elements, and an outer height is given by css to the outer container, and the background color of the outer container is blue then there will always be blue colored space left below the two inner divs (TRUE OR FALSE)? Image elements can have borders surrounding them , and maintained inside a containing element. (TRUE OR FALSE)? In table elements, the most specific HTML level is the tr element ( row element)(TRUE OR FALSE)? Text can be centered inside a div element by using the selector command text-align: center or otherwise placing the text inside another div element with the same background color and applying margin-left command( TRUE OR FALSE)? A paragraph, div element, and h element will assume the…arrow_forwardarrow_back_iosSEE MORE QUESTIONSarrow_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