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
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
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>
Question 1 What are the problems with the above code? Consider the syntax, structure, and writing style.
Question 2 Write CSS code that tidies up the above code. Your code should minimise the use of inline style.
Queston 3 Add a CSS selector for all paragraphs (p elements) under div elements with class “exam” to make their background colour blue.
Chapter 6 Solutions
Web Development and Design Foundations with HTML5 (9th Edition) (What's New in Computer Science)
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
- H1. 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_forwardWrite 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-classesarrow_forwardWrite the embedded CSS to style the following parts of a web page background color of website “light green” UTAS head level1 background color “blue”, while text color is “white” the colleges are head level3 background color “yellow”, while the text color is red. Use discerption list to display branches of CAS and education colleges Sample outputarrow_forward
- 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 bararrow_forwardWrite Css style rulesto layot text in 4 columns with a column gap of 25px , column rule of style solid , color blue and width 4pxarrow_forward1. Copy the act15.html and act15.css codes. Download the logo.2. Modify the HTML document and place an internal JavaScript to validate the input of the user. See the attached image for further instructions. <html> <head> <title>WEBDEV INC. LOG-IN PAGE</title> <link rel="stylesheet" href="act15.css"> <script> <!--Place your JavaScript codes here, and remove this comment! --!> </script> </head> <body> <header>Welcome!</header> <div class="bg1"></div> <div class="bg2"></div> <div class="main"> <center class="logoGroup"> <img class="logo" src="logo.png"> <br>WEBDEV INC. </center> <center class="login"> <form> <table> <tr> <td>Name: </td>…arrow_forward
- it should look like this, IN HTML AND CSS please Create the page layout where we call the top, bottom, left, and right portions of the page "header", "footer", "content", and "menu", respectively. Note that the content part of the page is further divided into three blocks: the top block has a heading and a paragraph, and is followed by two blocks - one on the left with two images, and one on the right with three "announcements". The header should use large, white, center-aligned text on a red background with a thick black border. There should be some space between the text and the border. The footer should use green, centered-aligned text on a gray background. The menu has an unordered list on a black background but the actual background of the list is red. so its a black block with a red block inside that has the list. Each item in the list is hyperlinked except for one called "Home". The unlinked text should be black, and the linked text should be white. When a user hovers over a…arrow_forwardI want to make a CSS for this code so the logo is in the center of the page and the text needs to be bigger and fits the page and evenly spaced. I also want to make the background color white and for the body to have a blue border. I also want the footer to have a blue background and centered. <!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> </head> <body> <nav> <a href="index.html">Home</a> <a href="about.html">About Us</a> <a href="contact.html">Contact Us</a> </nav> <h1>Home Page</h1> <article> <img src="Images/Logo.png" alt="Video Game" height="80"> <h2>The Early Ages</h2> <p>Today, video…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
- Create an css code for this html. And make this lookalike in the picture: <!DOCTYPE html><html><head> <title>Anime Page</title> <meta name="author" content="your name" /> <meta name="description" content="" /> <link rel="stylesheet" href="style.css" type="text/css" /></head><body> <div id="page"> <div id="logo"> <h1><a href="/" id="logoLink">Anime Fan Page</a></h1> </div> <div id="nav"> <ul> <li><a href="#/home.html">Anime</a></li> <li><a href="#/about.html">Gallery</a></li> <li><a href="#/contact.html">Contact</a></li> </ul> </div> <div id="content"> <h2>Home</h2> <p> Anime is Japanese hand-drawn…arrow_forward14- Write an HTML code that will display the “IOT World Today” website inside an Iframe contained within your webpage. The Iframe will have a width and height of 444px and 555px respectively. a) Apply border to the frame by using CSS. The color of the border is RED , size of the border is 25px and style of the border is double . {Assume that the website address of “IOT World Today” https://www.iotworldtoday.com/ }arrow_forwardWrite the semantically correct HTML code for the navigation area of a website that lists 3 navigation items: products, services, and contact us. You don't need to include all the HTML for the page, only include the navigation itself. Each of the 3 items link to products.html, services.html, and contact-us.html. Write one inline CSS rule to remove the bullet from in front of the list items and horizontally center the navigation items on the screen. Write inline CSS that uses the display property to display the list items side-by-side.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