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
In javascript
Create and design any web page of your choosing.
You must use the following methods to select elements on your webpage and dynamically change one of their style settings:
getElementsByTagName()
getElementsByClassName()
querySelector()
querySelectorAll()
You must use the following functions to demonstrate creating elements dynamically. These elements must be visible in the web browser.
createElement()
appendChild()
cloneNode() with no children cloned
cloneNode() with children cloned
insertBefore()
You must dynamically remove a node that you added to the original html file.
You must dynamically set at least three windows object properties:
You must add a button that when clicked calls the window object open function and opens a link to another page such as Amazon or CNN.
You must add another button that when clicked calls the window object open function using at least 5 of the options for the open function and opens a link to another page such as Amazon or CNN.…
HTML PROJECT
You may design any web page of your choosing.
You must use the following methods to select elements on your webpage and dynamically change one of their style settings:
getElementsByTagName()
getElementsByClassName()
querySelector()
querySelectorAll()
You must use the following functions to demonstrate creating elements dynamically. These elements must be visible in the web browser.
createElement()
appendChild()
cloneNode() with no children cloned
cloneNode() with children cloned
insertBefore()
You must dynamically remove a node that you added to the original html file.
You must dynamically set at least three windows object properties:
You must add a button that when clicked calls the window object open function and opens www.amazon.com
You must add another button that when clicked calls the window object open function using at least 5 of the options for the open function and opens www.amazon.com
You must add another button that when clicked calls the window…
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
- Create a layout for this webpage: It has to be easy to code but very aesthetic and images can be added or removed. page: Imagine your skincare routine as a superhero cape for your skin. By spending just a few minutes each day cleaning away dirt and oils, you're giving it the superpowers it needs to stay healthy and happy. But here's the secret ingredient: consistency. Like leveling up in a game, you gotta stick with it to see those awesome results. Let’s talk about morning skincare routine for teenagers who have OILY COMBINATION skin types: Wash your face with water First off, start by splashing your face with water. It's crucial to clear away the dirt and oil that gathers while you sleep. However, cleanser isn’t needed in the morning; lukewarm water works best. Toner Depending on their ingredients, toners can help hydrate the skin or remove leftover oil and dirt. The primary goal of using a toner is to enhance the effectiveness of skincare products used afterwards. For best results,…arrow_forwardUsing HTML, CSS, and JavaScript create a small site that will display a list of 5 small images that can be dragged and dropped into a larger box to display the image larger on the site. The list of images should not disappear after being dropped. In dropbox, the image being dropped should replace the previous image dropped to the box.arrow_forwardVisit the following webpage: https://archive.org/details/National_Geographic_Wallpapers This webpage hosts a collection of 506 images from National Geographic Magazine with most of these images previously being part of an international photography contest. Your task is to randomly choose 5 images and identify the objects within those images using Google’s vision API. Submit your iPython notebook code, and screenshots of output as shown below(no need to submit the images separately) You may need to reactivate your Google vision API account (or billing information for trial cycles) if you haven’t used it recently.arrow_forward
- Android Studio Java Create a detailed plan to implement the app and submit this file The plan should include at least App Feature Description (graph if needed) Tech Difficulty Solution to Each Difficulty in Detail (tutorial/image if needed) Version of Approach 2. Layout of a simplified version Create an android app and do layout only Climacons.ttf for weather condition icons Fixed weather values, no function As close as possible Ignore the page indicators (4 dots) at the bottom Layout should look properly on different screens Submit .xml file and screenshotarrow_forwardJavascriptarrow_forwardTitle: Transformers Beast Characters Webpage Creation Objective: The objective of this activity is to develop a web page dedicated to Transformer beast characters using HTML, CSS, and Flexbox layout. The activity aims to reinforce the understanding and practical implementation of various web development concepts, including flexbox, navigation, hover effects, flex-direction, nth-child, tables, transitions, and image display. Step 1: Set Up the Project Open your preferred text editor. Create a new folder for the activity and name it "TransformersBeastCharacters." Inside the project folder, create the following files: html (main page) html (character information page) html (image gallery page) css (CSS file) Step 2: Create the Basic Structure Open the index.html file in your text editor. Set up the basic structure of an HTML document by adding the HTML, head, and body tags. Inside the head tag, add a title for the…arrow_forward
- Title: Transformers Beast Characters Webpage Creation Objective: The objective of this activity is to develop a web page dedicated to Transformer beast characters using HTML, CSS, and Flexbox layout. The activity aims to reinforce the understanding and practical implementation of various web development concepts, including flexbox, navigation, hover effects, flex-direction, nth-child, tables, transitions, and image display. Step 1: Set Up the Project Open your preferred text editor. Create a new folder for the activity and name it "TransformersBeastCharacters." Inside the project folder, create the following files: html (main page) html (character information page) html (image gallery page) css (CSS file) Step 2: Create the Basic Structure Open the index.html file in your text editor. Set up the basic structure of an HTML document by adding the HTML, head, and body tags. Inside the head tag, add a title for the…arrow_forwardBy referring to the specifications given below, use HTML code and JavaScript to create the form as shown in Figure 6. WEBINAR REGISTRATION FORM Name : Contact Number : Email : Webinar Title : Select Webinar Date : dd/mm/yyyy Time : 10am - 12pm O 2pm - 4pm Number of participants : 1 Total Registration Fees(RM) : 0.00 O Add me to your mailing list for upcoming webinars. Submit Cancel Figure 6 Specifications: Create the form by assigning suitable id and name. Add a legend containing the text "WEBINAR REGISTRATION FORM" and use inline style to design the legend. Use to arrange the form elements. Create different form elements/controls with proper data for their attributes such as name, id, value and type. There is no need to create element for each form element. Set Webinar Title as a selection list that consists of 4 options: Select Webinar, Web for Beginners (RM100), Web for Intermediate (RM200) and Web for Advanced (RM300). Set Number of participants as a spinner control with range…arrow_forwardWeb developmentarrow_forward
- Geolocation and Ajax with JavaScript.Features:Your page should be able to consume the following data from the OpenWeather API and GoogleMaps API to display on the page.Your page should show:1. The current weather of a city based on its name typed by the user: Use input type=text to get the name of the city. API Doc – By city name: https://openweathermap.org/current#name2. The current weather of a place based on the user’s geographic coordinates : Use navigator.geolocation to get the user’s geolocation. API Doc – By geographic coordinates: https://openweathermap.org/current#geo3. The current user’s geolocation on a Google Maps with a Marker. Use navigator.geolocation to get the user’s geolocation. API Doc: https://developers.google.com/maps/documentation/javascript/overviewUse good web design practices to enhance visually your html page Note:- You are free to use jQuery anywhere if you like.- You need to sign up to OpenWeather to get a free API key.o Refer to…arrow_forwardHands-On Project 1-3In this project, you will explore how to write text to a specific element in your web page in response to theonclick event handler. To complete the exercise, you will apply the following JavaScript expression:document.getElementById('id').innerHTML = 'text';where id is the value of the id attribute for the page element and text is the text of the content to be writteninto the element. You will use this expression to enhance a web form by displaying the message “Thank you foryour order” when the user clicks the Submit button. Figure 1-25 shows the completed web page.Do the following:1. Use your code editor to open project01-03_txt.html from the HandsOnProject_01 folder. Enter your name and the date in the comment section of the document and save it as project01-03.html.2. Scroll down to the bottom of the file and locate the input element for the Submit button.3. Add an onclick event handler to the <input> tag that changes the innerHTML value of the page element…arrow_forwardCreate a web page as shown below. Which includes: Background image Navigation bar & table (Service 1, Service 2 etc.) Each Service should display different text-color and background-color when you mouse over it. (Hint: use Hover property on services)arrow_forward
arrow_back_ios
SEE MORE QUESTIONS
arrow_forward_ios
Recommended textbooks for you
Programming with Microsoft Visual Basic 2017Computer ScienceISBN:9781337102124Author:Diane ZakPublisher:Cengage Learning
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
Programming with Microsoft Visual Basic 2017
Computer Science
ISBN:9781337102124
Author:Diane Zak
Publisher:Cengage Learning
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