New Perspectives on HTML and CSS: Brief
6th Edition
ISBN: 9781133387268
Author: Patrick M. Carey
Publisher: Cengage Learning US
expand_more
expand_more
format_list_bulleted
Question
Chapter 3, Problem 5CP4
Program Plan Intro
To provide design for page pcg_front.html such that the design includes display property, application of width and height style, floated elements and cleared elements, defined margin and spacing and example of absolute and relative positioning.
Expert Solution & Answer
Want to see the full answer?
Check out a sample textbook solution
Students have asked these similar questions
Design Layout #1 (Home Page)
This layout should include placeholders for the following semantic elements:
Header: This will be the top section of the home page, typically containing the website’s name, a logo, and possibly a tagline or introductory text.
Nav: The navigation bar should have links to other parts of the website. For the home page, include links to the three interior pages (one for each city) and possibly a "Home" link to return to the main page.
Section: The main content area should display introductory information about the state (e.g., state name, general description, some images).
Aside: A sidebar with additional content, such as a list of links to related topics, an advertisement, or other supplementary information.
Tablet Element Styles
The page body has four children: the header, the footer, the article element, and the aside element. The article and aside elements will share a row with more space given to the article element. Set the growth, shrink, and basis values of the article element to 2, 1, and 400 pixels. Set those same values for the aside element to 1, 2, and 200 pixels.
Complete the following webpage assignment.
Assignment Instructions:
Design a webpage to simulate a Blog. The website must have a banner image and a featured image with multiple resolutions to be active at different resolution breakpoints just as discussed in this
lesson. Include a jQuery script in your project to further enhance the user experience. Use one of the CDN libraries. The script is up to your discretion though you must be able to justify its use. The
blog page must be aesthetically pleasing and follow a traditional blog structure. It may help to look at the many WordPress templates available on the net.
Chapter 3 Solutions
New Perspectives on HTML and CSS: Brief
Ch. 3.1 - Prob. 1QCCh. 3.1 - Prob. 2QCCh. 3.1 - Prob. 3QCCh. 3.1 - Prob. 4QCCh. 3.1 - Prob. 5QCCh. 3.1 - Prob. 6QCCh. 3.1 - Prob. 7QCCh. 3.1 - Prob. 8QCCh. 3.1 - Prob. 9QCCh. 3.2 - Prob. 1QC
Ch. 3.2 - Prob. 2QCCh. 3.2 - Prob. 3QCCh. 3.2 - Prob. 4QCCh. 3.2 - Prob. 5QCCh. 3.2 - Prob. 6QCCh. 3.2 - Prob. 7QCCh. 3.2 - Prob. 8QCCh. 3.2 - Prob. 9QCCh. 3.3 - Prob. 1QCCh. 3.3 - Prob. 2QCCh. 3.3 - Prob. 3QCCh. 3.3 - Prob. 4QCCh. 3.3 - Prob. 5QCCh. 3.3 - Prob. 6QCCh. 3.3 - Prob. 7QCCh. 3 - Prob. 1RACh. 3 - Prob. 2RACh. 3 - Prob. 3RACh. 3 - Prob. 4RACh. 3 - Prob. 5RACh. 3 - Prob. 6RACh. 3 - Prob. 7RACh. 3 - Prob. 8RACh. 3 - Prob. 9RACh. 3 - Prob. 10RACh. 3 - Prob. 11RACh. 3 - Prob. 12RACh. 3 - Prob. 13RACh. 3 - Prob. 14RACh. 3 - Prob. 15RACh. 3 - Prob. 16RACh. 3 - Prob. 1CP1Ch. 3 - Prob. 2CP1Ch. 3 - Prob. 3CP1Ch. 3 - Prob. 4CP1Ch. 3 - Prob. 5CP1Ch. 3 - Prob. 6CP1Ch. 3 - Prob. 7CP1Ch. 3 - Prob. 8CP1Ch. 3 - Prob. 9CP1Ch. 3 - Prob. 10CP1Ch. 3 - Prob. 11CP1Ch. 3 - Prob. 12CP1Ch. 3 - Prob. 13CP1Ch. 3 - Prob. 14CP1Ch. 3 - Prob. 15CP1Ch. 3 - Prob. 16CP1Ch. 3 - Prob. 17CP1Ch. 3 - Prob. 18CP1Ch. 3 - Prob. 19CP1Ch. 3 - Prob. 20CP1Ch. 3 - Prob. 1CP2Ch. 3 - Prob. 2CP2Ch. 3 - Prob. 3CP2Ch. 3 - Prob. 4CP2Ch. 3 - Prob. 5CP2Ch. 3 - Prob. 6CP2Ch. 3 - Prob. 7CP2Ch. 3 - Prob. 8CP2Ch. 3 - Prob. 9CP2Ch. 3 - Prob. 10CP2Ch. 3 - Prob. 11CP2Ch. 3 - Prob. 12CP2Ch. 3 - Prob. 13CP2Ch. 3 - Prob. 14CP2Ch. 3 - Prob. 15CP2Ch. 3 - Prob. 16CP2Ch. 3 - Prob. 17CP2Ch. 3 - Prob. 18CP2Ch. 3 - Prob. 19CP2Ch. 3 - Prob. 20CP2Ch. 3 - Prob. 1CP3Ch. 3 - Prob. 2CP3Ch. 3 - Prob. 3CP3Ch. 3 - Prob. 4CP3Ch. 3 - Prob. 5CP3Ch. 3 - Prob. 6CP3Ch. 3 - Prob. 7CP3Ch. 3 - Prob. 8CP3Ch. 3 - Prob. 9CP3Ch. 3 - Prob. 10CP3Ch. 3 - Prob. 11CP3Ch. 3 - Prob. 12CP3Ch. 3 - Prob. 13CP3Ch. 3 - Prob. 14CP3Ch. 3 - Prob. 1CP4Ch. 3 - Prob. 2CP4Ch. 3 - Prob. 3CP4Ch. 3 - Prob. 4CP4Ch. 3 - Prob. 5CP4Ch. 3 - Prob. 6CP4
Knowledge Booster
Similar questions
- does not need to be exact just needs to be similararrow_forwardYou add a style to the start tag for an element, such as a heading or paragraph, using the style attributearrow_forwardCreate the page layout as shown in the screenshot above. In particular, we will 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. The background of the list is red. Each item in the list is hyperlinked except for "Home". The unlinked text should be black, and the linked text should be white. When a user mouse over a link, the color of the text should change to black. There should be some space between…arrow_forward
- Using HTML , CSS, and Java Script create a dashboard. Include in the dashboard a side bar ( 3 horizontal dashes, located are the top left of the webpage) a logo image above the title of the webpage. (In the center across from the sidebar (3-horizontal dashes) Then in the title of the header make it display change depending on the the hour (e.g. Good morning, good afternoon, good evening, goodnight) with images on either side of the title depending on the title. Create 4 different quadrant (boxes) two at the top and another two at the bottom. Below the 4 quadrants include an image that fits the rest of the screen. Within the image make two buttons one to start writing and the other for instructions. Make a 4 pc space around each box. Then in the very bottom of the webpage include a footer with white text and black background. Make a setting (gear) at the top right of the screen to toggle between light or dark mode. Let the whole webpage change depending on the mode (Light mode:…arrow_forwardA. Identify the style rule for an h1 element to center-align its content. a.h1 { <text-align>: center; } b. h1 { text-align: center; } c.h1 { text-align: <center/>; } d.h1 { <text-align/> <center/>; }arrow_forwardDesign a validation rule for the contact page layout for the phone field. User will only be able to save the record if the user entered the 9 or 12 digits. Salesforce Admin / Developmentarrow_forward
- Design a web page by using div, hl, h2 and image elements as given below. Implement also the box model to set the image in proper way. All the design of elements should be implemented in internal style sheet. hi Div Animal Pictures Koala Penguins Div Koalajpg Penguinsjpg Imagearrow_forwardHTML True or False One way to introduce an image and place it in a block element container is to embed it inside its own div element , then place that new div element inside the container using internal padding and internal margins.(True or false)? .central li and .central ul are both overriden (in a common selector property such as color) by both div.central li and div ul.(True or false)? Paragraphs in a vertical block structure inside a div element can be flush mounted against each other ( no separation space between them) by employing padding but not by eliminating the margin in-between them (setting margin:0px;). (True or false)? In the table element, the col or colgroup designation with class name can be used to control and override background colors but not text color.(True or false)? Given the following html, what would be the correct css to make the ul element red text . (True or false)?…arrow_forwardDesign a web page by using div, h1, h2 and image elements as given below. Implement also the box model to set the image in proper way. All the design of elements should be implemented in internal style sheet.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_forwardDesign a basic wesbite layout for a restaurant with a home page, and about page, a menu page, and a contact page (with a form: form doesn't have to be useable!) PLUS a separate CSS file with style features. Use only HTML and CSS, no other formats.arrow_forwardTo display an element as a block-level use: display: block-level; display: block; display: inline; display: display-block; What are three types of layouts? inline, fluid, static fixed, floating, static fixed, fluid, elastic inline, block, scrolling Provide a style rule to set the maximum width of an element to 960 pixels. maximum-width: 960px; maxw: 960px; width: 960px; max-width: 960px; Provide a style rule to horizontally center a block element within its container with a top/bottom margin of 20 pixels. margin: 20px center; margin: center 20px; margin: auto 20px; margin: 20px auto; Provide a style rule to place an object on the right margin of its container. margin: right; text-align: right; float: right; padding: right; Provide a style rule to display an object only when all floating elements have cleared. clear: float; clear: floats; clear: both; clear: all; Your layout has four floated elements in…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:CengageCOMPREHENSIVE MICROSOFT OFFICE 365 EXCEComputer ScienceISBN:9780357392676Author:FREUND, StevenPublisher:CENGAGE L
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
COMPREHENSIVE MICROSOFT OFFICE 365 EXCE
Computer Science
ISBN:9780357392676
Author:FREUND, Steven
Publisher:CENGAGE L