HTML Coding exam

HTML Coding course assignment

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

  1. Create an XHTML file name PowerProjectKLE500.htm
  2. 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.
  3. Include or demonstrate at least one example of each of the following in the document
  4. Different colors of text boxes and backgrounds with appropriate contrast
  5. Two different styles of text
  6. Box with one of the following attributes: Border image, Shadow, Rounded corners
  7. Table with appropriate cell margins and spacing
  8. Bulleted list with one or more point styles from pages 333-334 of book (HTML and CSS by Jon Duckett)
  9. Form with all the following attributes: Text Input, Password, Text area, Select box, Radio buttons, Checkboxes
  10. Demonstrate your understanding of creating a list, table, or form.
  11. Use proper XHTML and CSS syntax at all times
  12. Write your code and comments so that it will be easy to understand and read
  13. After completing the page, validate your code using the XHTML validator at http://validator.w3.org
  14. Save your XHTML file and then view the resulting page in a browser
  15. 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:

 

  • Text input (sized appropriately)
  • Password
  • Text area
  • Select box
  • Radio buttons
  • Checkboxes
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.

  1. Overview and features of the KLE550 series of tools
  2. Image files and logo displaying the logo for the new tool series
  3. 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>
&nbsp;
&nbsp;
</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>
&nbsp;
&nbsp;
&nbsp;
&nbsp;
<div>
<p><strong>&reg;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:

Html coding exam solution

3 thoughts on “HTML Coding course assignment”

  1. 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

  2. Pingback: PennFoster HTML Course assignment - Xamnation

  3. Pingback: PennFoster HTML Coding assignment - Xamnation

Leave a Comment

Your email address will not be published.