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
Concept explainers
Expert Solution & Answer
Chapter 5, Problem 3FWD
Explanation of Solution
Designing color scheme for the website:
The website created is: Door’s Country Wildflowers.
- a) Color schemes used:
The color schemes used for the styling of website are mentioned below:
- #ffffff - This color scheme is used for the background color of the body of the website.
- This stands for color Hex White and has a RGB value of (255,255,255).
- #636631 - This color scheme is used for the background color of the header section of the website.
- This color is composed of 38.8% red, 40% green and 19.2% blue.
- #eeeeee - This color scheme is used for the background color of the container of the website.
- This color’s red value is 238, green value is 238 and the blue value of its RGB is 238.
- b) Process of Selecting colors:
For a web designer, the process of selecting color schemes for their website is mentioned below:
- One must choose the dominant color in a limited number of places where visitors mostly pay attention.
- The body’s background color must match with the theme of the website.
- One must choose their accent color by using color matching tools to match with the background color.
- In order to make a memorable connection, one must choose color and design which mostly appeals to the target audience.
URL of the resourced used is:
https://www.websitebuilderexpert.com/how-to-choose-color-for-your-website/
The website which includes the external style sheet with the color schemes:
Program Plan:
- Include the HTML tag using <HTML>.
- Include the header tag using <head>.
- Include the title on the webpage using <title> tag.
- Include a hyperlink to the named fragment designated by “top”.
- Close the header tag.
- Include an internal CSS file using the style tag.
- Include Alignment For Body Tag.
- Include Alignment for CSS Container.
- Alignment to have the image in the right side of the webpage.
- Alignment for aside tag to place some content aside from the content it is placed in.
- Include the body using the <body> tag.
- Include a heading using the <h1> tag.
- Include a paragraph using the <p> tag.
- Close the body using </body> tag.
- Include the header tag using <head>.
- Close the file using </html> tag.
Program:
The HTML code that shows examples of the color configured in the CSS Styles Rules:
<!DOCTYPE html>
<!-- HTML Tag -->
<html lang="en">
<link rel="stylesheet" type="text/css" href="color.css">
<!-- Head Tag -->
<head>
<!-- Title Tag -->
<title>Door County Wildflowers</title>
<meta charset="utf-8">
<!-- Close Tag -->
</head>
<!-- Body Tag -->
<body>
<!-- Division Tag -->
<div id="container">
<!-- Use of ARIA Landmark -->
<header role="banner">
<!-- Include link -->
<span><a href="#center">Skip to Content</a></span>
<h1>Door County Wildflowers</h1>
</header>
<div id="demo">
<!--navigation tag -->
<nav role="navigation">
<!-- unordered lists of services in the webpages -->
<li><a href="index.html">Home</a></li>
<li><a href="spring.html">Spring</a></li>
<li><a href="summer.html">Summer</a></li>
<li><a href="fall.html">Fall</a></li>
<li><a href="contact.html">Contact</a></li>
<!-- image used as a hyperlink -->
<img src="plsthumb.jpg" width="100" height="100" alt="Showy Lady Slipper">
<!--Close Tag -->
</nav>
<aside role="complementary">
<h3>The Ridges</h3>
<!-- include paragraph -->
<p class="news">The Ridges Nature Sanctuary offers wild orchid hikes during the summer months. For more info, visit <a href=" http://www.ridgesanctuary.org ">The Ridges</a>.</p>
<h3>Newport State Park</h3>
<p class="news">The <a href=" http://www.newportwildernesssociety.org ">
Newport Wilderness Society</a> sponsors free meadow hikes at 9am every Saturday. Stop by the park office to register.</p>
</aside>
<!-- close tag -->
<!-- main tag -->
<main role="main">
<h2>Door County</h2>
<p>Wisconsin's Door County Peninsula is ecologically diverse — upland and boreal forest, bogs, swamps, sand and rock beaches, limestone escarpments, and farmlands.</p>
<p>The variety of ecosystems supports a large number of wildflower species.</p>
<img src="trillium...
Expert Solution & Answer
Want to see the full answer?
Check out a sample textbook solution
Students have asked these similar questions
Make a page that looks something like the picture attached below!
Use your own monster, text, and colors, if you like. The monster picture needs a think border.
Make sure there's space:
Inside the warning box, between it and the text
Outside the warning box, between it and the text
Around the image border
Full HTML page, as usual. Use a separate stylesheet. GIVE ALL CODES. I will upload to my server. thank you i will upvote.
I need help with adding the changes I have added everything I have so far below you simply need to cut and paste it into an HTML/CSS Compiler
<!DOCTYPE html><html lang="en"> <style>
/* colors.css */
.sticky-note { /* DON'T EDIT ME */ color: black; background: #D29DE9;}.sticky-note-title { /* DON'T EDIT ME */ color: inherit;}.sticky-note-body { /* DON'T EDIT ME */ color: inherit;}
/* formatting.css*/
.sticky-note-title { /* DON'T EDIT ME */ padding: 1rem; font-size: 2rem;}.sticky-note-body { /* DON'T EDIT ME */ transform: rotate(0); padding: 1rem; font-size: 1.5rem;}.sticky-board { /* DON'T EDIT ME */ margin-top: 2em; display: flex; padding: 3em; flex-wrap: wrap; gap: 1em; justify-content: center;}.sticky-note { flex-shrink: 0; width: 20em; height: 20em;
/* Add styles here */ }#first { transform: rotate(75deg); transition: transform 500ms; }#second {…
HereWrite the code necesary in javascript to create a webpage that contains a contact form like the one in the attatched picture.
To create and style this form, copy the following HTML and CSS code exactly as follows:
HTML:
<form><label for="myName">Name:</label><input type="text" name="myName" id="myName"><label for="myEmail">E-mail:</label><input type="text" name="myEmail" id="myEmail"›<label for="myComments">Comments:</label><textarea name="myComments" id="myComments" rows="2" cols="20"></textarea><input id="mySubmit" type="submit" value="Submit"›</form>
CSS:
form { background-color:#eaeaea;font-family: Arial, sans-serif;padding: lOpx; }label { float: left;width: 100px;clear: left;text-align: right;padding-right: lOpx;margin-top: lOpx; }input, textarea { margin-top: lOpx;display: block; }#mySubmit { margin-left: 110px; }.
Chapter 5 Solutions
Web Development and Design Foundations with HTML5 (8th Edition)
Ch. 5.6 - Prob. 1CPCh. 5.6 - Prob. 3CPCh. 5.12 - Prob. 1CPCh. 5.12 - Prob. 2CPCh. 5.12 - Prob. 3CPCh. 5 - Prob. 1MCCh. 5 - Prob. 2MCCh. 5 - Prob. 3MCCh. 5 - Prob. 4MCCh. 5 - Prob. 5MC
Ch. 5 - Prob. 6MCCh. 5 - Prob. 7MCCh. 5 - Prob. 8MCCh. 5 - Prob. 9MCCh. 5 - Prob. 10MCCh. 5 - Prob. 11FIBCh. 5 - Prob. 12FIBCh. 5 - Prob. 13FIBCh. 5 - Prob. 14SACh. 5 - Prob. 15SACh. 5 - Prob. 1HOECh. 5 - Prob. 2HOECh. 5 - Prob. 3HOECh. 5 - Prob. 4HOECh. 5 - Prob. 5HOECh. 5 - Prob. 6HOECh. 5 - Prob. 7HOECh. 5 - Prob. 1WRCh. 5 - Prob. 2WRCh. 5 - Prob. 1FWDCh. 5 - Prob. 2FWDCh. 5 - Prob. 3FWD
Knowledge Booster
Learn more about
Need a deep-dive on the concept behind this application? Look no further. Learn more about this topic, computer-science and related others by exploring similar questions and additional content below.Similar questions
- Exercise 2Design a web page with a canvas with the id c2, width – 300 height 300 with solid border with Blue color. Draw a string “Hello” on the canvas at location (10,70) with the font Arial and font size 20 pixelarrow_forwardCreate a web site that will infinitely loop over at least 4 images sequentially displayed in a canvas with a controlled speed sliderUse: javascript: setInterval, clearInterval HTML : < input type="range" > , < img >, <canvas> Please label where I can change the images at as wellarrow_forwardCreate an external CSS file and attach it to the html document, you need to name the file with your first name and last initial. The only change you are allowed or need to make in the HTML file is the link to the attached CSS sheet. study the HTML file before starting note the ID and classes in the document. using only CSS to duplicate the layout of the sample image use position,grid or flex combination of layout methodsarrow_forward
- 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 choicearrow_forwardCreate another HTML File with YourNameReqgNoQ2.html (Add this step screen shot too). Also apply Inline CSS to all the following Tags Next, in the same Web Page, Write HTML Code to Open the HEC Web Site, NTS Web Site Define the following Terms (Web Server, Web Site, Web Page, Web Browser, Domain Name, Hosting, Five Features of Facebook)arrow_forwardBy using the program below: Kindly use CSS, Set the text color for the page to "red", and the text color for <h1> to "blue". <!DOCTYPE html> <html> <head> <style> </style> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html>arrow_forward
- Create a web site that will infinitely loop over at least 4 images sequentially displayed in a canvas with a controlled speed slider Use: javascript: setInterval, clearInterval HTML : < input type="range" > , < img >, <canvas>arrow_forwardApply all the css styles in the html file below follow the guidelines on how to style them <html> <head> <meta charset="UTF-8"> <title>CSS Selectors Learning Task</title> </head> <body> <h1>YES! I am the first content in this page.</h1> <p>But I am the very first paragraph in this page. (even though I am only a short one) </p> <h3>Uhm. Hi? I am alevel 3 heading. That's all. Thank you.</h3> <div> <p class="hello">Hey! I am also a paragraph but a classy one since am in a classed paragraph.</p> <p id="special" class="love">Okay? Since we are at it, I am, by the way, a classy paragraph as well but a special and loved one. </p> <h2>Well, I am a level 2 heading. I did't know we are to introduce ourselves here.</h2> <p>As you can see, I am just another paragraph. That's all i could say.</p>…arrow_forwardHello, I am trying to make an image get big enough so that the image is nice and big but also the header is below the boxes. Can someone look at my code for my html and stylesheet, so that I can expand the image and get the footer image below the dividers. HTML: <!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>Flexbox Coding</title> <link rel="stylesheet" href="style.css"></head><body> <header class="header-image"> <img src="DoctorHeader.jpg" alt="Header Image"> </header> <div class="flex-container"> <div> <ul> <li><a href="Page1.html">Overview</a></li> <li><a href="Page2.html">The First Doctor</a></li> <li><a href="Page3.html">The Second Doctor</a></li> <li><a href="Page4.html">The Third…arrow_forward
- If you are asked to design an advertisement page for a restaurant, it contains three images (01.jpg, 02.jpg and 03.jpg) and multiple links, all of them go to the website (https://www.youtube.com/). Write html page design that you see fit for the existence of this page with the .writing of default texts for thisarrow_forwardWrite one CSS rule for the following task: Style an article element so that: its padding is 32px, its width, including padding, is one third of its parent container width, float it to the right side of the screen. Write one CSS rule for the following task: Style a footer element so that: it clears any prior floating elements, its width is 90% of its parent container width, its width is but no smaller than 768px, its width is no bigger than 1024px, centre the footer horizontally, regardless of the screen size. Write the HTML for: The footer of a page that includes an image with the following source https://learndigital.dev/DGL103/logo.png; The image must link to the homepage of the website when clicked on; The image must include descriptive text that screen readers can access; The image must be 160px tall and wide. Write a CSS style so that the footer (DON'T include more CSS than you need to): has a background colour. has a height of 300px. Use 2 different methods to move…arrow_forwardFind a popular CSS library on the web. In a short paragraph, explain how you would import this CSS library into your project and use it. Include the link to the library.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