This is solved assignment of Diploma High School. If you are looking for online tutoring help in HTML Coding, send a mail to info@xamnation.com for more help
HTML Coding course assignment requirement
- Create an XHTML file name PowerProjectKLE500.htm
- In the head element, include the appropriate page title along with a comment that describes the purpose and content of the page, your name, and the date.
- Include or demonstrate at least one example of each of the following in the document
- Different colors of text boxes and backgrounds with appropriate contrast
- Two different styles of text
- Box with one of the following attributes: Border image, Shadow, Rounded corners
- Table with appropriate cell margins and spacing
- Bulleted list with one or more point styles from pages 333-334 of book (HTML and CSS by Jon Duckett)
- Form with all the following attributes: Text Input, Password, Text area, Select box, Radio buttons, Checkboxes
- Demonstrate your understanding of creating a list, table, or form.
- Use proper XHTML and CSS syntax at all times
- Write your code and comments so that it will be easy to understand and read
- After completing the page, validate your code using the XHTML validator at http://validator.w3.org
- Save your XHTML file and then view the resulting page in a browser
- Submit your completed project
HTML Course grading pattern
| Criteria | Possible Points |
| Appropriate head element information | 10 |
| Box and background color variation | 10 |
| Two text style | 10 |
| Box designed using one of the following attributes: border image, shadow or rounded corners | 10 |
| Appropriate table margins and spacing | 10 |
| Point style for bullets | 10 |
| Form with all the following attibutes:
|
10 |
| Proper use of XHTML and CSS coding | 10 |
| Easy to understand code and comments | 10 |
| Validated code from XHTML code | 10 |
| Total | 100 |
PennFoster HTML Assignment description
The PowerProject tool company is one of the leaders in power tools for the average handyman and homeowner. The company recently hired you to develop a page on its website for its new line of cordless chainsaws, leaf blowers, pole saws, and lawnmowers. You must create a web page for this line of tools known as the KLE550 series that uses 45V lithium-ion batteries. Download the following files.
- Overview and features of the KLE550 series of tools
- Image files and logo displaying the logo for the new tool series
- jpg, an image of the PowerProject tool company logo
You can also supplement these files with any other resources you have. You’re responsible for the content and appearance of the page.
Html assignment solution
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--
About Page: This is main page for latest home gym model XJS500. XJS500 is a resistance based machine that allows user to adjust tension by selecting different tension band. This webpage covers all the key feature of this model
Author: Xamnation
-->
<meta name="description" content="This is main page for PowerProject KLE500"/>
<meta name="author" content="Xamnation"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<!-- Title of page -->
<title>Power Project</title>
<style type="text/css">
body {
background-color: linen;
font-family: "Times New Roman", Times, serif;
}
h1 {
color: maroon;
margin-left: 40px;
text-align:center;
font-family: Arial;
font-size: 32px
}
h2 {
color: maroon;
text-align:center;
font-family: Arial, Helvetica, sans-serif;
}
h3 {
color: maroon;
text-align:center;
}
.left {
float:left;width:58%;
background-color: #F8EB7D;
}
.right {
float:left;width:38%;
}
.left2 {
float:left;width:58%;
}
.rcorners2 {
border-radius: 5px;
border: 2px solid #73AD21;
padding: 5px;
height:400px;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 70%;
}
.center2 {
display: block;
margin-left: auto;
margin-right: auto;
}
table, th, td {
border: 1px solid black;
}
th, td {
padding: 15px;
}
table {
width: 100%;
}
table.middle {
margin-left: auto;
margin-right: auto;
}
th {
height: 50px;
text-align: center;
background-color: #4CAF50;
color: white;
}
td {
height: 50px;
vertical-align: center;
}
* {
box-sizing: border-box;
}
input[type=text],input[type=password], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}
label {
# padding: 12px 12px 12px 0;
display: inline-block;
}
input[type=submit] {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
}
input[type=submit]:hover {
background-color: #45a049;
}
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
.col-25 {
float: left;
width: 25%;
margin-top: 6px;
}
.col-75 {
float: left;
width: 75%;
margin-top: 6px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.col-25, .col-75, input[type=submit] {
width: 100%;
margin-top: 0;
}
}
</style>
</head>
<body>
<div>
<img src="PowerProject-logo.jpg" alt="logo" width="100px" />
<h1>PowerProject KLE550 Cordless Tool Series</h1>
</div>
<div class="rcorners2">
<div class="left">
<p>The PowerProject Tool company is known for its variety of corded and cordless power tools,
ranging anywhere from a standard power drills and circular saws to lawn and gardening tools.
The KLE550 series of tools adds a new line of tools to the company’s well-known reputation for
quality and affordable power tools.</p>
<p>The KLE550 series includes </p>
<ul>
<li>new 45V lithium ion-powered leaf blower </li>
<li>lawn mower </li>
<li>pole saw </li>
<li>hedge trimmer </li>
<li>weed eater </li>
<li>chainsaw </li>
<li>mulcher </li>
</ul>
</div>
<div class="right" style="padding-left:50px;">
<img class="center" src="Cordless-Leaf-Blowers.jpg" alt="chainsaw image" width="80%" />
</div>
<div class="left " style="height:120px">
<p> 45V lithium
ion batteries are new to the industry and could revolutionize the battery life and mobility of traditional
gas-powered and electric tools.</p>
<p>The KLE550-series tool, 45V lithium ion batteries currently work with the KLE550 series only. This means that
the batteries aren't interchangeable with PowerProject's standard line of battery-operated tools. Additional
battery packs and charging stations are available for purchase through the KLE550 series.</p>
</div>
<div class="right" style="padding-left:50px;" >
<img class="center" src="Cordless-Chainsaws.jpg" alt="leaf blower image" height="80%" />
</div>
</div>
<div>
<h2>Features</h2>
<img class="center2" src="Cordless-Pole-Saws.jpg" alt="polesaw" width="20%" />
<table class="middle" cellpadding="2">
<tr>
<td> 4–8 hours of battery life </td>
<td> Depending on the tool in the series, the 45V battery yields 4 to 8 hours of continuous
use. </td>
</tr>
<tr>
<td>Powerful motors </td>
<td> The motors in the KLE550 series are comparable to corded electric counterparts in the
company’s corded power tool series </td>
</tr>
<tr>
<td>Safety </td>
<td>All KLE550-series power tools come with a safety switch that prevents the tool from turning on
once the battery is installed. This feature saves battery life and protects the user. </td>
</tr>
<tr>
<td>Warranty </td>
<td>Each tool in the KLE550 series comes with a one-year warranty and an extended warranty option </td>
</tr>
</table>
</div>
<div>
<h3>Request a quote now</h3>
<div class="left2">
<form action="/action_page.php">
<div class="row">
<div class="col-25">
<label for="name">Name</label>
</div>
<div class="col-75">
<input type="text" id="name" name="name" />
</div>
</div>
<div class="row">
<div class="col-25">
<label for="email">Email</label>
</div>
<div class="col-75">
<input type="text" id="email" name="email" />
</div>
</div>
<div class="row">
<div class="col-25">
<label for="password">Password</label>
</div>
<div class="col-75">
<input type="password" id="password" name="password" />
</div>
</div>
<div class="row">
<div class="col-25">
<label for="country">Country</label>
</div>
<div class="col-75">
<select id="country" name="country">
<option value="australia">Australia</option>
<option value="canada">Canada</option>
<option value="usa">USA</option>
</select>
</div>
</div>
<div class="row">
<div class="col-25">
<label id="machine" for="machine">Interested in</label>
</div>
<div class="col-75">
<input type="checkbox" id="machine1" name="machine1" value="chainsaws" />
<label for="machine1">Chainsaws</label>
<input type="checkbox" id="machine2" name="machine2" value="lawnmowers" />
<label for="machine2">Lawnmowers</label>
<input type="checkbox" id="machine3" name="machine3" value="leaf-blowers" />
<label for="machine3">Leaf-Blowers</label>
<input type="checkbox" id="machine4" name="machine4" value="pole-saws" />
<label for="machine4">Pole-Saws</label>
</div>
</div>
<div class="row">
<div class="col-25">
<label id="quantity" for="quantity">Quantity Interested in</label>
</div>
<div class="col-75">
<input type="radio" id="small" name="quantity" value="small" />
<label for="small">1-100</label><br/>
<input type="radio" id="medium" name="quantity" value="medium" />
<label for="medium">101-1000</label><br/>
<input type="radio" id="large" name="quantity" value="large" />
<label for="large">1000+</label>
</div>
</div>
<div class="row">
<div class="col-25">
<label for="message">Message</label>
</div>
<div class="col-75">
<textarea rows="4" cols="50" id="message" name="message" style="height:50px"></textarea>
</div>
</div>
<div class="row">
<input type="submit" value="Submit" />
</div>
</form>
</div>
<div class="right" style="padding-left:50px;">
<img width="100%" src="Cordless-Lawnmowers.jpg" alt="lawn mover image" />
</div>
</div>
<div>
<p><strong>®PowerProject Tools </strong></p>
<p>774 W. Dakota Ave.</p>
<p>Boise, ID 83702</p>
<p>(888) 453-3895</p>
</div>
</body>
</html>End Note
We, at Xamnation, are helping students in their assignment and project work for IT courses. Students can get online tutoring, personal mentor-ship and project help from us.
Email us your assignment to info@xamnation.com and we will gladly help you.
See Also:
01] Graded Project: Basic Elements of a Web Page
Hide Assignment Information
Instructions
Graded Project: Basic Elements of a Web Page
You need to include the HTML file, the CSS file, and all image files in the appropriate directories.
Each project is individually graded by your instructor and therefore takes up to a few weeks to grade.
Be sure that each of your three files contains the following information:
Your name
Your student ID number
The lesson name
Your email address
Be sure to keep a backup copy of any files you submit to the school.
Introduction
An image of the logo for Body Fit for Life
Body Fit for Life Logo
In this graded assignment, you’ll incorporate all the aspects of HTML coding you’ve learned in Lesson 1. To help you with this assignment, review the following examples and pages from your text:
Structure example: Pages 21–22
Text example: Pages 57–58
Lists example: Pages 69–70
Links example: Pages 89–90
Images example: Pages 121–122
Tables example: Pages 139–140
Instructions
An image of the XJS500 home gym
The XJS500
Body Fit for Life is one of the leaders in home gym equipment. The company recently hired you to help develop its website. You must first create a web page for its latest model home gym, XJS500, an upgrade to its previous model with new features. The XJS500 is a resistance-based machine that allows users to adjust tension by selecting different resistance bands on the machine. Download the following files:
Overview and features of the XJS500
Image file and logo.jpg displaying the company logo
Body_Fit_For_Life.jpg, an image of the XJS500
You can also supplement these files with any other resources you have. You’re responsible for the content and appearance of the page.
To complete this task:
Create an XHTML file named BodyFitForLife.htm.
In the head element, include the appropriate page title, along with a comment that describes the purpose of the page, your name, and the date.
Include at least one example of each of the following in the document:
Heading
Paragraph
Ordered or unordered list
Character formatting element
Inline image
Horizontal line
Special character
Block level element that isn’t a heading, paragraph, list, or horizontal line
Demonstrate your understanding of inline styles by including at least two different examples of an inline style.
Use proper XHTML syntax at all times. Close all two-sided tags. Properly nest all tags. Use lowercase element and attribute names. Enclose attribute values in quotes.
Include alternate text for nongraphical browsers with inline images.
Write your code so that it will be easy to read and understand.
(You may download and use two image files from the internet, citing where you downloaded them from, and create a list of three to five features at your discretion.)
Save your XHTML file and then view the resulting web page in a browser.
Submit your completed project.
Summary
Your file must have an appropriate layout to make it easy for the viewer to locate the desired product information. When creating this file, refer to Chapters 1–6 of your textbook for examples.
Grading Criteria
The following rubric will be used to grade your project:
Criteria Possible Points
Appropriate heading 10
Paragraph 10
List (either ordered or unordered) 10
Character formatting element 10
Inline image: Two different examples 10
Horizontal line 10
Special character 10
Block-level element that isn’t a heading, paragraph, list, or horizontal line 10
Use of proper XHTML syntax 10
Easy to read and understand code 10
Total 100
Pingback: PennFoster HTML Course assignment - Xamnation
Pingback: PennFoster HTML Coding assignment - Xamnation